阅读 186

Taro 多端开发(上)

前端多端统一开发背景和趋势


Taro 是什么

Taro 是由凹凸实验室打造的一套遵循 React 语法规范的多端统一开发框架。

Taro 是为什么

为了只需要开发一套代码便能够在多个端上运行。为了减少学习成本,提高开发效率。

Taro 的语法标准

Taro采用react作为它的语法标准

  • React 是一个非常流行的框架,也有广大的受众,使用它也能降低小程序开发的学习成本;
  • 小程序的数据驱动模板更新的思想与实现机制,与 React 类似;
  • React 采用 JSX 作为自身模板,JSX相比字符串模板来说更自由,更自然,更具表现力,不需要依赖字符串模板的各种语法糖,也能完成复杂的处理
  • React 本身有跨端的实现方案 - React Native,并且非常成熟,社区活跃,对于Taro来说有更多的多端开发可能性。

Taro 多端转换的原理

多端转换

小程序和web端的差异

多端差异主要表现在组件标准和API标准以及运行机制上

组件差异

API差异

如何磨平小程序和web端的差异

Taro 采用了定制一套运行时标准来抹平不同平台之间的差异。 标准包括标准运行时框架、标准基础组件库、标准端能力 API,其中运行时框架和 API 对应 @taro/taro,组件库对应 @tarojs/components。

Taro标准

Taro的这一套标准的定制上 是以微信小程序的组件库和 API 来作为 Taro 的运行时标准,因为微信小程序的文档非常完善,而且组件与 API 也是非常丰富,同时最重要的是,百度小程序以及支付宝小程序都是遵循的微信小程序的标准。

多端统一开发框架 Taro 的使用(微信和H5为例)


搭建好的Taro 已经支持微信/百度/支付宝小程序、H5 以及 ReactNative 等端的代码转换,要注意的是针对不同端的启动以及预览、打包方式是不一样的。

安装

略略略...

项目配置

各类小程序平台均有自己的项目配置文件

  • 微信小程序, project.config.json(默认创建)
  • 百度智能小程序,project.swan.json
  • 头条小程序,project.config.json,文档暂无,大部分字段与微信小程序一致
  • 支付宝小程序,暂无发现
  • 快应用,manifest.json

微信小程序编译预览及打包

# npm script
$ npm run dev:weapp # npm run build:weapp -- --watch
$ npm run build:weapp
复制代码

H5 编译预览及打包

# npm script
$ npm run dev:h5
# 仅限全局安装
$ taro build --type h5 --watch
# npx 用户也可以使用
$ npx taro build --type h5 --watch
复制代码

Redux

在 Taro 中可以自由地使用 React 生态中非常流行的数据流管理工具 Redux 来解决复杂项目的数据管理问题。而为了更方便地使用 Redux ,Taro 提供了与 react-redux API 几乎一致的包 @tarojs/redux 来让开发人员获得更加良好的开发体验。

redux的核心思想就是

  • 使用普通对象来描述应用的 state
const INITIAL_STATE = {
    num: 0
}
复制代码
  • 要想更新 state 中的数据,发起一个 action action 就是一个普通 JavaScript 对象,用来描述发生了什么
{ type: 'ADD' }
{ type: 'MINUS' }
复制代码
  • 通过reducer,传入action 和 state,更新state中的数据
function todo (state = INITIAL_STATE, action) {
  switch (action.type) {
    case ADD:
      return {
        ...state,
        num: state.num + 1
      }
    case MINUS:
      return {
        ...state,
        num: state.num - 1
      }
    default:
      return state
  }
}

export default combineReducers({
    todo
})
复制代码
  • 根据已有的reducer来创建store,Redux 应用只有一个单一的 store,当需要拆分数据处理逻辑时,你应该使用 reducer 组合 而不是创建多个 store。
import { createStore, applyMiddleware } from 'redux'
import thunkMiddleware from 'redux-thunk'
import { createLogger } from 'redux-logger'
import rootReducer from '../reducers/index'

const middlewares = [
  thunkMiddleware,
  createLogger()
]

export default function configStore () {
  const store = createStore(rootReducer, applyMiddleware(...middlewares))
  return store
}
复制代码
  • 最后,创建容器组件把展示组件和redux关联起来,使用React Redux 库的 connect() 方法来生成
@connect(({ todo }) => ({
  todo
}), (dispatch) => ({
  add () {
    dispatch(add())
  },
  dec () {
    dispatch(minus())
  },
  asyncAdd () {
    dispatch(asyncAdd())
  }
}))
复制代码
关注下面的标签,发现更多相似文章
评论