本文同步本人掘金平臺(tái)的文章：https://juejin.cn/post/6986465633114259469
最近，有個(gè)需求需要開(kāi)發(fā)h5應(yīng)用和微信小程序。如果針對(duì)不同的平臺(tái)開(kāi)發(fā)自己的一套代碼，那將是一件很糟糕的事情：如果下次需要兼容支付寶小程序、快應(yīng)用，那工作量隨著平臺(tái)的添加而快速增加。所以我們選擇了uni-app開(kāi)發(fā)。
uni-app 是一個(gè)使用 Vue.js 開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)。
工具要求
- 安裝微信開(kāi)發(fā)者工具穩(wěn)定版
- 安裝HBuilderX極客開(kāi)發(fā)工具
- 谷歌瀏覽器/火狐瀏覽器/…
新建項(xiàng)目
這里可直接參考官網(wǎng)的創(chuàng)建uni-app。
1. 文件 => 新建 => 項(xiàng)目2. 選擇uni-app => 填寫(xiě)項(xiàng)目的名稱 => 選擇項(xiàng)目的存放位置 => 選擇uni-app項(xiàng)目模版 => 點(diǎn)擊創(chuàng)建復(fù)制代碼
開(kāi)啟h5和微信小程序
開(kāi)啟h5：
開(kāi)啟微信小程序：
示例：是Mac配置
- 配置微信開(kāi)發(fā)者工具路徑
- 開(kāi)啟微信小程序的安全端口
- 設(shè)置外部web服務(wù)調(diào)用url，格式：http://本地ip:端口號(hào)
- 吊起微信開(kāi)發(fā)工具
開(kāi)發(fā)
接下來(lái)就是對(duì)需求的開(kāi)發(fā)了，嗯～
都是搬磚的事情，我們簡(jiǎn)單聊聊其中需要注意的點(diǎn)??。
1. 尺寸單位
uni-app支持的通用css單位包括 px、rpx。
px 和 rpx之間的轉(zhuǎn)換關(guān)系如下：
設(shè)計(jì)稿 1px / 設(shè)計(jì)稿基準(zhǔn)寬度 = 框架樣式 1rpx / 750rpx
換言之，頁(yè)面元素寬度在uni-app中的寬度計(jì)算公式：
750 * 元素在設(shè)計(jì)稿中的寬度 / 設(shè)計(jì)稿基準(zhǔn)寬度
舉例說(shuō)明：
- 若設(shè)計(jì)稿寬度為 750px，元素 A 在設(shè)計(jì)稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 750，結(jié)果為：100rpx。
- 若設(shè)計(jì)稿寬度為 640px，元素 A 在設(shè)計(jì)稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 640，結(jié)果為：117rpx。
- 若設(shè)計(jì)稿寬度為 375px，元素 B 在設(shè)計(jì)稿上的寬度為 200px，那么元素 B 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 200 / 375，結(jié)果為：400rpx。
2. 網(wǎng)絡(luò)請(qǐng)求
線上小程序運(yùn)行時(shí)，網(wǎng)絡(luò)相關(guān)的 API 在使用前需要配置域名白名單
使用示例：
uni.request({ url: 'https://www.example.com/request', // demo url method: 'GET', data: {}, header: {}, success: res => { console.log(res.data) }, fail: () => {}, complete: () => {}})復(fù)制代碼
3. 路由與頁(yè)面跳轉(zhuǎn)
uni.navigateTo: 保留當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面，使用uni.navigateBack可以返回到原頁(yè)面。
比如：
uni.navigateTo({ url: 'pages/test?id=1&name=uniapp' });復(fù)制代碼
uni.redirectTo: 關(guān)閉當(dāng)前頁(yè)面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。
比如：
uni.redirectTo({ url: 'pages/test?id=1&name=uniapp' });復(fù)制代碼
uni.reLaunch: 關(guān)閉所有頁(yè)面，打開(kāi)到應(yīng)用內(nèi)的某個(gè)頁(yè)面。
比如：
uni.reLaunch({ url: 'pages/test?id=1&name=uniapp' });復(fù)制代碼
uni.switchTab: 跳轉(zhuǎn)到tabBar頁(yè)面，并關(guān)閉其他所有非tabBar頁(yè)面。
比如：
uni.switchTab({ url: 'pages/index/index' // 切換到設(shè)置的tabBar首頁(yè)index頁(yè)面})復(fù)制代碼
uni.navigateBack: 關(guān)閉當(dāng)前頁(yè)面，返回上一頁(yè)或多級(jí)頁(yè)面?？赏ㄟ^(guò)getCurrentPages() 獲取當(dāng)前的頁(yè)面棧，決定需要返回幾層。
比如：
uni.navigateBack()復(fù)制代碼
4. rich-text富文本組件
當(dāng)我們需要展示帶有標(biāo)簽名稱內(nèi)容(即富文本)的時(shí)候，如果是單純的使用text和view的組件，是不能夠正確展示出來(lái)的，需要使用rich-text組件。
5. 小程序本地開(kāi)發(fā)的模式配置
開(kāi)發(fā)調(diào)試的時(shí)候，需要固定調(diào)試一個(gè)頁(yè)面內(nèi)容。這個(gè)配置就很有必要了。
在pages.json中配置即可，比如：
"condition": { // 模式配置，僅在開(kāi)發(fā)期間生效 "current": 0, // 當(dāng)前激活的模式（list索引項(xiàng)） "list": [{ "name": "swiper", // 模式的名稱 "path":"pages/component/swiper/swiper",//啟動(dòng)頁(yè)面，必選 "query":"interval=4000&autoplay=false"//啟動(dòng)參數(shù)，在頁(yè)面的onLoad函數(shù)里面得到。 }, { "name":"test", "path":"pages/component/switch/switch" }]}復(fù)制代碼
具體實(shí)操：
"condition": { "current": 0, "list": [{ "name": "首頁(yè)", "path":"pages/index/index" }, { "name":"忘記密碼", "path":"pages/forget/forget" }, { "name":"登陸", "path":"pages/login/login" }]}復(fù)制代碼
6. 配置底部導(dǎo)航
在項(xiàng)目的pages.json中配置pages和tabBar字段，如下：
"pages": [ { "path": "pages/index/index", "style": { "navigationBarTitleText": "uni-app" } }, { "path": "pages/center/center", "style": {} }],"tabBar": { "borderStyle": "black", "color": "#8F8F94", "list": [{ "pagePath": "pages/index/index", "text": "首頁(yè)" }, { "pagePath": "pages/center/center", "text": "我的" }]}復(fù)制代碼
當(dāng)然，你可以在tabBar -> list字段中添加iconPath和selectedIconPath來(lái)表示未選中和選中狀態(tài)。
7. 微信小程序報(bào)forceUpdate錯(cuò)誤
報(bào)錯(cuò)信息如下：TypeError: Cannot read property 'forceUpdate' of undefined
原因：沒(méi)有配置appId，這里直接使用小程序提供的測(cè)試appIdwxa5ed8b26512accd9。
8. 條件編譯
在模版html中使用如下：
<!-- #ifdef H5 --><text>h5 content</text><!-- #endif --><!-- #ifdef MP-WEIXIN --><text>wechat content</text><!-- #endif -->復(fù)制代碼
在javascript中使用如下：
onLoad() { // #ifdef H5 console.log("只有h5平臺(tái)才有console方法") // #endif // #ifdef MP-WEIXIN console.log("只有微信平臺(tái)才有的console方法") // #endif}復(fù)制代碼
發(fā)布h5和微信小程序
發(fā)布h5：
可參考官網(wǎng)發(fā)布為H5
最后在項(xiàng)目中生成dist文件。頁(yè)面入口路徑為./unpackage/dist/build/../index.html。
發(fā)布微信小程序：
可參考網(wǎng)站發(fā)布為微信小程序
需要提前申請(qǐng)一個(gè)微信小程序，獲取其AppID
后話
相關(guān)的api內(nèi)容來(lái)源uni-app自官網(wǎng)，截止文章發(fā)布2021-07-19為最新。
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。