共计 2904 个字符,预计需要花费 8 分钟才能阅读完成。
前言
业务需要,被迫营业小程序,而且须要微信和支付宝两个端。因为之前没有做过小程序,所以略微调研了下最近比拟火的两款小程序跨端开发框架:uni-app 和 Taro。因为很久没有写过 vue 我的项目,所以一开始比拟偏差于应用 Taro,在参照文档搭建完框架并写了一点小 demo 之后,发现 Taro 的 api 支持性没有 uni-app 好,次要是针对支付宝,所以弃坑 Taro,转战 uni-app。当然,只做微信小程序的话,Taro 还是很棒的。
我的项目搭建
官网提供了两种疾速上手的搭建形式,我这里采纳的是第二种(参考:官网文档)。
此处我并没有依照官网抉择 Hello uni-app 模板,而是抉择了默认模板。
次要步骤:(环境装置省略)
- vue create -p dcloudio/uni-preset-vue my-project
- 抉择默认模板
- 集成 sass【须要留神的是版本问题,默认会装置最新版本,然而不能反对,所以要自行抉择,试了几个版本,最初用的是 sass-loader@8.0.1 node-sass@4.14.1】
- ui(能够抉择官网的 uni-ui 或者 uView,一开始我应用的是 uni-ui,起初换了 uView,感觉 uView 更全面更好用)
- 网络申请(我采纳的是他人封装好的插件 luch-request)
- 集成 vuex(按需采纳)
最终目录构造如下:
随着我的项目继续开发,我的项目包大小超过了微信小程序可预览的包大小限度,于是采取分包措施,uni-app 官网也有相干配置阐明:分包配置阐明
所以最终目录构造如下所示:
我的项目重难点
1. 受权(微信和支付宝)
uni-app 提供了相应的接口,然而不反对支付宝小程序,所以须要做跨端兼容,独立反对微信和支付宝小程序。跨端兼容我采纳的是官网文档中提到的条件编译。
> 跨端兼容:uni-app 文档中有阐明([uni-app 文档](https://uniapp.dcloud.io/platform)。
微信小程序受权流程:获取所有受权状态 —- 如果不存在 — 再调用受权接口 — 如果受权胜利 — 调用最终 API 接口
<!-- #ifdef MP-WEIXIN -->
<button
class="sys_btn"
open-type="getUserInfo"
@getuserinfo="appLoginWx"
>
微信受权登录
</button>
<!-- #endif -->
// 获取所有受权状态
uni.getSetting({success(res) {console.log("受权:", res);
if (!res.authSetting["scope.userInfo"]) {
// 这里调用受权
console.log("以后未受权");
this.appLoginWx();} else {
// 用户曾经受权过了
console.log("以后已受权");
}
},
});
appLoginWx() {
uni.getProvider({
service: "oauth",
success: function(res) {console.log("res", res);
if (~res.provider.indexOf("weixin")) {
uni.login({
provider: "weixin",
success: (res2) => {console.log("res2", res2);
uni.getUserInfo({
provider: "weixin",
success: (info) => {console.log('info', info);
//TODO[申请接口]
},
fail: () => {uni.showToast({ title: "微信登录受权失败", icon: "none"});
},
});
},
fail: () => {uni.showToast({ title: "微信登录受权失败", icon: "none"});
},
});
} else {
uni.showToast({
title: "请先装置微信或降级版本",
icon: "none",
});
}
},
});
},
支付宝小程序受权流程:(官网提供的时序图)
<!-- #ifdef MP-ALIPAY -->
<button
@getAuthorize="onGetAuthorize"
scope="userInfo"
open-type="getAuthorize"
class="login"
>
支付宝受权登录
</button>
<!-- #endif -->
onGetAuthorize() {
my.getAuthCode({
scopes: "auth_user", // 被动受权(弹框):auth_user,静默受权(不弹框):auth_base
success: (res) => {if (res.authCode) {console.log(app.serverUrl + "/login/" + res.authCode);
// 调用本人的服务端接口,让服务端进行后端的受权认证
my.httpRequest({
url: app.serverUrl + "/login/" + res.authCode,
method: "POST",
header: {"content-type": "application/json",},
dataType: "json",
success: (res) => {
// 受权胜利并且服务器端登录胜利
console.log(res);
me.setData({userInfo: res.data.data,});
},
});
}
},
});
},
2. 领取
微信领取
// 外围代码
uni.requestPayment({
provider: "wxpay",
timeStamp: timeStamp,
nonceStr: nonceStr,
package: package,
signType: signType,
paySign: paySign,
success: (res) => {console.log("payment success >>", res);
// TODO
},
fail: (err) => {console.log("payment fail >>", err);
},
});
以上各参数官网文档均有具体阐明,请参考 uni-app[payment]
3. 客户端生成二维码(插件 tkiQrcode)&& 条形码(插件 tkiBarcode)
二维码应用的插件
具体实现参照官网阐明即可,须要留神的是 npm 或者 yarn 装置的话,最新只有 0.1.6 版本,然而这个版本不反对支付宝小程序,所以须要把 tki-qrcode 的源码下载下来放在本人我的项目的 components 文件夹下应用,否则支付宝无奈实现客户端生成二维码。
条形码插件
依照文档阐明操作,即可实现,临时没有呈现不兼容等其余问题。
4. 踩坑
- 日历组件问题
背景:页面中须要用到日历组件进行日期抉择
应用的 uView 的 Calendar 组件,发现编译后在 H5 端能失常失效,然而微信小程序和支付宝小程序都有效,无奈抉择其余日期。
应用 uniCalendar 组件,微信小程序中无奈实现自定义可选日期范畴等性能,须要批改源码。解决方案:采纳原生的 picker 组件
未完待续 ……