taro小程序开发

安装配置
官网 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则是需要使用到的页面。

需要使用到的自带控件需要通过头文件引入：

import { View,Text } from '@tarojs/components'

点击事件，类似React的点击事件的写法

show方法则为调用的方法。

如果方法带参数则

方法：

show(type){

console.log(type) //1

}

新建一个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添加相应的页面。

猜你喜欢