首先就什么不知道 就被拉去uni-app 开发支付宝小程序 有点蒙蒙的 开玩笑的 步入正题吧
准备工作
主要用到了uni-app的原生的ui和插件市场的ThorUI组件库,uni-app的组件和api库以及支付宝的api库等.
为什么会选择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.不支持ECharts
11.支付功能模拟不了
未完待续...
