使用 npm
或者 yarn
全局安装 @tarojs/cli
# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli
# OR 使用 yarn 安装 CLI
$ yarn global add @tarojs/cli
# OR 安装了 cnpm,使用 cnpm 安装 CLI
$ cnpm install -g @tarojs/cli
题主这里使用 npm install -g @tarojs/cli
进行taro
的安装
查看 Taro
全部版本信息
可以使用 npm info
查看 Taro
版本信息,在这里我们可以看到当前最新版本
npm info @tarojs/cli
使用命令创建模板项目:
$ taro init taro_demo_practise
npm 5.2+
也可在不全局安装的情况下使用 npx
创建模板项目:
$ npx @tarojs/cli init taro_demo_practise
创建成功之后,我们可以选择微信开发者工具打开项目,执行npm install
安装相关依赖包,再执行npm run dev:weapp
即可运行项目,运行效果如下所示:
npm run dev:weapp
接下来就是我们的Dva
的配置了。
安装 react-redux
,大部分文档说安装tarojs/redux
,但是这个包在taro3.x
已经消失了,所以这里我们安装 react-redux
npm i --save react-redux
安装dva-core
和dva-loading
,dva-core
封装了redux
和redux-sage
的一个插件,dva-loading
用来管理页面的loading
状态
npm i --save dva-core dva-loading
dva需要挂载所有的models
,所以在src目录创建models
目录,并在models
目录下的index.js
返回项目中创建的所有model
// src/models/index.js
// dva需要挂载所有的models
import users from '../pages/index/models/indexModel'
export default [
users, // user为项目中创建的model
];
models
的结构如下:
// src/pages/index/models/indexModel.js
export default {
namespace: 'users',
state: {
title: '小辰的Taro_demo'
},
effects: {},
reducers: {
save(state, {payload}) {
return {...state, ...payload};
},
},
};
在src目录下创建utils
目录,并在utils目录里创建dva.js文件
/**
* path:src/utils/dva.js
*/
import {create} from 'dva-core';
import createLoading from 'dva-loading';
let app;
let store;
let dispatch;
function createApp(opt) {
// 创建应用,返回dva实例
app = create(opt);
// 配置插件 createLoading是解决异步加载的过渡问题
app.use(createLoading({}));
if (!global.registered) {
// 注册model
opt.models.forEach(model => app.model(model));
}
global.registered = true;
// 启动应用
app.start();
store = app._store;
app.getStore = () => store;
dispatch = store.dispatch;
app.dispatch = dispatch;
return app;
}
export default {
createApp,
getDispatch: () => {
return app.dispatch;
}
}
在入口文件 app.js
里使用 dva.js
返回的方法创建一个 app
获取 store
,并将 store
挂载到Provider
容器里面
/**
* path:src/app.js
*/
import {Component} from 'react'
import {Provider} from "react-redux";
import './app.less'
import dva from './utils/dva';
import models from "./models";
const myDvaApp = dva.createApp({
initialState: {},
models
})
const store = myDvaApp.getStore();
class App extends Component {
componentDidMount() {
}
componentDidShow() {
}
componentDidHide() {
}
componentDidCatchError() {
}
// this.props.children 是将要会渲染的页面
render() {
// return this.props.children
return <Provider store={store}>
{this.props.children}
</Provider>
}
}
export default App
以上,完成 dva
配置
这时,保存,我们可能遇到一个问题:
解决办法:再安装一次redux
就好了。
npm install redux --save
验证配置的 dva
是否可用,在 pages/index/index.jsx
使用 connect 连接 model
和组件,并打印this.props
import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { connect } from 'react-redux';
import './index.less';
@connect(({ users }) => ({
users
}))
class Index extends Component {
componentWillMount() { }
componentDidMount() { }
componentWillUnmount() { }
componentDidShow() { }
componentDidHide() { }
render() {
console.log(this.props);
return (
<View className='index'>
<Text>小辰的Taro Demo</Text>
</View>
)
}
}
export default Index;
this.props
里面存在model
里面的state
,连接成功!
安装 taro-ui
npm i --save taro-ui@3.0.0-alpha.3
引入组件样式的三种方式:
import 'taro-ui/dist/style/index.scss'
@import "~taro-ui/dist/style/index.scss";
import
需要的组件样式@import "~taro-ui/dist/style/components/button.scss";
// src/app.js
import { Component } from 'react'
import { Provider } from 'react-redux'
import 'taro-ui/dist/style/index.scss'
import dva from './utils/dva'
import models from './models'
import './app.less'
const dvaApp = dva.createApp({
initialState: {},
models
})
const store = dvaApp.getStore();
class App extends Component {
componentDidMount () {}
componentDidShow () {}
componentDidHide () {}
componentDidCatchError () {}
// this.props.children 是将要会渲染的页面
render () {
return <Provider store={store}>{this.props.children}</Provider>
}
}
export default App
修改src/pages/index/index.jsx
文件内容,测试taro-ui
是否引入成功
// src/pages/index/index.jsx
import { Component } from 'react'
import { View, Text } from '@tarojs/components'
import { AtTabBar } from 'taro-ui'
import { connect } from 'react-redux'
import './index.less'
@connect(({users})=>({
users
}))
class Index extends Component {
componentWillMount () { }
componentDidMount () { }
componentWillUnmount () { }
componentDidShow () { }
componentDidHide () { }
render () {
console.log(this.props);
return (
<View className='index'>
<Text>Hello world!</Text>
<AtTabBar
fixed
tabList={[
{title: '首页', iconType: 'home'},
{title: '我的', iconType: 'user'}
]}
/>
</View>
)
}
}
export default Index;
mapStateToProps() in Connect(Index) must return a plain object. Instead received undefined.
解决方法
@connect(({ users }) => ({
users
}))
connect
我们定义的model
时,外面需要包裹一层()
,此处大意了,没发现,于是得到这样的bug。
Taro 官网
源代码gitee地址
项目总结地址