微信小程序---Taro框架实际开发中的问题汇总
前言：微信小程序相信大家都不陌生，目前小程序开发主流的框架有微信原生开发，uni-app，以及今天的重点Taro。编者自身小程序开发经验也不多，仅针对自身在小程序开发中的问题做一次汇总，望更多像我一样的小白少走 一点弯路。
注意：本篇博客中小程序开发基于Taro框架，使用React + Hooks，有兴趣可以点击链接了解学习!
一、Taro简单介绍
1.1 安装
具体步骤参考Taro安装，官网上都有详细的过程，这里就不多说了。
1.2 目录介绍
安装好之后，可以看到如下的目录结构，我这里使用了typescript,后缀变为了ts.
目录结构介绍：
├── dist 编译结果目录
|
├── config 项目编译配置目录
| ├── index.js 默认配置
| ├── dev.js 开发环境配置
| └── prod.js 生产环境配置
|
├── src 源码目录
| ├── pages 页面文件目录
| | └── index index 页面目录
| | ├── index.js index 页面逻辑
| | ├── index.css index 页面样式
| | └── index.config.js index 页面配置
| |
| ├── app.js 项目入口文件
| ├── app.css 项目总通用样式
| └── app.config.js 项目入口配置
|
├── project.config.json 微信小程序项目配置 project.config.json
├── project.tt.json 字节跳动小程序项目配置 project.tt.json
├── project.swan.json 百度小程序项目配置 project.swan.json
├── project.qq.json QQ 小程序项目配置 project.qq.json
|
├── babel.config.js Babel 配置
├── tsconfig.json TypeScript 配置
├── .eslintrc ESLint 配置
|
└── package.json
1.3 tabBar配置
- tabBar就是我们在小程序底部看到的菜单栏，一般情况下数量不得少于2个，不超过5个。
在Taro中，tabBar的配置是在src/app.config.ts中进行。
- 在Taro中，每次新建一个页面时都需要在src/app.config.ts中的pages中进行注册，否则不生效，
到这里，你就可以正式开始你的小程序开发之旅啦！
二、踩坑之旅
下面总结一下我在小程序开发中遇到的一些问题吧，希望对你们有所帮助，也记录下自己艰辛的心路历程。
2.1 小程序嵌套H5页面
- 对于没接触过过小程序的小白们来说，可能觉得居然可以这样操作，但是的确可以这样操作。
小程序中提供了WebView组件，只需要提供H5页面的地址就可以完成在小程序中嵌套H5页面。
web-view 组件是一个可以用来承载网页的容器，会自动铺满整个小程序页面。个人类型与海外类型的小程序暂不支持使用。
import { WebView } from '@tarojs/components'
return (
<WebView src="H5页面地址"></WebView>
)
webview组件的优缺点同样显著，在实际开发中需要注意是否需要使用。
- 当小程序中使用webview嵌套了H5页面时，可以使用微信原生API和小程序进行交互，微信webview组件，但是要注意，只能使用提供范围内的API，例如小程序和H5之间的跳转传参。
import wx from 'weixin-js-sdk'
//H5跳转到小程序
const lunchToWarnInfo = (content: any) => {
// @ts-ignore
wx.miniProgram.navigateTo({
//注意：此处小程序的页面路径必须以'/'开头，否则无效
url: `小程序的页面路径?参数名=值`,
})
}
//小程序接收参数
import Taro, { useDidShow} from '@tarojs/taro'
useDidShow(() => {
let router = Taro.getCurrentInstance().router?.params?.参数名
console.log(router)
})
//小程序跳转到H5页面’
import { WebView } from '@tarojs/components'
//小程序到H5传参是通过webview添加后缀的形式 eg:?参数名=值
return (
<WebView src="H5页面地址?参数名=值"></WebView>
)
//H5接收参数
import { useLocation } from 'react-router'
const location = useLocation()
const lonLat = location.search //lonLat就是小程序传来的参数，自行格式化就能拿到
2.2 小程序间的跳转及传参
小程序之间的跳转传参就简单多了，Taro有一套API供选择，但是不同的API使用的场景也不同，具体的可以点击Taro路由跳转查看。
下面简单介绍一下如何传参以及接收参数吧，以navigateTo为例。
- 传参
Taro.navigateTo({
//注意：这里的路径也是以"/"开头，否则无效
url: `/pages//index?id=1`,
})
- 接收参数
useEffect(() => {
let id= Taro.getCurrentInstance().router?.params.id
console.log(id,'id')
}, [])
//或者Taro也有专门的HOOKS用来接收参数
useEffect(() => {
//这里的router相当于 Taro.getCurrentInstance().router
const router = useRouter()
}, [])
2.3 小程序回退传参
就是小程序在点击或者触发返回上一级时传参，具体使用场景比如在A页面跳转到B页面，在B页面选择地区信息然后返回到A页面，并且将选择的地区信息传给A页面用以展示。
思路：小程序路由中navigateBack可以控制返回上一级或者上上级，这时需要引入一个页面栈的概念，简单来说那就是小程序发生路由跳转时，它会把跳转的所有页面记录下来，放在一个数组里。我们可以通过控制这个数组来进行传参。
//pages里就包括发生跳转的页面对象，是一个数组
const pages = Taro.getCurrentPages()
//formPage控制数组里的任意一个页面对象
const formPage = pages[pages.length - 2]
formPage.id= 1
//delta=1,表示回退一层
Taro.navigateBack({
delta: 1,
})
//接收参数参考上述 2.2
2.4 小程序下拉刷新/上拉加载
这个大家应该不陌生吧，就是在小程序中向上或向下拖动页面，起到刷新数据和加载更多数据的功能。
- 下拉刷新/上拉加载
需要在 src/app.config.ts 中的window中配置：
window: {
enablePullDownRefresh: true,
onReachBottomDistance: 50, //下拉距离
},
思路：页面中监听下拉动作，处理数据，完毕后停止下拉。
import Taro, { usePullDownRefresh,useReachBottom } from '@tarojs/taro'
usePullDownRefresh(() => {
console.log('下拉了，日历')
//处理数据
Taro.stopPullDownRefresh()
})
useReachBottom(() => {
console.log('上拉了')
//数据处理
})
2.5 分享好友/朋友圈
点击小程序右上方的三个点，即可分享到好友/朋友圈.
- 分享好友
在页面的index.config.ts中加上 enableShareAppMessage: true,
//分享给好友
import Taro, { useShareAppMessage } from '@tarojs/taro'
/*
分享好友有两种场景：1，点击右上角的三个点->点击分享好友; type:button
2，点击页面内的转发按钮 type:menu
*/
useShareAppMessage((res) => {
if (res.from === 'button') {
// 来自页面内转发按钮
console.log(res.target)
}
if(res.from === 'menu'){
//来自右上角的分享好友
console.log(res.target)
}
return {
title: '标题',
path: '/pages/index/index',
}
})
需要注意的是：如果分享的页面数据来源于上一级，那么分享页面之后相当于直接访问该页面，可能会出现页面空白没有数据的情况，这时候就需要在path里带上参数.
return {
title: '标题',
path: '/pages/index/index?id=1',
}
- 分享朋友圈
在页面的index.config.ts中加上 enableShareTimeline: true,
import Taro, { useShareTimeline} from '@tarojs/taro'
//分享朋友圈
useShareTimeline(() => {
return {
title: '标题',
path: '/pages/index/index',
imageUrl: '',
}
})
2.6 页面转发分享/长按图片识别
如果想在小程序中分享某个页面给好友，还可以通过Button来实现。 Taro中提供了一些组件，其中就包括Button组件,可以直接调用小程序API。
- 页面转发分享
//只需要设置 openType="share"
<Button
className="share-img"
openType="share"
>
<Image src={'图片路径'} />
</Button>
- 长按图片识别
Taro中使用Image引入图片，还可以实现长按识别的功能，如果是二维码，识别后可以直接点击跳转过去。
//设置 showMenuByLongpress={true}
<Image src={'图片路径'} showMenuByLongpress={true} />
2.7 自定义顶部导航栏
就是去掉小程序自带的右上角的按钮，使用场景如，需要在顶部添加背景图，
只需要在index.config.ts中配置,然后就可以用自定义DOM替代原来的导航栏。
navigationBarBackgroundColor: '#3E7DF8', //背景色
navigationStyle: 'custom', //自定义导航栏
2.8 弹出授权框
小程序中很多操作需要用户授权后才能够执行，所以要先显示授权框，取得用户的授权信息后再进行后续操作。例如需要获取用户位置信息，先查看用户是否授权，若未授权，则弹出授权框。
Taro.getSetting({
success: function (res) {
console.log(res.authSetting)
if(res.authSetting['scope.userLocation']){
//用户授权过
}else{
//用户未授权过
Taro.authorize({
scope: 'scope.userLocation',
success: function () {
// 用户已经同意小程序使用定位功能
Taro.getLocation({
type: 'wgs84',
success: function (res) {
//定位成功,res包括位置信息，lon.lat等
console.log('res',res)
},
fail: function () {
//定位失败
},
})
}
})
]
}
})
2.9 订阅消息
详情请点击小程序订阅消息，以 长期订阅消息为例，制作好模板后，拿到模板id，模板就是当订阅消息发送到你的微信上的时候，所要展示的信息及其方式的一种形式。订阅消息之前需要取得用户的授权信息。
//注意：订阅消息需要用到openid,openid是登录之后后端返的
Taro.requestSubscribeMessage({
//模板id
tmplIds: ['模板id'],
success: function (res) {
Taro.request({
url: `订阅消息的接口`,
method: 'POST',
timeout: 600000
})
},
})
2.10 登录流程
小程序的登录流程还是比较麻烦的，官方给的流程图如下: 微信小程序登录
流程相信大家都能看懂，但是实际操作后可能就一头雾水，编者在这一块也是一样，我就根据实际的开发总结下自己的理解，可能会有所纰漏：
小程序的登录方式可能有所差异，编者本次小程序中使用的是微信授权登录，也可能是手机号登录等；
以微信授权登录为例：
/*
1，检测本地是否存有用户信息；
2，检测登录态是否过期；
3，如果没有用户信息或者登录态过期则需重新登录；
4，点击授权登录按钮，检测用户是否授权获取用户信息；
5，若未授权，则调起用户信息授权框；
6，点击授权，调取Taro.login()登录，发送请求拿到openId并保存到本地;
7，获取用户信息，保存到本地，展示登录后的页面；
*/
三、总结
小程序开发中遇到的问题远不止这些，时间原因先总结这么多，以后如果踩到新的坑了会记录上去。总体而言，小程序上手还是比较简单的，只需要你熟悉Vue/React中的一种，当然Uni我暂时还没用过。
废话不多说了，有问题评论区交流哈!