红包小程序小结
最近做了一个红包兑换小程序,遇到了一些问题这里做一下总结。 1、需求:回流用户在游戏客户端获取到口令,然后在小程序这边输入口令兑换红包,成功之后钱会发到用户微信账户里。 2、流程:若未授权,显示授权按钮。点击授权登录,授权成功后获取到私密字段iv和encryptedData,调取登陆接口,错误则提示相关信息,正确则跳转校验姓名和身份证的页面,校验通过就调取提现接口,成功则提示提现成功,同时显示生成分享图按钮。分享图由用户昵称,头像,二维码,提现金额等等组成。 3、框架:uniapp 分享图的问题1、? let money = 10; //这里需要把数字转成字符串
ctx.measureText(money).width;
2、绘制图片的时候不要忘了先使用? https://wx.qlogo.cn ?4、最初背景图大概170KB,尺寸750*1334,最终绘制出来的分享图太大了。解决方法:
...
onGotUserInfo(e){
uni.saveImageToPhotosAlbum({
filePath: this.tempPath,success(res) {
uni.showToast({
title: '保存成功',icon: 'success',51); font-weight: 700;">duration: 1500
})
},fail(err){
}
})
}
...
如图:如果用户点击确定,就会正常保存图片到本地相册了。 如果用户点击取消,不授权呢?那还能怎么样,点击再弹出原来的弹窗重新授权呗。很遗憾,这里并不能像授权登录弹窗一样点了取消之后,再次点击授权按钮还会唤起那个弹窗。解决方法:在? ,content: '需要您授权保存相册',showCancel: false,success:res=>{
uni.openSetting({
success(settingdata) {
if (settingdata.authSetting['scope.writePhotosAlbum']) {
uni.showModal({
title: '获取权限成功,再次点击保存图片按钮即可保存',})
} else {
uni.showModal({
title: '获取权限失败,将无法保存到相册哦~',})
}
},fail(failData) {
console.log("failData",failData)
},complete(finishData) {
console."finishData",finishData)
}
})
}
})
}
点击取消按钮之后,会跳转到这里。打开设置里的“保存到相册”的开关即可。 原生微信小程序和uniapp框架的一些对比针对此次项目,这里挑两点来写。 全局变量的管理1、原生微信小程序可以在app.js的globalData对象中对全局变量进行管理 app.js App({
globalData: {
session:""
}
})
pages/index/index.js ...
const app = getApp()//获取应用实例
app.globalData.session = "xxxx" //设置
app.session //读取
...
2、uniapp用的是vue的那套,所以可以用vuex来管理状态
import Vuex 'vuex'
Vue.use(Vuex);
const store = new Vuex.Store({
state : {
session:""
},mutations : {
getSession(state,res){
state.session = res;
},}
});
export default store
设置 ,res.session) //接口返回res.session
获取 globalData?中userInfo字段,然后页面在onload的时候获取全局的userInfo,你会发现有时候拿不到。由于 getUserInfo 是网络请求,可能会在 Page.onLoad 之后才返回,所以需要加入 callback 以防止这种情况。
(编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |