9月份,開始開發微信小程序,也曾調研過wepy
/mpvue
,考慮到後期跨端的需求,最終選擇使用了uni-app
,本文主要介紹如何使用uni-app
搭建小程序項目,以及本身對框架的補充,包括封裝request
接口,引用color-ui
,動態設置底部tab
頁等,詳情見下文javascript
uni-app
是一個使用Vue.js
開發全部前端應用的框架,開發者編寫一套代碼,可發佈到iOS
、Android
、H5
、以及各類小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個平臺。css
即便不跨端,uni-app
同時也是更好的小程序開發框架。詳見評測html
好處如圖:前端
我使用uni-app
框架主要用來開發微信小程序,我使用過程當中感受的好處是:vue
uni-app
框架使用的開發工具 HBuilderX
,HBuilderX
內置相關環境,開箱即用,無需配置nodejs
, 須要什麼插件可直接下載,測試、打包、發佈特別方便。uni-app
採用Vue.js
語法,基本支持vue
大部分語法(vue
的動態組件component
不支持)。PC
端使用vue
封裝的一些js
方法,以及建構思想,可直接移植到uni-app
中,好比:本人pc
項目中api
接口js
文件,可直接複製到小程序框架api
文件夾中(PS:api
文件夾維護後端請求路徑)uni-app
周邊生態豐富,插件市場可用的組件特別多,也可以使用vue語法本身封裝一些組件。HBuilderX
: 官網IDE下載地址;HBuilderX
是通用的前端開發工具,但爲uni-app
作了特別強化。HBuilderX
提供了一些插件,可直接下載安裝,具體以下圖: 工具
> 插件安裝
首先咱們經過HBuilderx
> 文件
> 項目
,選擇uni-app
項目,模板我選擇的是默認模板,固然你也可選擇其餘模板,接着確認建立,若是你選擇的是默認模板,此時你的文件夾應該以下圖:java
接着我根據本身的項目需求,以及爲了與vue
的pc
項目結構保持一下,分別添加以下文件夾node
具體代碼可參考GitHub:weixin-startandroid
+-- api -- (頁面接口路徑) | +-- login.js | +-- tools.js +-- colorui -- (color-ui 樣式) +-- common -- (通用的js方法) +-- components -- (通用的組件) +-- pages -- (主要頁面) +-- services -- (通用的服務) | +-- auth.service.js -- (主要封裝了一些保存用戶的token方法) | +-- config.service.js -- (存放全局通用的變量) | +-- request.service.js -- (封裝了uni.request的方法) +-- static -- (靜態文件) +-- unpackage -- (在小程序模擬器運行的文件) +-- App.vue -- (應用配置,用來配置App全局樣式以及監聽 ) +-- main.js -- ( Vue初始化入口文件) +-- manifest.json -- (配置應用名稱、appid、logo、版本等打包信息) +-- pages.json -- (配置頁面路由、導航條、選項卡等頁面類信息) +-- uni.scss -- (這裏是uni-app內置的經常使用樣式變量)
主要文件介紹:git
api
文件夾中存放的是各個頁面的請求路徑,引入request.service.js
暴露出來的api
,colorui
使用了color-ui
樣式,我的認爲樣式很是好看,很是感謝,詳情:color-uicommon
存放全局通用的js方法components
存放全局組件,包括uni-ui
以及本身封裝的組件pages
主要頁面, 其中pages
文件夾中 index
文件中可佈局底部的tab
頁面,經過v-if
判斷顯示不一樣的tab頁services
通用的服務文件(我不知道這種描述是否準確,原來用的Angular4
,Angular
中服務概念對我有必定的影響)
auth.service.js
經過使用uni.setStorageSync
簡單封裝了一些保存用戶的token
方法config.service.js
保存全局的變量 例如:apiUrl
請求接口的IP
, storage_key
是token
的鍵值,全局引用的變量均可定義在這個文件內,後期若是須要改動,只須要修改這個文件中對用的值request.service.js
使用Promise
對uni.request
進行封裝,將get
、post
、delete
請求方式暴露出來,在api
文件夾中引用這個文件便可使用get
、post
、delete
方法static
靜態文件,我主要用來放圖片unpackage
(在小程序模擬器運行的文件)App
應用配置,用來配置App全局樣式以及監聽本人項目中須要根據不一樣的角色顯示不一樣的底圖tab頁
,那麼原來在pages.json
設置的tab
頁,不夠靈活,也很差擴展,所以自定義tab
頁,具體以下github
pages
文件夾中,新建一個index
文件夾並建立一個index.vue
頁面,在這個頁面可佈局底部tab
, 根據點擊不一樣的tab
顯示對應的tab頁, 如圖:注意:
ColorUI是一個css庫!!!在你引入樣式後能夠根據class來調用組件
App.vue
引入關鍵Css
main.css
icon.css
<style> @import "colorui/main.css"; @import "colorui/icon.css"; @import "app.css"; /* 你的項目css */ .... </style>
此時你可使用colorUI提供的css樣式了,
由於colorUI的文檔說明正在完善中,具體樣式對應的類名可能不清楚,那麼你可將color-ui下載下來,使用HBuilderX
運行在瀏覽器中,打開調試工具,找到對應的節點便可獲取對應的類名,(固然你也可能會有其餘好的方法)。
pages.json
配置取消系統導航欄"globalStyle": { "navigationStyle": "custom" },
App.vue
得到系統信息onLaunch: function() { uni.getSystemInfo({ success: function(e) { // #ifndef MP Vue.prototype.StatusBar = e.statusBarHeight; if (e.platform == 'android') { Vue.prototype.CustomBar = e.statusBarHeight + 50; } else { Vue.prototype.CustomBar = e.statusBarHeight + 45; }; // #endif // #ifdef MP-WEIXIN (微信小程序) Vue.prototype.StatusBar = e.statusBarHeight; let custom = wx.getMenuButtonBoundingClientRect(); Vue.prototype.Custom = custom; Vue.prototype.CustomBar = custom.bottom + custom.top - e.statusBarHeight; // #endif // #ifdef MP-ALIPAY Vue.prototype.StatusBar = e.statusBarHeight; Vue.prototype.CustomBar = e.statusBarHeight + e.titleBarHeight; // #endif } }) },
main.js
引入cu-custom
組件import cuCustom from './colorui/components/cu-custom.vue' Vue.component('cu-custom',cuCustom)
<cu-custom bgColor="bg-gradual-blue" :isBack="true"> <block slot="backText">返回</block> <block slot="content">導航欄</block> </cu-custom>
根據平臺特性,uni-app
提供了條件編譯手段,在一個工程裏優雅的完成了平臺個性化實現。
<view class="content"> <! -- #ifdef APP-PLUS --> <view>僅出如今 5+App 平臺下的代碼</view> <! -- #endif --> <! -- #ifndef H5 --> <view>除了 H5 平臺,其它平臺均存在的代碼</view> <! -- #endif --> <! -- #ifdef H5 || MP-WEIXIN --> <view>僅在 H5 平臺或微信小程序平臺存在的代碼</view> <! -- #endif --> </view>
服務器域名必須是https
合法域名
進入開發頁面 開發
> 開發設置
,設置服務器域名, 如圖
發佈小程序以前須要配置appid
,應用名稱、logo,可登陸微信公衆平臺進入設置頁,設置小程序的基本信息
使用HBuilderx
找到發行
> 小程序-微信
,點擊後稍等片刻會啓動微信開發工具,點擊微信開發工具上傳
,填寫上傳信息便可,此時上傳到微信公共平臺是體驗版,須要在版本管理
>提交審覈
,等待後臺審覈,審覈完成後,小程序也就上線成功了,如圖:
本文主要介紹了使用uni-app框架開發微信小程序,本身對默認模板的補充,包括封裝request
接口,引用color-ui
,動態設置底部tab
頁,還有經過color-ui
提供的導航欄組件,自定義導航欄。本人才疏學淺,表達能力有限,書寫過程若有錯誤歡迎指正,也請點贊評論鼓勵(ps: 心裏怕怕的)
關於uni-app
更多信息可參考官方文檔 https://uniapp.dcloud.io