迅速上手：使用taro構建微信小程序基礎教程

前言

因爲微信小程序在開發上不能安裝npm依賴，和開發流程上也飽受詬病；Taro 是由京東·凹凸實驗室(aotu.io)傾力打造的 多端開發解決方案，它的api基於react，在本篇文章中主要介紹了使用taro搭建微信小程序的一些步驟和一個簡單demo的實現。

安裝

先全局安裝@tarojs/cli

$ npm install -g @tarojs/cli $ yarn global add @tarojs/cli

以後咱們初始化一個名爲myApp的項目:

$ taro init myApp

而後輸入你的配置：

以後等待全部依賴安裝完畢。

開發

在命令行執行

$ npm run dev:weapp

taro將會進入微信小程序編譯預覽模式。咱們打開微信開發者工具，將項目導入，會在預覽窗口中看到hello world。這時咱們就能夠進行開發啦~~

1.生命週期函數

生命週期方法	做用	說明
componentWillMount	程序被載入	對應微信小程序onLaunch
componentDidMount	程序被載入	對應微信小程序onLaunch，在componentWillMount以後執行
componentDidShow	程序展現出來	對應微信小程序onShow
componentDidHide	程序被隱藏	對應微信小程序onHide

不過固然也包含componentWillUnmout和componentWillReceiveProps等react原始生命週期函數，用來編寫自定義組件。

2.路由

在 Taro 中，路由功能是默認自帶的，不須要開發者進行額外的路由配置。

// 跳轉到目的頁面，打開新頁面 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' })

咱們可使用this.$router.params來獲取路由上的參數。

3.組件

Taro 以 微信小程序組件庫 爲標準，結合 jsx 語法規範，定製了一套本身的組件庫規範。這部分能夠自行去看文檔。*值得注意的是，小程序中的寫法`bind這種事件都要改爲以on`開頭。**

寫個demo

如今使用taro構建一個很簡單的demo；須要實現簡單的組件調用，路由跳轉傳參等功能。

1.主頁

一個Swiper，一個列表組件：

// index.js import Taro, { Component } from '@tarojs/taro' import { View, Swiper,SwiperItem, Image } from '@tarojs/components' import ListItem from '../../components/ListItem' import './index.less' import img0 from './img/img0.jpg' import img1 from './img/img1.jpg' import img2 from './img/img2.jpg' export default class Index extends Component { config = { navigationBarTitleText: '首頁' } skipToDetail(){ /* */ } render() { return ( <View className='index'> <Swiper indicatorDots autoplay> {[img0,img1,img2].map(img=>(<SwiperItem key={img}><Image src={img} /></SwiperItem>))} </Swiper> {listSet.map(item=>(<ListItem onClick={this.skipToDetail.bind(this)} description={item.description} title={item.title} key={item.title} />))} </View> ) } } const listSet=[ {title:'標題一',description:'描述一'}, {title:'標題二',description:'描述二'}, {title:'標題三',description:'描述三'}, ]

列表組件，注意這裏有個坑，就是不能直接調用函數props，會報一個警告，說是沒有找到onClick handler。查閱官方文檔後，在issues 215中找到了答案，官方說是會在之後的版本中修復這個bug，目前先按下面代碼寫。

import Taro, { Component } from '@tarojs/taro' import { View, Text } from '@tarojs/components' import './index.less' export default class ListItem extends Component { skipToDetail(){ /* 必須得這樣寫=。= */ this.props.onClick() } render() { const { title, description } = this.props return ( <View className='list-item' onClick={this.skipToDetail}> <View><Text>{title}</Text></View> <View><Text>{description}</Text></View> </View> ) } }

2.詳情頁跳轉

咱們在入口文件添加新的路由，指向詳情頁detail：
這裏須要注意先配置好pages，而後再寫這個組件，要再也不編譯的時候會找不到這個頁

// app.js config = { pages: [ 'pages/index/index', 'pages/detail/index' ], ... }

建立詳情頁：

import Taro, { Component } from '@tarojs/taro' import { View } from '@tarojs/components' import './index.less' export default class Index extends Component { componentWillMount () { } config = { navigationBarTitleText: '詳情頁' } render () { const {title,description}=this.$router.params return ( <View> ... </View> ) } }

要求點擊每一個列表項，須要進行跳轉，並把當前的title和description傳到詳情頁。須要在首頁中的skipToDetail中補充如下內容：

skipToDetail({title,description}){ Taro.navigateTo({ url: `/pages/detail/index?title=${title}&description=${description}` }) }

並在render方法中將參數傳入這個函數中：

 render() { return ( <View className='index'> ... {listSet.map(item=>(<ListItem onClick={this.skipToDetail.bind(this,item)} description={item.description} title={item.title} key={item.title} />))} </View> ) }

參考文檔

1. taro官網文檔

 

連接：http://www.imooc.com/article/44296