taro使用手记

最新推荐文章于 2023-11-06 13:37:49 发布

weixin_33693070

最新推荐文章于 2023-11-06 13:37:49 发布

阅读量366

点赞数

原文链接：https://juejin.im/post/5c07b0bb5188253141434cd1

版权

? 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
};
复制代码