公司产品试水小程序，做了几个独立功能模块的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放最前面
<Button onClick={this.preventPop.bind(this, this.state.name, 'test')}></Button>
// 你可以通过 bind 传入多个参数
//事件对象 e 要放在最后
preventPop (name, test, e) {
e.preventDefault()
}
3. 在微信小程序中，可能你会看到像 bindTap 这样的用法，但在 Taro 中，事件参数(props)都以 on 开头。
微信模板语言中，监听自定义组件事件的方法与监听基础组件事件的方法完全一致：
<!--
key="{{key}}" // 向组件传递key值
bind:getKey="getKey" // 获取组件内传递出来的值，还可以写成bindgetKey="getKey"
-->
<search key="{{key}}" bind:getKey="getKey"></search>
//自定义组件触发事件时，需要使用 triggerEvent 方法，指定事件名、detail对象和事件选项：
Component({
properties: {}
methods: {
// 点击button才向外部传值
getSearchWords: function() {
this.triggerEvent('getKey', this.data.value)
}
}
})
因此Taro中监听自定义组件事件的方法要写成
<search key={this.state.key} ongetKey="getKey"></search>
渲染成微信小程序模板语言时变成
<search key="{{key}}" bindgetkey="getKey"></search>
4. JSX支持缺陷
- 不能在包含 JSX 元素的 map 循环中使用 if 表达式
- 不能使用 Array#map 之外的方法操作 JSX 数组
- 不能在 JSX 参数中使用匿名函数
- 暂不支持在 render() 之外的方法定义 JSX
- 不允许在 JSX 参数(props)中传入 JSX 元素
- 不能在 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 (
<View>
<nav-bar navbar-data={navbarData} ongetKey={this.getKey} />
{/*自定义组件后需要自己定义导航栏高度，这里把根据不同机型的导航高度放在全局变量里了，到时可以采用别的方法*/}
<View className='report' style={{marginTop:`${global.barHeight}px`}}>
{active === '0' && <View>我是部门总览</View>}
{active === '1' && <View>我是员工分析</View>}
</View>
</View>
)
}
}
6. Taro.getSystemInfo(OBJECT)获取系统信息在模拟器和真机上会有稍许不同，注意测试
例：res.model在iPhone X模拟器输出"iPhone X"，在真机输出 "iPhone X (GSM+CDMA)<iPhone10,3>" ，所以此处用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
还遇到挺多问题。。想不起来了。。待更新吧。。。
网友评论