uni-app 開發 支付寶小程序

首先就什麼不知道 就被拉去uni-app 開發支付寶小程序 有點濛濛的 開玩笑的 步入正題吧

準備工做

主要用到了uni-app的原生的ui和插件市場的ThorUI組件庫,uni-app的組件和api庫以及支付寶的api庫等.

uni-app的官網
ThorUI組件

爲何會選擇ThorUI組件?

由於這款ui組件知足現階段開發的小程序的UI樣式.如圖所示:

這款ui組件庫包括商城模板 新聞模板 聊天模板和組件功能的封裝等,基本上很全,做者還在更新.想了解更多的能夠去上面的網址.

數據交互

參考網上本身封裝的用的是ES7的async/await語法.大概說明下,想了解更多能夠去連接或本身百度去

首先request.js

import config from "./config.js"
export default{
	config:{
		baseUrl:config.webUrl,
		header:{
			'Content-Type':'application/json;charset=UTF-8',
			// 'Content-Type':'application/x-www-form-urlencoded'
		},
		data:{},
		method:'GET',
		dataType:'json'
	},
	requset(options = {}){
		options.header = options.header || this.config.header;
		options.method = options.method || this.config.method;
		options.dataType = options.dataType || this.config.dataType;
		options.url = this.config.baseUrl+options.url;
		if(options.token){
			// if(options.checkToken && !User.token){
			// 	uni.showToast({
			// 		title:'悠閒登陸',
			// 		icon:'none'
			// 	})
			// 	return  uni.navigateTo({
			// 		url:'login'
			// 	})
			// }
			options.header.token=User.token
		}
		return uni.request(options);
	},
	get(url,data,options={}){
		options.url=url;
		options.data = data;
		options.method = 'GET';
		return this.requset(options);
	},
	post(url,data,options={}){
		options.url=url;
		options.data = data;
		options.method = 'POST';
		return this.requset(options);
	}
}



index.vue 怎麼調用以下:
//用戶驗證
	async msg() {
		let timestamp = Date.parse(new Date());
		timestamp = timestamp / 1000;
		let datas = {
			"appCode": "api_test",
			"appType": "ALIPAY_APP",
			"notaryOfficeId": "5c7de8add51969a4e714d439",
			"outUserId": "1",
			"authCode": "",
			"norceStr": "1234",
			"time": timestamp,
			"sign": "1"
			}
		let data = JSON.stringify(datas);//傳給後臺的參數
		let [err, res] = await this.$http.post('/api/security/auth', data)//調用接口 成功失敗放在try catch
			try {
			console.log(res);//成功打印結果
			} catch (e) {}
			},
複製代碼

在async/await以前，咱們有三種方式寫異步代碼

1.嵌套回調

2.以Promise爲主的鏈式回調

3.使用Generators

可是，這三種寫起來都不夠優雅，ES7作了優化改進，async/await應運而生，async/await相比較Promise 對象then函數的嵌套，與Generator執行的繁瑣（須要藉助co才能自動執行，不然得手動調用next()，Async/Await可讓你輕鬆寫出同步風格的代碼同時又擁有異步機制，更加簡潔，邏輯更加清晰。

async/await特色

1.async/await更加語義化，async 是「異步」的簡寫，async function 用於申明一個 function 是異步的； await，能夠認爲是async wait的簡寫， 用於等待一個異步方法執行完成；

2.async/await是一個用同步思惟解決異步問題的方案（等結果出來以後，代碼纔會繼續往下執行）

3.能夠經過多層 async function 的同步寫法代替傳統的callback嵌套

async function語法

1.自動將常規函數轉換成Promise，返回值也是一個Promise對象

2.只有async函數內部的異步操做執行完，纔會執行then方法指定的回調函數

3.異步函數內部可使用await

async function name([param[, param[, ... param]]]) { statements }
name: 函數名稱。
param:  要傳遞給函數的參數的名稱
statements: 函數體語句。
返回值: 返回的Promise對象會以async function的返回值進行解析，或者以該函數拋出的異常進行回絕。
複製代碼

await語法

1.await 放置在Promise調用以前，await 強制後面點代碼等待，直到Promise對象resolve，獲得resolve的值做爲await表達式的運算結果

2.await只能在async函數內部使用,用在普通函數裏就會報錯

[return_value] = await expression;

expression:  一個 Promise  對象或者任何要等待的值。

返回值:返回 Promise 對象的處理結果。若是等待的不是 Promise 對象，則返回該值自己。
複製代碼

遇到的問題

1.支付寶不支持picker的mode屬性，僅支付單項picker
解決方案：將多項picker進行拆分

2.canvas畫布要用id,而不是canvas-id，用的時候都寫上

<canvas 
 style="position:absolute;left:-99999upx;background:#f1f1f1;" 
:style="{width:width+'px',height:height+'px'}"
 canvas-id="qrcodeCanvas" 
 id="qrcodeCanvas"></canvas>
複製代碼

3.目前沒有看到分包的配置，而且包體積限制在3M。4.showLoading是不透傳的，也就是說 loading 顯示的時候沒法點擊頁面內容。5.文件名或文件夾名中不容許出現 @ 符號6.網絡請求返回的數據會嚴格按照dataType進行處理，若是不符合規範則會跑錯錯誤，而不是按照原格式返回。7.目前測試的結果，導航欄只有設置背景顏色爲#FFF(FFF)時纔會變成黑色文字。8.支付寶小程序的導航欄是支持透明漸變效果的，後面會提供相關的配置。9.使用僞元素作邊框時，高度值不能用 1upx，須要直接用1px。10.不支持ECharts11.支付功能模擬不了未完待續...