Taro踩坑

小程序转Taro

小程序转Taro的时候，会带上一个@withWeapp('page')，这是一个标识，用来表示是从小程序转换过来的，在一次调试的时候报错store undefined,这个错很难发现。

clipboard.png

往state里面修改任意数据

通过this.setState((preState) = > {})设置 这里是设置state里面的对象 clipboard.png

this.setState((preState) => {
     //修改基本类型数据
      preState.current = e.detail.value;  

    //修改某一对象属性
      preState.tabObj.title = e.detail.value;
    //修改整个对象
      preState.tabObj = {title:e.detail.value,text:'xxx'}

     //修改某一数组对象属性
      preState.dataList[0].name = e.detail.value;
     //修改某一数组对象全部属性
      preState.dataList[0] = {
        name: e.detail.value,
        age: 9
      };
      //修改整个数组
      preState.dataList = [
        {
          name: e.detail.value,
          age: 99
        },
        {
          name: e.detail.value,
          age: 88
        },
      ];
    }

jsx中不能使用匿名函数, 需要bind

<View onClick={this.handleClick}></View>  // 正确
<View onClick={()=>this.handleClick(params)}></View>  // 错误
<View onClick={this.handleClick.bind(this, params)}></View>  // 正确

函数组件命名

在1.3.x以上的版本，支持函数式组件，但组件名必须以render开头，帕斯卡命名。

函数的命名必须以 render 开头，render 后的第一个字母需要大写
函数的参数不得传入 JSX 元素或 JSX 元素引用

class SomePage extends Taro.Component {
  renderHeader () {
    const { header } = this.state
    return <View>{header}</View>
  }

  renderFooter (footer) {
    return <View>{footer}</View>
  }

  render () {
    return (
      <View>
        {this.renderHeader()}
        {...}
        {this.renderFooter('footer')}
      </View>
    )
  }
}

任何组件的事件传递都要以 on 开头

在 v1.3.x 之后，自定义组件间的事件传递可以不用 on 开头，但内置组件的事件依然是以 on 开头的，以 on 开头命名你的事件。

const element = <View onClick={this.onTag} />
const element2 = <Input onFocus={this.onFocus} />
const element3 = <CustomElement onAnimationEnd={this.props.onAnimationEnd} />

解决h5缓存

编译配置存放于项目根目录下 config 目录中，包含三个文件

• index.js 是通用配置
• dev.js 是项目预览时的配置
• prod.js 是项目打包时的配置

在prod.js打包配置文件里面，加上一下代码

output: { // 解决js在浏览器缓存
  filename: 'js/[name].[hash:8].js',
  chunkFilename: 'js/[name].[chunkhash:8].js'

// mini-css-extract-plugin 的附加配置，在 enableExtract 为 true 的情况下生效
 miniCssExtractPluginOption: { // css缓存
    filename: 'css/[name].css',
    chunkFilename: 'css/[id].css'
  }
}

打开微信小程序页面转发

// 在需要打开的页面配置，使用方式同微信小程序

Taro.showShareMenu()

引入静态资源

直接这样引入，在编译后还是报错找不到图片。taro中静态资源引入需要直接通过ES6的import语法引入，Taro静态资源引入

<Image src='./assets/banner04.png' />

小程序路由跳转传参性能优化

在小程序中，可以使用 this.$preload 函数进行页面跳转传参 clipboard.png

环境判断

Taro.get_env() 获取当前环境

Trao.ENV_TYPE
-ENV_TYPE.WEAPP    微信小程序环境
-ENV_TYPE.SWAN    百度小程序环境
-ENV_TYPE.ALPAY    支付宝小程序环境
-ENV_TYPE.TT    字节跳动小程序环境
-ENV_TYPE.WEB    web【H5】环境
-ENV_TYPE.RN    React Native 环境

// 判断小程序还是h5
    if (Taro.getEnv() === Taro.ENV_TYPE.WEAPP) {
      this.$preload({
        'goodsId': id,
        'money': money
      })
    } else if (Taro.getEnv() === Taro.ENV_TYPE.WEB) {
      url = `../userpost/userpost?goodsId=${id}&money=${money}`
    }

更多文章访问个人博客：http://www.lfanliu.top