一、什么是Taro？
1、Taro 是一套遵循 React 语法规范的 多端开发 解决方案。
2、使用 Taro，我们可以只书写一套代码，再通过 Taro 的编译工具，将源代码分别编译出可以在不同端（微信/百度/支付宝/字节跳动/QQ小程序、快应用、H5、React-Native 等）运行的代码。
3、Taro 遵循 React 语法规范，它采用与 React 一致的组件化思想，组件生命周期与 React 保持一致，同时支持使用 JSX 语法，让代码具有更丰富的表现力，使用 Taro 进行开发可以获得和 React 一致的开发体验。
二、创建 Taro 项目
1、taro init my-taro my-taro是项目名称。
2、输入项目介绍：随便写即可，他会提现在package.json的description属性。
3、选择是否使用TypeScript个人觉得根据喜好和项目来定。
4、选择css预处理器，根据个人喜好，我选择的是less。
5、选择模板，我选择的是默认。
6、自动执行，等待创建成功指令。
创建taro项目
创建成功
创建成功
三、引入Dva
1、安装配置文件
安装dva
npm install --save dva-core dva-loading
dva-core：封装了redux 和 redux-saga的一个插件
dva-loading：管理页面的loading状态
安装@tarojs/redux
npm install --save redux @tarojs/redux @tarojs/redux-h5 redux-thunk redux-logger
2、配置项目文件夹
在/src目录下根据自己的实际需求进行一下配置：
assets: 存放静态资源
components:存放共用组件
models: 项目dva插件model函数的引用
utils: 项目里封装的一些插件,或者公用方法之类
四、Dva配置
在./src/utils下创建dva.js，配置dva。
import {create} from "dva-core";
import {createLogger} from "redux-logger";
import createLoading from "dva-loading";
let app
let store
let dispatch
let registered
function createApp(opt) {
// redux 的日志
opt.onAction = [createLogger()]
app = create(opt)
app.use(createLoading({}))
if (!registered) {
opt.models.forEach(model => app.model(model));
}
registered = true;
app.start()
store = app._store;
app.getStore = () => store;
app.use({
onError(err) {
console.log(err);
}
})
dispatch = store.dispatch;
app.dispatch = dispatch;
return app;
}
export default {
createApp,
getDispatch() {
return app.dispatch
}
}
配置文件生成脚本（可以跳过也能使项目起飞）
1、在根目录下创建scripts文件夹，添加./scripts/template.js
2、在根目录的package.json的scripts里加上对应的命令
3、执行
五、让dva跑起来
1、先在src目录下创建models文件夹，集合项目里的model关系。
import index from './index';// 生成的models文件
export default [
index
];
2、修改文件 app.jsx（非常非常重要）
import Taro, {Component} from '@tarojs/taro'
import Index from './pages/index'
import './app.less'
/* 因为dva配置 */
import {Provider} from "@tarojs/redux"
import dva from './utils/dva'
import models from './models/index'
// 如果需要在 h5 环境中开启 React Devtools
// 取消以下注释：
// if (process.env.NODE_ENV !== 'production' && process.env.TARO_ENV === 'h5') {
// require('nerv-devtools')
// }
const dvaApp = dva.createApp({
initialState: {},
models: models
})
const store = dvaApp.getStore()
class App extends Component {
config = {
pages: [
'pages/index/index'
],
window: {
backgroundTextStyle: 'light',
navigationBarBackgroundColor: '#fff',
navigationBarTitleText: 'WeChat',
navigationBarTextStyle: 'black'
}
}
componentDidMount() {
}
componentDidShow() {
}
componentDidHide() {
}
componentDidCatchError() {
}
// 在 App 类中的 render() 函数没有实际作用
// 请勿修改此函数
render() {
return (
<Provider store={store}>
<Index/>
</Provider>
)
}
}
Taro.render(<App/>, document.getElementById('app'))
关于 dva的使用参考dva官网。
六、启动项目（起飞）
这里启动的是h5，其他启动参考Taro官网。
npm run dev:h5
七、关于路由
在Taro 中，路由功能是默认自带的，不需要开发者进行额外的路由配置。
我们只需要在入口文件的config 配置中指定好pages，然后就可以在代码中通过 Taro 提供的 API 来跳转到目的页面
// 跳转到目的页面，打开新页面
Taro.navigateTo({
url: '/pages/page/path/name'
})
// 跳转到目的页面，在当前页面打开
Taro.redirectTo({
url: '/pages/page/path/name'
})
// 传入参数 id=2&type=test
Taro.navigateTo({
url: '/pages/page/path/name?id=2&type=test'
})
我们可以通过在所有跳转的 url 后面添加查询字符串参数进行跳转传参，例如
// 传入参数 id=2&type=test
Taro.navigateTo({
url: '/pages/page/path/name?id=2&type=test'
})
这样的话，在跳转成功的目标页的生命周期方法里就能通过 this.$router.params 获取到传入的参数，例如上述跳转，在目标页的 componentWillMount 生命周期里获取入参
class C extends Taro.Component {
componentWillMount () {
console.log(this.$router.params) // 输出 { id: 2, type: 'test' }
}
}
八、结语
只是本人启动项目的步骤记录。
网友评论