前言：
本文主要介紹 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/）
1. 工具下載下傳
Uniapp 是配個 HBuildx 這個開發工具來使用的，是以我們要先下載下傳 Hbuildx 開發工具；
Hbuildx 下載下傳位址：https://www.dcloud.io/hbuilderx.html
2. 項目建立
上一步我們已經下載下傳好了 HBuildx 這個開發工具，下一步我們需要建立項目了！
我用的是 Windows 可能和 Mac 稍有差别；左上角點選檔案 --> 建立 --> 項目
下圖我們能看到有 普通項目，有 uni-app 項目
就我個人而言，一般在工作中，我會選擇建立普通項目，因為uni-app示例項目雖然很香，但是并不是很利于開發，需要删除很多東西，是以我個人選擇的是普通項目；
3. 安裝實用插件
點選工具 --> 插件安裝，我們可以看到 Hbuildx 給我們提供了核心插件；
什麼是核心插件呢？ 就是利于我們開發，可以提高我們開發效率的東西；
什麼是插件市場呢？ 我們在開發過程中，遇到了 UI 架構 或者 uniapp 内置元件滿足不了我們的業務需求的，就可以前往插件市場去看看，總會有一個比較滿意的！
比如我們使用 Git 往倉庫送出代碼，我們就可以 下載下傳 Git 插件，輔助我們使用Git！比如我們格式化代碼 我們就可以下載下傳 Prettier 插件，ctrl + K 快捷格式化
4. 運作至微信開發工具
到這一步開發前的配置基本上已經完成了，我們要運作一下我們的項目看一下了
但是，運作小程式我們需要注意幾個地方：
① 配置manifest.json檔案，配置微信小程式AppID
微信小程式AppID 哪裡來？ 登入微信公衆平台，開發管理 --> 開發設定中
② 運作微信小程式需要配置 配置開發者工具路徑，這樣 Hbuildx 才知道去哪裡打開微信開發者工具
③ Hbuildx 的配置結束了，我們還需要配置微信開發者工具，不然是會運作失敗的
開啟微信開發者工具中的服務端口
5. 項目運作
項目在運作之前我們需要先添加一點點代碼才可以運作以後看到效果，不然隻是一個白頁面，并不是我們想看到的
pages 下面我們新增兩個頁面，在 pages.json當中配置一下基礎的tabbar部分
index 代碼
<template> <view class="content"> <!-- <logo></logo> --> <!-- #ifdef MP-WEIXIN --> <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> <!-- #endif --> <!-- #ifndef MP-WEIXIN --> <view class="text-area"><text class="title">請在微信小程式中打開</text></view> <!-- #endif --> </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"> <!-- #ifndef H5 --> <text>請在H5平台打開</text> <!-- #endif --> </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> 然後點選運作，運作到微信小程式，就可以看到我們剛才寫的内容
6. 個性化小程式
什麼是個性化小程式呢？就是不同的Tabbar，不同的導航欄，展示和普通小程式不一樣的效果，這個中間凸起的Tabbar 我們可以使用Uview裡邊的Tabbar，也可以自己去定義一個tabbar，詳細的自定義tabbar教程大家可以看 自定義tabbar教程 ，其他的個性化設定我們就不一一說了，感興趣的可以查一下！
7. 開發時如何調用API
相信大家都知道開發微信小程式需要配置伺服器域名，而且伺服器域名必須是 https:// 開頭，擁有SSL證書，域名經過備案等等....... 難道我們開發時就要提前設定好嗎？
也不一定，如果我們公司，或者客戶在起初并沒有給到我們域名的時候，我們可以微信開發者工具裡，勾選不校驗合法域名、web-view(業務域名)、TLS版本以及HTTPS證書 ，然後利用我們的區域網路 IP 位址就可以輕松進行開發，這是你就要分開環境了，我們的開發環境和生産環境！
以上都是開發環節，下面屬于配置環節，做一個上線前的準備
二、微信小程式釋出
到這裡我相信基礎的小程式開發部分大家都已經很了解了，那麼産品經理這會兒說了，小程啊，小程式馬上要上線了，你告訴我需要什麼資料啊？或者說 你準備一下上線吧，這會是不是很懵？别着急，接下來我們一步一步看
1. 配置小程式關聯資訊(微信公衆号關聯小程式)
為什麼要說配置小程式關聯公衆号呢？
因為我在開發的過程中，遇到過一個客戶問我怎麼擷取使用者的 UnionID ，但是我們的小程式并沒有關聯過任何公衆号，公衆平台，是以要提前确認一下需求；
擷取 UnionID 的條件？
如果開發者擁有多個移動應用、網站應用、和公衆帳号（包括小程式），可通過 UnionID 來區分使用者的唯一性，因為隻要是同一個微信開放平台帳号下的移動應用、網站應用和公衆帳号（包括小程式），使用者的 UnionID 是唯一的。換句話說，同一使用者，對同一個微信開放平台下的不同應用，UnionID是相同的。
2. 配置小程式主體資訊
為什麼要提前配置小程式主體資訊呢？ 看下圖
上面的截圖是我們的一個已經上線的小程式， 小程式釋出後，非個人類帳号可通過認證方式改名。是以我們在上線前最好把能配置的都配置一下，避免上線以後再去更改稽核時間長、需要資料多等麻煩事兒！
3. 配置伺服器域名
上面說了我們在開發時候可以通過 IP 來調用 後端大哥的 API，那麼上線以後肯定是不行了；因每個微信小程式需要事先設定通訊域名，小程式隻可以跟指定的域名進行網絡通信。包括普通 HTTPS 請求（wx.request）、上傳檔案（wx.uploadFile）、下載下傳檔案（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。
4. 釋出上線流程
聊到這裡，不知不覺的，我們的小程式已經準備上線了，我分幾步給大家展示
① 點選 Hbuildx 工具欄中的發行
這一步會幫我們打包一下我們寫的代碼，壓縮一下體積，畢竟微信小程式的代碼包隻能是 2MB大小，如果主包太大，就要考慮分包處理了
②點選微信開發者工具中的 上傳 按鈕
③ 這個時候我們就要去微信公衆平台登入我們的小程式開發者賬戶檢視體驗版小程式
這裡我們就要注意一下，此時的體驗版小程式已經可以正常的給測試大哥做真機測試了
④ 終于到了申請送出稽核，正式釋出
這一步很簡單，直接送出稽核，但是我們接下來需要錄入部分資料來供我們的稽核人員測試
點選繼續送出，如果第一次送出的朋友需要驗證 使用者隐私保護指引設定
如果是第一次送出稽核，這個頁面之前還有一個 複用資質或者填寫資質的頁面，大家留意一下就好了，然後送出稽核，等待稽核通過就可以啦~~~
稽核時間多久呢？
這個30分鐘至一天不等吧，我第一次稽核的時間大概是一個小時，後邊每次30分鐘左右，還是很快的！
通過稽核，現在小程式已經成功上線了~~~