微信小程序使用uni-app開發(fā)小程序及部分功能實現(xiàn)詳解
一、uni-app
官網(wǎng):https://uniapp.dcloud.io/
1、簡介
uni-app 是一個使用 Vue.js (opens new window) 開發(fā)所有前端應(yīng)用的框架,開發(fā)者編寫一套代碼,可發(fā)布到iOS、Android、Web(響應(yīng)式)、以及各種小程序(微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶)、快應(yīng)用等多個平臺;
2、開發(fā)工具
uni-app 推薦使用 Hbuilderx 開發(fā)工具來開發(fā)項目,下載地址:https://www.dcloud.io/hbuilderx.html或者點擊這里下載,下載 App開發(fā)版;
1、安裝 sass 插件
點擊 工具 => 插件安裝 => 安裝新插件 => 前往插件市場安裝 ,在這里你可以搜索自己需要的插件,我們以 sass 為例;找到需要的插件之后點擊下載 => 使用Hbuilderx 導(dǎo)入插件,這里需要登錄 sass 的網(wǎng)站,如果登錄成功則會打開 Hbuilderx 編譯器,然后點擊確定就可以安裝了;
3、新建 uni-app項目
Hbuilderx 點擊 文件=>新增=>項目 ,本文新建一個小程序項目:uni-app => 填寫項目名稱、選擇項目存放路徑 => 模板 uni-ui 項目=>創(chuàng)建,然后就可以生成一個小程序項目;

components:組件文件
pages:頁面文件
static:靜態(tài)文件
uni_modules:依賴包
App.vue:應(yīng)用配置,配置小程序全局樣式、生命周期
main.js:Vue 初始化入口文件
manifest.json:配置應(yīng)用名稱 appid、logo、版本等打包信息
pages.json:配置頁面路徑、頁面樣式、tabBar等信息
uni,scss:全局樣式
4、把項目運(yùn)行到微信開發(fā)者工具
1、配置 appid
在 manifest.json 文件 => 微信小程序配置 填寫微信小程序 appID;
2、在 Hbuilderx 配置微信開發(fā)者工具的安裝路徑:這樣可以在 Hbuilderx 里面運(yùn)行的時候自動打開微信開發(fā)者工具查看項目
工具 => 設(shè)置 => 運(yùn)行配置 => 小程序運(yùn)行配置 配置微信開發(fā)者工具的安裝路徑,如:C:\Program Files (x86)\Tencent\微信web開發(fā)者工具
3、在微信開發(fā)者工具開啟服務(wù)端口
設(shè)置 => 安全設(shè)置 => 安全 開啟服務(wù)端口
4、運(yùn)行
Hbuilderx 點擊 運(yùn)行=>運(yùn)行到小程序模擬器 點擊第一個就可以在 Hbuilderx 自動編譯,成功之后會自動打開微信開發(fā)者工具;
注意:這個時候我們想修改項目里面的內(nèi)容,需要在 Hbuilderx 里面修改,例如修改配置:manifest.json 文件 => 源碼視圖
二、實現(xiàn)tabBar效果
1、創(chuàng)建tabBar頁面
在 pages 下面創(chuàng)建,右鍵新建頁面,這里創(chuàng)建的是 tanBar 對應(yīng)的幾個頁面;記住這里要勾選"創(chuàng)建同名目錄、在pages.json 中注冊"兩個選項,默認(rèn)是選中的;(home、cate、cart、my)
2、配置tabBar
在 pages.json 文件中在 pages 平級新增 tabBar 的配置:
"tabBar":{
"selectedColor":"#C00000",
"list":[
{
"pagePath":"pages/home/home",
"text":"首頁",
"iconPath":"static/c1.png",
"selectedIconPath":"static/c2.png"
},
{
"pagePath":"pages/cate/cate",
"text":"分類",
"iconPath":"static/c3.png",
"selectedIconPath":"static/c4.png"
},
{
"pagePath":"pages/cart/cart",
"text":"購物車",
"iconPath":"static/c5.png",
"selectedIconPath":"static/c6.png"
},
{
"pagePath":"pages/my/my",
"text":"我的",
"iconPath":"static/c7.png",
"selectedIconPath":"static/c8.png"
}
]
}
注意:home 也必須在 pages 數(shù)組的第一位;還可以在 pages.json 文件修改 globalStyle 配置項,來自定義自己的導(dǎo)航條樣式;
三、配置網(wǎng)絡(luò)請求
由于小程序不支持 axios ,并且原生的 wx.request() API 功能比較簡單,且不支持?jǐn)r截器等全局定制的功能;所以建議在 uni-app 項目中使用 @escook/request-miniprogram 第三方包發(fā)起網(wǎng)絡(luò)請求;
官網(wǎng):https://www.npmjs.com/package/@escook/request-miniprogram
1、依照官網(wǎng)提示安裝、導(dǎo)入、使用
//引入網(wǎng)絡(luò)請求
import { $http } from '@escook/request-miniprogram';
uni.$http = $http;
//全局baseUrl
$http.baseURL = "https://www.uinav.com";
//請求攔截器
$http.beforeRequest = function (options) {
uni.showLoading({
title:"數(shù)據(jù)加載中..."
})
}
//相應(yīng)攔截器
$http.afterRequest = function () {
uni.hideLoading()
}
在 uni-app 中可以使用 uni.xxx 來調(diào)用 wx.xxx 的 api;
2、實戰(zhàn)
//home
data() {
return {
swiperList:[]
};
},
onLoad() {
this.getSwiperList();
},
methods:{
async getSwiperList(){
let { data:res } = await uni.$http.get('接口地址')
if(res.meta.status !== 200){
return uni.showToast({
title:"數(shù)據(jù)請求失敗",
duration:1500,
icon:"none"
})
}
this.swiperList = res.message;
}
}
四、uni-app 里面小程序分包
1、創(chuàng)建分包目錄
在根目錄下創(chuàng)建分包目錄,subpackage;
2、在 pages.json 文件中配置
在 pages 節(jié)點同級,聲明 subpackages 節(jié)點用來配置分包結(jié)構(gòu);
"subPackages":[
{
"root":"subpackage",
"pages":[]
}
]
3、創(chuàng)建分包頁面
在 sunpackage 目錄上右鍵點擊新建文件,填寫頁面名稱、選擇分包 sunpackage ,然后創(chuàng)建就可以了,編譯器會自動在代碼中將配置信息填充到 sunpackage 分包下面;
"subPackages":[
{
"root":"subpackage",
"pages":[{
"path" : "goods_detail/goods_detail",
"style" :{
"navigationBarTitleText": "",
"enablePullDownRefresh": false
}
}
]
}
]
注意:這里提一下,頁面跳轉(zhuǎn)傳參跟小程序原生跳轉(zhuǎn)傳參是一樣的:1、navigator 配合 url 跳轉(zhuǎn)、路徑拼接傳參;2、點擊事件通過 uni.redirectTo ;
五、公用方法封裝
這里以 錯誤提示信息為例,在 main.js 中;
uni.$showMsg = function(titie="請求失敗",duration=1000){
uni.showToast({
title,
duration,
icon:"none"
})
}
六、搜索功能
1、搜索組件
1、自定義搜索組件:在 components 文件夾右鍵,選擇 新建組件 ,在這里可以編寫組件的內(nèi)容;
2、小程序自定義組件自定義事件:由于小程序提供的組件已經(jīng)幫助我們封裝了 click 事件,所以我們可以直接使用,但是我們自定義的組件沒有封裝所以不能直接在自定義的組件上使用 click 事件;
我們可以在父組件綁定一個自定義事件,然后子組件綁定 click 事件,在觸發(fā) click 的時候通過 $emit 來觸發(fā)父組件綁定的自定義事件,這樣就可以完成自定義組件的事件傳遞;
3、吸頂:主要是利用 position:sticky ,把組件定位到頁面的頂部;
最后使用組件:直接在頁面使用就可以了,組件名是自定義組件的文件名稱;
//自定義組件
<template>
<view class="my-search-container" :style="{'background-color':bgColor}">
<view class="my-search-box" :style="{'border-radius':radius}">
<uni-icons type="search" size="18"></uni-icons>
<text class="placeholder">搜索</text>
</view>
</view>
</template>
<script>
export default {
name:"my-search",
props:{
bgColor:{
type:String,
default:"#c00000"
},
radius:{
type:String,
default:"18px"
}
},
methods:{
//通過 $emit 來觸發(fā)父組件上綁定的自定義事件
searchEvent(){
this.$emit('myclick')
}
}
}
</script>
<style lang="scss">
.my-search-container{
height: 50px;
// background-color: #c00000;
display:flex;
align-items: center;
padding: 0 10px;
.my-search-box{
height: 36px;
background-color: #FFF;
// border-radius: 18px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
.placeholder{
font-size: 15px;
margin-left: 5px;
}
}
}
</style>
//父組件
<template>
<view>
<view class="suckTop">
<my-search @myclick="goSearch" :radius="'0px'" :bgColor="'pink'"></my-search>
</view>
</view>
</template>
<script>
export default {
methods:{
goSearch(){
uni.navigateTo({
url:"/subpackage/search/search"
})
}
}
}
</script>
<style lang="scss">
.suckTop{
position: sticky;
top: 0;
z-index: 999;
}
</style>
2、搜索建議實現(xiàn)
<template>
<view>
<view class="suckTop">
<uni-search-bar @input="input" :radius="18" :focus="true" cancelButton="none"></uni-search-bar>
</view>
</view>
</template>
<script>
export default {
data() {
return {
timer:null,
kw:''
}
},
methods: {
//輸入框事件
input(e){
clearTimeout(this.timer)
this.timer = setTimeout(_=>{
this.kw = e.value;
},500)
},
}
}
</script>
<style lang="scss">
.suckTop{
position: sticky;
top: 0;
z-index: 999;
.uni-searchbar {
background-color: #c00000
}
}
</style>
使用 uni-app 提供的組件,添加 focus 讓界面自動鎖定輸入框, input 事件添加節(jié)流,然后就可以在節(jié)流方法里面調(diào)用接口來獲取并渲染搜索出來的結(jié)果;
3、本地存儲
//存
uni.setStorageSync('kw',JSON.stringify(this.kw));
//onLoad 聲明周期中 取
let list = JSON.parse(uni.getStorageSync('kw') || '');
//刪除
uni.setStorageSync('kw',[]);
4、過濾器
跟 data 平級聲明 filters
filters:{
toFixed(num){
return Number(num).toFixed(2);
}
}
使用的時候直接在界面上
<view>{{num | toFixed}}</view>
七、上拉加載、下拉刷新
1、上拉加載
在 pages.json 中找到當(dāng)前頁面在 pages 數(shù)組中的路徑,在 style 中新增 onReachBottomDistance 設(shè)置為 150;
在頁面中 methods 平級聲明一個 onReachBottom 方法來監(jiān)聽頁面上拉事件;
data() {
return {
isLoading:false
};
},
methods:{
getList(){
//打開節(jié)流閥
this.isLoading = true;
//獲取數(shù)據(jù)
let res = .....
//關(guān)閉節(jié)流閥
this.isLoading = false;
}
},
//監(jiān)聽上拉事件
onReachBottom() {
//沒有更多數(shù)據(jù)
if(this.pagenum*this.pagesize >= this.total) return uni.$showMsg('沒有更多數(shù)據(jù)了')
//限流 防止頻繁請求
if(this.isLoading) return;
//頁面自增加一
this.pagenum++;
//獲取列表數(shù)據(jù)的方法
this.getList();
}
2、下拉刷新
在 pages.json 中找到當(dāng)前頁面在 pages 數(shù)組中的路徑,在 style 中新增 enablePullDownRefresh設(shè)置為 true;
在頁面中 methods 平級聲明一個 onPullDownRefresh方法來監(jiān)聽頁面上拉事件;
methods:{
getList(cb){
//打開節(jié)流閥
this.isLoading = true;
//調(diào)用回調(diào)函數(shù)
cb && cb();
//獲取數(shù)據(jù)
let res = .....
//關(guān)閉節(jié)流閥
this.isLoading = false;
}
},
onPullDownRefresh() {
this.total = 0;
this.pagenum = 1;
this.list = [];
this.isLoading = false;
//傳入回調(diào)函數(shù),停止下拉刷新效果
this.getList(()=> uni.stopPullDownRefresh());
}
八、配置 vuex
1、創(chuàng)建文件
根目錄創(chuàng)建文件夾 store,在文件夾下創(chuàng)建文件 store.js ;
2、初始化store
//store.js
import Vue from "vue";
import Vuex from "vuex";
Vue.use(Vuex);
import cart from '@/store/cart.js'
const store = new Vuex.Store({
modules:{
cart
}
})
export default store;
3、main.js 中引入
//main.js
import store from './store/store.js'
const app = new Vue({
...App,
//掛載到vue實例上
store
})
app.$mount()
4、新建模塊
新建一個 cart 模塊的 js 文件,然后在 store.js 里面引入;
//cart.js
export default {
namespaced:true,
state:{
cart:[]
},
//修改state 只能通過 mutations
mutations:{
addCart:(state,data)=>{
state.cartList.push(data)
}
},
getter:{}
}
5、使用
import { mapState, mapActions, mapMutations } from 'vuex';
computed:{
...mapState({
cartList:state=>state.cart.cartList
})
},
methods: {
...mapMutations(['addCart']),
addCartInfo(){
this.addCart(2)
// this.$store.commit('addCart',2)
},
//輸入框事件
input(e){
clearTimeout(this.timer)
this.timer = setTimeout(_=>{
this.kw = e.value;
},500)
}
}
九、登錄
在調(diào)用登錄接口之前,我們需要先獲取用戶的基本信息以及 code,作為參數(shù);
1、獲取用戶基本信息
<button open-type="getUserInfo" @getuserinfo="getInfo">一鍵登錄</button>
methods:{
//自定義方法
getInfo(e){
console.log(e)
}
}
這里直接使用 button 組件提供的 open-type 等于 getUserInfo ,并配合 @getuserinfo 事件綁定的方法中獲取到用戶信息;這里是固定寫法;參考官網(wǎng):https://uniapp.dcloud.io/component/button.html
2、獲取用戶登錄憑證 code
這個可以直接調(diào)用 uni.login() API ;
async getCode(){
let [err,res] = await uni.login().catch(err=>err)
console.log(res)
}
十、支付
1、請求頭添加 token
只有登錄成功之后才能調(diào)用支付相關(guān)的接口,我們需要將登錄后獲取的 token 設(shè)置在有權(quán)限的接口請求字段里;一般在請求攔截里面為接口統(tǒng)一配置 header;
$http.beforeRequest = function (options) {
uni.showLoading({
title:"數(shù)據(jù)加載中..."
})
options.header = {
Authorization: token
}
}
2、微信支付流程
1、創(chuàng)建訂單
將訂單信息提交給后臺服務(wù)器,創(chuàng)建訂單,獲取訂單號;
2、訂單預(yù)支付
將訂單號發(fā)送給后臺服務(wù)器,獲取到支付相關(guān)的參數(shù);
3、調(diào)用微信支付
調(diào)用 uni.requestPayment(OBJECT) API,發(fā)起支付請求;通過 fail、 success 回調(diào)函數(shù)監(jiān)聽支付是否成功,然后調(diào)取后臺接口將支付狀態(tài)同步給數(shù)據(jù)庫;
十一、發(fā)布
小程序只有在發(fā)布后才能夠被用戶檢索使用,開發(fā)期間為了便于調(diào)試,小程序會攜帶 sourcemap 等類型的文件,并且代碼沒有進(jìn)行壓縮因此體積比較大,所以需要壓縮發(fā)布;
1、發(fā)布為小程序
1、點擊 hbuilderx 工具欄 發(fā)行 => 小程序-微信,這時候會有一個彈出框,需要填寫小程序的名稱和 AppID;
2、點擊發(fā)行按鈕,hbuilderx 的控制臺就會顯示打包編譯進(jìn)度;
3、編譯成功之后會自動發(fā)開微信開發(fā)者工具,這時候點擊上傳按鈕;
4、然后會彈出一些提示信息,點擊確定,彈出 版本號、項目備注彈窗,點擊上傳就可以了;
5、然后微信小程序后臺審核上線就可以了;
2、發(fā)布為安卓APP
1、點擊 hbuilderx 左下角未登錄,進(jìn)行賬號登錄;
2、登錄之后點擊項目的 manifest.js 文件,基礎(chǔ)配置里面,填寫 uni-app 的 AppID 、應(yīng)用名稱、描述、版本等;
3、App圖標(biāo)配置,預(yù)覽選擇圖片,然后自動生成配置;
4、點擊 hbuilderx 工具欄 發(fā)行 => 原生App-云打包,然后彈出彈窗,選擇 安卓apk包,ios需要先購買開發(fā)者身份才能打包,使用公共的測試證書,勾選打正式包,然后點擊打包;
5、然后在 hbuilderx 控制臺顯示打包進(jìn)度,成功之后會返回一個下載地址的連接,點擊連接就可以下載 apk 的安裝包,這個 apk 包就可以在安卓系統(tǒng)上安裝查看了;
其他
下面是一些比較常見的組件、API、問題:
1、API:uni.previewImage(OBJECT)
預(yù)覽圖片,可以將輪播圖方法查看;
2、API:uni.chooseAddress(OBJECT)
獲取用戶收貨地址。調(diào)起用戶編輯收貨地址原生界面,并在編輯完成后返回用戶選擇的地址,需要用戶授權(quán) scope.address;
3、組件:rich-text
渲染富文本;
4、組件:uni-goods-nav
商品加入購物車,立即購買組件;
5、問題:.webp 后綴圖片在 ios 不展示問題
ios 上圖片 .webp 格式支持不怎么友好,可以只要正則表達(dá)式將圖片后綴名替換成 .jpg ;
6、問題:商品價格閃爍問題
數(shù)據(jù)在請求到頁面之前, data 里面的數(shù)據(jù)初始為 {} ,因此初次渲染會導(dǎo)致一些數(shù)據(jù)閃爍,可以先利用 v-if 判斷這個數(shù)據(jù)是否存在,來控制整體界面的顯示隱藏;
7、問題:收獲地址授權(quán)失敗問題
判斷是否是授權(quán)失敗問題,是則直接調(diào)用 uni.openSetting(OBJECT) API 開啟地址權(quán)限;注意兼容 ios 和 安卓;
總結(jié)
到此這篇關(guān)于微信小程序使用uni-app開發(fā)小程序及部分功能實現(xiàn)的文章就介紹到這了,更多相關(guān)微信小程序用uni-app開發(fā)小程序內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
javascript二維數(shù)組和對象的深拷貝與淺拷貝實例分析
這篇文章主要介紹了javascript二維數(shù)組和對象的深拷貝與淺拷貝,結(jié)合實例形式分析了JavaScript針對數(shù)組與對象的深拷貝及淺拷貝相關(guān)操作技巧,需要的朋友可以參考下2019-10-10
JS將網(wǎng)址url轉(zhuǎn)化為JSON格式的方法
這篇文章主要介紹了JS將網(wǎng)址url轉(zhuǎn)化為JSON格式的方法,需要的朋友可以參考下2018-07-07
js 創(chuàng)建對象的多種方式與優(yōu)缺點小結(jié)
這篇文章主要介紹了js 創(chuàng)建對象的多種方式與優(yōu)缺點,幫助大家更好的理解和學(xué)習(xí)使用JavaScript,感興趣的朋友可以了解下2021-03-03
如何在微信小程序?qū)崿F(xiàn)一個幸運(yùn)轉(zhuǎn)盤小游戲
這篇文章主要給大家介紹了關(guān)于如何在微信小程序?qū)崿F(xiàn)一個幸運(yùn)轉(zhuǎn)盤小游戲的相關(guān)資料,文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2021-04-04

