前言
創(chuàng)新互聯(lián)建站專注于祥符企業(yè)網(wǎng)站建設(shè),成都響應(yīng)式網(wǎng)站建設(shè)公司,商城網(wǎng)站建設(shè)。祥符網(wǎng)站建設(shè)公司,為祥符等地區(qū)提供建站服務(wù)。全流程按需網(wǎng)站開發(fā),專業(yè)設(shè)計(jì),全程項(xiàng)目跟蹤,創(chuàng)新互聯(lián)建站專業(yè)和態(tài)度為您提供的服務(wù)
9月份,開始開發(fā)微信小程序,也曾調(diào)研過wepy
/mpvue
,考慮到后期跨端的需求,最終選擇使用了uni-app
,本文主要介紹如何使用uni-app
搭建小程序項(xiàng)目,以及自己對(duì)框架的補(bǔ)充,包括封裝request
接口,引用color-ui
,動(dòng)態(tài)設(shè)置底部tab
頁等,詳情見下文
uni-app 介紹(官網(wǎng))
uni-app
是一個(gè)使用Vue.js
開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS
、Android
、H5
、以及各種小程序(微信/支付寶/百度/頭條/QQ/釘釘)等多個(gè)平臺(tái)。
即使不跨端,uni-app
同時(shí)也是更好的小程序開發(fā)框架。詳見評(píng)測(cè)
好處如圖:
我使用uni-app
框架主要用來開發(fā)微信小程序,我使用過程中感覺的好處是:
開發(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)模板,此時(shí)你的文件夾應(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)置的常用樣式變量)
主要文件介紹:
如何自定義底部tab導(dǎo)航欄
本人項(xiàng)目中需要根據(jù)不同的角色顯示不同的底圖tab頁
,那么原來在pages.json
設(shè)置的tab
頁,不夠靈活,也不好擴(kuò)展,因此自定義tab
頁,具體如下
在pages
文件夾中,新建一個(gè)index
文件夾并創(chuàng)建一個(gè)index.vue
頁面,在這個(gè)頁面可布局底部tab
, 根據(jù)點(diǎn)擊不同的tab
顯示對(duì)應(yīng)的tab頁, 如圖:
注意:
如果每個(gè)tab點(diǎn)擊是切換不同的view,這個(gè)就相當(dāng)于單頁應(yīng)用了,當(dāng)頁面比較復(fù)雜時(shí),切換過程可能存在卡。所以使用自定義組件的tabbar就盡量避免太多復(fù)雜頁面。
當(dāng)然原生tabbar雖然體驗(yàn)好,但自定義性不足。這個(gè)需要開發(fā)者根據(jù)自己的需求來平衡選擇。
如何使用colorui
引入
ColorUI是一個(gè)css庫?。。≡谀阋霕邮胶罂梢愿鶕?jù)class來調(diào)用組件
下載源碼解壓獲得/Colorui-UniApp文件夾,復(fù)制目錄下的 /colorui 文件夾到你的項(xiàng)目根目錄
App.vue
引入關(guān)鍵Css
main.css
icon.css
<style> @import "colorui/main.css"; @import "colorui/icon.css"; @import "app.css"; /* 你的項(xiàng)目css */ .... </style>
此時(shí)你可以使用colorUI提供的css樣式了,
因?yàn)閏olorUI的文檔說明正在完善中,具體樣式對(duì)應(yīng)的類名可能不清楚,那么你可將color-ui下載下來,使用HBuilderX
運(yùn)行在瀏覽器中,打開調(diào)試工具,找到對(duì)應(yīng)的節(jié)點(diǎn)即可獲取對(duì)應(yīng)的類名,(當(dāng)然你也可能會(huì)有其他好的方法)。
使用colorui自定義導(dǎo)航欄
pages.json
配置取消系統(tǒng)導(dǎo)航欄
"globalStyle": { "navigationStyle": "custom" },
App.vue
獲得系統(tǒng)信息
"globalStyle": { "navigationStyle": "custom" },
在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">導(dǎo)航欄</block> </cu-custom>
跨端兼容(如何你只是開發(fā)小程序,就不需要考慮)
根據(jù)平臺(tái)特性,uni-app
提供了條件編譯手段,在一個(gè)工程里優(yōu)雅的完成了平臺(tái)個(gè)性化實(shí)現(xiàn)。
<view class="content"> <! -- #ifdef APP-PLUS --> <view>僅出現(xiàn)在 5+App 平臺(tái)下的代碼</view> <! -- #endif --> <! -- #ifndef H5 --> <view>除了 H5 平臺(tái),其它平臺(tái)均存在的代碼</view> <! -- #endif --> <! -- #ifdef H5 || MP-WEIXIN --> <view>僅在 H5 平臺(tái)或微信小程序平臺(tái)存在的代碼</view> <! -- #endif --> </view>
發(fā)布微信小程序
服務(wù)器域名必須是https
合法域名
進(jìn)入開發(fā)頁面 開發(fā)
> 開發(fā)設(shè)置
,設(shè)置服務(wù)器域名, 如圖
發(fā)布小程序之前需要配置appid
,應(yīng)用名稱、logo,可登錄微信公眾平臺(tái)進(jìn)入設(shè)置頁,設(shè)置小程序的基本信息
使用HBuilderx
找到發(fā)行
> 小程序-微信
,點(diǎn)擊后稍等片刻會(huì)啟動(dòng)微信開發(fā)工具,點(diǎn)擊微信開發(fā)工具上傳
,填寫上傳信息即可,此時(shí)上傳到微信公共平臺(tái)是體驗(yàn)版,需要在版本管理
>提交審核
,等待后臺(tái)審核,審核完成后,小程序也就上線成功了,如圖:
總結(jié)
本文主要介紹了使用uni-app框架開發(fā)微信小程序,自己對(duì)默認(rèn)模板的補(bǔ)充,包括封裝request
接口,引用color-ui
,動(dòng)態(tài)設(shè)置底部tab
頁,還有通過color-ui
提供的導(dǎo)航欄組件,自定義導(dǎo)航欄。本人才疏學(xué)淺,表達(dá)能力有限,書寫過程如有錯(cuò)誤歡迎指正,也請(qǐng)點(diǎn)贊評(píng)論鼓勵(lì)(ps: 內(nèi)心怕怕的)
關(guān)于uni-app
更多信息可參考官方文檔 https://uniapp.dcloud.io
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持創(chuàng)新互聯(lián)。
文章題目:使用uni-app開發(fā)微信小程序的實(shí)現(xiàn)
鏈接URL:http://muchs.cn/article40/jcjjeo.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供營銷型網(wǎng)站建設(shè)、網(wǎng)站導(dǎo)航、微信小程序、手機(jī)網(wǎng)站建設(shè)、靜態(tài)網(wǎng)站、網(wǎng)站排名
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)