前言：

本文主要介紹 uniapp 的基礎使用，以及使用 uniapp 在企業開發的過程中的一個詳細流程，比較適合第一次使用uniapp 開發微信小程序的伙伴，或者沒有過實戰經驗的小伙伴參考；使用 HbUIldx 配合 Uniapp 框架結合 Uview 的UI框架為大家演示今天的Demo！

一、uniapp項目起步

1. 工具下載

2. 項目創建

3. 安裝實用插件

4. 運行至微信開發工具

5. 項目運行

6. 個性化小程序

7. 開發時如何調用API

二、微信小程序發布

1. 配置小程序關聯信息(微信公眾號關聯小程序)

2. 配置小程序主體信息

3. 配置服務器域名

4. 發布上線流程

① 點擊 Hbuildx 工具欄中的發行

②點擊微信開發者工具中的上傳按鈕

③ 這個時候我們就要去微信公眾平臺登錄我們的小程序開發者賬戶查看體驗版小程序

④ 終于到了申請提交審核，正式發布

一、uniapp項目起步

開始之前還是先看一下官網對 Uniapp 的介紹，也讓我們有個更全面的認識；

uni-app 是一個使用 Vue.js (HTTPS://vuejs.org/)開發所有前端應用的框架，開發者編寫一套代碼，可發布到iOS、Android、Web（響應式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應用等多個平臺。（Uniapp 官網地址：https://uniapp.dcloud.io/）

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

1. 工具下載

Uniapp 是配個 HBuildx 這個開發工具來使用的，所以我們要先下載 Hbuildx 開發工具；

Hbuildx 下載地址：https://www.dcloud.io/hbuilderx.html

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

2. 項目創建

上一步我們已經下載好了 HBuildx 這個開發工具，下一步我們需要創建項目了！

我用的是 Windows 可能和 Mac 稍有差別；左上角點擊文件 –> 新建 –> 項目

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

下圖我們能看到有 普通項目，有 uni-app 項目

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

就我個人而言，一般在工作中，我會選擇新建普通項目，因為uni-app示例項目雖然很香，但是并不是很利于開發，需要刪除很多東西，所以我個人選擇的是普通項目；

3. 安裝實用插件

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

點擊工具 –> 插件安裝，我們可以看到 Hbuildx 給我們提供了核心插件；

什么是核心插件呢？ 就是利于我們開發，可以提高我們開發效率的東西；

什么是插件市場呢？ 我們在開發過程中，遇到了 UI 框架或者 uniapp 內置組件滿足不了我們的業務需求的，就可以前往插件市場去看看，總會有一個比較滿意的！

比如我們使用 Git 往倉庫提交代碼，我們就可以下載 Git 插件，輔助我們使用Git！比如我們格式化代碼我們就可以下載 Prettier 插件，ctrl K 快捷格式化

4. 運行至微信開發工具

到這一步開發前的配置基本上已經完成了，我們要運行一下我們的項目看一下了

但是，運行小程序我們需要注意幾個地方：

① 配置manifest.json文件，配置微信小程序AppID

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

微信小程序AppID 哪里來？登錄微信公眾平臺，開發管理 –> 開發設置中

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

② 運行微信小程序需要配置配置開發者工具路徑，這樣 Hbuildx 才知道去哪里打開微信開發者工具

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

③ Hbuildx 的配置結束了，我們還需要配置微信開發者工具，不然是會運行失敗的

開啟微信開發者工具中的服務端口

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

5. 項目運行

項目在運行之前我們需要先添加一點點代碼才可以運行以后看到效果，不然只是一個白頁面，并不是我們想看到的

pages 下面我們新增兩個頁面，在 pages.json當中配置一下基礎的tabbar部分

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

index 代碼

<template> <view class="content">   <view class="text-area"> <button type="warn" size="default" plain open-type="getPhonenumber" @getphonenumber="getPhoneNumber">獲取用戶手機號</button> <view style="font-size: 36rpx;"> <text> 當前手機號為： <text v-show="countryCode || phoneNumber"> {{ countryCode '-' phoneNumber }}</text> </text> </view> </view>   <view class="text-area"><text class="title">請在微信小程序中打開</text></view>  </view></template> <script>export default { data() { return { title: 'Hello', }; }, methods: { getPhoneNumber(e) { if (!e.detail) { return; } } },};</script> <style lang="scss">.content { display: flex; flex-direction: column; align-items: center; justify-content: center;} .text-area { width: 80%; margin-top: 35%; font-size: 48rpx; button { margin: 60rpx 0; }}</style>

H5 代碼

<template> <view class="h5"> <logo></logo> <view class="h5-title">  <text>請在H5平臺打開</text>  </view> </view></template> <script> export default { data() { return { }; } }</script> <style lang="scss">.h5{ display: flex; flex-direction: column; align-items: center; justify-content: center; &-title{ font-size: 48rpx; }}</style>

然后點擊運行，運行到微信小程序，就可以看到我們剛才寫的內容

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

6. 個性化小程序

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

什么是個性化小程序呢？就是不同的Tabbar，不同的導航欄，展示和普通小程序不一樣的效果，這個中間凸起的Tabbar 我們可以使用Uview里邊的Tabbar，也可以自己去定義一個tabbar，詳細的自定義tabbar教程大家可以看自定義tabbar教程，其他的個性化設置我們就不一一說了，感興趣的可以查一下！

7. 開發時如何調用API

相信大家都知道開發微信小程序需要配置服務器域名，而且服務器域名必須是 https:// 開頭，擁有SSL證書，域名經過備案等等……. 難道我們開發時就要提前設置好嗎？

也不一定，如果我們公司，或者客戶在起初并沒有給到我們域名的時候，我們可以微信開發者工具里，勾選不校驗合法域名、web-view(業務域名)、TLS版本以及HTTPS證書 ，然后利用我們的局域網 IP 地址就可以輕松進行開發，這是你就要分開環境了，我們的開發環境和生產環境！

以上都是開發環節，下面屬于配置環節，做一個上線前的準備

二、微信小程序發布

到這里我相信基礎的小程序開發部分大家都已經很了解了，那么產品經理這會兒說了，小程啊，小程序馬上要上線了，你告訴我需要什么資料啊？或者說你準備一下上線吧，這會是不是很懵？別著急，接下來我們一步一步看

1. 配置小程序關聯信息(微信公眾號關聯小程序)

為什么要說配置小程序關聯公眾號呢？

因為我在開發的過程中，遇到過一個客戶問我怎么獲取用戶的 UnionID ，但是我們的小程序并沒有關聯過任何公眾號，公眾平臺，所以要提前確認一下需求；

獲取 UnionID 的條件？

如果開發者擁有多個移動應用、網站應用、和公眾帳號（包括小程序），可通過 UnionID 來區分用戶的唯一性，因為只要是同一個微信開放平臺帳號下的移動應用、網站應用和公眾帳號（包括小程序），用戶的 UnionID 是唯一的。換句話說，同一用戶，對同一個微信開放平臺下的不同應用，UnionID是相同的。

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

2. 配置小程序主體信息

為什么要提前配置小程序主體信息呢？看下圖

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）

上面的截圖是我們的一個已經上線的小程序，小程序發布后，非個人類帳號可通過認證方式改名。所以我們在上線前最好把能配置的都配置一下，避免上線以后再去更改審核時間長、需要資料多等麻煩事兒！

3. 配置服務器域名

上面說了我們在開發時候可以通過 IP 來調用后端大哥的 API，那么上線以后肯定是不行了；因每個微信小程序需要事先設置通訊域名，小程序只可以跟指定的域名進行網絡通信。包括普通 HTTPS 請求（wx.request）、上傳文件（wx.uploadFile）、下載文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。

使用uniapp開發微信小程序，從構建到上線（uni app開發小程序）