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

1. 微信開發(fā)者工具
2. 安裝Node

使用 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


使用命令創(chuàng)建模板項目&＃xff1a;

$ taro init myApp


npm 5.2&＃43; 也可在不全局安裝的情況下使用 npx 創(chuàng)建模板項目&＃xff1a;

$ npx &＃64;tarojs/cli init myApp


使用命令進行編譯&＃xff0c;編譯好了之后&＃xff0c;下載并打開微信開發(fā)者工具&＃xff0c;然后選擇項目根目錄預(yù)覽。愛掏網(wǎng) - it200.com

npm run dev:weapp


安裝 react-redux &＃xff0c;大部分文檔說安裝tarojs/redux&＃xff0c;但是這個包在taro3.x已經(jīng)消失了&＃xff0c;所以這里我們安裝 react-redux

cnpm i --save react-redux


安裝dva-core和dva-loading
dva-core 封裝了redux和redux-sage的一個插件
dva-loading 管理頁面的loading狀態(tài)

cnpm i --save dva-core dva-loading


dva需要掛載所有的models&＃xff0c;所以在src目錄創(chuàng)建models目錄&＃xff0c;并在models目錄下的index.js返回項目中創(chuàng)建的所有model

// src/models/index.js
// dva需要掛載所有的models
import users from &＃39;../pages/index/model&＃39;export default [users, // users為項目中創(chuàng)建的model
];


model 的結(jié)構(gòu)如下&＃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目錄下創(chuàng)建utils目錄&＃xff0c;并在utils目錄里創(chuàng)建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){// 創(chuàng)建應(yīng)用&＃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;// 啟動應(yīng)用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 返回的方法創(chuàng)建一個 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

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 官網(wǎng)