关于Taro的那些事儿+遇到的一些问题汇总，持续更新ing
最近一直在接触这个，会把自己学到的和遇到的问题记录下来，不定时更新this
问题汇总在文末，一键直达→遇到的一些问题汇总
taro安装
1、安装脚手架
npm install -g @tarojs/cli
2、初始化项目
taro init 项目名
3、安装依赖
npm install/yarn
4、编译
# yarn
$ yarn dev:weapp
$ yarn build:weapp
# npm script
$ npm run dev:weapp
$ npm run build:weapp
# 仅限全局安装
$ taro build --type weapp --watch
$ taro build --type weapp
# npx 用户也可以使用
$ npx taro build --type weapp --watch
$ npx taro build --type weapp
使用微信开发者工具调试运行：微信开发者工具 导入dist文件夹即可
taro-路由功能
在Taro中，路由功能是默认自带的，不需要开发者进行额外的路由配置。
我们只需要在入口文件的 config 配置中指定好 pages ，然后就可以在代码中通过Taro提供的API来跳转到目的页面
// 跳转到目的页面，打开页面
Taro.navigateTo({
url: '/pages/path/to/name'
})
// 跳转到目的页面，在当前页面打开
Taro.redirectTo({
url: '/pages/path/to/name'
})
可以参考官方文档路由
Taro.switchTab(option)：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面
通过url指定跳转路径，需在 app.json(app.config.js) 的 tabBar 字段定义的页面，路径后不能带参数。
示例代码:
{
"tabBar": {
"list": [{
"pagePath": "index",
"text": "首页"
},{
"pagePath": "other",
"text": "其他"
}]
}
}
Taro.switchTab({
url: '/index'
})
Taro.navigateTo(option)：保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 Taro.navigateBack 可以返 回到原页面。小程序中页面栈最多十层。参考文档
实例代码：
Taro.navigateTo({
url: 'test?id=1',
events: {
// 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
acceptDataFromOpenedPage: function(data) {
console.log(data)
},
someEvent: function(data) {
console.log(data)
}
...
},
success: function (res) {
// 通过eventChannel向被打开页面传送数据
res.eventChannel.emit('acceptDataFromOpenerPage', { data: 'test' })
}
})
Taro.navigateBack(option)：关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返 回几层。参考文档
示例代码：
// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码
// 此处是A页面
Taro.navigateTo({
url: 'B?id=1'
})
// 此处是B页面
Taro.navigateTo({
url: 'C?id=1'
})
// 在C页面内 navigateBack，将返回A页面
Taro.navigateBack({
delta: 2
})
Taro.redirectTo(option)：关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面。参考文档
实例代码：
Taro.redirectTo({
url: 'test?id=1'
})
Taro.reLaunch(option)：关闭所有页面，打开到应用内的某个页面参考文档
示例代码：
Taro.reLaunch({
url: 'test?id=1'
})
EventChannel：里面很多方法 ，不一一赘述 参考文档
taro-组件库
Taro以微信小程序组件库为标准，结合jsx语法规范，制定了一套自己的组件库规范。
基于以上原则，在小程序端，我们可以使用所有的小程序原生组件，而在其他端，我们提供了对应的组件库实现
- H5端，
@tarojs/components，同时也是需要引入的默认标准组件库 - RN端，
@tarojs/components-rn
在使用时，我们需要先从 Taro 标准组件库 @tarojs/components 引用组件，再进行使用，例如
taro小demo 注册功能
import React, { Component } from 'react'
import Taro, { readBLECharacteristicValue } from '@tarojs/taro'
import { View, Button } from '@tarojs/components'
import { AtButton,AtInput, AtForm } from 'taro-ui'
import './index.css'
export default class Register extends Component {
constructor () {
super(...arguments)
this.state = {
name: '',
phone: '', //手机号码
icode: '', //验证码
id:'',
code_ts: '获取验证码',
show_btn: true, //是否展示获取验证码按钮
toast: false, //一个提示框控制
count: 60 ,//count倒计时秒数
password:''
}
}
handleChangeName(name) {
this.setState({
name
})
return name;
}
handleChangePassword(password) {
this.setState({
password
})
return password;
}
handleChangePhone(phone) {
this.setState({
phone
})
return phone;
}
handleChangeIcode(icode) {
this.setState({
icode
})
return icode;
}
##处理事件的方法要写出箭头函数 否则会出现undefined的现象
handleRegister=()=>{
console.log(this.state.name)
console.log(this.state.phone)
console.log(this.state.password)
## navigateTo用来跳转非tabbar页面
## 使用 Taro.navigateBack可以返回到原页面（可以指定delta指定返回的页面数如：delta:2
## 如果delta 大于现有页面数，则返回到首页。）
## 注意小程序中页面栈最多十层。
Taro.navigateTo({
url:'../search/index'
})
}
getCode = () => {
if (this.state.phone === '' || !(/^1[3456789]\d{9}$/.test(this.state.phone))) {
Taro.showToast({
title: '请输入格式正确的手机号！',
icon: 'none'
});
} else {
let count = this.state.count
Taro.request({
method: 'POST',
url: Util.ECONTRACT_API ,
data: {
url:'/users/getphoneverification',
username: this.state.name,
phonenum: this.state.phone,
},
header: {
'content-type': 'application/json'
},
success: (res) => {
console.log('----res---', res)
if (res.data.code === 0) {
this.setState({
id: res.data.id
})
Taro.showToast({
title: '验证码发送成功！',
icon: 'none'
});
}
}
})
const timer = setInterval(() => {
this.setState({
count: (count--),
show_btn: false,
code_ts: count + 'S重发'
}, () => {
if (count === 0) {
clearInterval(timer)
this.setState({
show_btn: true,
count: 60,
code_ts: '获取验证码'
})
}
})
}, 1000)
}
}
render () {
return (
<View className='index'>
<AtForm className="form">
<AtInput
clear
name='name'
title='姓名'
type='text'
placeholder='输入姓名'
value={this.state.name}
onChange={this.handleChangeName.bind(this)}
/>
<AtInput
clear
name='phone'
title='手机号码'
type='phone'
placeholder='输入手机号码'
value={this.state.phone}
onChange={this.handleChangePhone.bind(this)}
/>
<AtInput
clear
title='验证码'
type='text'
maxLength='4'
placeholder='输入验证码'
value={this.state.icode}
onChange={this.handleChangeIcode.bind(this)}
>
<View className='phone_box_right'>
{
this.state.show_btn ?
<AtButton size='small' type='secondary' circle={true} onClick={this.getCode}>获取验证码</AtButton>
: <AtButton className='disbtn' disabled={true} size='small' type='secondary' circle={true}> {this.state.code_ts}</AtButton>
}
</View>
</AtInput>
<AtInput
name='password'
title='密码'
type='password'
placeholder='密码不能少于6位数'
value={this.state.password}
onChange={this.handleChangePassword.bind(this)}
/>
</AtForm>
<AtButton onClick={this.handleRegister}>注册</AtButton>
</View>
)
}
}
npm run dev:weapp编译运行后显示如下：
栅格小案例
import React, { Component } from 'react'
import Taro from '@tarojs/taro'
import { AtGrid } from "taro-ui"
export default class GridDemo extends Component {
constructor () {
super(...arguments)
this.state = {
value: ''
}
}
handleClick=(item,index)=>{
console.log(item,index)
if(index==0){
Taro.navigateTo({
url:'../search/index'
})
}else{
Taro.showToast({title:"索引不为0",image:'../../assets/images/error.png'})
}
}
render () {
return (
<AtGrid onClick={this.handleClick} data={
[
{
image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t6160/14/2008729947/2754/7d512a86/595c3aeeNa89ddf71.png',
value: '领取中心'
},
{
image: 'https://img20.360buyimg.com/jdphoto/s72x72_jfs/t15151/308/1012305375/2300/536ee6ef/5a411466N040a074b.png',
value: '找折扣'
},
{
image: 'https://img10.360buyimg.com/jdphoto/s72x72_jfs/t5872/209/5240187906/2872/8fa98cd/595c3b2aN4155b931.png',
value: '领会员'
},
{
image: 'https://img12.360buyimg.com/jdphoto/s72x72_jfs/t10660/330/203667368/1672/801735d7/59c85643N31e68303.png',
value: '新品首发'
},
{
image: 'https://img14.360buyimg.com/jdphoto/s72x72_jfs/t17251/336/1311038817/3177/72595a07/5ac44618Na1db7b09.png',
value: '领京豆'
},
{
image: 'https://img30.360buyimg.com/jdphoto/s72x72_jfs/t5770/97/5184449507/2423/294d5f95/595c3b4dNbc6bc95d.png',
value: '手机馆'
}
]
} />
)
}
}
运行结果：只有点击索引为0的领取中心才会进行页面跳转，反之提示信息
注：Taro.showToast可以通过image自定义提示图标
遇到的一些问题汇总
1、输入框没有反应
handleChangeName(name) {
this.setState({
name
})
return name;
}
## 在小程序中，如果想改变 value 的值，需要 `return value` 从而改变输入框的当前值
##不加return 的话，你会看到输入时输入框毫无变化。。
2、还有个坑：页面出不来的问题!!
官方示例是这么写的:
export default class Index extends Taro.Component {}
然而，页面一片空白，什么都没有！！
然后改成了：
import React, { Component } from 'react'
export default class Index extends Component {}
一下子就好了！！
3、除此之外，在尝试使用函数式组件时(一个项目同时有类组件和函数式组件)，遇到一个错误：Super expression must either be null or a function
解决办法同样是把 Component 换成 从react中拿出
4、尝试使用hooks写一个小案例，使用AtSwitch 组件做个开关的小demo
代码：
import { AtForm, AtSwitch } from 'taro-ui'
import { useState } from 'react';
function Welcome() {
const [checked,setChecked] =useState(true)
return (
<AtForm>
<AtSwitch title='开启中' checked={checked} onChange={setChecked(!checked)} />
</AtForm>
);
}
export default Welcome;
页面没有显示，控制台报错Too many re-renders. React limits the number of renders to prevent an infini 意思是"太多的被重新呈现。React限制渲染的数量，以防止无限循环"
参考博客：https://blog.csdn.net/weixin_43529196/article/details/109913260
做了改动：
<AtSwitch title={checked?'开启中':'关闭中'} checked={checked} onChange={setChecked.bind(this,!checked)} />
成功解决
5、微信开发者工具调试控制台一直报错WebAssembly.instantiate(): Argument 0 must be a buffer source or a WebAssembly.
解决办法：设置-------项目设置 版本切到2.14.4 ， 不报错了，之后版本再切回去也没报错。
