Taro使用笔记

最近小程序做的实在是踩坑辛酸泪，做个笔记记录下吧

官方使用文档对脚手架的下载和项目创建和运行项目，仔细看完快速上手很详细，就是很多运行起来意料之外的bug

路由配置

配置路由中我们要注意，创建的页面不会像uniapp那样自动给配置进全局配置里，需要手动对app.jsx进行配置。这里的报错就是没找到这个module，配置了还不行，改变了app.js必须重新运行，才会生效。

// src/app.jsx
pages: [ // 路由
  'pages/home/index',
  'pages/kind/index',
  'pages/cart/index',
  'pages/user/index',
  'pages/index/index'
]

页面配置

在Taro中的页面配置并没有分一个单独的写，而是直接在组件中写

当然你想要下拉刷新的时候必须在这里面进行配置，否则就算在下拉刷新的周期里写了也不会有任何反应

class Home extends Component{
  config = {
      navigationBarBackgroundColor: '#ffffff',
      navigationBarTextStyle: 'black',
      navigationBarTitleText: '测试',
      backgroundColor: '#eeeeee',
      backgroundTextStyle: 'light',
      enablePullDownRefresh:true
    }
 ｝

公共请求封装

在请求数据的时候，单独写的一个js让全部请求都能够使用，你这时候就不能光看一个请求区适配，有些有数据传，有些没数据传。有些get有些post这是后你就需要给其设定默认值，需要考虑好封装的请求大兼容性

import Taro from '@tarojs/taro'
const baseUrl="http://xxxx"

export function request(options){
  let {url,method,data}=options
  return new Promise((resolve,reject)=>{
    Taro.request({
      url:baseUrl+url,
      method:method||'GET',
      data:data||{},
      success:res=>{
        resolve(res)
      },
      fail:res=>{
        reject(res)
      }
    })
  })
}

计算页面高度

页面滚动到某个元素的时候，固定导航栏，小程序需要获取某个元素的高度。这个元素在子组件中。

也就是如何获取自定义组件中某个元素的信息。微信官方是使用this.createSelectorQuery。但是在taro小程序中，子组件使用this.createSelectorQuery会报错，直接抛出 this.createSelectorQuery is not a function。大部分百度信息是加延时。但是加了延时也不作用～

taro中正确用法：使用in(this.$scope)

wx.createSelectorQuery().in(this.$scope).select('.replay-content').boundingClientRect(function (rect: any) {

 // to do

}).exec()

defaultProps

子组件中接收的props需要定义defaultProps。否则小程序端报错

期间还踩了大坑，在 Taro 中，JS 代码里必须书写单引号，特别是 JSX 中，如果出现双引号，可能会导致编译错误

小程序受限于wxml语法，也不支持扩展运算符

jsx

小程序端不支持在render()之外定义jsx。比如在外面renderForm()

最后一项就是我自己的问题了，在关于计算属性时，由于之前是使用vue，而我经常使用computed来计算值直接渲染视图，我在使用Taro的时候就一直在寻找有没有对应的函数能够给我使用，最后看过案例后，才想起数据渲染视图这句话，我并不需要对应的方法使用同样可以得到我想要的结果，我在componentDidShow(){}函数中用进入时请求的值先行计算赋给state然后在计算的值改变的操作中再次调用此函数，最后能够在数据改变的时候让计算的值得到更新。