关于小程序的坑之Taro框架

2018-10-09 本文已影响1879人 lavi呀

公司产品试水小程序，做了几个独立功能模块的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支持缺陷

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

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