前沿
最近接触到weex的一个商城项目，主要用得技术栈是 weex+vue ，不了解weex的同学可以移步weex官方文档 该项目主要是做淘宝优惠券的自动查找功能，类似于市面上的淘客APP，既然是一款c端产品那么当然涉及到微信分享、微信登陆这些主要的引流入口。
需求分析
进入主题，接到一个需求是，分享多张图片或单张到微信，这个功能本身是很简单就能实现的，拿到后台的图片数组传给IOS和安卓，他们直接唤起微信就ok了。但是，别太天真，产品的需求并非如此，而是分享的同时需要给我们分享的图片打上我们专有商品分享二维码，那么问题来了，因为weex不支持canvas画布，所以前端这边无法生成二维码，（这一点必须吐槽下weex），后台打码到图片上需要时间，也就是说这个接口请求速度对用户非常不友好，后来也证实了我的猜想，而且接口请求的速度慢还导致原生app那边API不能正常调起微信：
解决方案
与后台沟通，发现单张图片和多张图片不是同一接口，且单张的图片比多张图片打码的速度快很多的，那么解决方案就有了，可以采用Promise.all异步调取单张图片的接口，调取多次单张图片的接口这样就可以避免等待多张图片全部打码完成的时间了，代码如下：
//底部播货按钮popup
async sowBtnpost(project_id){
let sessid = await util.getItem('txb_sessid') //用户登陆信息是否失效
if(sessid){
this.shareImg = [] //初始化图片数组
if(this.isClick) return
let postUrl
let funcArray = [] //初始化方法数组
let sendData = {project_id:project_id}
if(this.changeiconType){
postUrl = "/home/share_project_good_single" //多图分享
console.log(this.categoodsList)
this.categoodsList.forEach((e,i)=>{
sendData.num_iid = e.num_iid
funcArray.push(this.postList(postUrl,sendData)) //单张图片请求接口方法postList push进数组
})
console.log(funcArray) //方法数组里是我们想执行的多个postList
await Promise.all(funcArray) //请求promise all化
}else{
postUrl = "/home/share_project_good" //单图分享
await this.postList(postUrl,sendData)
}
if(this.shareImg.length>0){
this.shareClick(this.shareImg) //所有异步请求完成后调取原生API
}
}else{
this.$router.push("/loginSelect");
this.isowTransform(626,0,false) //动画特效还原
}
},
postList方法代码如下
async postList(postUrl,sendData){
try {
this.isClick = true
if(!isWeb()){ //请求前打开原生遮罩层
weex.requireModule("CMWXProgressHUDModule").showHUDWithParams({status:"show"});
}
let cateImage = await this.$http.post(postUrl,sendData,this.showLoading)
this.shareImg.push(cateImage.share_img_url) //原生app需要的图片数组
} catch (error) {
// this.$toast(error.msg)
if(!isWeb()){ //请求后关闭原生遮罩层
weex.requireModule("CMWXProgressHUDModule").showHUDWithParams({status:"dismiss"});
}
} finally{
this.isClick = false
}
},
app分享页面
代码分析
上面多图分享代码首先初始化了一个接收所有图片数组的空数组和一个接收所有方法数组的空数组，循环this.categoodsList取出我们需要的所有图片的唯一id，进行postList请求，换取已经打好码的单张图片，使用es7 async await使得push进funcArray数组和push进shareImg数组异步进行的不会影响各自的方法执行，且 async await做异步处理会比Promise 层层恰套的then回调可读性好很多，await本身就译为等待的意思，等待所有请求结束后调取shareClick方法
shareClick方法主要是调取原生API，再此不做过多解释，代码如下：
//分享图片
shareClick(shareImg){
var self = this;
if(!isWeb()){
weex.requireModule("ShareServiceModule").systemShareImageUrlArray(shareImg,async function(data){
let sharepostUrl = self.listIndex == 0 ? '/home/project_share_count_add' : '/home/material_share_count_add' //播货或者专题素材
let shareDatanum = await self.$http.post(sharepostUrl,{project_id:self.categoodsItem.project_id}) //下载成功回调记录分享成功次数
self.shareObj.project_info.share_count++
weex.requireModule("CMWXProgressHUDModule").showHUDWithParams({status:"dismiss"});
});
}
},
附
该博客仅为记录weex中一些遇到的问题及解决方案，后续还会继续更新维护，新人第一次写，有什么不足之处还请大牛多多指点。