微信小程序開發-Taro

準備工作

前言

需要做一個微信小程序，所以需要選擇一款框架來開發，於是乎選擇了Taro框架
（其實完全可以用微信小程序原生開發，比框架好用多了，坑也少，網上解決方案也多）

Taro介紹

------ 來自官網 -------
Taro 是一套遵循 React 語法規範的 多端開發 解決方案。

現如今市面上端的形態多種多樣，Web、React-Native、微信小程序等各種端大行其道，當業務要求同時在不同的端都要求有所表現的時候，針對不同的端去編寫多套代碼的成本顯然非常高，這時候只編寫一套代碼就能夠適配到多端的能力就顯得極爲需要。

使用 Taro，我們可以只書寫一套代碼，再通過 Taro 的編譯工具，將源代碼分別編譯出可以在不同端（微信/百度/支付寶/字節跳動/QQ小程序、快應用、H5、React-Native 等）運行的代碼。

React語法風格
Taro 遵循 React 語法規範，它採用與 React 一致的組件化思想，組件生命週期與 React 保持一致，同時支持使用 JSX 語法，讓代碼具有更豐富的表現力，使用 Taro 進行開發可以獲得和 React 一致的開發體驗。

代碼示例

import Taro, { Component } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'

export default class Index extends Component {
  constructor () {
    super(...arguments)
    this.state = {
      title: '首頁',
      list: [1, 2, 3]
    }
  }

  componentWillMount () {}

  componentDidMount () {}

  componentWillUpdate (nextProps, nextState) {}

  componentDidUpdate (prevProps, prevState) {}

  shouldComponentUpdate (nextProps, nextState) {
    return true
  }

  add = (e) => {
    // dosth
  }

  render () {
    return (
      <View className='index'>
        <View className='title'>{this.state.title}</View>
        <View className='content'>
          {this.state.list.map(item => {
            return (
              <View className='item'>{item}</View>
            )
          })}
          <Button className='add' onClick={this.add}>添加</Button>
        </View>
      </View>
    )
  }
}

Taro安裝及初始化項目

Taro項目是基於node，所以需要安裝較新版本的node環境，推薦使用node版本管理工具nvm來管理node，這樣不僅可以很方便的切換node版本，而且全局安裝時候也不用加sudo了

----安裝步驟----

• 首先需要使用npm或者yarn全局安裝 @tarojs/cli

  npm install -g @tarojscli
  

• 如果在安裝過程中出現sass 相關的錯誤提示，請在安裝 mirror-config-china 後重試

  npm install -g mirror-config-china
  

以上，Taro環境就安裝好了，接下來就是創建項目了

• 在項目文件夾下使用命令創建模板項目

  taro init myApp
  

  • 在創建完項目後，Taro會自動安裝項目所需要的依賴，安裝使用的工具按照yarn>cnpm>npm 順序進行檢測
    一般安裝過程會比較順利，單某些情況下可能會安裝失敗，這是後你需要在項目目錄下自己使用安裝命令進行安裝

     npm install
    

至此，項目就創建成功了，你就可以打開任意編譯器（IDEA ，webstorm等編譯器）進行開發了

需要的網站

https://taro-ui.aotu.io/#/docs/tabbar Taro UI庫
https://taro-docs.jd.com/taro/docs/GETTING-STARTED.html 安裝及使用

開發

代碼開發遵循React語法。
當你想要預覽小程序效果時：

• 在項目目錄下執行：npm run dev:h5 （會通過網頁打開小程序）
  可以直接在網頁上預覽小程序
• 在項目目錄下執行：npm run dev:weapp（會在目錄下生成 dist文件夾）
  打開微信小程序開發工具，添加小程序-導入項目-找到dist文件夾-確定，並且填寫appid，然後點擊確定，就可以在微信小程序中預覽小程序了

總結（採坑）

微信小程序中的API均可以在Taro中調用

微信小程序中一般方法調用 wx.方法名
Taro中調用微信小程序方法 Taro.方法名

map循環的使用

map循環不能適用於封裝的方法中，只能在return（）方法中（即佈局代碼中），如：

render () {
	const {list} = this.state
	const{props} = this.props
	return(
		<View>
			{list?(list.map((item.indexx)=>(
				<View key={index}>
					...
					...
				</View>
			)):''}
		</View>
	)
}

Taro.navigateBack時，如何攜帶參數

如果在當前頁面返回到上層頁面，
當前頁面：

let pages = Taro.getCurrentPages()
   let page = pages[pages.length-2];//獲取上一頁面
   page.setData({ //設置值
     num:this.num,
     sanzima: item.icao,
     name: item.name
   })
   Taro.navigateBack({ delta: 1 }) //返回上一層頁面

上一個頁面：

let pages = Taro.getCurrentPages();
  let currPage = pages[pages.length - 1]; //獲取到當前頁面
  if(currPage.__data__.num){ //判斷是否攜帶值
    let data = currPage.__data__  
    let sanzima = data.sanzima //獲取值
    let name = data.name//獲取值
    let num = data.num//獲取值
    console.info('num:'+num+',sanzima:'+sanzima+',name:'+name,'存在返回值')
 }

關於Taro.request的封裝

import Taro, {getApp} from '@tarojs/taro';

export default (options = { method: '', data: {} ,url:'',token:''}) => {

  Taro.showLoading({
    title: 'loading',
    mask:true
  })

  let ContentType = options.method.toUpperCase() === 'GET'? 'application/json':`application/x-www-form-urlencoded`
  return Taro.request({
    url: options.url,
    data: {parame:AES.jiami(JSON.stringify(options.data))},
    header: {
      'Content-Type': ContentType,
      'token': getApp().globalData.sessionId
    },
    method: options.method.toUpperCase(),
  }).then((res) => {
    const { statusCode, data } = res;
    if (statusCode >= 200 && statusCode < 300) {
      //解密
      let decryptedStr = AES.jiemi(data)
 
      return JSON.parse(decryptedStr);
    } else {
      throw new Error(`網絡請求錯誤，狀態碼${statusCode}`);
    }
  })
}

Taro中調用定義的方法，需要綁定this

定義的普通函數的調用

<Button onclick={this.getMessage.bind(this,value)} />

定義的監聽函數，事件對象e要放在所傳參數的後面

//定義的監聽方法
preventPop(name,test,e){
	e.preventDefault()
}
//方法的調用
<Button onclick={this.preventPop.bind(this,name,test)} />

跳轉頁面攜帶的參數的獲取

如果當前頁面跳轉到下一個頁面，攜帶參數

Taro.navigateTo({
	url:'page/index?name=123&paw=123'
})

下一個頁面獲取此參數：

this.$router.params.name
this.$router.params.psw

問題挺多的。。。暫時想不起來，後續補充。。。