Taro + React Hooks小程序

写在前面，笔者才疏学浅，写此文章仅做参考！不对之处，敬请海涵!

Taro 简介：京东凹凸实验室出品，Taro 3 可以支持转换到 H5、ReactNative 以及任意小程序平台。此文的写作用意仅以记录使用 Taro+React Hooks 开发小程序所遇到的难以及技巧。

开发前需要了解的知识：React Hooks、微信小程序语法等

安装

详细的安装步骤可以点击 Taro

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

# 使用命令创建模板项目
taro init myApp(your project name)

# 进入项目根目录
$ cd myApp

# 使用 npm 安装依赖
$ npm install

# 编译运行 具体编译成 xx 小程序 可以查看目录下的 package.json 文件中 scripts 属性
$ npm run dev:weapp
$ npm run build:weapp

安装完项目后，如果是微信小程序，还需安装微信开发者工具，安装后，再打开编译运行的项目，就可以看到效果了。一定要编译运行，将 Taro 程序装换成微信小程序的语法，才能运行成功。

项目说明

目录结构差异

// 原生微信小程序
- pages
    - index
        - index.js
        - index.json
        - index.wxml
        - index.wxss
// Taro 开发小程序项目目录
- pages
    - index
        - index.config.js
        - index.jsx
        - index.less

注意：微信小程序标签和 html 标签有区别：div -> view，span -> text 等等，而在 Taro 中要想编译成多端小程序，要将原生的标签首字母大写 view -> View ，text -> Text

UI 分离

有时候一个页面逻辑比较复杂，就可以考虑将 UI 分离，通过 props 传递参数

card UI

// card 组件
const Card = props => {
  return (
    <View className="card">
      <View className="flex_justcontent_between title">
        <View>
          {props.title}
        </View>
        <Text>{props.number}</Text>
      </View>
     </View>
    );
};
export default Card;

在需要 card 组件的页面引入

import Card from "../../components/Card";
...
return(
    <Card
      title={title}
      number={number}
    />)
...

钩子函数

开发小程序的过程中，笔者常用的钩子函数是：

import { useState, useEffect } from "react";
import Taro, { useShareAppMessage, useShareTimeline } from "@tarojs/taro";

粗暴易懂的说法：

useState 定义变量
useEffect 页面初始的生命周期函数主要进行初始操作
Taro 用来替换微信小程序 wx 写法，例如跳转 wx.navigateTo 改成 Taro.navigateTo
useShareAppMessage、useShareTimeline 这两个是允许小程序分享给好友和分享至朋友圈

一定要多看文档特别是使用 Hooks 进行开发 Hooks文档地址

微信小程序的一些坑

现在遇到的坑，主要是用户登录授权模块，因为腾讯的一纸公告，导致如今开发的小程序不能够静默授权获取用户手机号。需要需要通过用户点击授权登录按钮，获得一个向量和加密数据给后端，让后端解析后再返回手机号。

// 微信开发者文档 说明是通过 一个按钮 调用原生的事件
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
getPhoneNumber (e) {
console.log(e.detail.errMsg)
console.log(e.detail.iv)
console.log(e.detail.encryptedData)
}

使用Hooks开发，会遇到原生小程序的一些事件，没办法处理。微信开发者文档

// 使用 hooks 开发时 需要修改一下
import { useEffect, useRef } from "react";

function Register(){
 const userPhoneNumberButton = useRef();
   useEffect(() => {
    // 登录  
    Taro.login({
      success(res) {
        getToken(res.code);
      }
    });
    // 注册事件
    userPhoneNumberButton.current.addEventListener(
      "getPhoneNumber",
      getPhoneNumber
    );
    return () =>
      // 解绑事件
      userPhoneNumberButton.current.removeEventListener(
        "getPhoneNumber",
        onClick,
        false
      );
  }, []);
  
  const getPhoneNumber = e => {
      console.log(e.detail.errMsg)
      console.log(e.detail.iv)
      console.log(e.detail.encryptedData)
  };
  
  return (
        <Button
        className="myButton"
        type="primary"
        openType="getPhoneNumber"
        ref={userPhoneNumberButton}
        >
            微信用户一键登录
        </Button>
  )
}

总结

时光流逝，不舍昼夜。万物生长，从不停歇。我们也随着时光的脚步，辞别七月，走进八月。回望过往，不管是遗憾、失落，还是满足、欣喜，过去的都已过去。新的八月，愿你用更加努力的姿态，去遇见更好的自己。

Taro+React Hooks小程序