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.支付功能模拟不了未完待续...