微信小程序使用uni-app開發小程序及部分功能實現詳解

一、uni-app

官網:https://uniapp.dcloud.io/

1、簡介

uni-app 是一個使用 Vue.js (opens new window) 開發所有前端應用的框架,開發者編寫一套代碼,可發佈到iOS、Android、Web(響應式)、以及各種小程序(微信/支付寶/百度/頭條/飛書/QQ/快手/釘釘/淘寶)、快應用等多個平臺;

2、開發工具

uni-app 推薦使用 Hbuilderx 開發工具來開發項目,下載地址:https://www.dcloud.io/hbuilderx.html或者點擊這裡下載,下載 App開發版;

1、安裝 sass 插件

點擊 工具 => 插件安裝 => 安裝新插件 => 前往插件市場安裝 ,在這裡你可以搜索自己需要的插件,我們以 sass 為例;找到需要的插件之後點擊下載 => 使用Hbuilderx 導入插件,這裡需要登錄 sass 的網站,如果登錄成功則會打開 Hbuilderx 編譯器,然後點擊確定就可以安裝瞭;

3、新建 uni-app項目

Hbuilderx 點擊 文件=>新增=>項目 ,本文新建一個小程序項目:uni-app => 填寫項目名稱、選擇項目存放路徑 => 模板 uni-ui 項目=>創建,然後就可以生成一個小程序項目;

components:組件文件
pages:頁面文件
static:靜態文件
uni_modules:依賴包
App.vue:應用配置,配置小程序全局樣式、生命周期
main.js:Vue 初始化入口文件
manifest.json:配置應用名稱 appid、logo、版本等打包信息
pages.json:配置頁面路徑、頁面樣式、tabBar等信息
uni,scss:全局樣式

4、把項目運行到微信開發者工具

1、配置 appid

manifest.json 文件 => 微信小程序配置 填寫微信小程序 appID;

2、在 Hbuilderx 配置微信開發者工具的安裝路徑:這樣可以在 Hbuilderx 裡面運行的時候自動打開微信開發者工具查看項目

工具 => 設置 => 運行配置 => 小程序運行配置 配置微信開發者工具的安裝路徑,如:C:\Program Files (x86)\Tencent\微信web開發者工具

3、在微信開發者工具開啟服務端口

設置 => 安全設置 => 安全 開啟服務端口

4、運行

Hbuilderx 點擊 運行=>運行到小程序模擬器 點擊第一個就可以在 Hbuilderx 自動編譯,成功之後會自動打開微信開發者工具;

註意:這個時候我們想修改項目裡面的內容,需要在 Hbuilderx 裡面修改,例如修改配置:manifest.json 文件 => 源碼視圖

二、實現tabBar效果

1、創建tabBar頁面

在 pages 下面創建,右鍵新建頁面,這裡創建的是 tanBar 對應的幾個頁面;記住這裡要勾選"創建同名目錄、在pages.json 中註冊"兩個選項,默認是選中的;(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 數組的第一位;還可以在 pages.json 文件修改 globalStyle 配置項,來自定義自己的導航條樣式;

三、配置網絡請求

由於小程序不支持 axios ,並且原生的 wx.request() API 功能比較簡單,且不支持攔截器等全局定制的功能;所以建議在 uni-app 項目中使用 @escook/request-miniprogram 第三方包發起網絡請求;

官網:https://www.npmjs.com/package/@escook/request-miniprogram

1、依照官網提示安裝、導入、使用

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

在 uni-app 中可以使用 uni.xxx 來調用 wx.xxx 的 api;

2、實戰

//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:"數據請求失敗",
				duration:1500,
				icon:"none"
			})
		}
		this.swiperList = res.message;
	}
}

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

1、創建分包目錄

在根目錄下創建分包目錄,subpackage;

2、在 pages.json 文件中配置

在 pages 節點同級,聲明 subpackages 節點用來配置分包結構;

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

3、創建分包頁面

在 sunpackage 目錄上右鍵點擊新建文件,填寫頁面名稱、選擇分包 sunpackage ,然後創建就可以瞭,編譯器會自動在代碼中將配置信息填充到 sunpackage 分包下面;

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

註意:這裡提一下,頁面跳轉傳參跟小程序原生跳轉傳參是一樣的:1、navigator 配合 url 跳轉、路徑拼接傳參;2、點擊事件通過 uni.redirectTo ;

五、公用方法封裝

這裡以 錯誤提示信息為例,在 main.js 中;

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

六、搜索功能

1、搜索組件

1、自定義搜索組件:在 components 文件夾右鍵,選擇 新建組件 ,在這裡可以編寫組件的內容;

2、小程序自定義組件自定義事件:由於小程序提供的組件已經幫助我們封裝瞭 click 事件,所以我們可以直接使用,但是我們自定義的組件沒有封裝所以不能直接在自定義的組件上使用 click 事件;

我們可以在父組件綁定一個自定義事件,然後子組件綁定 click 事件,在觸發 click 的時候通過 $emit 來觸發父組件綁定的自定義事件,這樣就可以完成自定義組件的事件傳遞;

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 來觸發父組件上綁定的自定義事件
			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、搜索建議實現

<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 事件添加節流,然後就可以在節流方法裡面調用接口來獲取並渲染搜索出來的結果;

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 中找到當前頁面在 pages 數組中的路徑,在 style 中新增 onReachBottomDistance 設置為 150;

在頁面中 methods 平級聲明一個 onReachBottom 方法來監聽頁面上拉事件;

data() {
	return {
		isLoading:false
	};
},
methods:{
	getList(){
		//打開節流閥
		this.isLoading = true;
		//獲取數據
		let res = .....
		//關閉節流閥
		this.isLoading = false;
	}
},
//監聽上拉事件
onReachBottom() {
	//沒有更多數據
	if(this.pagenum*this.pagesize >= this.total) return uni.$showMsg('沒有更多數據瞭')
	//限流 防止頻繁請求
	if(this.isLoading) return;
	//頁面自增加一
	this.pagenum++;
	//獲取列表數據的方法
	this.getList();
}

2、下拉刷新

在 pages.json 中找到當前頁面在 pages 數組中的路徑,在 style 中新增 enablePullDownRefresh設置為 true;

在頁面中 methods 平級聲明一個 onPullDownRefresh方法來監聽頁面上拉事件;

methods:{
	getList(cb){
		//打開節流閥
		this.isLoading = true;
		//調用回調函數
		cb && cb();
		//獲取數據
		let res = .....
		//關閉節流閥
		this.isLoading = false;
	}
},
onPullDownRefresh() {
	this.total = 0;
	this.pagenum = 1;
	this.list = [];
	this.isLoading = false;
	//傳入回調函數,停止下拉刷新效果
	this.getList(()=> uni.stopPullDownRefresh());
}

八、配置 vuex

1、創建文件

根目錄創建文件夾 store,在文件夾下創建文件 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)
	}
	}

九、登錄

在調用登錄接口之前,我們需要先獲取用戶的基本信息以及 code,作為參數;

1、獲取用戶基本信息

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

這裡直接使用 button 組件提供的 open-type 等於 getUserInfo ,並配合 @getuserinfo 事件綁定的方法中獲取到用戶信息;這裡是固定寫法;參考官網:https://uniapp.dcloud.io/component/button.html

2、獲取用戶登錄憑證 code

這個可以直接調用 uni.login() API ;

async getCode(){
	let [err,res] = await uni.login().catch(err=>err)
	console.log(res)
}

十、支付

1、請求頭添加 token

隻有登錄成功之後才能調用支付相關的接口,我們需要將登錄後獲取的 token 設置在有權限的接口請求字段裡;一般在請求攔截裡面為接口統一配置 header;

$http.beforeRequest = function (options) {
  uni.showLoading({
  	title:"數據加載中..."
  })
  options.header = {
	  Authorization: token
  }
}

2、微信支付流程

1、創建訂單

將訂單信息提交給後臺服務器,創建訂單,獲取訂單號;

2、訂單預支付

將訂單號發送給後臺服務器,獲取到支付相關的參數;

3、調用微信支付

調用 uni.requestPayment(OBJECT) API,發起支付請求;通過 fail、 success 回調函數監聽支付是否成功,然後調取後臺接口將支付狀態同步給數據庫;

十一、發佈

小程序隻有在發佈後才能夠被用戶檢索使用,開發期間為瞭便於調試,小程序會攜帶 sourcemap 等類型的文件,並且代碼沒有進行壓縮因此體積比較大,所以需要壓縮發佈;

1、發佈為小程序

1、點擊 hbuilderx 工具欄 發行 => 小程序-微信,這時候會有一個彈出框,需要填寫小程序的名稱和 AppID;

2、點擊發行按鈕,hbuilderx 的控制臺就會顯示打包編譯進度;

3、編譯成功之後會自動發開微信開發者工具,這時候點擊上傳按鈕;

4、然後會彈出一些提示信息,點擊確定,彈出 版本號、項目備註彈窗,點擊上傳就可以瞭;

5、然後微信小程序後臺審核上線就可以瞭;

2、發佈為安卓APP

1、點擊 hbuilderx 左下角未登錄,進行賬號登錄;

2、登錄之後點擊項目的 manifest.js 文件,基礎配置裡面,填寫 uni-app 的 AppID 、應用名稱、描述、版本等;

3、App圖標配置,預覽選擇圖片,然後自動生成配置;

4、點擊 hbuilderx 工具欄 發行 => 原生App-雲打包,然後彈出彈窗,選擇 安卓apk包,ios需要先購買開發者身份才能打包,使用公共的測試證書,勾選打正式包,然後點擊打包;

5、然後在 hbuilderx 控制臺顯示打包進度,成功之後會返回一個下載地址的連接,點擊連接就可以下載 apk 的安裝包,這個 apk 包就可以在安卓系統上安裝查看瞭;

其他

下面是一些比較常見的組件、API、問題:

1、API:uni.previewImage(OBJECT)

預覽圖片,可以將輪播圖方法查看;

2、API:uni.chooseAddress(OBJECT)

獲取用戶收貨地址。調起用戶編輯收貨地址原生界面,並在編輯完成後返回用戶選擇的地址,需要用戶授權 scope.address;

3、組件:rich-text

渲染富文本;

4、組件:uni-goods-nav

商品加入購物車,立即購買組件;

5、問題:.webp 後綴圖片在 ios 不展示問題

ios 上圖片 .webp 格式支持不怎麼友好,可以隻要正則表達式將圖片後綴名替換成 .jpg ;

6、問題:商品價格閃爍問題

數據在請求到頁面之前, data 裡面的數據初始為 {} ,因此初次渲染會導致一些數據閃爍,可以先利用 v-if 判斷這個數據是否存在,來控制整體界面的顯示隱藏;

7、問題:收獲地址授權失敗問題

判斷是否是授權失敗問題,是則直接調用 uni.openSetting(OBJECT) API 開啟地址權限;註意兼容 ios 和 安卓;

總結

到此這篇關於微信小程序使用uni-app開發小程序及部分功能實現的文章就介紹到這瞭,更多相關微信小程序用uni-app開發小程序內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!

推薦閱讀: