前言

創(chuàng)新互聯(lián)公司是專業(yè)的扶風(fēng)網(wǎng)站建設(shè)公司，扶風(fēng)接單;提供成都網(wǎng)站設(shè)計、成都網(wǎng)站制作,網(wǎng)頁設(shè)計,網(wǎng)站設(shè)計,建網(wǎng)站,PHP網(wǎng)站建設(shè)等專業(yè)做網(wǎng)站服務(wù);采用PHP框架,可快速的進(jìn)行扶風(fēng)網(wǎng)站開發(fā)網(wǎng)頁制作和功能擴(kuò)展;專業(yè)做搜索引擎喜愛的網(wǎng)站,專業(yè)的做網(wǎng)站團(tuán)隊(duì),希望更多企業(yè)前來合作!

9月份，開始開發(fā)微信小程序，也曾調(diào)研過wepy/mpvue，考慮到后期跨端的需求，最終選擇使用了uni-app，本文主要介紹如何使用uni-app搭建小程序項(xiàng)目，以及自己對框架的補(bǔ)充，包括封裝request接口，引用color-ui,動態(tài)設(shè)置底部tab頁等，詳情見下文

uni-app 介紹（官網(wǎng)）

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

即使不跨端，uni-app同時也是更好的小程序開發(fā)框架。詳見評測

好處如圖：

我使用uni-app框架主要用來開發(fā)微信小程序，我使用過程中感覺的好處是：

• uni-app框架使用的開發(fā)工具 HBuilderX，HBuilderX 內(nèi)置相關(guān)環(huán)境，開箱即用，無需配置nodejs， 需要什么插件可直接下載，測試、打包、發(fā)布特別方便。
• uni-app采用Vue.js語法，基本支持vue大部分語法（vue的動態(tài)組件component不支持）。
• PC端使用vue封裝的一些js方法，以及建構(gòu)思想，可直接移植到uni-app中，比如：本人pc項(xiàng)目中api接口js文件，可直接復(fù)制到小程序框架api文件夾中（PS：api文件夾維護(hù)后端請求路徑）
• uni-app 周邊生態(tài)豐富，插件市場可用的組件特別多，也可使用vue語法自己封裝一些組件。


開發(fā)工具（HBuilderX）

• HBuilderX: 官網(wǎng)IDE下載地址;
• HBuilderX是通用的前端開發(fā)工具，但為uni-app做了特別強(qiáng)化。
• HBuilderX提供了一些插件，可直接下載安裝，具體如下圖： 工具 > 插件安裝

項(xiàng)目結(jié)構(gòu)

首先我們通過HBuilderx > 文件 > 項(xiàng)目，選擇uni-app項(xiàng)目，模板我選擇的是默認(rèn)模板，當(dāng)然你也可選擇其他模板，接著確認(rèn)創(chuàng)建，如果你選擇的是默認(rèn)模板，此時你的文件夾應(yīng)該如下圖：

接著我根據(jù)自己的項(xiàng)目需求，以及為了與vue的pc項(xiàng)目結(jié)構(gòu)保持一下，分別添加如下文件夾

具體代碼可參考GitHub:weixin-start

+-- api -- (頁面接口路徑)
|  +-- login.js
|  +-- tools.js
+-- colorui -- (color-ui 樣式)
+-- common -- (通用的js方法)
+-- components -- (通用的組件)
+-- pages -- (主要頁面)
+-- services -- (通用的服務(wù))
|  +-- auth.service.js -- (主要封裝了一些保存用戶的token方法)
|  +-- config.service.js -- (存放全局通用的變量)
|  +-- request.service.js -- (封裝了uni.request的方法)
+-- static -- (靜態(tài)文件)
+-- unpackage -- (在小程序模擬器運(yùn)行的文件)
+-- App.vue -- (應(yīng)用配置，用來配置App全局樣式以及監(jiān)聽 )
+-- main.js -- ( Vue初始化入口文件)
+-- manifest.json -- (配置應(yīng)用名稱、appid、logo、版本等打包信息)
+-- pages.json -- (配置頁面路由、導(dǎo)航條、選項(xiàng)卡等頁面類信息)
+-- uni.scss -- (這里是uni-app內(nèi)置的常用樣式變量)

網(wǎng)站名稱：使用uni-app開發(fā)微信小程序的實(shí)現(xiàn)-創(chuàng)新互聯(lián)
瀏覽路徑：http://weahome.cn/article/cdpsis.html