本文同步本人掘金平臺的文章：https://juejin.cn/post/6986465633114259469

最近，有個需求需要開發(fā)h5應(yīng)用和微信小程序。如果針對不同的平臺開發(fā)自己的一套代碼，那將是一件很糟糕的事情：如果下次需要兼容支付寶小程序、快應(yīng)用，那工作量隨著平臺的添加而快速增加。所以我們選擇了uni-app開發(fā)。

uni-app 是一個使用 Vue.js 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/QQ/釘釘/淘寶）、快應(yīng)用等多個平臺。

工具要求

安裝微信開發(fā)者工具穩(wěn)定版
安裝HBuilderX極客開發(fā)工具
谷歌瀏覽器/火狐瀏覽器/…

新建項目

這里可直接參考官網(wǎng)的創(chuàng)建uni-app。

1. 文件 => 新建 => 項目2. 選擇uni-app => 填寫項目的名稱 => 選擇項目的存放位置 => 選擇uni-app項目模版 => 點擊創(chuàng)建復(fù)制代碼

開啟h5和微信小程序

開啟h5：

uni-app開發(fā)微信小程序和h5應(yīng)用（uni app開發(fā)小程序）

開啟微信小程序：

示例：是Mac配置

配置微信開發(fā)者工具路徑

uni-app開發(fā)微信小程序和h5應(yīng)用（uni app開發(fā)小程序）

開啟微信小程序的安全端口

uni-app開發(fā)微信小程序和h5應(yīng)用（uni app開發(fā)小程序）

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

uni-app開發(fā)微信小程序和h5應(yīng)用（uni app開發(fā)小程序）

吊起微信開發(fā)工具

uni-app開發(fā)微信小程序和h5應(yīng)用（uni app開發(fā)小程序）

開發(fā)

接下來就是對需求的開發(fā)了，嗯～

都是搬磚的事情，我們簡單聊聊其中需要注意的點??。

1. 尺寸單位

uni-app支持的通用css單位包括 px、rpx。

px 和 rpx之間的轉(zhuǎn)換關(guān)系如下：

設(shè)計稿 1px / 設(shè)計稿基準寬度 = 框架樣式 1rpx / 750rpx

換言之，頁面元素寬度在uni-app中的寬度計算公式：

750 * 元素在設(shè)計稿中的寬度 / 設(shè)計稿基準寬度

舉例說明：

若設(shè)計稿寬度為 750px，元素 A 在設(shè)計稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 750，結(jié)果為：100rpx。
若設(shè)計稿寬度為 640px，元素 A 在設(shè)計稿上的寬度為 100px，那么元素 A 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 100 / 640，結(jié)果為：117rpx。
若設(shè)計稿寬度為 375px，元素 B 在設(shè)計稿上的寬度為 200px，那么元素 B 在 uni-app 里面的寬度應(yīng)該設(shè)為：750 * 200 / 375，結(jié)果為：400rpx。

2. 網(wǎng)絡(luò)請求

線上小程序運行時，網(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. 路由與頁面跳轉(zhuǎn)

uni.navigateTo: 保留當前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面，使用uni.navigateBack可以返回到原頁面。

比如：

uni.navigateTo({ url: 'pages/test?id=1&name=uniapp' });復(fù)制代碼

uni.redirectTo: 關(guān)閉當前頁面，跳轉(zhuǎn)到應(yīng)用內(nèi)的某個頁面。

比如：

uni.redirectTo({ url: 'pages/test?id=1&name=uniapp' });復(fù)制代碼

uni.reLaunch: 關(guān)閉所有頁面，打開到應(yīng)用內(nèi)的某個頁面。

比如：

uni.reLaunch({ url: 'pages/test?id=1&name=uniapp' });復(fù)制代碼

uni.switchTab: 跳轉(zhuǎn)到tabBar頁面，并關(guān)閉其他所有非tabBar頁面。

比如：

uni.switchTab({ url: 'pages/index/index' // 切換到設(shè)置的tabBar首頁index頁面})復(fù)制代碼

uni.navigateBack: 關(guān)閉當前頁面，返回上一頁或多級頁面。可通過getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

比如：

uni.navigateBack()復(fù)制代碼

4. rich-text富文本組件

當我們需要展示帶有標簽名稱內(nèi)容(即富文本)的時候，如果是單純的使用text和view的組件，是不能夠正確展示出來的，需要使用rich-text組件。

5. 小程序本地開發(fā)的模式配置

開發(fā)調(diào)試的時候，需要固定調(diào)試一個頁面內(nèi)容。這個配置就很有必要了。

在pages.json中配置即可，比如：

"condition": { // 模式配置，僅在開發(fā)期間生效 "current": 0, // 當前激活的模式（list索引項） "list": [{ "name": "swiper", // 模式的名稱 "path":"pages/component/swiper/swiper",//啟動頁面，必選 "query":"interval=4000&autoplay=false"//啟動參數(shù)，在頁面的onLoad函數(shù)里面得到。 }, { "name":"test", "path":"pages/component/switch/switch" }]}復(fù)制代碼

具體實操：

"condition": { "current": 0, "list": [{ "name": "首頁", "path":"pages/index/index" }, { "name":"忘記密碼", "path":"pages/forget/forget" }, { "name":"登陸", "path":"pages/login/login" }]}復(fù)制代碼

uni-app開發(fā)微信小程序和h5應(yīng)用（uni app開發(fā)小程序）

6. 配置底部導(dǎo)航

在項目的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": "首頁" }, { "pagePath": "pages/center/center", "text": "我的" }]}復(fù)制代碼

當然，你可以在tabBar -> list字段中添加iconPath和selectedIconPath來表示未選中和選中狀態(tài)。