WeChat Template

一套基于SpringBoot & Shiro 以及 Uni-app構(gòu)建的微信小程序腳手架

開(kāi)源地址： https://github.com/TyCoding/wechat-template 歡迎Star挤悉、Fork支持作者。

前言

第一次接觸微信小程序，你可能通過(guò)一些教程了解到很多開(kāi)發(fā)微信小程序的第三方框架或者是微信原生API。而從我一個(gè)Java后端開(kāi)發(fā)者的角度而言捣炬，如果想要快速入門(mén)微信小程序開(kāi)發(fā)稿械，去研究微信原生的API文檔可能不太合適窝撵。

初學(xué)Java Web階段赐劣，我也接觸到了原生JS開(kāi)發(fā)咐汞；后來(lái)我又順著教程學(xué)習(xí)了JQuery，才發(fā)現(xiàn)JQuery比原生JS方便太多了贱傀；之后隨著Java Web前端項(xiàng)目的逐漸復(fù)雜剖淀，例如分頁(yè)、Modal俄认、表格數(shù)據(jù)渲染等靠JQuery依然相當(dāng)復(fù)雜糊探，即使之后又學(xué)到了JSP、Thymeleaf數(shù)據(jù)渲染依然感覺(jué)很不方便儡炼。開(kāi)發(fā)前端除了要學(xué)習(xí)UI框架的使用，還需要學(xué)習(xí)一套JavaScript框架的使用以便我們能快速開(kāi)發(fā)項(xiàng)目。

于是后來(lái)我接觸了Vue税迷，了解了雙向綁定的概念才知道用Vue渲染前端數(shù)據(jù)是多么的方便快捷辩诞。

那么今天我要介紹的Uni-app正是基于Vue.js開(kāi)發(fā)的前端應(yīng)用框架。因此蝎抽，如果你已經(jīng)熟悉了Vue框架疲吸，那么學(xué)習(xí)使用Uni-app開(kāi)發(fā)微信小程序?qū)⒎浅７奖愦型帧Ｆ渲形⑿判〕绦虻捻?yè)面全部使用的Vue組件，Vue的語(yǔ)法幾乎都適用（當(dāng)然也有不適用的例如：頁(yè)面的生命周期鉤子函數(shù)等）。所以本系列教程前端將全部使用Vue語(yǔ)法分析項(xiàng)目實(shí)現(xiàn)邏輯，如果大家有不熟悉的請(qǐng)仔細(xì)閱讀以下文檔：

• https://uniapp.dcloud.io Uni-app官方文檔
• https://vuejs.org/ Vue官方文檔
• https://developers.weixin.qq.com/miniprogram/dev/framework/ 微信小程序開(kāi)發(fā)文檔
• https://github.com/TyCoding 本人GitHub（里面有很多Vue實(shí)戰(zhàn)開(kāi)發(fā)的項(xiàng)目）

環(huán)境搭建

作為一個(gè)后端程序員，我相信大家已經(jīng)可以熟練使用IDEA搭建SpringBoot框架開(kāi)發(fā)環(huán)境了蘸泻，這里不再過(guò)多贅述鞋吉。

請(qǐng)?jiān)谏掀谖臋n WeChat Template-01項(xiàng)目介紹 中仔細(xì)閱讀我的開(kāi)發(fā)軟件版本鸦做，避免出現(xiàn)其他問(wèn)題請(qǐng)盡量保持軟件版本和我文檔中介紹的相同。

本文的重點(diǎn)將放在如何搭建Uni-app的開(kāi)發(fā)環(huán)境坯辩。

首先請(qǐng)仔細(xì)閱讀 Uni-app官方文檔： https://uniapp.dcloud.io/quickstart。

安裝HBuilder

也許你會(huì)像我一樣迷惑崩侠，不是開(kāi)發(fā)微信小程序嗎漆魔？為什么非要再安裝一個(gè)HBuilder啊却音？他好用嗎改抡？

但你沒(méi)得選擇，Uni-app和HBuilder是捆綁在一起的系瓢，使用Uni-app寫(xiě)的Vue頁(yè)面必須使用HBuilder才能編譯阿纤。選擇通過(guò)HBuilder將項(xiàng)目編譯到微信開(kāi)發(fā)者工具，項(xiàng)目編譯后將自動(dòng)打開(kāi)微信開(kāi)發(fā)者工具運(yùn)行項(xiàng)目夷陋，由此就不需要用微信開(kāi)發(fā)者工具編輯代碼了欠拾，僅作為一個(gè)手機(jī)模擬器、頁(yè)面調(diào)試工具骗绕。

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

微信開(kāi)發(fā)者工具

官方下載地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

需要注意的是藐窄，開(kāi)發(fā)微信小程序首先需要在 微信公眾平臺(tái) https://mp.weixin.qq.com/ 注意一個(gè)開(kāi)發(fā)者賬戶(hù)：

https://mp.weixin.qq.com/cgi-bin/registermidpage?action=index&lang=zh_CN&token=

image-20200611152850139

選擇 小程序 。上面的四種賬號(hào)類(lèi)型需要使用不同的郵箱注冊(cè)酬土。

image-20200611153021835

后續(xù)填寫(xiě)信息便可以注冊(cè)成功了荆忍。

注冊(cè)成功后登錄賬戶(hù)在右側(cè)找到 開(kāi)發(fā) ，便可以看到自己的AppID撤缴，這是我們使用微信開(kāi)發(fā)者工具必備的東西：

image-20200611153557185

以上注冊(cè)流程結(jié)束刹枉。但需要注意的是，新注冊(cè)的微信小程序賬戶(hù)需要關(guān)聯(lián)一個(gè)主體（管理員）微信賬號(hào)屈呕，可以用自己的微信賬號(hào)綁定這個(gè)小程序微宝，下次登錄直接用微信賬號(hào)掃描登錄二維碼即可直接登錄小程序管理平臺(tái)。

安裝了微信開(kāi)發(fā)者工具后打開(kāi)虎眨，需要掃描二維碼登錄才能使用（用剛才綁定了小程序賬戶(hù)的微信號(hào)）：

image-20200611154137687

image-20200611154250759

到此為止芥吟，我們就完成了微信開(kāi)發(fā)者工具的全部安裝侦铜。下面講解如何配合HBuilder使用。

環(huán)境配置

按照uni-app官方文檔：https://uniapp.dcloud.io/quickstart 所寫(xiě)钟鸵，我們先創(chuàng)建一個(gè)uni-app項(xiàng)目：

image-20200611154826437

選擇創(chuàng)建uni-app項(xiàng)目钉稍，并選擇登錄模板（這里僅是示例，不同的模板內(nèi)置了不同功能的小程序源碼棺耍，其中登錄模板應(yīng)該還算簡(jiǎn)潔）贡未。注意不要選擇啟用uniCloud，這個(gè)和微信開(kāi)發(fā)者工具創(chuàng)建項(xiàng)目時(shí)的云服務(wù)器概念類(lèi)似蒙袍，不建議使用俊卤，他的目的的簡(jiǎn)化開(kāi)發(fā)流程，消除前后端害幅、運(yùn)維的區(qū)別消恍。而作為一個(gè)后端開(kāi)發(fā)者，我們能獨(dú)立開(kāi)發(fā)一套后端項(xiàng)目必須再學(xué)習(xí) cloud 提供的云函數(shù)以现。

創(chuàng)建的uni-app-login項(xiàng)目有以下目錄結(jié)構(gòu)：

image-20200611155507606

在開(kāi)始運(yùn)行小程序之前狠怨，需要配置 微信開(kāi)發(fā)者工具 -> 設(shè)置 -> 安全設(shè)置 ，啟用服務(wù)端口：

image-20200611155652394

上面介紹了開(kāi)發(fā)微信小程序需要使用 App ID邑遏，在新創(chuàng)建的項(xiàng)目目錄結(jié)構(gòu)中找到 uni-app-login -> mainfest.json佣赖，配置微信小程序App ID：

image-20200611160200643

接下來(lái)打開(kāi)HBuilder，找到 HBuilderX -> 運(yùn)行 -> 運(yùn)行到小程序模擬器 -> 微信開(kāi)發(fā)者工具：

image-20200611155830709

然后记盒，HBuilder編譯后將自動(dòng)打開(kāi)微信開(kāi)發(fā)者工具并運(yùn)行編譯后的微信小程序：

image-20200611160842063

到此為止憎蛤，環(huán)境配置已經(jīng)結(jié)束了。

插件安裝

Uni-app本身提供的UI和API可能并不能滿(mǎn)足我們?nèi)粘ｉ_(kāi)發(fā)的需求纪吮，Uni-app也提供了插件市場(chǎng)：https://ext.dcloud.net.cn/ 俩檬，在里面可以找到很多第三方插件。那么如何將插件安裝到我們的項(xiàng)目中呢碾盟？

1. 方式一：特別簡(jiǎn)單豆胸，在插件詳情頁(yè)面右側(cè)點(diǎn)擊使用HBuilderX導(dǎo)入插件即可將插件自動(dòng)下載到當(dāng)前項(xiàng)目中

image-20200611174123878

在HBuilderX上將彈出：

image-20200611174233805

點(diǎn)擊確定后，插件就被安裝在本項(xiàng)目中：

image-20200611174327251

安裝其他插件也會(huì)如此安裝到項(xiàng)目根目錄js_sdk文件夾中巷疼，為了規(guī)范起見(jiàn)晚胡，我建議大家把第三發(fā)插件都移動(dòng)到components文件夾內(nèi)：

image-20200611174517593

文件夾可以隨意命名，因?yàn)楹罄m(xù)需要單獨(dú)import這個(gè)js才能聲明對(duì)象嚼沿。注意區(qū)別文中提到的easycom模式估盘，這是JS插件并不是UI組件，是需要單獨(dú)import的骡尽。

2. 方式二：直接在GitHub下載該插件的源碼文件遣妥，手動(dòng)將文件夾復(fù)制到自己項(xiàng)目的components文件夾內(nèi)，其他的和上面介紹的相同攀细。

Tips

除了上面介紹的基礎(chǔ)環(huán)境配置箫踩，開(kāi)發(fā)一套小程序還得使用一些第三方j(luò)s庫(kù)爱态，下面是我個(gè)人不斷挑選后覺(jué)得比較好用的。

UI

雖然Uni-app內(nèi)置了很多UI組件了境钟，但是并不豐富锦担，于是我在Github上搜索了uni-app第三方的UI庫(kù)，選擇了 ThorUI 慨削。（實(shí)際上第三方的UI庫(kù)并不多且star數(shù)量不太高）洞渔，所以學(xué)習(xí)此套教程，你需要先熟悉下 ThorUI 文檔：

• 源碼：https://github.com/dingyong0214/ThorUI-uniapp
• 文檔：https://thorui.cn/doc/

注意

如果你仔細(xì)查閱了uni-app的文檔或ThorUI的文檔會(huì)發(fā)現(xiàn)Uni-app文檔中 https://uniapp.dcloud.io/collocation/pages?id=easycom 介紹的一個(gè)參數(shù)配置：

image-20200611162444379

easycom模式支持將存放在components文件夾下的第三方組件自動(dòng)注冊(cè)到App內(nèi)缚态，也就是我們無(wú)需再在App.vue中import注冊(cè)組件了磁椒。

但是： 并不是所有的第三方組件都適合 easycom模式的，所以你在選擇第三方UI庫(kù)時(shí)需要看介紹是否支持easycom模式玫芦。（顯然ThorUI是支持這種模式的）浆熔。

需要注意的是，ThorUI官方源碼倉(cāng)庫(kù)：https://github.com/dingyong0214/ThorUI-uniapp 其實(shí)是一個(gè)使用了ThorUI組件的Uni-app項(xiàng)目桥帆，ThorUI的源碼是在該項(xiàng)目的components文件夾下的医增。那么前面介紹的使用HBuilder創(chuàng)建項(xiàng)目時(shí)的模板也可以替換為T(mén)horUI的，好處就是作者已經(jīng)幫我們配置好了項(xiàng)目环葵，直接使用即可调窍。

注意

雖然可以使用ThorUI提供的模板（HBuilder直接打開(kāi)運(yùn)行項(xiàng)目）宝冕，但我并不建議直接使用其中封裝的JS方法张遭，因?yàn)楸卷?xiàng)目的目的是要讓你學(xué)會(huì)自己封裝一套小程序腳手架，ThorUI僅作為一個(gè)前端項(xiàng)目他封裝的JS包括Request地梨、Vuex菊卷、Login我覺(jué)得是不適合與Java后端交互的，請(qǐng)大家在后續(xù)文章中仔細(xì)閱讀我的項(xiàng)目設(shè)計(jì)再做比較宝剖。

Router

如果你使用過(guò)Vue開(kāi)發(fā)Web端單頁(yè)面項(xiàng)目洁闰，你應(yīng)該會(huì)知道頁(yè)面之間的路由是非常重要的。那么本項(xiàng)目腳手架也將封裝一套R(shí)outer路由万细，而Uni-app本身提供的頁(yè)面路由我覺(jué)得并不友好（特別是對(duì)與我們習(xí)慣了Vue開(kāi)發(fā)的Java后端程序員）扑眉。

在前后端分離的項(xiàng)目中Router至少需要實(shí)現(xiàn)：

1. 全局的路由封裝，以及各個(gè)頁(yè)面的路由配置
2. 路由守衛(wèi)赖钞，要攔截監(jiān)聽(tīng)頁(yè)面發(fā)生路由時(shí)當(dāng)前賬戶(hù)登錄狀態(tài)
3. 在路由守衛(wèi)中要判斷當(dāng)前緩存中的Token是否失效腰素，UserInfo信息是否被緩存（沒(méi)有就異步獲取UserInfo）

在Vue項(xiàng)目中，官方推薦的 vue-router

以上分析雪营，我在Uni-app插件市場(chǎng)中找到一個(gè)非常形似vue-router的插件：uni-simple-router弓千，官方文檔：http://hhyang.cn/ 。這個(gè)插件提供的API幾乎和vue-router中的API相同献起，更是減輕了我們的學(xué)習(xí)成本洋访。

后續(xù)我將介紹如何使用這個(gè)插件封裝頁(yè)面全局路由镣陕。

Request

除了上面介紹的兩個(gè)插件，在前后端分離的項(xiàng)目中最重要的是JS的異步請(qǐng)求姻政，那么必不可少需要能夠發(fā)送異步請(qǐng)求的API呆抑，Uni-app和微信官方都提供了相應(yīng)的Request API，但我作為Java后端還是覺(jué)得他們提供的很不適合于Java后端交互扶歪，這里我找到了一個(gè)認(rèn)為比較好用的插件：luch-request

luch-request官方文檔：https://quanzhan.co/luch-request/

在前后端分離的項(xiàng)目中Request至少需要實(shí)現(xiàn)：

1. 全局Request請(qǐng)求封裝理肺，以便能處理請(qǐng)求Token信息
2. 全局Request應(yīng)該能夠配置interceptor，包括Request interceptor和Response interceptor
3. 在interceptor中能夠自定義鑒權(quán)善镰、身份認(rèn)證等配置
4. 應(yīng)該按照Controller接口命名規(guī)則配置與之相對(duì)應(yīng)的api接口方法妹萨，方法中包含Request Method和Request Params
5. 前后端分離項(xiàng)目中Header應(yīng)該包含Authorization Token，并且Header中Content-type='application/json'炫欺，前后端傳遞的都是JSON化的字符串

后續(xù)我將講解如何使用這個(gè)插件封裝全局Request乎完。

交流

QQGroup：671017003

WeChatGroup: 關(guān)注公眾號(hào)查看

聯(lián)系

• http://www.tycoding.cn
• https://github.com/TyCoding