前言：

本文主要介紹 uniapp 的基礎(chǔ)使用，以及使用 uniapp 在企業(yè)開發(fā)的過程中的一個(gè)詳細(xì)流程，比較適合第一次使用uniapp 開發(fā)微信小程序的伙伴，或者沒有過實(shí)戰(zhàn)經(jīng)驗(yàn)的小伙伴參考；使用 HbUIldx 配合 Uniapp 框架結(jié)合 Uview 的UI框架為大家演示今天的Demo！

目錄

一、uniapp項(xiàng)目起步

1. 工具下載

2. 項(xiàng)目創(chuàng)建

3. 安裝實(shí)用插件

4. 運(yùn)行至微信開發(fā)工具

5. 項(xiàng)目運(yùn)行

6. 個(gè)性化小程序

7. 開發(fā)時(shí)如何調(diào)用API

二、微信小程序發(fā)布

1. 配置小程序關(guān)聯(lián)信息(微信公眾號(hào)關(guān)聯(lián)小程序)

2. 配置小程序主體信息

3. 配置服務(wù)器域名

4. 發(fā)布上線流程

① 點(diǎn)擊 Hbuildx 工具欄中的發(fā)行

②點(diǎn)擊微信開發(fā)者工具中的 上傳 按鈕

③ 這個(gè)時(shí)候我們就要去微信公眾平臺(tái)登錄我們的小程序開發(fā)者賬戶查看體驗(yàn)版小程序

④ 終于到了申請(qǐng)?zhí)峤粚徍?，正式發(fā)布

一、uniapp項(xiàng)目起步

開始之前還是先看一下官網(wǎng)對(duì) Uniapp 的介紹，也讓我們有個(gè)更全面的認(rèn)識(shí)；

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

1. 工具下載

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

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

2. 項(xiàng)目創(chuàng)建

上一步我們已經(jīng)下載好了 HBuildx 這個(gè)開發(fā)工具，下一步我們需要?jiǎng)?chuàng)建項(xiàng)目了！

我用的是 Windows 可能和 Mac 稍有差別；左上角點(diǎn)擊文件 –> 新建 –> 項(xiàng)目

下圖我們能看到有 普通項(xiàng)目，有 uni-app 項(xiàng)目

就我個(gè)人而言，一般在工作中，我會(huì)選擇新建普通項(xiàng)目，因?yàn)閡ni-app示例項(xiàng)目雖然很香，但是并不是很利于開發(fā)，需要?jiǎng)h除很多東西，所以我個(gè)人選擇的是普通項(xiàng)目；

3. 安裝實(shí)用插件

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

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

什么是插件市場(chǎng)呢？ 我們?cè)陂_發(fā)過程中，遇到了 UI 框架 或者 uniapp 內(nèi)置組件滿足不了我們的業(yè)務(wù)需求的，就可以前往插件市場(chǎng)去看看，總會(huì)有一個(gè)比較滿意的！

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

4. 運(yùn)行至微信開發(fā)工具

到這一步開發(fā)前的配置基本上已經(jīng)完成了，我們要運(yùn)行一下我們的項(xiàng)目看一下了

但是，運(yùn)行小程序我們需要注意幾個(gè)地方：

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

微信小程序AppID 哪里來？ 登錄微信公眾平臺(tái)，開發(fā)管理 –> 開發(fā)設(shè)置中

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

③ Hbuildx 的配置結(jié)束了，我們還需要配置微信開發(fā)者工具，不然是會(huì)運(yùn)行失敗的

開啟微信開發(fā)者工具中的服務(wù)端口

5. 項(xiàng)目運(yùn)行

項(xiàng)目在運(yùn)行之前我們需要先添加一點(diǎn)點(diǎn)代碼才可以運(yùn)行以后看到效果，不然只是一個(gè)白頁面，并不是我們想看到的

pages 下面我們新增兩個(gè)頁面，在 pages.json當(dāng)中配置一下基礎(chǔ)的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">獲取用戶手機(jī)號(hào)</button> <view style="font-size: 36rpx;"> <text> 當(dāng)前手機(jī)號(hào)為： <text v-show="countryCode || phoneNumber"> {{ countryCode '-' phoneNumber }}</text> </text> </view> </view> <!-- #endif --> <!-- #ifndef MP-WEIXIN --> <view class="text-area"><text class="title">請(qǐng)?jiān)谖⑿判〕绦蛑写蜷_</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>請(qǐng)?jiān)贖5平臺(tái)打開</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>

然后點(diǎn)擊運(yùn)行，運(yùn)行到微信小程序，就可以看到我們剛才寫的內(nèi)容

6. 個(gè)性化小程序

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

7. 開發(fā)時(shí)如何調(diào)用API

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

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

以上都是開發(fā)環(huán)節(jié)，下面屬于配置環(huán)節(jié)，做一個(gè)上線前的準(zhǔn)備

二、微信小程序發(fā)布

到這里我相信基礎(chǔ)的小程序開發(fā)部分大家都已經(jīng)很了解了，那么產(chǎn)品經(jīng)理這會(huì)兒說了，小程啊，小程序馬上要上線了，你告訴我需要什么資料?。炕蛘哒f 你準(zhǔn)備一下上線吧，這會(huì)是不是很懵？別著急，接下來我們一步一步看

1. 配置小程序關(guān)聯(lián)信息(微信公眾號(hào)關(guān)聯(lián)小程序)

為什么要說配置小程序關(guān)聯(lián)公眾號(hào)呢？

因?yàn)槲以陂_發(fā)的過程中，遇到過一個(gè)客戶問我怎么獲取用戶的 UnionID ，但是我們的小程序并沒有關(guān)聯(lián)過任何公眾號(hào)，公眾平臺(tái)，所以要提前確認(rèn)一下需求；

獲取 UnionID 的條件？

如果開發(fā)者擁有多個(gè)移動(dòng)應(yīng)用、網(wǎng)站應(yīng)用、和公眾帳號(hào)（包括小程序），可通過 UnionID 來區(qū)分用戶的唯一性，因?yàn)橹灰峭粋€(gè)微信開放平臺(tái)帳號(hào)下的移動(dòng)應(yīng)用、網(wǎng)站應(yīng)用和公眾帳號(hào)（包括小程序），用戶的 UnionID 是唯一的。換句話說，同一用戶，對(duì)同一個(gè)微信開放平臺(tái)下的不同應(yīng)用，UnionID是相同的。

2. 配置小程序主體信息

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

上面的截圖是我們的一個(gè)已經(jīng)上線的小程序， 小程序發(fā)布后，非個(gè)人類帳號(hào)可通過認(rèn)證方式改名。所以我們?cè)谏暇€前最好把能配置的都配置一下，避免上線以后再去更改審核時(shí)間長(zhǎng)、需要資料多等麻煩事兒！

3. 配置服務(wù)器域名

上面說了我們?cè)陂_發(fā)時(shí)候可以通過 IP 來調(diào)用 后端大哥的 API，那么上線以后肯定是不行了；因每個(gè)微信小程序需要事先設(shè)置通訊域名，小程序只可以跟指定的域名進(jìn)行網(wǎng)絡(luò)通信。包括普通 HTTPS 請(qǐng)求（wx.request）、上傳文件（wx.uploadFile）、下載文件（wx.downloadFile) 和 WebSocket 通信（wx.connectSocket）。

4. 發(fā)布上線流程

聊到這里，不知不覺的，我們的小程序已經(jīng)準(zhǔn)備上線了，我分幾步給大家展示

① 點(diǎn)擊 Hbuildx 工具欄中的發(fā)行

這一步會(huì)幫我們打包一下我們寫的代碼，壓縮一下體積，畢竟微信小程序的代碼包只能是 2MB大小，如果主包太大，就要考慮分包處理了

②點(diǎn)擊微信開發(fā)者工具中的 上傳 按鈕

③ 這個(gè)時(shí)候我們就要去微信公眾平臺(tái)登錄我們的小程序開發(fā)者賬戶查看體驗(yàn)版小程序

這里我們就要注意一下，此時(shí)的體驗(yàn)版小程序已經(jīng)可以正常的給測(cè)試大哥做真機(jī)測(cè)試了

④ 終于到了申請(qǐng)?zhí)峤粚徍耍桨l(fā)布

這一步很簡(jiǎn)單，直接提交審核，但是我們接下來需要錄入部分資料來供我們的審核人員測(cè)試

點(diǎn)擊繼續(xù)提交，如果第一次提交的朋友需要驗(yàn)證 用戶隱私保護(hù)指引設(shè)置

如果是第一次提交審核，這個(gè)頁面之前還有一個(gè) 復(fù)用資質(zhì)或者填寫資質(zhì)的頁面，大家留意一下就好了，然后提交審核，等待審核通過就可以啦~~~

審核時(shí)間多久呢？

這個(gè)30分鐘至一天不等吧，我第一次審核的時(shí)間大概是一個(gè)小時(shí)，后邊每次30分鐘左右，還是很快的！

通過審核，現(xiàn)在小程序已經(jīng)成功上線了~~~