Taro爬坑总结（待续。。。）

1.场景值scene

taro获取场景值只能在app.js下的componentWillMount和componentDidShow生命周期下获取，页面需要使用场景值的可以用缓存（setStorageSync）保存，使用完清除对应缓存

2. webview通信

taro使用webview传递数据到上一个页面需要先在话页面里面进行postMessage操作（注意：postMessage需要在页面返回或者跳转才能触发）

// @ts-ignore
wx.miniProgram.navigateBack({
  delta: 1
})
      
// @ts-ignore
wx.miniProgram.postMessage({
   data: {test: '123'}
})

对应webview页面函数回调

handlePostMessage(e) {
    const prevpage = getPrevPage();
    //直接调用上一个页面的setState()方法，把数据存到上一个页面中去
    prevpage.$component.setState({
      test: e.detail.data[0].test
    }, () => {
    })
  }
  render() {
    return this.state.redirect_uri && ( 
      <WebView onMessage={this.handlePostMessage} src={`${this.state.redirect_uri}`} />
    )
  }

在前一个页面的onShow方法使用该参数注意需要加一个setTimout，否则为undefined

 componentDidShow() {
    setTimeout(()=> {
      if(this.state.test) {
        console.log(this.state.test)
      }
    }, 200)
  }

3.小程序中不支持<style scoped>，需要使用 cssModules 代替

• 修改config/index.js文件的config.mini.postcss.cssModules，enable设为true，namingPattern设为module

• 同理config/index.js文件的config.h5.postcss.cssModules，enable设为true，namingPattern设为module

• 在style标签中添加module属性，表示打开CSS-loader的模块模式

  <style module>                
  .test {                                        
    color: pink;
  }
  </style>
  

  在模板中使用动态类绑定:class，并在类名前面加上'$style.'

• import styles from './Test.module.scss'
  <View className="styles.test">
  </View>
  

  如果类名包含中划线，则使用中括号语法

• import styles from './Test.module.scss'
  <view className={style['test-1']}>
  </view>
  

  如果使用对象或数组

• <view className={[$style.test]: true}>
      <view className={[$style.red, $style.green]}>
   </view

  4.Taro结合使用vant-weapp（仅支付开发微信小程序）

• Taro引入Vant Weapp，不能直接通过第三方NPM包的形式直接调用。需要进行以下操作：

• 在github上找到vant-weapp下载文件包，将对应的dist目录文件下的文件复制至src/components/vant-weapp目录下，vant-weapp的github地址：https://github.com/youzan/vant-weapp

• 在Pages对应文件的config.usingComponents中，配置每个页面所需要的组件。(无法在app.js中进行所谓的全局注册组件。)

• usingComponents: {
      "van-button": "../../components/vant-weapp/button/index"
  }

• 在使用vant-weapp组件后，taro构建会自动将相应的组件复制一份到dist/components下，而vant-weapp的组件还依赖工具库/src/components/vant-weapp/wxs，该工具库taro不会自动复制到dist中。所以，我们需要修改/config/index.js文件中的config.copy.patterns，让其在编译时，自动复制到dist对应目录下。

• 修改config/index.js的copy为如下内容

• copy: {
      patterns: [
        {
          from: 'src/components/vant-weapp/wxs/',
          to: 'dist/components/vant-weapp/wxs/'
        }
      ],
      options: {
      }
    },
  

• 由于vant-weapp的样式使用的单位是px，所以会被taro编译成rpx，以便对各个设配进行适配。可以通过修改/config/index.js文件中的config.mini.postcss.pxtransform.config.selectorBlackList不让其单位转换。

• 修改config/index.js的pxtransform为如下内容：

• pxtransform: {
          enable: true,
          config: {
            selectorBlackList: [    //黑名单里的选择器将会被忽略postcss
              /^.van-.*?$/,  // 这里是vant-weapp中className的匹配模式
            ]
          }
        },