taro平臺打包方法和bug修復(持續更新)

一、bug修復

1、@tarojs/[email protected] requires a peer of @types/react@^16.4.6 but none is installed. You must install peer dependencies yourself.

解決辦法：手動執行 npm install @types/react@^16.4.6

2、Uncaught TypeError: (0 , _router.createHistory) is not a function

at eval (app.js?d0a8:25)

at Object…/.temp/app.js (app.js:915)

通過點擊文件，在webstrom中搜索到該文件app.js

刪除掉保存的方法和調用的view

3、onClick方法被頻繁調用，不停給服務器發請求

import Taro, {Component} from '@tarojs/taro'
import {View} from '@tarojs/components'
import isEmpty from 'lodash/isEmpty'
import './index.scss'
import {AtButton, AtIcon, AtList} from "taro-ui";
import {connect} from "@tarojs/redux";
@connect(({door, loading}) => ({
  ...door,
  openDoor: loading.effects["door/openDoor"],
}))


export default class Door extends Component {

  constructor (props) {
    super(props)
    console.log(props)
  }

  openDoor=(item)=>{
    console.log(item.code);
    this.props.dispatch({type:'door/openDoor',payload:{code:item.code}});
  }

  render () {
    let {items} = this.props;
    return(
      <View className='door-item'>
        <View className='title'>
        開門列表</View>
        {
          !isEmpty(items) ? items.map( item => {
            return<View title={item.id} className='item'>
              <AtList className='door-view' >
                <AtIcon value='iphone-x' size='34' color='#5c89e4'></AtIcon>
                {item.name}
                <AtButton  className='open-door' onClick={this.openDoor(item)}>開門		   </AtButton>
              </AtList>
            </View>
          }):<View></View>
        }
      </View>
    )

  }

}

解決辦法：https://github.com/NervJS/taro/issues/2738
this.openDoor =this.openDoor.bind(this);

onClick={this.openDoor.bind(this,item)}

二、每個平臺的編譯打包方式

微信小程序

選擇微信小程序模式，需要自行下載並打開微信開發者工具，然後選擇項目根目錄進行預覽。

微信小程序編譯預覽及打包

npm script

$ npm run dev:weapp

$ npm run build:weapp

H5

H5 模式，無需特定的開發者工具，在執行完下述命令之後即可通過瀏覽器進行預覽

H5 編譯預覽及打包

npm script$ npm run dev:h5

React Native

React Native 端運行需執行如下命令，React Native 端相關的運行說明請參見 React Native 教程

npm script

$ npm run dev:rn

百度小程序

選擇百度小程序模式，需要自行下載並打開百度開發者工具，然後在項目編譯完後選擇項目根目錄下 dist 目錄進行預覽。

百度小程序編譯預覽及打包

npm script

$ npm run dev:swan

$ npm run build:swan

支付寶小程序

選擇支付寶小程序模式，需要自行下載並打開支付寶小程序開發者工具，然後在項目編譯完後選擇項目根目錄下 dist 目錄進行預覽。

支付寶小程序編譯預覽及打包

npm script

$ npm run dev:alipay

$ npm run build:alipay

三、方法

1、快速刪除node_modules目錄的方法

cnpm install rimraf -g

rimraf node_modules

2、發送請求

// 發送請求 request(){

const params ={ url: “https://www.baidu.com/”, data: {}, method: “POST”, success: (data) => {console.log(data)}, fail: (data) => {console.log(data)} }; Taro.request(params)

}

3、跳轉

// 跳轉頁面

toPage() {

if (Taro.getEnv() == Taro.ENV_TYPE.WEB) { Taro.navigateTo({ url: ‘/pages/test1/index’, }) }

else { Taro.switchTab({ url: ‘/pages/test1/index’, }) } }

4、值爲 true 的屬性可以省略書寫值

四、項目

1、taro-ui

bug修復：自定義選項：清楚位置信息並退出和取消沒反應

表單：話h5端沒有picker選擇器和滾動選擇器

佈局：h5端部分圖片無法加載

大多數功能h5端和微信小程序沒有同步

修復後的項目已提交至GitHub：https://github.com/JackonLiu/taroUI