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