Taro3.2.8+Dva.js+taroui搭建微信小程序

前期准备

1. 微信开发者工具
2. 安装Node

安装 Taro

使用 npm 或者 yarn 全局安装 &＃64;tarojs/cli

# 使用 npm 安装 CLI
$ npm install -g &＃64;tarojs/cli# OR 使用 yarn 安装 CLI
$ yarn global add &＃64;tarojs/cli# OR 安装了 cnpm&＃xff0c;使用 cnpm 安装 CLI
$ cnpm install -g &＃64;tarojs/cli


查看 Taro 全部版本信息
可以使用 npm info 查看 Taro 版本信息&＃xff0c;在这里我们可以看到当前最新版本

npm info &＃64;tarojs/cli


项目初始化

使用命令创建模板项目&＃xff1a;

$ taro init myApp


npm 5.2&＃43; 也可在不全局安装的情况下使用 npx 创建模板项目&＃xff1a;

$ npx &＃64;tarojs/cli init myApp


使用命令进行编译&＃xff0c;编译好了之后&＃xff0c;下载并打开微信开发者工具&＃xff0c;然后选择项目根目录预览。

npm run dev:weapp


Dva 配置

安装 react-redux &＃xff0c;大部分文档说安装tarojs/redux&＃xff0c;但是这个包在taro3.x已经消失了&＃xff0c;所以这里我们安装 react-redux

cnpm i --save react-redux


安装dva-core和dva-loading
dva-core 封装了redux和redux-sage的一个插件
dva-loading 管理页面的loading状态

cnpm i --save dva-core dva-loading


dva需要挂载所有的models&＃xff0c;所以在src目录创建models目录&＃xff0c;并在models目录下的index.js返回项目中创建的所有model

// src/models/index.js
// dva需要挂载所有的models
import users from &＃39;../pages/index/model&＃39;export default [users, // users为项目中创建的model
];


model 的结构如下&＃xff1a;

// src/pages/index/modelexport default {namespace: &＃39;users&＃39;,state: {title: &＃39;Hello World&＃39;},effects: {},reducers: {save(state, { payload }) {return { ...state, ...payload };},},
};


在src目录下创建utils目录&＃xff0c;并在utils目录里创建dva.js文件

// src/dva.js
import { create } from &＃39;dva-core&＃39;;
import createLoading from &＃39;dva-loading&＃39;;let app;
let store;
let dispatch;function createApp(opt){// 创建应用&＃xff0c;返回dva实例app &＃61; create(opt);// 配置插件 createLoading是解决异步加载的过渡问题app.use(createLoading({}));if(!global.registered){// 注册modelopt.models.forEach(model &＃61;> app.model(model));}global.registered &＃61; true;// 启动应用app.start();store &＃61; app._store;app.getStore &＃61; () &＃61;> store;dispatch &＃61; store.dispatch;app.dispatch &＃61; dispatch;return app;
}
export default {createApp,getDispatch: () &＃61;> {return app.dispatch;}
}


在入口文件 app.js 里使用 dva.js 返回的方法创建一个 app 获取 store &＃xff0c;并将 store 挂载到Provider 容器里面

// src/app.jsimport { Component } from &＃39;react&＃39;
import dva from &＃39;./utils/dva&＃39;
import { Provider } from &＃39;react-redux&＃39;
import models from &＃39;./models&＃39;
import &＃39;./app.less&＃39;const dvaApp &＃61; dva.createApp({initialState: {},models
})
const store &＃61; dvaApp.getStore();
class App extends Component {componentDidMount () {}componentDidShow () {}componentDidHide () {}componentDidCatchError () {}// this.props.children 是将要会渲染的页面render () {return <Provider store&＃61;{store}>{this.props.children}</Provider>}
}export default App


以上&＃xff0c;完成 dva 配置

验证配置的 dva 是否可用&＃xff0c;在 pages/index/index.jsx 使用 connect 连接 model和组件&＃xff0c;并打印this.props

// pages/index/index.jsximport { Component } from &＃39;react&＃39;
import { View, Text } from &＃39;&＃64;tarojs/components&＃39;
import { connect } from &＃39;react-redux&＃39;
import &＃39;./index.less&＃39;&＃64;connect(({users})&＃61;>({users
}))
export default class Index extends Component {componentWillMount () { }componentDidMount () { }componentWillUnmount () { }componentDidShow () { }componentDidHide () { }render () {console.log(this.props);return (<View className&＃61;&＃39;index&＃39;><Text>Hello ChenMengjie!</Text></View>)}
}


this.props里面若存在model里面的state&＃xff0c;则连接成功&＃xff01;

引入taro-ui

安装 taro-ui

cnpm i --save taro-ui&＃64;3.0.0-alpha.3


引入组件样式的三种方式:

• 全局引入样式(JS中)&＃xff0c;在入口文件引入所有样式&＃xff1a;

import &＃39;taro-ui/dist/style/index.scss&＃39;


• 全局引入样式(CSS中)

&＃64;import "~taro-ui/dist/style/index.scss";


• 按需引入&＃xff0c;在页面样式或全局样式中 import 需要的组件样式

&＃64;import "~taro-ui/dist/style/components/button.scss";


// src/app.jsimport { Component } from &＃39;react&＃39;
import { Provider } from &＃39;react-redux&＃39;
import &＃39;taro-ui/dist/style/index.scss&＃39;
import dva from &＃39;./utils/dva&＃39;
import models from &＃39;./models&＃39;
import &＃39;./app.less&＃39;const dvaApp &＃61; dva.createApp({initialState: {},models
})
const store &＃61; dvaApp.getStore();
class App extends Component {componentDidMount () {}componentDidShow () {}componentDidHide () {}componentDidCatchError () {}// this.props.children 是将要会渲染的页面render () {return <Provider store&＃61;{store}>{this.props.children}</Provider>}
}export default App

// src/pages/index/index.jsximport { Component } from &＃39;react&＃39;
import { View, Text } from &＃39;&＃64;tarojs/components&＃39;
import { AtTabBar } from &＃39;taro-ui&＃39;
import { connect } from &＃39;react-redux&＃39;
import &＃39;./index.less&＃39;&＃64;connect(({users})&＃61;>({users
}))
class Index extends Component {componentWillMount () { }componentDidMount () { }componentWillUnmount () { }componentDidShow () { }componentDidHide () { }render () {console.log(this.props);return (<View className&＃61;&＃39;index&＃39;><Text>Hello world!</Text><AtTabBar fixedtabList&＃61;{[{title: &＃39;首页&＃39;, iconType: &＃39;home&＃39;},{title: &＃39;我的&＃39;, iconType: &＃39;user&＃39;}]}/></View>)}
}
export default Index;


参考文档

Taro 官网