小程序转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
