前言：微信小程序相信大家都不陌生，目前小程序開(kāi)發(fā)主流的框架有微信原生開(kāi)發(fā)，uni-app，以及今天的重點(diǎn)Taro。編者自身小程序開(kāi)發(fā)經(jīng)驗(yàn)也不多，僅針對(duì)自身在小程序開(kāi)發(fā)中的問(wèn)題做一次匯總，望更多像我一樣的小白少走 一點(diǎn)彎路。
注意：本篇博客中小程序開(kāi)發(fā)基于Taro框架，使用React + Hooks，有興趣可以點(diǎn)擊鏈接了解學(xué)習(xí)!
一、Taro簡(jiǎn)單介紹
1.1 安裝
具體步驟參考Taro安裝，官網(wǎng)上都有詳細(xì)的過(guò)程，這里就不多說(shuō)了。
1.2 目錄介紹
安裝好之后，可以看到如下的目錄結(jié)構(gòu)，我這里使用了typescript,后綴變?yōu)榱藅s.
目錄結(jié)構(gòu)介紹：
├── dist 編譯結(jié)果目錄
|
├── config 項(xiàng)目編譯配置目錄
| ├── index.js 默認(rèn)配置
| ├── dev.js 開(kāi)發(fā)環(huán)境配置
| └── prod.js 生產(chǎn)環(huán)境配置
|
├── src 源碼目錄
| ├── pages 頁(yè)面文件目錄
| | └── index index 頁(yè)面目錄
| | ├── index.js index 頁(yè)面邏輯
| | ├── index.css index 頁(yè)面樣式
| | └── index.config.js index 頁(yè)面配置
| |
| ├── app.js 項(xiàng)目入口文件
| ├── app.css 項(xiàng)目總通用樣式
| └── app.config.js 項(xiàng)目入口配置
|
├── project.config.json 微信小程序項(xiàng)目配置 project.config.json
├── project.tt.json 字節(jié)跳動(dòng)小程序項(xiàng)目配置 project.tt.json
├── project.swan.json 百度小程序項(xiàng)目配置 project.swan.json
├── project.qq.json QQ 小程序項(xiàng)目配置 project.qq.json
|
├── babel.config.js Babel 配置
├── tsconfig.json TypeScript 配置
├── .eslintrc ESLint 配置
|
└── package.json
1.3 tabBar配置
- tabBar就是我們?cè)谛〕绦虻撞靠吹降牟藛螜?，一般情況下數(shù)量不得少于2個(gè)，不超過(guò)5個(gè)。
在Taro中，tabBar的配置是在src/app.config.ts中進(jìn)行。
- 在Taro中，每次新建一個(gè)頁(yè)面時(shí)都需要在src/app.config.ts中的pages中進(jìn)行注冊(cè)，否則不生效，
到這里，你就可以正式開(kāi)始你的小程序開(kāi)發(fā)之旅啦！
二、踩坑之旅
下面總結(jié)一下我在小程序開(kāi)發(fā)中遇到的一些問(wèn)題吧，希望對(duì)你們有所幫助，也記錄下自己艱辛的心路歷程。
2.1 小程序嵌套H5頁(yè)面
- 對(duì)于沒(méi)接觸過(guò)過(guò)小程序的小白們來(lái)說(shuō)，可能覺(jué)得居然可以這樣操作，但是的確可以這樣操作。
小程序中提供了WebView組件，只需要提供H5頁(yè)面的地址就可以完成在小程序中嵌套H5頁(yè)面。
web-view 組件是一個(gè)可以用來(lái)承載網(wǎng)頁(yè)的容器，會(huì)自動(dòng)鋪滿整個(gè)小程序頁(yè)面。個(gè)人類型與海外類型的小程序暫不支持使用。
import { WebView } from '@tarojs/components'
return (
<WebView src="H5頁(yè)面地址"></WebView>
)
webview組件的優(yōu)缺點(diǎn)同樣顯著，在實(shí)際開(kāi)發(fā)中需要注意是否需要使用。
- 當(dāng)小程序中使用webview嵌套了H5頁(yè)面時(shí)，可以使用微信原生API和小程序進(jìn)行交互，微信webview組件，但是要注意，只能使用提供范圍內(nèi)的API，例如小程序和H5之間的跳轉(zhuǎn)傳參。
import wx from 'weixin-js-sdk'
//H5跳轉(zhuǎn)到小程序
const lunchToWarnInfo = (content: any) => {
// @ts-ignore
wx.miniProgram.navigateTo({
//注意：此處小程序的頁(yè)面路徑必須以'/'開(kāi)頭，否則無(wú)效
url: `小程序的頁(yè)面路徑?參數(shù)名=值`,
})
}
//小程序接收參數(shù)
import Taro, { useDidShow} from '@tarojs/taro'
useDidShow(() => {
let router = Taro.getCurrentInstance().router?.params?.參數(shù)名
console.log(router)
})
//小程序跳轉(zhuǎn)到H5頁(yè)面’
import { WebView } from '@tarojs/components'
//小程序到H5傳參是通過(guò)webview添加后綴的形式 eg:?參數(shù)名=值
return (
<WebView src="H5頁(yè)面地址?參數(shù)名=值"></WebView>
)
//H5接收參數(shù)
import { useLocation } from 'react-router'
const location = useLocation()
const lonLat = location.search //lonLat就是小程序傳來(lái)的參數(shù)，自行格式化就能拿到
2.2 小程序間的跳轉(zhuǎn)及傳參
小程序之間的跳轉(zhuǎn)傳參就簡(jiǎn)單多了，Taro有一套API供選擇，但是不同的API使用的場(chǎng)景也不同，具體的可以點(diǎn)擊Taro路由跳轉(zhuǎn)查看。
下面簡(jiǎn)單介紹一下如何傳參以及接收參數(shù)吧，以navigateTo為例。
- 傳參
Taro.navigateTo({
//注意：這里的路徑也是以"/"開(kāi)頭，否則無(wú)效
url: `/pages//index?id=1`,
})
- 接收參數(shù)
useEffect(() => {
let id= Taro.getCurrentInstance().router?.params.id
console.log(id,'id')
}, [])
//或者Taro也有專門的HOOKS用來(lái)接收參數(shù)
useEffect(() => {
//這里的router相當(dāng)于 Taro.getCurrentInstance().router
const router = useRouter()
}, [])
useRouter及其它hooks介紹請(qǐng)戳這兒！
2.3 小程序回退傳參
就是小程序在點(diǎn)擊或者觸發(fā)返回上一級(jí)時(shí)傳參，具體使用場(chǎng)景比如在A頁(yè)面跳轉(zhuǎn)到B頁(yè)面，在B頁(yè)面選擇地區(qū)信息然后返回到A頁(yè)面，并且將選擇的地區(qū)信息傳給A頁(yè)面用以展示。
思路：小程序路由中navigateBack可以控制返回上一級(jí)或者上上級(jí)，這時(shí)需要引入一個(gè)頁(yè)面棧的概念，簡(jiǎn)單來(lái)說(shuō)那就是小程序發(fā)生路由跳轉(zhuǎn)時(shí)，它會(huì)把跳轉(zhuǎn)的所有頁(yè)面記錄下來(lái)，放在一個(gè)數(shù)組里。我們可以通過(guò)控制這個(gè)數(shù)組來(lái)進(jìn)行傳參。
//pages里就包括發(fā)生跳轉(zhuǎn)的頁(yè)面對(duì)象，是一個(gè)數(shù)組
const pages = Taro.getCurrentPages()
//formPage控制數(shù)組里的任意一個(gè)頁(yè)面對(duì)象
const formPage = pages[pages.length - 2]
formPage.id= 1
//delta=1,表示回退一層
Taro.navigateBack({
delta: 1,
})
//接收參數(shù)參考上述 2.2
2.4 小程序下拉刷新/上拉加載
這個(gè)大家應(yīng)該不陌生吧，就是在小程序中向上或向下拖動(dòng)頁(yè)面，起到刷新數(shù)據(jù)和加載更多數(shù)據(jù)的功能。
- 下拉刷新/上拉加載
需要在 src/app.config.ts 中的window中配置：
window: {
enablePullDownRefresh: true,
onReachBottomDistance: 50, //下拉距離
},
思路：頁(yè)面中監(jiān)聽(tīng)下拉動(dòng)作，處理數(shù)據(jù)，完畢后停止下拉。
import Taro, { usePullDownRefresh,useReachBottom } from '@tarojs/taro'
usePullDownRefresh(() => {
console.log('下拉了，日歷')
//處理數(shù)據(jù)
Taro.stopPullDownRefresh()
})
useReachBottom(() => {
console.log('上拉了')
//數(shù)據(jù)處理
})
2.5 分享好友/朋友圈
點(diǎn)擊小程序右上方的三個(gè)點(diǎn)，即可分享到好友/朋友圈.
- 分享好友
在頁(yè)面的index.config.ts中加上 enableShareAppMessage: true,
//分享給好友
import Taro, { useShareAppMessage } from '@tarojs/taro'
/*
分享好友有兩種場(chǎng)景：1，點(diǎn)擊右上角的三個(gè)點(diǎn)->點(diǎn)擊分享好友; type:button
2，點(diǎn)擊頁(yè)面內(nèi)的轉(zhuǎn)發(fā)按鈕 type:menu
*/
useShareAppMessage((res) => {
if (res.from === 'button') {
// 來(lái)自頁(yè)面內(nèi)轉(zhuǎn)發(fā)按鈕
console.log(res.target)
}
if(res.from === 'menu'){
//來(lái)自右上角的分享好友
console.log(res.target)
}
return {
title: '標(biāo)題',
path: '/pages/index/index',
}
})
需要注意的是：如果分享的頁(yè)面數(shù)據(jù)來(lái)源于上一級(jí)，那么分享頁(yè)面之后相當(dāng)于直接訪問(wèn)該頁(yè)面，可能會(huì)出現(xiàn)頁(yè)面空白沒(méi)有數(shù)據(jù)的情況，這時(shí)候就需要在path里帶上參數(shù).
return {
title: '標(biāo)題',
path: '/pages/index/index?id=1',
}
- 分享朋友圈
在頁(yè)面的index.config.ts中加上 enableShareTimeline: true,
import Taro, { useShareTimeline} from '@tarojs/taro'
//分享朋友圈
useShareTimeline(() => {
return {
title: '標(biāo)題',
path: '/pages/index/index',
imageUrl: '',
}
})
2.6 頁(yè)面轉(zhuǎn)發(fā)分享/長(zhǎng)按圖片識(shí)別
如果想在小程序中分享某個(gè)頁(yè)面給好友，還可以通過(guò)Button來(lái)實(shí)現(xiàn)。 Taro中提供了一些組件，其中就包括Button組件,可以直接調(diào)用小程序API。
- 頁(yè)面轉(zhuǎn)發(fā)分享
//只需要設(shè)置 openType="share"
<Button
className="share-img"
openType="share"
>
<Image src={'圖片路徑'} />
</Button>
- 長(zhǎng)按圖片識(shí)別
Taro中使用Image引入圖片，還可以實(shí)現(xiàn)長(zhǎng)按識(shí)別的功能，如果是二維碼，識(shí)別后可以直接點(diǎn)擊跳轉(zhuǎn)過(guò)去。
//設(shè)置 showMenuByLongpress={true}
<Image src={'圖片路徑'} showMenuByLongpress={true} />
2.7 自定義頂部導(dǎo)航欄
就是去掉小程序自帶的右上角的按鈕，使用場(chǎng)景如，需要在頂部添加背景圖，
只需要在index.config.ts中配置,然后就可以用自定義DOM替代原來(lái)的導(dǎo)航欄。
navigationBarBackgroundColor: '#3E7DF8', //背景色
navigationStyle: 'custom', //自定義導(dǎo)航欄
2.8 彈出授權(quán)框
小程序中很多操作需要用戶授權(quán)后才能夠執(zhí)行，所以要先顯示授權(quán)框，取得用戶的授權(quán)信息后再進(jìn)行后續(xù)操作。例如需要獲取用戶位置信息，先查看用戶是否授權(quán)，若未授權(quán)，則彈出授權(quán)框。
Taro.getSetting({
success: function (res) {
console.log(res.authSetting)
if(res.authSetting['scope.userLocation']){
//用戶授權(quán)過(guò)
}else{
//用戶未授權(quán)過(guò)
Taro.authorize({
scope: 'scope.userLocation',
success: function () {
// 用戶已經(jīng)同意小程序使用定位功能
Taro.getLocation({
type: 'wgs84',
success: function (res) {
//定位成功,res包括位置信息，lon.lat等
console.log('res',res)
},
fail: function () {
//定位失敗
},
})
}
})
]
}
})
2.9 訂閱消息
詳情請(qǐng)點(diǎn)擊小程序訂閱消息，以 長(zhǎng)期訂閱消息為例，制作好模板后，拿到模板id，模板就是當(dāng)訂閱消息發(fā)送到你的微信上的時(shí)候，所要展示的信息及其方式的一種形式。訂閱消息之前需要取得用戶的授權(quán)信息。
//注意：訂閱消息需要用到openid,openid是登錄之后后端返的
Taro.requestSubscribeMessage({
//模板id
tmplIds: ['模板id'],
success: function (res) {
Taro.request({
url: `訂閱消息的接口`,
method: 'POST',
timeout: 600000
})
},
})
2.10 登錄流程
小程序的登錄流程還是比較麻煩的，官方給的流程圖如下: 微信小程序登錄
流程相信大家都能看懂，但是實(shí)際操作后可能就一頭霧水，編者在這一塊也是一樣，我就根據(jù)實(shí)際的開(kāi)發(fā)總結(jié)下自己的理解，可能會(huì)有所紕漏：
小程序的登錄方式可能有所差異，編者本次小程序中使用的是微信授權(quán)登錄，也可能是手機(jī)號(hào)登錄等；
以微信授權(quán)登錄為例：文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-561364.html
/*
1，檢測(cè)本地是否存有用戶信息；
2，檢測(cè)登錄態(tài)是否過(guò)期；
3，如果沒(méi)有用戶信息或者登錄態(tài)過(guò)期則需重新登錄；
4，點(diǎn)擊授權(quán)登錄按鈕，檢測(cè)用戶是否授權(quán)獲取用戶信息；
5，若未授權(quán)，則調(diào)起用戶信息授權(quán)框；
6，點(diǎn)擊授權(quán)，調(diào)取Taro.login()登錄，發(fā)送請(qǐng)求拿到openId并保存到本地;
7，獲取用戶信息，保存到本地，展示登錄后的頁(yè)面；
*/
三、總結(jié)
小程序開(kāi)發(fā)中遇到的問(wèn)題遠(yuǎn)不止這些，時(shí)間原因先總結(jié)這么多，以后如果踩到新的坑了會(huì)記錄上去。總體而言，小程序上手還是比較簡(jiǎn)單的，只需要你熟悉Vue/React中的一種，當(dāng)然Uni我暫時(shí)還沒(méi)用過(guò)。
廢話不多說(shuō)了，有問(wèn)題評(píng)論區(qū)交流哈!文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-561364.html
到了這里，關(guān)于微信小程序--Taro框架實(shí)際開(kāi)發(fā)中的問(wèn)題匯總的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
