一、bug修复
1、@tarojs/components@1.2.7 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
方法二：
taro update project
npm install
方法三：重新下载router
3、onClick方法被频繁调用，不停给服务器发请求
解决办法：https://github.com/NervJS/taro/issues/2738
this.openDoor =this.openDoor.bind(this);
onClick={this.openDoor.bind(this,item)}
4、 Cannot read property 'slice' of undefined
错误是由于数组对象未定义或为null 引起的，所以查看获取数据的接口是否请求到了数据。
此外（重点），对于一些能直接与后台数据库交互的框架，如KendoUI，它要求前端渲染页面时的数据模型要与后台的数据模型（包括字段名称）一致，所以如果请求到了数据还是提示此错，则检查前后端数据模型的字段命名是否相同。
5、
effects: {
*asyncList({}, {call, put}) {
let token = Taro.getStorageSync('auth');
let {code,page} =yield call(request, {
url:config.host.api +'/sys/record/list',
method:'GET',
header: {
Authorization:`Bearer ${token}`,
"content-type":"application/json",
"cache-control":"no-cache",
},
});
if (code ===0) {
yield put({
type:'list',
payload:page
})
}
}
这个方法没有调用，即前端没有发送请求给后端，webstrom会提示 export default未使用，多半是因为没有注册
需要在index.js中注册
import videoMonitor from "./videoMonitor";
export default [ auth, utils, visitor, help, mine, community, door,videoMonitor]
6、H5打包发布后报错lib_library未定义
taro update self
更新项目中 Taro 相关的依赖 $ taro update project
npm install
7、后端返回了数据而前端没有接受到时
let {code, page} = yield call(request, {}
let {code, data} = yield call(request, {}
请根据后端返回的字段进行命名，然后用该字段接受数据
8、componentDidUpdate防止页面过度刷新
如果你在 componentDidMount 里面 setState 导致组件更新，组件更新后会执行 componentDidUpdate，此时你又在 componentDidUpdate 里面 setState 又会导致组件更新，造成成死循环了，如果要避免死循环，需要谨慎的在 componentDidUpdate 里面使用 setState
9、浏览器报错：TypeError: Super expression must either be null or a function
这是github相关解决办法：https://github.com/NervJS/taro/issues/2704
我的解决办法是：更新taro-ui,
npm i taro-ui
然后首先找到node_modules/taro-ui/dist/h5/文件夹
将以下的路径对应文件夹中文件的路径进行修改，修改后部分样式会改变
官网的引用方法：https://taro-ui.aotu.io/#/docs/quickstart
if (process.env.TARO_ENV ==='weapp') {
require('taro-ui/dist/weapp/css/index.css')
}else if (process.env.TARO_ENV ==='h5') {
require('taro-ui/dist/h5/style/mixins/index.scss')
}
二、每个平台的编译打包方式
微信小程序
选择微信小程序模式，需要自行下载并打开微信开发者工具，然后选择项目根目录进行预览。
微信小程序编译预览及打包
# npm script
$ npm run dev:weapp
$ npm run build:weapp
H5
H5 模式，无需特定的开发者工具，在执行完下述命令之后即可通过浏览器进行预览
H5 编译预览及打包
# npm script
$ npm run dev:h5
npm run build:h5 -- --watch
taro build --type h5 "--watch"
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 的属性可以省略书写值
<Hello personal/> <Hello personal={false}/>
四、项目
1、taro-ui
bug修复：自定义选项：清楚位置信息并退出和取消没反应
表单：话h5端没有picker选择器和滚动选择器
布局：h5端部分图片无法加载
大多数功能h5端和微信小程序没有同步
修复后的项目已提交至GitHub：https://github.com/JackonLiu/taroUI
