Taro 使用指南

2019-04-13 本文已影响0人风之化身呀

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

1、入门

1.1、安装 CLI 及项目初始化

npm install -g @tarojs/cli
taro init 项目名

Taro初始化项目.png

可以选择使用 SCSS 、TS、Redux

1.2、编译至各种平台

// 编译为小程序
npm run dev:weapp
npm run build:weapp
// 编译为 H5
npm run dev:h5
// 编译为 RN
npm run dev:rn

编译为小程序时，小程序代码位于 dist 目录下

1.3、微信小程序须知

小程序注册
注册地址，注意一个邮箱只能注册一个小程序
小程序后台
后台地址，后台可查看当前小程序版本，添加开发者，查看小程序 AppID 和 AppSecret 等功能
小程序开发者工具
下载地址
小程序开发流程
1、在开发者工具中新建项目，填入对应的AppID
2、在小程序后台配置服务器域名（开发-服务器域名）
小程序发布流程
1、在开发者工具中上传代码
2、在管理后台-版本管理-开发版本中提交审核，注意提交审核前可先生成体验版，确认体验版没问题后再提交审核

2、注意点

－由于 Taro 编译后的代码已经经过了转义和压缩，因此还需要注意微信开发者工具的项目设置

微信开发者工具配置.png

只能在ｒｅｎｄｅｒ里使用ＪＳＸ语法
不能在包含 JSX 元素的 map 循环中使用 if 表达式
尽量在 map 循环中使用条件表达式或逻辑表达式
不能使用 Array.map 之外的方法操作 JSX 数组
先处理好需要遍历的数组，然后再用处理好的数组调用 map 方法。
不能在 JSX 参数中使用匿名函数
使用 bind 或类参数绑定函数。
不能在 JSX 参数中使用对象展开符
开发者自行赋值：

<View {...props} />　 // wrong
<View id={id} title={title} />  // ok

不允许在 JSX 参数（props）中传入 JSX 元素
不支持无状态组件（Stateless Component)
函数名驼峰，且不能包含数字，不能以下划线开始或结尾以及长度不超过２０
必须使用单引号，不支持双引号
对于process.env，建议直接书写process.env.NODE_ENV，而不是解构
组件传递函数属性名以 on 开头
小程序端不要将在模板中用到的数据设置为 undefined
小程序端不要在组件中打印 this.props.children
组件属性传递注意
不要以 id、class、style 作为自定义组件的属性与内部 state 的名称，因为这些属性名在微信小程序中会丢失。
组件 state 与 props 里字段重名的问题
不要在 state 与 props 上用同名的字段，因为这些被字段在微信小程序中都会挂在 data 上。
小程序中页面生命周期 componentWillMount 不一致问题
组件的 constructor 与 render 提前调用

3、Taro实战

3.1、相关库介绍

@tarojs/taro
taro 核心库，相当于 react

import Taro, { Component } from '@tarojs/taro'
class App extends Component {}
Taro.render(<App />, document.getElementById('app'))

@tarojs/redux
taro 状态管理辅助库，相当于 react-redux

import { Provider,connect  } from '@tarojs/redux'

@tarojs/components
taro 为屏蔽多端差异而制定的标准组件库，在taro中不能直接写常规的HTML标签，而必须用这个组件库里的标签，就像写RN一样：

import { View, Button, Text } from "@tarojs/components";
<View className='index'>
   <Button className='add_btn' onClick={this.props.add}>
       +
   </Button>
   <Text> Hello, World </Text>
</View>

@tarojs/async-await
taro 支持 async await 写法库
taro-ui
taro 为屏蔽多端差异而制定的业务组件库，比如 Tabs，Modal，Menu之类的常用的业务组件

     import { AtTabs, AtTabsPane } from "taro-ui";
     <AtTabs
        current={this.state.current}
        tabList={tabList}
        onClick={this.handleClick.bind(this)}
      >
        <AtTabsPane current={this.state.current} index={0}>
          <AllContainer />
        </AtTabsPane>
        <AtTabsPane current={this.state.current} index={1}>
          <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>
            标签页二的内容
          </View>
        </AtTabsPane>
        <AtTabsPane current={this.state.current} index={2}>
          <View style='padding: 100px 50px;background-color: #FAFBFC;text-align: center;'>
            标签页三的内容
          </View>
        </AtTabsPane>
      </AtTabs>

3.2、常用工具类封装

本地存储

import Taro from "@tarojs/taro";

class Store {
  removeItem(key) {
    return Taro.removeStorageSync(key);
  }
  getItem(key) {
    return Taro.getStorageSync(key);
  }
  setItem(key, value) {
    return Taro.setStorageSync(key, value);
  }
  clear() {
    return Taro.clearStorageSync();
  }
}

export default  new Store();

请求封装

import Taro from '@tarojs/taro'
import {
  API_USER_LOGIN
} from '@constants/api'

const CODE_SUCCESS = '200'
const CODE_AUTH_EXPIRED = '600'

function getStorage(key) {
  return Taro.getStorage({
    key
  }).then(res => res.data).catch(() => '')
}

function updateStorage(data = {}) {
  return Promise.all([
    Taro.setStorage({
      key: 'token',
      data: data['3rdSession'] || ''
    }),
    Taro.setStorage({
      key: 'uid',
      data: data['uid'] || ''
    })
  ])
}

/**
 * 简易封装网络请求
 * // NOTE 需要注意 RN 不支持 *StorageSync，此处用 async/await 解决
 * @param {*} options
 */
export default async function fetch(options) {
  const {
    url,
    payload,
    method = 'GET',
    showToast = true
  } = options
  const token = await getStorage('token')
  const header = token ? {
    'WX-PIN-SESSION': token,
    'X-WX-3RD-Session': token
  } : {}
  if (method === 'POST') {
    header['content-type'] = 'application/json'
  }

  return Taro.request({
    url,
    method,
    data: payload,
    header
  }).then(async (res) => {
    const {
      code,
      data
    } = res.data
    if (code !== CODE_SUCCESS) {
      if (code === CODE_AUTH_EXPIRED) {
        await updateStorage({})
      }
      return Promise.reject(res.data)
    }

    if (url === API_USER_LOGIN) {
      await updateStorage(data)
    }
    return data
  }).catch((err) => {
    const defaultMsg = err.code === CODE_AUTH_EXPIRED ? '登录失效' : '请求异常'
    if (showToast) {
      Taro.showToast({
        title: err && err.errorMsg || defaultMsg,
        icon: 'none'
      })
    }

    return Promise.reject({
      message: defaultMsg,
      ...err
    })
  })
}

3.3 常用API介绍

授权

<Button
   className='btn-max-w'
   plain
   type='primary'
   open-type='getUserInfo'
   onGetUserInfo={this.handleUserInfo}
>
    授权
</Button>

获取位置

Taro.getLocation({type:'gcj02 '}).then(data=>console.log(data))

操作反馈

   Taro.showToast({
      title: "成功",
      icon: "success"
    });

    Taro.setTabBarBadge({ index: 1, text: "1" });

    Taro.showLoading({
      title: "加载中..."
    }).then(res =>
      setTimeout(() => {
        Taro.hideLoading();
      }, 2000)
    );

4、其他问题记录

设置页面全屏

// app.scss
page {
  height: 100%;
}

Css Modules 支持
配置 config/index.js 下的 h5 和 weapp 中的 module.cssModules 即可

        // css modules 功能开关与相关配置
        cssModules: {
          enable: true, // 默认为 false，如需使用 css modules 功能，则设为 true
          config: {
            namingPattern: 'module', // 转换模式，取值为 global/module，下文详细说明
            generateScopedName: '[name]__[local]___[hash:base64:5]'
          }
        }

配置路径别名
配置 config/index.js 下的 alias

alias: {
    'components': path.resolve(__dirname, '..', 'src/components'),
    'pages': path.resolve(__dirname, '..', 'src/pages'),
    'store': path.resolve(__dirname, '..', 'src/store'),
    'constants': path.resolve(__dirname, '..', 'src/constants'),
    'api': path.resolve(__dirname, '..', 'src/api'),
    'assets': path.resolve(__dirname, '..', 'src/assets'),
    'utils': path.resolve(__dirname, '..', 'src/utils'),
  },

4、个人开发的 TaroCnode 小程序

代码地址：https://github.com/fengyinchao/TaroCnode
预览