#頭條創(chuàng)作挑戰(zhàn)賽#

本文同步本人掘金平臺(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)目的名稱(chēng) => 選擇項(xiàng)目的存放位置 => 選擇uni-app項(xiàng)目模版 => 點(diǎn)擊創(chuàng)建復(fù)制代碼

開(kāi)啟h5和微信小程序

開(kāi)啟h5：

開(kāi)啟微信小程序：

示例：是Mac配置

1. 配置微信開(kāi)發(fā)者工具路徑

2. 開(kāi)啟微信小程序的安全端口

3. 設(shè)置外部web服務(wù)調(diào)用url，格式：http://本地ip:端口號(hào)

4. 吊起微信開(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ō)明：

1. 若設(shè)計(jì)稿寬度為 750px，元素 A 在設(shè)計(jì)稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 750，結(jié)果為：100rpx。
2. 若設(shè)計(jì)稿寬度為 640px，元素 A 在設(shè)計(jì)稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 640，結(jié)果為：117rpx。
3. 若設(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)簽名稱(chēng)內(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", // 模式的名稱(chēng) "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為最新。