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

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

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

工具要求

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

新建項目

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

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

開啟h5和微信小程序

開啟h5：

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

開啟微信小程序：

示例：是Mac配置

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

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

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

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

設置外部web服務調用url，格式：http://本地ip:端口號

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

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

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

開發(fā)

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

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

1. 尺寸單位

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

px 和 rpx之間的轉換關系如下：

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

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

750 * 元素在設計稿中的寬度 / 設計稿基準寬度

舉例說明：

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

2. 網絡請求

線上小程序運行時，網絡相關的 API 在使用前需要配置域名白名單

使用示例：

uni.request({ url: 'https://www.example.com/request', // demo url method: 'GET', data: {}, header: {}, success: res => { console.log(res.data) }, fail: () => {}, complete: () => {}})復制代碼

3. 路由與頁面跳轉

uni.navigateTo: 保留當前頁面，跳轉到應用內的某個頁面，使用uni.navigateBack可以返回到原頁面。

比如：

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

uni.redirectTo: 關閉當前頁面，跳轉到應用內的某個頁面。

比如：

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

uni.reLaunch: 關閉所有頁面，打開到應用內的某個頁面。

比如：

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

uni.switchTab: 跳轉到tabBar頁面，并關閉其他所有非tabBar頁面。

比如：

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

uni.navigateBack: 關閉當前頁面，返回上一頁或多級頁面?？赏ㄟ^getCurrentPages() 獲取當前的頁面棧，決定需要返回幾層。

比如：

uni.navigateBack()復制代碼

4. rich-text富文本組件

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

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

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

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

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

具體實操：

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

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

6. 配置底部導航

在項目的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": "我的" }]}復制代碼

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