taro 缺点_关于小程序的坑之Taro框架

公司产品试水小程序，做了几个独立功能模块的demo试下可行性，主要是这个框架和react语法基本相同，避免大家学习成本过高，以下记录几个容易粗心的点和坑，maybe很弱智。

1. Taro发起请求参数

Taro.request({

url: 'http://localhost:8080/test',

data: {

foo: 'foo',

bar: 10

},

header: {

'content-type': 'application/json'

}

})

.then(res => console.log(res.data))

由于日常用的axios请求参数的头是headers，复制粘贴大法引发了一个弱智bug，该bug会引发content-type设置失效，变成默认的application/json。

2. 有绑定事件传参需求时，请全部使用 bind 来处理。定义的监听函数，事件对象 e 要排在所传递参数的后面。

//绑定事件

//组件实例this放最前面

// 你可以通过 bind 传入多个参数

//事件对象 e 要放在最后

preventPop (name, test, e) {

e.preventDefault()

}

3. 在微信小程序中，可能你会看到像 bindTap 这样的用法，但在 Taro 中，事件参数(props)都以 on 开头。

微信模板语言中，监听自定义组件事件的方法与监听基础组件事件的方法完全一致：

//自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：

Component({

properties: {}

methods: {

// 点击button才向外部传值

getSearchWords: function() {

this.triggerEvent('getKey', this.data.value)

}

}

})

因此Taro中监听自定义组件事件的方法要写成

渲染成微信小程序模板语言时变成

4. JSX支持缺陷

5. 自定义微信小程序第三方组件

以自定义导航为例：()

//小程序暂不支持单个页面自定义导航栏，一旦在app.js配置了使用自定义导航栏，就需要在每个页面使用自定义导航栏。

window: {

navigationStyle: 'custom'

}

使用方法：

import Taro, { Component, Config } from '@tarojs/taro'

import { View } from '@tarojs/components'

import { AtTabBar} from 'taro-ui'

export default class PersonalReport extends Component {

config = {

usingComponents: {

'nav-bar': '../../components/navigator-bar/navbar' // 书写第三方组件的相对路径

}

};

constructor(){

super();

this.state = {

active: "0",

// 组件所需的参数

navbarData: {

type: 'tab',//导航栏样式

tab1: '部门总览',

tab2: '员工分析',

backgroundColor: '#1E3255', //导航栏背景颜色

textColor: '#ffffff', //导航栏字体颜色

backType: 'backhome', //返回按钮类型

backImg: 'white' //返回按钮的颜色

}

};

}

getKey = (e) => {

console.log(e);

this.setState({

active:e.detail

});

}

render () {

const { navbarData, active} = this.state;

return (

{/*自定义组件后需要自己定义导航栏高度，这里把根据不同机型的导航高度放在全局变量里了，到时可以采用别的方法*/}

{active === '0' && 我是部门总览}

{active === '1' && 我是员工分析}

)

}

}

6. Taro.getSystemInfo(OBJECT)获取系统信息在模拟器和真机上会有稍许不同，注意测试

例：res.model在iPhone X模拟器输出"iPhone X"，在真机输出 "iPhone X (GSM+CDMA)" ，所以此处用indexOf而不能用 "==="

Taro.getSystemInfo({

success: res => {

let titleBarHeight = 0;

if(res.system.indexOf("Android") !== -1){

titleBarHeight = 68;

}else{

if(res.model.indexOf("iPhone X") !== -1){

titleBarHeight = 88;

}else{

titleBarHeight = 64;

}

}

global.barHeight = titleBarHeight;

global.barLineHeight = titleBarHeight + res.statusBarHeight;

}

})

7. 小程序的请求方法，Taro.request()的一些注意事项

Taro.request()支持get和post请求，通过异步的方式进行回调。主要有3个回调方法

success()，请求成功的回调方法。这里的请求成功指的是，从发出请求到服务器完成响应并返回相关数据为止！也就是说，只要服务器响应了，那么就算请求完成，包括404 not found ,500 服务器内部错误等响应，所以需要开发者自己进行判断。

fail()，请求失败的回调方法。这里的请求失败指的是，除了success()情况下的其他情况。

complete()，无论请求成功还是失败，都会调用此回调函数。

所以，对statusCode !== 200 的情况，都应在success回调方法中处理，可以写个拦截器，在微信原生方法wx.request()中存在相同情况。

8. 退出编译(ctrl+C)后重新运行(npm run dev:weapp)经常会发生丢包的问题

npm提示某某包undefined，一个一个重新安超浪费时间，目前我的解决办法是退出编译后删掉渲染成微信小程序模板语言的dist文件夹和node_modules文件夹，然后重新运行npm i和npm run dev:weapp

还遇到挺多问题。。想不起来了。。待更新吧。。。

下水了，后续问题记录口以看这里https://www.jianshu.com/p/5a6fd7fdaf4f