使用uni-app開發微信小程序

uni-app 開發微信小程序

前言

9月份,開始開發微信小程序,也曾調研過wepy/mpvue,考慮到後期跨端的需求,最終選擇使用了uni-app,本文主要介紹如何使用uni-app搭建小程序項目,以及本身對框架的補充,包括封裝request接口,引用color-ui,動態設置底部tab頁等,詳情見下文javascript

uni-app 介紹(官網)

uni-app是一個使用Vue.js 開發全部前端應用的框架,開發者編寫一套代碼,可發佈到iOSAndroidH5、以及各類小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個平臺。css

即便不跨端,uni-app同時也是更好的小程序開發框架。詳見評測html

好處如圖:前端

我使用uni-app框架主要用來開發微信小程序,我使用過程當中感受的好處是:vue

  • uni-app框架使用的開發工具 HBuilderXHBuilderX 內置相關環境,開箱即用,無需配置nodejs, 須要什麼插件可直接下載,測試、打包、發佈特別方便。
  • uni-app採用Vue.js語法,基本支持vue大部分語法(vue的動態組件component不支持)。
  • PC端使用vue封裝的一些js方法,以及建構思想,可直接移植到uni-app中,好比:本人pc項目中api接口js文件,可直接複製到小程序框架api文件夾中(PS:api文件夾維護後端請求路徑)
  • uni-app 周邊生態豐富,插件市場可用的組件特別多,也可以使用vue語法本身封裝一些組件。

開發工具(HBuilderX)

  • HBuilderX: 官網IDE下載地址;
  • HBuilderX是通用的前端開發工具,但爲uni-app作了特別強化。
  • HBuilderX提供了一些插件,可直接下載安裝,具體以下圖: 工具 > 插件安裝

項目結構

首先咱們經過HBuilderx > 文件 > 項目,選擇uni-app項目,模板我選擇的是默認模板,固然你也可選擇其餘模板,接着確認建立,若是你選擇的是默認模板,此時你的文件夾應該以下圖:java

接着我根據本身的項目需求,以及爲了與vuepc項目結構保持一下,分別添加以下文件夾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-ui
  • common 存放全局通用的js方法
  • components 存放全局組件,包括uni-ui以及本身封裝的組件
  • pages 主要頁面, 其中pages文件夾中 index文件中可佈局底部的tab頁面,經過v-if判斷顯示不一樣的tab頁
  • services 通用的服務文件(我不知道這種描述是否準確,原來用的Angular4Angular中服務概念對我有必定的影響)
    • auth.service.js 經過使用uni.setStorageSync簡單封裝了一些保存用戶的token方法
    • config.service.js 保存全局的變量 例如:apiUrl請求接口的IP, storage_keytoken 的鍵值,全局引用的變量均可定義在這個文件內,後期若是須要改動,只須要修改這個文件中對用的值
    • request.service.js 使用Promiseuni.request進行封裝,將getpostdelete請求方式暴露出來,在api文件夾中引用這個文件便可使用getpostdelete方法
  • static 靜態文件,我主要用來放圖片
  • unpackage (在小程序模擬器運行的文件)
  • App 應用配置,用來配置App全局樣式以及監聽

如何自定義底部tab導航欄

本人項目中須要根據不一樣的角色顯示不一樣的底圖tab頁,那麼原來在pages.json設置的tab頁,不夠靈活,也很差擴展,所以自定義tab頁,具體以下github

  • pages文件夾中,新建一個index文件夾並建立一個index.vue頁面,在這個頁面可佈局底部tab, 根據點擊不一樣的tab顯示對應的tab頁, 如圖:

注意:

  • 若是每一個tab點擊是切換不一樣的view,這個就至關於單頁應用了,當頁面比較複雜時,切換過程可能存在卡。因此使用自定義組件的tabbar就儘可能避免太多複雜頁面。
  • 固然原生tabbar雖然體驗好,但自定義性不足。這個須要開發者根據本身的需求來平衡選擇。

如何使用colorui

引入

ColorUI是一個css庫!!!在你引入樣式後能夠根據class來調用組件

  • 下載源碼解壓得到/Colorui-UniApp文件夾,複製目錄下的 /colorui 文件夾到你的項目根目錄
  • 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運行在瀏覽器中,打開調試工具,找到對應的節點便可獲取對應的類名,(固然你也可能會有其餘好的方法)。

使用colorui自定義導航欄

  • 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

相關文章
相關標籤/搜索