目錄
一、uni-app
1、簡(jiǎn)介
2、開發(fā)工具
3、新建 uni-app項(xiàng)目
4、把項(xiàng)目運(yùn)行到微信開發(fā)者工具
二、實(shí)現(xiàn)tabBar效果
1、創(chuàng)建tabBar頁面
2、配置tabBar
1、創(chuàng)建分包目錄
2、在 pages.json 文件中配置
3、創(chuàng)建分包頁面
四、公用方法封裝
五、搜索功能
1、搜索組件
2、搜索建議實(shí)現(xiàn)
3、本地存儲(chǔ)
4、過濾器
六、上拉加載、下拉刷新
1、上拉加載
2、下拉刷新
七、登錄
1、獲取用戶基本信息
2、獲取用戶登錄憑證 code
八、支付
1、請(qǐng)求頭添加 token
2、微信支付流程
其他
總結(jié)
一、uni-app
官網(wǎng)：uni-app官網(wǎng)
1、簡(jiǎn)介
uni-app 是一個(gè)使用 Vue.js (opens new window) 開發(fā)所有前端應(yīng)用的框架，開發(fā)者編寫一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)；
2、開發(fā)工具
uni-app 推薦使用 Hbuilderx 開發(fā)工具來開發(fā)項(xiàng)目，下載地址：HBuilderX-高效極客技巧或者點(diǎn)擊這里下載，下載 App開發(fā)版；
1、安裝 sass 插件
點(diǎn)擊?工具 => 插件安裝 => 安裝新插件 => 前往插件市場(chǎng)安裝?，在這里你可以搜索自己需要的插件，我們以 sass 為例；找到需要的插件之后點(diǎn)擊下載 => 使用Hbuilderx 導(dǎo)入插件，這里需要登錄 sass 的網(wǎng)站，如果登錄成功則會(huì)打開 Hbuilderx 編譯器，然后點(diǎn)擊確定就可以安裝了；
3、新建 uni-app項(xiàng)目
Hbuilderx 點(diǎn)擊?文件=>新增=>項(xiàng)目?，本文新建一個(gè)小程序項(xiàng)目：uni-app => 填寫項(xiàng)目名稱、選擇項(xiàng)目存放路徑 => 模板 uni-ui 項(xiàng)目=>創(chuàng)建，然后就可以生成一個(gè)小程序項(xià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、把項(xiàng)目運(yùn)行到微信開發(fā)者工具
1、配置 appid
在?manifest.json 文件 => 微信小程序配置?填寫微信小程序 appID；
2、在 Hbuilderx 配置微信開發(fā)者工具的安裝路徑：這樣可以在 Hbuilderx 里面運(yùn)行的時(shí)候自動(dòng)打開微信開發(fā)者工具查看項(xiàng)目
工具 => 設(shè)置 => 運(yùn)行配置 => 小程序運(yùn)行配置?配置微信開發(fā)者工具的安裝路徑，如：C:\Program Files (x86)\Tencent\微信web開發(fā)者工具
3、在微信開發(fā)者工具開啟服務(wù)端口
設(shè)置 => 安全設(shè)置 => 安全?開啟服務(wù)端口
4、運(yùn)行
Hbuilderx 點(diǎn)擊?運(yùn)行=>運(yùn)行到小程序模擬器?點(diǎn)擊第一個(gè)就可以在 Hbuilderx 自動(dòng)編譯，成功之后會(huì)自動(dòng)打開微信開發(fā)者工具；
注意：這個(gè)時(shí)候我們想修改項(xiàng)目里面的內(nèi)容，需要在 Hbuilderx 里面修改，例如修改配置：manifest.json 文件 => 源碼視圖
二、實(shí)現(xiàn)tabBar效果
1、創(chuàng)建tabBar頁面
在 pages 下面創(chuàng)建，右鍵新建頁面，這里創(chuàng)建的是 tanBar 對(duì)應(yīng)的幾個(gè)頁面；記住這里要勾選"創(chuàng)建同名目錄、在pages.json 中注冊(cè)"兩個(gè)選項(xiàng)，默認(rèn)是選中的；（home、cate、cart、my）
2、配置tabBar
在 pages.json 文件中在 pages 平級(jí)新增 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":"購(gòu)物車",
"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 配置項(xiàng)，來自定義自己的導(dǎo)航條樣式；
三、uni-app 里面小程序分包
1、創(chuàng)建分包目錄
在根目錄下創(chuàng)建分包目錄，subpackage；
2、在 pages.json 文件中配置
在 pages 節(jié)點(diǎn)同級(jí)，聲明 subpackages 節(jié)點(diǎn)用來配置分包結(jié)構(gòu)；
"subPackages":[
{
"root":"subpackage",
"pages":[]
}
]
3、創(chuàng)建分包頁面
在 sunpackage 目錄上右鍵點(diǎn)擊新建文件，填寫頁面名稱、選擇分包 sunpackage ，然后創(chuàng)建就可以了，編譯器會(huì)自動(dò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、點(diǎn)擊事件通過 uni.redirectTo ；
四、公用方法封裝
這里以 錯(cuò)誤提示信息為例，在 main.js 中；
uni.$showMsg = function(titie="請(qǐng)求失敗",duration=1000){
uni.showToast({
title,
duration,
icon:"none"
})
}
五、搜索功能
1、搜索組件
1、自定義搜索組件：在 components 文件夾右鍵，選擇?新建組件?，在這里可以編寫組件的內(nèi)容；
2、小程序自定義組件自定義事件：由于小程序提供的組件已經(jīng)幫助我們封裝了 click 事件，所以我們可以直接使用，但是我們自定義的組件沒有封裝所以不能直接在自定義的組件上使用 click 事件；
我們可以在父組件綁定一個(gè)自定義事件，然后子組件綁定 click 事件，在觸發(fā) click 的時(shí)候通過 $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、搜索建議實(shí)現(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 讓界面自動(dòng)鎖定輸入框， input 事件添加節(jié)流，然后就可以在節(jié)流方法里面調(diào)用接口來獲取并渲染搜索出來的結(jié)果；
3、本地存儲(chǔ)
//存
uni.setStorageSync('kw',JSON.stringify(this.kw));
//onLoad 聲明周期中 取
let list = JSON.parse(uni.getStorageSync('kw') || '');
//刪除
uni.setStorageSync('kw',[]);
4、過濾器
跟 data 平級(jí)聲明 filters
filters:{
toFixed(num){
return Number(num).toFixed(2);
}
}
使用的時(shí)候直接在界面上
<view>{{num | toFixed}}</view>
六、上拉加載、下拉刷新
1、上拉加載
在 pages.json 中找到當(dāng)前頁面在 pages 數(shù)組中的路徑，在 style 中新增 onReachBottomDistance 設(shè)置為 150；
在頁面中 methods 平級(jí)聲明一個(gè) 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ù)了')
//限流 防止頻繁請(qǐng)求
if(this.isLoading) return;
//頁面自增加一
this.pagenum++;
//獲取列表數(shù)據(jù)的方法
this.getList();
}
2、下拉刷新
在 pages.json 中找到當(dāng)前頁面在 pages 數(shù)組中的路徑，在 style 中新增 enablePullDownRefresh設(shè)置為 true；
在頁面中 methods 平級(jí)聲明一個(gè) 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());
}
七、登錄
在調(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)：button | uni-app官網(wǎng)
2、獲取用戶登錄憑證 code
這個(gè)可以直接調(diào)用 uni.login() API ；
async getCode(){
let [err,res] = await uni.login().catch(err=>err)
console.log(res)
}
八、支付
1、請(qǐng)求頭添加 token
只有登錄成功之后才能調(diào)用支付相關(guān)的接口，我們需要將登錄后獲取的 token 設(shè)置在有權(quán)限的接口請(qǐng)求字段里；一般在請(qǐng)求攔截里面為接口統(tǒng)一配置 header；
$http.beforeRequest = function (options) {
uni.showLoading({
title:"數(shù)據(jù)加載中..."
})
options.header = {
Authorization: token
}
}
2、微信支付流程
1、創(chuàng)建訂單
將訂單信息提交給后臺(tái)服務(wù)器，創(chuàng)建訂單，獲取訂單號(hào)；
2、訂單預(yù)支付
將訂單號(hào)發(fā)送給后臺(tái)服務(wù)器，獲取到支付相關(guān)的參數(shù)；
3、調(diào)用微信支付
調(diào)用 uni.requestPayment(OBJECT) API，發(fā)起支付請(qǐng)求；通過 fail、 success 回調(diào)函數(shù)監(jiān)聽支付是否成功，然后調(diào)取后臺(tái)接口將支付狀態(tài)同步給數(shù)據(jù)庫；
其他
下面是一些比較常見的組件、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
商品加入購(gòu)物車，立即購(gòu)買組件；
5、問題：.webp 后綴圖片在 ios 不展示問題
ios 上圖片 .webp 格式支持不怎么友好，可以只要正則表達(dá)式將圖片后綴名替換成 .jpg ;
6、問題：商品價(jià)格閃爍問題
數(shù)據(jù)在請(qǐng)求到頁面之前， data 里面的數(shù)據(jù)初始為 {} ，因此初次渲染會(huì)導(dǎo)致一些數(shù)據(jù)閃爍，可以先利用 v-if 判斷這個(gè)數(shù)據(jù)是否存在，來控制整體界面的顯示隱藏；
7、問題：收獲地址授權(quán)失敗問題
判斷是否是授權(quán)失敗問題，是則直接調(diào)用 uni.openSetting(OBJECT) API 開啟地址權(quán)限；注意兼容 ios 和 安卓；文章來源：http://www.zghlxwxcb.cn/news/detail-676071.html
總結(jié)
到此這篇關(guān)于微信小程序使用uni-app開發(fā)小程序及部分功能實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)微信小程序用uni-app開發(fā)小程序內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！文章來源地址http://www.zghlxwxcb.cn/news/detail-676071.html
到了這里，關(guān)于微信小程序使用uni-app開發(fā)小程序及部分功能實(shí)現(xiàn)詳解心得的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
