安装配置
官网 https://nervjs.github.io/taro/
1.先全局安装@tarojs/cli
npm install -g @tarojs/cli
2.之后我们初始化一个名为myApp
的项目:
taro init myApp
3.在微信小程序客户端运行:
npm run dev:weapp
taro-ui
官方文档:https://taro-ui.aotu.io/#/
4.项目安装时 安装taro-ui
使用 cnpm install taro-ui
5.taro可以使用小程序的api方法,比如:
componentDidMount () {
var that = this;
wx.getSystemInfo({
success: function(res) {
console.log(res.windowHeight);
that.setState({
height: res.windowHeight+'px'
})
},
})
}
可以获取屏幕可见区域的高度。
6.调用其他组件:
比如页面需要调用的
import Tabone这个页面
import Tabone from '../tabone/index'
,Tabone页面需要重新建一个与当前页面同级的文件夹,使转化为微信小程序时也能生成基本的四个文件。
Tabone则是需要使用到的页面。
7.
需要使用到的自带控件需要通过头文件引入:
import { View,Text } from '@tarojs/components'
8.
点击事件,类似React的点击事件的写法
show方法则为调用的方法。
如果方法带参数 则
方法:
show(type){
console.log(type) //1
}
9.
新建一个page页 只需要在taro框架里 新建一个与index同级的文件夹,新建新的jsx文件,然后在app.js里配置
然后再写这个组件,要不再编译的时候会找不到这个页
// app.js
config = {
pages: [
'pages/index/index',
'pages/detail/index'
],
...
}
然后在detail.js文件里,
export default class Detail extends Component 修改class后的参数即可,保持class的类名是唯一的。
10.
taro的路由跳转
Taro.navigateTo({ //
url: '/pages/showone/index'
})
11.图片的src最好在页面import路径,不是在img标签里直接写路径,
比如import banner from '../../assets/banner.png'
且命名不能带数字 banner1 则报错
12.
遇到的问题以及解决方法:
Source and destination must not be the same.
在写tabbar之前,首先将需要用到的tabbar的几个页面添加在pages中,并且在app.js的pages添加相应的js路径,
注意:
config = {
navigationBarTitleText: '首页'
}
navigationBarTitleText的内容需要改变,不然会报错,然后再写tabbar添加相应的页面。