先说说项目需求吧，
l 点击【再测一次】，重新开始测试流程，主持人回复第一个题目，流程同上；答完全部题目后，底部不显示【立即开始分析】按钮，而是直接展示结果，且上一次测试内容不清空；如退出再进来，则清空全部历史记录。
图片说明：
l 图片上面显示微信头像和昵称
l 名称：左右脑人才鉴定，下面显示2019权威测试标记；
l 分数、简述文案与详述文案
l 二维码：H5聚合页的二维码
l 二维码文案为：长按识别二维码|快来领取你的左右脑成绩单
l 点击【点击保存结果】，将图片保存到手机相册，且按钮隐藏，显示为文字：图片已保存到相册，可分享至朋友圈。
l 点击【查看大图】，将图片发送给朋友。
至于分数就是每一题左脑得分xx分，右脑得分XX分 ，最后左脑总分XX分，右脑总分XX分，根据分数得出左脑优势详述右脑分数，详述。
拿到这个小程序的时候，我觉得没什么内容应该能很快搞定，初始预期想的是用户信息这一块服务端返回字段给我即可，数据结果这一段我可以在前端自己处理。
我当时想的唯一的难点就是最后html生成图片这部分，因为之前在移动端其实做过这个需求，使用的是html2canvas,里面的坑多兼容性不好，所以心里有阴影。
最后做了才知道困住我的不是这一步，而是在不能操作dom的情况下，如何实现无线循环的再测一次。
那就从头梳理一下这个小程序吧：
1.用户信息授权
这个是直接使用微信的getUserInfo
<a class="supend" wx:if="{{!hasUserInfo && canIUse && item==2}}"><button open-type="getUserInfo" bindgetuserinfo="getUserInfo" class="supend-bth"> 立即分析结果 </button></a>
<view wx:if="{{hasUserInfo}}">
<image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
<text class="userinfo-nickname">{{userInfo.nickName}}</text>
</view>
这个微信规定必须使用button按钮授权，
对应js
getUserInfo: function(e) {
var _this = this;
console.log(e)
if (!e.detail.userInfo){
return false;
}
app.globalData.userInfo = e.detail.userInfo
console.log(e.detail.userInfo)
_this.setData({
userInfo: e.detail.userInfo,
hasUserInfo: true
})
console.log("已有用户信息");
_this.resultShow();
},
if (app.globalData.userInfo) {
this.setData({
userInfo: app.globalData.userInfo,
hasUserInfo: true
})
} else if (this.data.canIUse) {
// 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
// 所以此处加入 callback 以防止这种情况
app.userInfoReadyCallback = res => {
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
}
console.log("支持button标签获取信息");
} else {
// 在没有 open-type=getUserInfo 版本的兼容处理
wx.getUserInfo({
success: res => {
app.globalData.userInfo = res.userInfo
this.setData({
userInfo: res.userInfo,
hasUserInfo: true
})
},
fail:function(){
return false;
}
})
console.log("不支持button标签的兼容写法");
}
这样直接可以获取到用户的昵称和头像，没有进行服务端交互。
2.计算结果分数
直接将结果存成一个对象，最后找出每个答案对应的值相加，返回总结果
optRst: function (ansArr) {
var rst = {
"0": {
\'0\': [xx, xx],
\'1\': [xx, xx],
\'2\': [xx, xx],
\'3\': [xx, xx],
\'4\': [xx, xx]
},
"1": {
\'0\': [xx, xx],
\'1\': [xx, xx]
},
"2": {
\'0\': [xx, xx],
\'1\': [xx, xx]
},
"3": {
\'0\': [xx, xx],
\'1\': [xx, xx],
\'2\': [xx, xx]
},
"4": {
\'0\': [xx, xx],
\'1\': [xx, xx]
}
};
for (var i = 0; i < ansArr.length; i++) {
var j =ansArr[i];
this.globalData.leftScore = this.globalData.leftScore + rst[i][j][0]
this.globalData.rightScore = this.globalData.rightScore + rst[i][j][1]
}
}
将计算得来的总数据存放在全局data里即可
3.绘制生成图片
想要绘制用户的微信头像怎么办？
将微信的域名配置到自己公众平台的服务器域名下（https://wx.qlogo.cn）
先将微信头像下载下来
wx.downloadFile({
url: _this.data.avatarUrl,
success: function (res) {
//console.log(res.tempFilePath);
_this.setData({
avatarUrl: res.tempFilePath,
})
//绘图方法
//that.drawImage();
},
fail: function (res) {
//console.log("绘图失败")
_this.setData({ nonet: false })
}
})
然后获取图片
let promise1 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: \'../../images/result-pic.png\',
success: function (res) {
//console.log(\'背景图获取成功\')
resolve(res);
}
})
});
let promise2 = new Promise(function (resolve, reject) {
wx.getImageInfo({
src: app.globalData.userInfo.avatarUrl,//服务器返回的图片地址
success: function (res) {
//console.log(\'头像获取成功\')
resolve(res);
}
})
});
获取图片成功后去绘制图片
Promise.all([
//promise1, promise2
promise2, promise3, promise4
]).then(res => {
//console.log("进入promise")
const ctx = wx.createCanvasContext(\'shareImg\')
ctx.drawImage(\'../../\' + res[0].path, 0, 0, 545, 771)
ctx.drawImage(\'../../\' + res[2].path, 14, 658, 90, 90)
//ctx.drawImage(_this.data.avatarUrl, 0, 0, 70, 70)
//主要就是计算好各个图文的位置
//绘制圆角头像
ctx.save(); // 先保存状态 已便于画完圆再用
ctx.beginPath(); //开始绘制
ctx.arc(272, 257, 50, 0, Math.PI * 2, false);
ctx.clip();//画了圆 再剪切 原始画布中剪切任意形状和尺寸。一旦剪切了某个区域，则所有之后的绘图都会被限制在被剪切的区域内
ctx.drawImage(res[1].path, 220, 208, 100, 100); // 推进去图片
ctx.restore(); //恢复之前保存的绘图上下文 恢复之前保存的绘图上下午即状态 可以继续绘制
//console.log("头像绘制成功")
//ctx.draw();
//绘制名字
ctx.setTextAlign(\'left\')
ctx.setFillStyle(\'#ffffff\')
ctx.font = \'normal bold 32px sans-serif\';
ctx.fillText(app.globalData.userInfo.nickName, (540 - ctx.measureText(app.globalData.userInfo.nickName).width) / 2, 118)
//ctx.fillText(\'可爱的小公举\', (540 - ctx.measureText(\'可爱的小工具\').width) / 2, 118)
var chr = _this.data.leftDesc.split("");//将一个字符串分割成字符串数组
var temp = "";
var row = [];
ctx.setFillStyle(\'#211f18\')
ctx.setTextAlign(\'left\')
ctx.font = \'normal normal 20px sans-serif\';
for (var a = 0; a < chr.length; a++) {
if (ctx.measureText(temp).width < 220) {
temp += chr[a];
}
else {
a--; //这里添加了a-- 是为了防止字符丢失，效果图中有对比
row.push(temp);
temp = "";
}
}
row.push(temp);
ctx.draw(true,setTimeout(() => {//在draw回调里调用该方法才能保证图片导出成功。
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: \'xxx\',
height: \'xxx\',
destWidth: \'xxx\',
destHeight: \'xxx\',
canvasId: \'shareImg\',
success: function (res) {
_this.setData({
prurl: res.tempFilePath,
hidden: false
})
wx.hideLoading()
},
fail: function (res) {
//console.log("最后绘制失败");
}
})
}, 200))
})
4.保存图片到相册（获取用户保存到相册授权）
wx.getSetting({
success(res) {
if (!res.authSetting[\'scope.writePhotosAlbum\']) {
wx.authorize({
scope: \'scope.writePhotosAlbum\',
success() {
//console.log(\'用户已经同意小程序使用保存到相册功能\')
// 用户已经同意小程序使用保存到相册功能，后续调用 wx.startRecord 接口不会弹窗询问
//wx.startWritePhotosAlbum()
},
fail(){
//console.log(\'用户不同意小程序使用保存到相册功能\')
wx.showModal({
title: \'警告\',
content: \'你点击了拒绝授权将无法保存图片，点击确定重新获取授权。\',
showCancel: false,
confirmText: \'返回授权\',
success: function (res) {
if (res.confirm) {
wx.openSetting({
success: (res) => {
if (res.authSetting["scope.writePhotosAlbum"]) {
wx.authorize({
scope: \'scope.writePhotosAlbum\',
success() {
//console.log(\'用户已经同意小程序使用保存到相册功能\')
// 用户已经同意小程序使用保存到相册功能，后续调用 wx.startRecord 接口不会弹窗询问
//wx.startWritePhotosAlbum()
},
})
}
}
})
}
}
})
}
})
}else{
//console.log(\'用户之前同意过小程序使用保存到相册功能\')
wx.saveImageToPhotosAlbum({
filePath: that.data.prurl,
success(res) {
wx.showToast({
title: \'已保存到相册\',
icon: \'\',
duration: 1000,
mask: true
})
}
})
}
}
})
5.长按分享图片
sharepic:function(e){
var current = e.target.dataset.src;
wx.previewImage({
current: current,
urls: [current]
})
}
6.//获取页面的高度，从而实现滚动
pageScrollToBottom: function () {
var _this = this;
wx.createSelectorQuery().select(\'#wrap\').boundingClientRect(function (rect) {
// 使页面滚动到底部
_this.setData({
scrollTop: rect.height
})
}).exec()
},
刚开始我是直接在里面设置wx.pageScrollTo来实现，每次将页面滑到最底部，后来发现这种情况页面抖动十分厉害，故只用上述方法获取高度，
然后使用
<scroll-view scroll-y class="container" enable-back-to-top="true" style="height: {{windowHeight}}rpx;" bindscroll="touchclose" scroll-with-animation="true" scroll-top="{{scrollTop}}">
<!-- 内容 -->
<view>-----略------</view>
</scroll-view>
7.最后说说基于存在再测一次页面实现的整体结构
因为页面可以无限次循环，每次又是从第一次循环，所以这边根据数据渲染得出，
当第一题有答案时显示第二题，当第二题显示时出现第三题，依次执行，五题执行完又可以实现再测一次从第一次实现
我想到了用wx:for，用wx:for一下循环五项，判断是否展示的条件不变，用二维数组保存，刚开始测试的第一组存放在arr[0]一维数组索引为0的
第一个二维数组里，每点击再测一次，数组的length加一，添加到下一个arr[1]数组里，这样即可实现无限循环。
如果有用到上述api出现问题的，可以共同探讨下原因，最后说一下，小程序官方api内容还是很全的，大家可以尝试各种项目。
请发表评论