微信小程序Taro + React开发实践

微信小程序原生开发有一套自己的规范和写法，开发体验十分类似Vue，但如果你想减少学习成本，那么Taro框架是一个在此基础上又封装了一层的轮子，从社区热度到开发体验上都十分优秀，支持React/Vue等框架来开发微信/支付宝等小程序，非常值得一试。

初始化

安装@tarojs/cli

$ npm install -g @tarojs/cli$ yarn global add @tarojs/cli$ cnpm install -g @tarojs/cli

安装成功可以查看Taro版本信息

npm info @tarojs/cli

初始化项目, 选择一个React mobx模板

taro init taro_project_test

编译

使用npm 命令编译运行，发生了一个小插曲竟然提示Error：Cannot find module ‘autoprefixer’, 怀疑taro cli初始化项目时安装依赖有问题。

那就重新安装一下依赖，再编译即可成功构建

编译配置

config/index.js 是通用配置，包含有一些实用配置：

projectName: 项目名
designWidth: 设计稿宽度
deviceRatio: 设计稿转换规则
taro中建议使用px和百分比为单位，Taro会进行转换，小程序时则转换为rpx单位。转换规则为designWidth为标准，比如375，则deviceRatio中增加：‘375’: 2 / 1;
例如我们想在配置中加入alias，

项目配置

路由：app.config.ts pages 属性
分包：subpackages 等等
当主包超过size限制时，可以分包。通过配置实现（当然小程序的资源等都尽可能放到线上）
subpackages: [
{
“root”: “pages-activities”,
“pages”: [
‘aprilfool/index’
]
}
],

开发

使用npm命令进入开发模式，支持热更新。
支持小程序规范的内置组件如等
taro还内置了一些常用组件如Swiper等，代码中引用：import { Swiper, SwiperItem } from ‘@tarojs/components’
获取小程序 DOM

onReady () {
// onReady 触发后才能获取小程序渲染层的节点
Taro.createSelectorQuery().select(‘#only’)
.boundingClientRect()
.exec(res => console.log(res))
}

Taro hooks

useShareAppMessage: 【Breaking】Taro 3.0.3 开始，使用此 Hook 时必须为页面配置 enableShareAppMessage: true。（修改配置文件后请重新编译项目）
useResize 小程序屏幕旋转时触发。等同于 onResize 页面生命周期钩子。。
React hooks：useEffect, useState等

路由

pages配置
Taro.navigateTo({
url: ‘/pages/page/path/name’
})

开发实践

比方说项目中需要开发一个微信获取手机号注册功能，那么我们可以用Button组件的onGetPhoneNumber方法来实现：

<Button type='primary' openType='getPhoneNumber' onGetPhoneNumber={onGetPhoneNumber} style={{ marginTop: 20, background: '#3968cd' }}>微信一键登录</Button>const onGetPhoneNumber = async (value) => {console.log(value, 'onGetPhoneNumber values', 'checked', checked)if (!checked) return false;const { encryptedData, iv, errMsg } = value?.detail || {};if (iv && encryptedData) {Taro.reportAnalytics(EVENT_NAME.auth_operation, { // 日志埋点，小程序后台可查看统计数据[EVENT_ACTIONS_KEYS.grant_auth]: getUserDateKey() // 日期 + openId})const result = await api.register(XXXX)if (!!result) {...}} else {Taro.reportAnalytics(EVENT_NAME.auth_operation, {[EVENT_ACTIONS_KEYS.refuse_auth]: getUserDateKey()})}
}

微信小程序是依赖token进行识别登录状态的，这里也简单记录一下工作中碰到的小程序项目注册页面开发中的注册登录流程：

开发中踩到的坑

和网页不一样，小程序返回上一页时页面是不会重新渲染的
需求方希望知道小程序码扫码时带的推荐码有没有配置成功。。。即url中的参数是啥，在开发版开启调试模式再去扫码可以临时开启正式版的调试模式（。。。）

微信小程序Taro + React开发实践相关推荐

微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.3 rich-text 组件，以及如何单击预览它的节点图片并保存
一.rich-text组件 nodes: [{name: 'div',attrs: {class: 'div_class',style: 'line-height: 20px;padding:20px ...
微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.9 页面链接组件，如何自定义一个导航栏？
一.小程序中的导航组件 functional-page-navigator 仅在插件中有效,用于跳转到插件功能页. navigator 小程序标准的导航组件小程序插件是对一些js接口.自定义组件或页 ...
微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.6 scroll-view组件，在小程序中如何实现滚动锚定，如何渲染一个滚动的长列表？
scroll-view 是一个可以滚动的视图区域的容器组件. 一.重要属性 scroll-view 的滚动属性,实现了两套功能左右或上下滚动下拉更新 1.1 与滚动有关的属性: scroll-x ...
微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.10 image组件，如何实现图片懒加载？
一.与image组件有关的技术问题 1.1 什么是WebP? webp是image组件的一个boolean属性,开启这个属性之后,代表url可以设置webp这种格式的图片.webP是一种同时提供了有损 ...
微信小程序全栈开发实践第二章微信小程序组件介绍及使用 -- 2.5 可移动容器及可移动区域，以及如何实现侧滑删除功能
一.学习使用moveable-view与movable-area组件 1.1 关于元素的定位 static 静态定位元素在页面流动的当前位置定位,这个时候它的top.left.right.botto ...
第一个微信小程序 Taro + React
目录 1.新建一个taro项目 2.安装微信开发者工具 3.导入项目 4.自定页面 1.新建一个taro项目新建一个文件夹,在该文件夹下打开cmd,执行命令 npm install -g @taro ...
微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.5 网络接口简介（五）基于Promise+await、async关键字改写登录模块
零.回顾在上节课我们主要实践练习了Promise的三个方法,包括any.all.race. 现在我们对Promise变成已经有了一个大致的了解. 这节课我们尝试将登录模块使用Promise编程方式进 ...
微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.7 网络接口简介（七）学习EventChannel对象
零.回顾在之前我们自定义实现picker-view组件的时候, 曾经使用过一个pop-up的自定义组件, 这个组件可以在底部滑入一个面板, 现在我们把登录按钮放在底部滑入的面板之上, 然后在完成登录 ...
微信小程序全栈开发实践第三章微信小程序开发常用的API介绍及使用 -- 3.6 网络接口简介（六）关于Page页面隐藏代码执行及Promise对象catch处理的补充
零.回顾在上节课我们主要是基于 Promise 加 await.async关键字改写了登录模块代码, 但是我们在自动登录这一块的代码仍然有问题,这节课我们看一下, 如何在接口调用中实现微信用户的自动 ...

微信小程序Taro + React开发实践

微信小程序Taro + React开发实践

初始化

编译

编译配置

项目配置

开发

Taro hooks

路由

开发实践

开发中踩到的坑

微信小程序Taro + React开发实践相关推荐

最新文章

热门文章