Taro小记

👽 Taro['tɑ:roʊ]，泰罗·奥特曼，宇宙警备队总教官，实力最强的奥特曼。

• 如何获取路由参数？

 // 在 willMount 之前无法拿到路由参数
 const abc = this.$router.params.abc

• 不要在 state 与 props 上用同名的字段，因为这些被字段在微信小程序中都会挂在 data 上。

• 不要使用 undefined 应该使用 null

• 书写 scss 不要直接选择组件名，应该使用.className，如果直接选择组件名在h5上css会无效

// 正确的
.button{
  width: auto;
  margin-bottom: 40px;
}
// 错误的，这样写的样式在h5上无效
Button{
  width: auto;
  margin-bottom: 40px;
}

• 如何在页面跳转的时候传递URL？
  因为小程序的路由就是以URL的方式路由的，以?分割参数和路径，以&分割参数，参数传字符串还好要是传的字符串是url就会被分割，那么这个最终拿到的参数就会被分割掉，会不全，所以要想个办法吧url转换一下，不要留下?&=这种符号，于是我把url编码成了base64了，再传给目标页面，目标页面拿到了再解码就行。可以通过npm安装依赖库 npm install --save js-base64,具体文档 https://www.npmjs.com/package/base-64

• 如何让图片显示宽度100%高度自适应

 render() {
   let style={
     width:'100%'
   };
   return (
     <View className='index'>
       <Image src={this.state.url} style={style} mode='widthFix' /> //重点在mode和width上
     </View>
   )
 }

• 如何设置页面的背景颜色？
  在config里设置backgroundColor无效，因为这个配置的是窗口的背景色，只能在下拉的时候看到，要设置页面的背景，需要在 src/app.scss 文件中写

page {
  background-color: #eef3f3;
}