前言：微信小程序相信大家都不陌生，目前小程序开发主流的框架有微信原生开发，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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

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>
)
1
2
3
4
5

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就是小程序传来的参数，自行格式化就能拿到
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

2.2 小程序间的跳转及传参

小程序之间的跳转传参就简单多了，Taro有一套API供选择，但是不同的API使用的场景也不同，具体的可以点击Taro路由跳转查看。

下面简单介绍一下如何传参以及接收参数吧，以navigateTo为例。

• 传参

Taro.navigateTo({
      //注意：这里的路径也是以"/"开头，否则无效
      url: `/pages//index?id=1`,
})
1
2
3
4

• 接收参数

useEffect(() => {
   let id= Taro.getCurrentInstance().router?.params.id
   console.log(id,'id')
 }, [])

//或者Taro也有专门的HOOKS用来接收参数
useEffect(() => {
	//这里的router相当于 Taro.getCurrentInstance().router
   const router = useRouter()
}, [])

1
2
3
4
5
6
7
8
9
10
11

useRouter及其它hooks介绍请戳这儿！

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
1
2
3
4
5
6
7
8
9
10
11
12

2.4 小程序下拉刷新/上拉加载

这个大家应该不陌生吧，就是在小程序中向上或向下拖动页面，起到刷新数据和加载更多数据的功能。

• 下拉刷新/上拉加载
  需要在 src/app.config.ts 中的window中配置：

window: {
    enablePullDownRefresh: true,
    onReachBottomDistance: 50,  //下拉距离
},
1
2
3
4

思路：页面中监听下拉动作，处理数据，完毕后停止下拉。

import Taro, { usePullDownRefresh,useReachBottom } from '@tarojs/taro'

usePullDownRefresh(() => {
 	console.log('下拉了，日历')
 	//处理数据
  	Taro.stopPullDownRefresh()
})

useReachBottom(() => {
  console.log('上拉了')
  //数据处理
})
1
2
3
4
5
6
7
8
9
10
11
12

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',
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

需要注意的是：如果分享的页面数据来源于上一级，那么分享页面之后相当于直接访问该页面，可能会出现页面空白没有数据的情况，这时候就需要在path里带上参数.

 return {
    title: '标题',
    path: '/pages/index/index?id=1',
  }
1
2
3
4

• 分享朋友圈

在页面的index.config.ts中加上 enableShareTimeline: true,

import Taro, { useShareTimeline} from '@tarojs/taro'

//分享朋友圈
useShareTimeline(() => {
  return {
    title: '标题',
    path: '/pages/index/index',
    imageUrl: '',
  }
})
1
2
3
4
5
6
7
8
9
10

2.6 页面转发分享/长按图片识别

如果想在小程序中分享某个页面给好友，还可以通过Button来实现。 Taro中提供了一些组件，其中就包括Button组件,可以直接调用小程序API。

• 页面转发分享

//只需要设置  openType="share"
<Button
    className="share-img"
    openType="share"
   >
      <Image src={'图片路径'} />
</Button>
1
2
3
4
5
6
7
8

• 长按图片识别

Taro中使用Image引入图片，还可以实现长按识别的功能，如果是二维码，识别后可以直接点击跳转过去。

//设置 showMenuByLongpress={true}
<Image src={'图片路径'} showMenuByLongpress={true} />
1
2

2.7 自定义顶部导航栏

就是去掉小程序自带的右上角的按钮，使用场景如，需要在顶部添加背景图，
只需要在index.config.ts中配置,然后就可以用自定义DOM替代原来的导航栏。

navigationBarBackgroundColor: '#3E7DF8', //背景色
navigationStyle: 'custom', //自定义导航栏
1
2

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 () {
			          //定位失败
			        },
      		})
        }
      })
    ]
  }
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

2.9 订阅消息

详情请点击小程序订阅消息，以 长期订阅消息为例，制作好模板后，拿到模板id，模板就是当订阅消息发送到你的微信上的时候，所要展示的信息及其方式的一种形式。订阅消息之前需要取得用户的授权信息。

//注意：订阅消息需要用到openid,openid是登录之后后端返的
Taro.requestSubscribeMessage({
	  //模板id
	  tmplIds: ['模板id'],
	  success: function (res) {
	    Taro.request({
	      url: `订阅消息的接口`,
	      method: 'POST',
	      timeout: 600000
	    })
	  },
})
1
2
3
4
5
6
7
8
9
10
11
12

2.10 登录流程

小程序的登录流程还是比较麻烦的，官方给的流程图如下: 微信小程序登录

流程相信大家都能看懂，但是实际操作后可能就一头雾水，编者在这一块也是一样，我就根据实际的开发总结下自己的理解，可能会有所纰漏：

小程序的登录方式可能有所差异，编者本次小程序中使用的是微信授权登录，也可能是手机号登录等；
以微信授权登录为例：

/*
	1，检测本地是否存有用户信息；
	2，检测登录态是否过期；
	3，如果没有用户信息或者登录态过期则需重新登录；
	4，点击授权登录按钮，检测用户是否授权获取用户信息；
	5，若未授权，则调起用户信息授权框；
	6，点击授权，调取Taro.login()登录，发送请求拿到openId并保存到本地;
	7，获取用户信息，保存到本地，展示登录后的页面；
*/
1
2
3
4
5
6
7
8
9

三、总结

小程序开发中遇到的问题远不止这些，时间原因先总结这么多，以后如果踩到新的坑了会记录上去。总体而言，小程序上手还是比较简单的，只需要你熟悉Vue/React中的一种，当然Uni我暂时还没用过。
废话不多说了，有问题评论区交流哈!