微信小程序如何使用uni-app開(kāi)發(fā)小程序及部分功能

這篇文章主要講解了“微信小程序如何使用uni-app開(kāi)發(fā)小程序及部分功能”，文中的講解內(nèi)容簡(jiǎn)單清晰，易于學(xué)習(xí)與理解，下面請(qǐng)大家跟著小編的思路慢慢深入，一起來(lái)研究和學(xué)習(xí)“微信小程序如何使用uni-app開(kāi)發(fā)小程序及部分功能”吧！

一、uni-app

1、簡(jiǎn)介

uni-app 是一個(gè)使用 Vue.js (opens new window) 開(kāi)發(fā)所有前端應(yīng)用的框架，開(kāi)發(fā)者編寫(xiě)一套代碼，可發(fā)布到iOS、Android、Web（響應(yīng)式）、以及各種小程序（微信/支付寶/百度/頭條/飛書(shū)/QQ/快手/釘釘/淘寶）、快應(yīng)用等多個(gè)平臺(tái)；

2、開(kāi)發(fā)工具

uni-app 推薦使用 Hbuilderx 開(kāi)發(fā)工具來(lái)開(kāi)發(fā)項(xiàng)目

1、安裝 sass 插件

點(diǎn)擊 工具 => 插件安裝 => 安裝新插件 => 前往插件市場(chǎng)安裝 ，在這里你可以搜索自己需要的插件，我們以 sass 為例；找到需要的插件之后點(diǎn)擊下載 => 使用Hbuilderx 導(dǎo)入插件，這里需要登錄 sass 的網(wǎng)站，如果登錄成功則會(huì)打開(kāi) Hbuilderx 編譯器，然后點(diǎn)擊確定就可以安裝了；

3、新建 uni-app項(xiàng)目

Hbuilderx 點(diǎn)擊 文件=>新增=>項(xiàng)目 ，本文新建一個(gè)小程序項(xiàng)目：uni-app => 填寫(xiě)項(xiàng)目名稱(chēng)、選擇項(xiàng)目存放路徑 => 模板 uni-ui 項(xiàng)目=>創(chuàng)建，然后就可以生成一個(gè)小程序項(xiàng)目；

components：組件文件
pages：頁(yè)面文件
static：靜態(tài)文件
uni_modules：依賴(lài)包
App.vue：應(yīng)用配置，配置小程序全局樣式、生命周期
main.js：Vue 初始化入口文件
manifest.json：配置應(yīng)用名稱(chēng) appid、logo、版本等打包信息
pages.json：配置頁(yè)面路徑、頁(yè)面樣式、tabBar等信息
uni,scss：全局樣式

4、把項(xiàng)目運(yùn)行到微信開(kāi)發(fā)者工具

1、配置 appid

在 manifest.json 文件 => 微信小程序配置 填寫(xiě)微信小程序 appID；

2、在 Hbuilderx 配置微信開(kāi)發(fā)者工具的安裝路徑：這樣可以在 Hbuilderx 里面運(yùn)行的時(shí)候自動(dòng)打開(kāi)微信開(kāi)發(fā)者工具查看項(xiàng)目

工具 => 設(shè)置 => 運(yùn)行配置 => 小程序運(yùn)行配置 配置微信開(kāi)發(fā)者工具的安裝路徑，如：C:\Program Files (x86)\Tencent\微信web開(kāi)發(fā)者工具

3、在微信開(kāi)發(fā)者工具開(kāi)啟服務(wù)端口

設(shè)置 => 安全設(shè)置 => 安全 開(kāi)啟服務(wù)端口

4、運(yùn)行

Hbuilderx 點(diǎn)擊 運(yùn)行=>運(yùn)行到小程序模擬器 點(diǎn)擊第一個(gè)就可以在 Hbuilderx 自動(dòng)編譯，成功之后會(huì)自動(dòng)打開(kāi)微信開(kāi)發(fā)者工具；

注意：這個(gè)時(shí)候我們想修改項(xiàng)目里面的內(nèi)容，需要在 Hbuilderx 里面修改，例如修改配置：manifest.json 文件 => 源碼視圖

二、實(shí)現(xiàn)tabBar效果

1、創(chuàng)建tabBar頁(yè)面

在 pages 下面創(chuàng)建，右鍵新建頁(yè)面，這里創(chuàng)建的是 tanBar 對(duì)應(yīng)的幾個(gè)頁(yè)面；記住這里要勾選"創(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":"首頁(yè)",
			"iconPath":"static/c1.png",
			"selectedIconPath":"static/c2.png"
		},
		{
			"pagePath":"pages/cate/cate",
			"text":"分類(lèi)",
			"iconPath":"static/c3.png",
			"selectedIconPath":"static/c4.png"
		},
		{
			"pagePath":"pages/cart/cart",
			"text":"購(gòu)物車(chē)",
			"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)，來(lái)自定義自己的導(dǎo)航條樣式；

三、配置網(wǎng)絡(luò)請(qǐng)求

由于小程序不支持 axios ，并且原生的 wx.request() API 功能比較簡(jiǎn)單，且不支持?jǐn)r截器等全局定制的功能；所以建議在 uni-app 項(xiàng)目中使用 @escook/request-miniprogram 第三方包發(fā)起網(wǎng)絡(luò)請(qǐng)求

1、依照官網(wǎng)提示安裝、導(dǎo)入、使用

//引入網(wǎng)絡(luò)請(qǐng)求
import { $http } from '@escook/request-miniprogram';
uni.$http = $http;
//全局baseUrl
$http.baseURL = "https://www.uinav.com";
//請(qǐng)求攔截器
$http.beforeRequest = function (options) {
  uni.showLoading({
  	title:"數(shù)據(jù)加載中..."
  })
}
//相應(yīng)攔截器
$http.afterRequest = function () {
  uni.hideLoading()
}

在 uni-app 中可以使用 uni.xxx 來(lái)調(diào)用 wx.xxx 的 api；

2、實(shí)戰(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ù)請(qǐng)求失敗",
				duration:1500,
				icon:"none"
			})
		}
		this.swiperList = res.message;
	}
}

四、uni-app 里面小程序分包

1、創(chuàng)建分包目錄

在根目錄下創(chuàng)建分包目錄，subpackage；

2、在 pages.json 文件中配置

在 pages 節(jié)點(diǎn)同級(jí)，聲明 subpackages 節(jié)點(diǎn)用來(lái)配置分包結(jié)構(gòu)；

"subPackages":[
	{
		"root":"subpackage",
		"pages":[]
	}
]

3、創(chuàng)建分包頁(yè)面

在 sunpackage 目錄上右鍵點(diǎn)擊新建文件，填寫(xiě)頁(yè)面名稱(chēng)、選擇分包 sunpackage ，然后創(chuàng)建就可以了，編譯器會(huì)自動(dòng)在代碼中將配置信息填充到 sunpackage 分包下面；

"subPackages":[
		{
			"root":"subpackage",
			"pages":[{
                    "path" : "goods_detail/goods_detail",
                    "style" :{
	                    "navigationBarTitleText": "",
	                    "enablePullDownRefresh": false
	                }
                }
            ]
		}
	]

注意：這里提一下，頁(yè)面跳轉(zhuǎn)傳參跟小程序原生跳轉(zhuǎn)傳參是一樣的：1、navigator 配合 url 跳轉(zhuǎn)、路徑拼接傳參；2、點(diǎn)擊事件通過(guò) uni.redirectTo ；

五、公用方法封裝

這里以 錯(cuò)誤提示信息為例，在 main.js 中；

uni.$showMsg = function(titie="請(qǐng)求失敗",duration=1000){
	uni.showToast({
		title,
		duration,
		icon:"none"
	})
}

六、搜索功能

1、搜索組件

1、自定義搜索組件：在 components 文件夾右鍵，選擇 新建組件 ，在這里可以編寫(xiě)組件的內(nèi)容；

2、小程序自定義組件自定義事件：由于小程序提供的組件已經(jīng)幫助我們封裝了 click 事件，所以我們可以直接使用，但是我們自定義的組件沒(méi)有封裝所以不能直接在自定義的組件上使用 click 事件；

我們可以在父組件綁定一個(gè)自定義事件，然后子組件綁定 click 事件，在觸發(fā) click 的時(shí)候通過(guò) $emit 來(lái)觸發(fā)父組件綁定的自定義事件，這樣就可以完成自定義組件的事件傳遞；

3、吸頂：主要是利用 position:sticky ,把組件定位到頁(yè)面的頂部；

最后使用組件：直接在頁(yè)面使用就可以了，組件名是自定義組件的文件名稱(chēng)；

//自定義組件
<template>
	<view class="my-search-container" :>
		<view class="my-search-box" :>
			<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:{
			//通過(guò) $emit 來(lái)觸發(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)用接口來(lái)獲取并渲染搜索出來(lái)的結(jié)果；

3、本地存儲(chǔ)

//存
uni.setStorageSync('kw',JSON.stringify(this.kw));

//onLoad 聲明周期中 取
let list = JSON.parse(uni.getStorageSync('kw') || '');

//刪除
uni.setStorageSync('kw',[]);

4、過(guò)濾器

跟 data 平級(jí)聲明 filters

filters:{
	toFixed(num){
		return Number(num).toFixed(2);
	}
}

使用的時(shí)候直接在界面上

<view>{{num | toFixed}}</view>

七、上拉加載、下拉刷新

1、上拉加載

在 pages.json 中找到當(dāng)前頁(yè)面在 pages 數(shù)組中的路徑，在 style 中新增 onReachBottomDistance 設(shè)置為 150；

在頁(yè)面中 methods 平級(jí)聲明一個(gè) onReachBottom 方法來(lái)監(jiān)聽(tīng)頁(yè)面上拉事件；

data() {
	return {
		isLoading:false
	};
},
methods:{
	getList(){
		//打開(kāi)節(jié)流閥
		this.isLoading = true;
		//獲取數(shù)據(jù)
		let res = .....
		//關(guān)閉節(jié)流閥
		this.isLoading = false;
	}
},
//監(jiān)聽(tīng)上拉事件
onReachBottom() {
	//沒(méi)有更多數(shù)據(jù)
	if(this.pagenum*this.pagesize >= this.total) return uni.$showMsg('沒(méi)有更多數(shù)據(jù)了')
	//限流 防止頻繁請(qǐng)求
	if(this.isLoading) return;
	//頁(yè)面自增加一
	this.pagenum++;
	//獲取列表數(shù)據(jù)的方法
	this.getList();
}

2、下拉刷新

在 pages.json 中找到當(dāng)前頁(yè)面在 pages 數(shù)組中的路徑，在 style 中新增 enablePullDownRefresh設(shè)置為 true；

在頁(yè)面中 methods 平級(jí)聲明一個(gè) onPullDownRefresh方法來(lái)監(jiān)聽(tīng)頁(yè)面上拉事件；

methods:{
	getList(cb){
		//打開(kāi)節(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實(shí)例上
	store
})
app.$mount()

4、新建模塊

新建一個(gè) cart 模塊的 js 文件，然后在 store.js 里面引入；

//cart.js
export default {
	namespaced:true,
	state:{
		cart:[]
	},
	//修改state 只能通過(guò) 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)用登錄接口之前，我們需要先獲取用戶(hù)的基本信息以及 code，作為參數(shù)；

1、獲取用戶(hù)基本信息

<button open-type="getUserInfo" @getuserinfo="getInfo">一鍵登錄</button>
methods:{
	//自定義方法
	getInfo(e){
		console.log(e)
	}
}

這里直接使用 button 組件提供的 open-type 等于 getUserInfo ，并配合 @getuserinfo 事件綁定的方法中獲取到用戶(hù)信息

2、獲取用戶(hù)登錄憑證 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)求；通過(guò) fail、 success 回調(diào)函數(shù)監(jiān)聽(tīng)支付是否成功，然后調(diào)取后臺(tái)接口將支付狀態(tài)同步給數(shù)據(jù)庫(kù)；

十一、發(fā)布

小程序只有在發(fā)布后才能夠被用戶(hù)檢索使用，開(kāi)發(fā)期間為了便于調(diào)試，小程序會(huì)攜帶 sourcemap 等類(lèi)型的文件，并且代碼沒(méi)有進(jìn)行壓縮因此體積比較大，所以需要壓縮發(fā)布；

1、發(fā)布為小程序

1、點(diǎn)擊 hbuilderx 工具欄 發(fā)行 => 小程序-微信，這時(shí)候會(huì)有一個(gè)彈出框，需要填寫(xiě)小程序的名稱(chēng)和 AppID；

2、點(diǎn)擊發(fā)行按鈕，hbuilderx 的控制臺(tái)就會(huì)顯示打包編譯進(jìn)度；

3、編譯成功之后會(huì)自動(dòng)發(fā)開(kāi)微信開(kāi)發(fā)者工具，這時(shí)候點(diǎn)擊上傳按鈕；

4、然后會(huì)彈出一些提示信息，點(diǎn)擊確定，彈出 版本號(hào)、項(xiàng)目備注彈窗，點(diǎn)擊上傳就可以了；

5、然后微信小程序后臺(tái)審核上線(xiàn)就可以了；

2、發(fā)布為安卓APP

1、點(diǎn)擊 hbuilderx 左下角未登錄，進(jìn)行賬號(hào)登錄；

2、登錄之后點(diǎn)擊項(xiàng)目的 manifest.js 文件，基礎(chǔ)配置里面，填寫(xiě) uni-app 的 AppID 、應(yīng)用名稱(chēng)、描述、版本等；

3、App圖標(biāo)配置，預(yù)覽選擇圖片，然后自動(dòng)生成配置；

4、點(diǎn)擊 hbuilderx 工具欄 發(fā)行 => 原生App-云打包，然后彈出彈窗，選擇 安卓apk包，ios需要先購(gòu)買(mǎi)開(kāi)發(fā)者身份才能打包，使用公共的測(cè)試證書(shū)，勾選打正式包，然后點(diǎn)擊打包；

5、然后在 hbuilderx 控制臺(tái)顯示打包進(jìn)度，成功之后會(huì)返回一個(gè)下載地址的連接，點(diǎn)擊連接就可以下載 apk 的安裝包，這個(gè) apk 包就可以在安卓系統(tǒng)上安裝查看了；

其他

下面是一些比較常見(jiàn)的組件、API、問(wèn)題：

1、API：uni.previewImage(OBJECT)

預(yù)覽圖片，可以將輪播圖方法查看；

2、API：uni.chooseAddress(OBJECT)

獲取用戶(hù)收貨地址。調(diào)起用戶(hù)編輯收貨地址原生界面，并在編輯完成后返回用戶(hù)選擇的地址，需要用戶(hù)授權(quán) scope.address；

3、組件：rich-text

渲染富文本；

4、組件：uni-goods-nav

商品加入購(gòu)物車(chē)，立即購(gòu)買(mǎi)組件；

5、問(wèn)題：.webp 后綴圖片在 ios 不展示問(wèn)題

ios 上圖片 .webp 格式支持不怎么友好，可以只要正則表達(dá)式將圖片后綴名替換成 .jpg ;

6、問(wèn)題：商品價(jià)格閃爍問(wèn)題

數(shù)據(jù)在請(qǐng)求到頁(yè)面之前， data 里面的數(shù)據(jù)初始為 {} ，因此初次渲染會(huì)導(dǎo)致一些數(shù)據(jù)閃爍，可以先利用 v-if 判斷這個(gè)數(shù)據(jù)是否存在，來(lái)控制整體界面的顯示隱藏；

7、問(wèn)題：收獲地址授權(quán)失敗問(wèn)題

判斷是否是授權(quán)失敗問(wèn)題，是則直接調(diào)用 uni.openSetting(OBJECT) API 開(kāi)啟地址權(quán)限；注意兼容 ios 和 安卓；

感謝各位的閱讀，以上就是“微信小程序如何使用uni-app開(kāi)發(fā)小程序及部分功能”的內(nèi)容了，經(jīng)過(guò)本文的學(xué)習(xí)后，相信大家對(duì)微信小程序如何使用uni-app開(kāi)發(fā)小程序及部分功能這一問(wèn)題有了更深刻的體會(huì)，具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云，小編將為大家推送更多相關(guān)知識(shí)點(diǎn)的文章，歡迎關(guān)注！