taro使用总结

Taro 就是可以用 React 语法写小程序的框架，拥有多端转换能力，一套代码可编译为微信小程序、百度小程序、支付宝小程序、H5、RN等

一、创建项目

# 使用 npm 安装 CLI
$ npm install -g @tarojs/cli

使用命令创建模板项目：

$ taro init myApp

安装依赖

# 进入项目根目录
$ cd myApp

# 使用 yarn 安装依赖
$ yarn

# OR 使用 cnpm 安装依赖
$ cnpm install

# OR 使用 npm 安装依赖
$ npm install

二、运行项目

Taro 编译分为 dev 和 build 模式：

• dev 模式（增加 --watch 参数） 将会监听文件修改。
• build 模式（去掉 --watch 参数） 将不会监听文件修改，并会对代码进行压缩打包。

• npm run dev:运行平台  
  例运行到微信小程序：npm run build:weapp

   

三、项目目录

创建项目页面时需在app.config.js里配置页面

export default {
  pages: [
    'pages/detail/detail',
    'pages/login/index',
    'pages/index/index',
   
  ],
  
  window: {
    backgroundTextStyle: 'light',
    navigationBarBackgroundColor: '#fff',
    navigationBarTitleText: 'WeChat',
    navigationBarTextStyle: 'black'
  }
}

四、生命周期

以hooks为例

1、useDidShow 等同于 componentDidShow 页面生命周期钩子

2、useDidHide   等同于 componentDidHide 页面生命周期钩子

3、usePullDownRefresh 等同于 onPullDownRefresh 页面生命周期钩子

4、useReachBottom   等同于 onReachBottom 页面生命周期钩子

5、useShareAppMessage 等同于 onShareAppMessage 页面生命周期钩子 ，使用时需要在页面的config.js里配置enableShareAppMessage: true

五、页面传参

1、页面跳转

Taro.redirectTo({
   url: `/pages/index/index?mobile=${mobile}`
})

2、获取页面参数

import Taro,{getCurrentInstance,useDidShow} from '@tarojs/taro'
export default function Index(props) {
    const [mobile,setMobile]=useState('')
    useDidShow(() => {
        setMobile(router.params.mobile)
    })
}

六、组件通信

父组件

import Taro,{getCurrentInstance,useDidShow} from '@tarojs/taro'
import InputLabel from '../../components/label/label' //子组件
import {useState,useEffect} from 'react'
import { View, Text ,Input,Button } from '@tarojs/components'
export default function Index(props) {
    const [mobile,setMobile]=useState('')
    let changeData=(e)=>{ //父组件接收子组件事件
        setMobile(e)
     }
    return(
        <View className="body">
            <InputLabel changeData={changeData} edit={edit} mobile={mobile}></InputLabel>
        </View>
    )
     
})

子组件

import Taro,{getCurrentInstance,render,useDidShow} from '@tarojs/taro'
import {useState,useEffect} from 'react'
import { View, Text ,Input,Button } from '@tarojs/components'
export default function InputLabel(props) {
  useDidShow(() => {
    console.log('componentDidShow')
  })
  let changeVal=(e,index)=>{ //子组件向父组件传参
    props.changeData(e.detail.value)
  }
  return(
    <View>
      <Input onInput={(e)=>changeVal(e)}  className='labelInput' value={props.mobile} placeholder='请输入手机号'></Input>
    </View>
  )
}

七、全局变量

在 Taro 中推荐使用 Redux 来进行全局变量的管理，但是对于一些小型的应用， Redux 就可能显得比较重了，这时候如果想使用全局变量，推荐如下使用。

新增一个自行命名的 JS 文件，例如 global_data.js，示例代码如下

const globalData = {}
 
export function set (key, val) {
  globalData[key] = val
}
 
export function get (key) {
  return globalData[key]
}

随后就可以在任意位置进行使用啦

import { set as setGlobalData, get as getGlobalData } from './path/name/global_data'
 
setGlobalData('test', 1)
 
getGlobalData('test')

八、开发注意事项：

• toast在小程序中提示信息最大只能传7个字

• 在小程序中监听input组件数据变化要使用onInput事件，onChange事件只在H5中有效

• span标签在小程序中无效，如果使用了span标签，在编译成小程序时页面不会渲染这个标签，使用的所有标签必须从tarojs/components引用

• 列表循环时需要设置key值，否则页面会报错

• 在 Taro 中尺寸单位建议使用 px、 百分比 %，Taro 默认会对所有单位进行转换。在 Taro 中书写尺寸按照 1:1 的关系来进行书写，即从设计稿上量的长度 100px，那么尺寸书写就是 100px，当转成微信小程序的时候，尺寸将默认转换为 100rpx，当转成 H5 时将默认转换为以 rem 为单位的值。

  如果你希望部分 px 单位不被转换成 rpx 或者 rem ，最简单的做法就是在 px 单位中增加一个大写字母，例如 Px 或者 PX 这样，则会被转换插件忽略。