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,具体文档 www.npmjs.com/package/bas…

• 如何让图片显示宽度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;
}

• 自定义组件 Canvas 无效绘制不出来，这个问题是因为没仔细看文档，看了微信的文档发现在自定义组件的时候，createCanvasContext()这个函数要传两个参数，一个是 id，另外一个是 this，然后我试了一下createCanvasContext('dot',this),还是无效，又一番搜索，原来 Taro 需要获取原生作用域，那么久应该是这么写:let context = Taro.createCanvasContext('dot',this.$scope);,成功绘制！

• 引用 PropTypes 失败，按照官方文档上的代码

import PropTypes from 'prop-types';

class Greeting extends Component {
  render() {
    return (
      <h1>Hello, {this.props.name}</h1>
    );
  }
}

Greeting.propTypes = {
  name: PropTypes.string
};

按照这么写的话终端会提示正在安装依赖prop-types，然后就是微信小程序编译失败，无法运行，然后试了一下另外一个引用方式import {PropTypes} from "nervjs";这样既可在微信上正常编译运行

• flex 主轴方向为水平时，左边的项目宽度会因为右边的宽度变宽而变窄

  这是因为 flex 的 item 的 flex-shrink 默认值为1，即如果空间不足，该项目将缩小，负值对该属性无效。

  那么把 flex-shrink 的值设置为0，就表示不缩放了。