php抓取网页动态数据(第一个实习新入职开发过程中常见的难点及解决办法)
优采云 发布时间: 2022-02-03 23:14php抓取网页动态数据(第一个实习新入职开发过程中常见的难点及解决办法)
我是大四实习的新人，一周后就接触到了我的第一个项目。
因为我是新手，在整个开发过程中遇到了很多困难：主要是canvas绘制过程中，因为产品图片和二维码来自后台，绘制完成后发现只能显示在微信开发工具上，只能在真机上显示。（我的手机）上只能显示文字，图片为空白。经过多次测试，发现在真机上无法绘制网络图片。
首先，看一下设计图就知道它长什么样了：
————
——
具体来说，就是在微信小程序的商品详情页增加了一个分享按钮。点击按钮后，将产品图片、描述、价格和二维码绘制成图片展示（项目收录详情页和首页两张图片）。利用微信小程序内置功能，长按可以保存、分享、采集、识别二维码。
接下来代码不全，主要是我开发过程中用到的代码。（由于公司使用wepy小程序框架进行开发，代码编写与原生小程序代码略有不同，需要的朋友请自行转行，重点了解此流程。）
1.这是wxml部分的代码。这里缺少样式代码。
分享
//点击分享按钮，调用事件“share”
当点击分享按钮时，触发“分享”方法，然后执行“分享”方法中的getGoodEwm方法。
注意：
1.canvas-id 必须设置，后面会用到。
2.样式中的宽高要使用。如果不设置宽高，画板无效。
3.canvasHidden 是一个控制画板显示和隐藏的参数。如果画板直接设置为不显示，会导致失败。
2.脚本部分。
Data{
//画布
canvasHidden:true, //设置画板的显示与隐藏，画板不隐藏会影响页面正常显示
shareImgPath: '' //用于储存canvas生成的图片
}
自定义方法：
这是 getGoodEwm 方法。需要注意的是，由于二维码和商品图片都是后台获取的网络图片，所以必须先获取二维码图片的地址，再通过“wx.getImageInfo”获取图片信息方法，然后获取产品图像的信息。（因为商品图片的api地址是用其他方式写的，这里就不展示了，原理和二维码获取一样。）获取两张图片后才能开始绘制，否则无法绘制图像。
注意代码后面的注释
//二维码获取
async getGoodEwm() {
let that = this;
let storeId = wepy.getStorageSync(STORE_ID) || {};
let storeSkuSn = that.detail.storeSkuSn;
const json = await api.getGoodEwm({
query: {
storeId : storeId,
storeSkuSn : storeSkuSn
}
}); //以上代码是后台获取二维码的方法，不是本问的重点。实际实验中可以把二维码图片地址用网络图片地址代替，也能实验效果
console.log(json.data)
if (json.data.code == 'success') { //这句表示如果二维码图片内容获取成功
wx.showLoading({ //因为整个图片获取过程需要一定时间，所以添加一个提示框提醒用户
title: '努力生成中...'
})
wx.getImageInfo({ //获取二维码图片信息
src: json.data.data,
success:function(res){
console.log("------------- succ -----------")
console.log(res)
wx.getImageInfo({ //二维码图片信息获取成功后，获取商品图片信息
src: that.detail.imgList[0], //因为后台中商品图片有多张，数据是一个数组，所以这里只获取第一张。也可以用网络图片地址代替。
success:function(e){
console.log("------------- succ -----------")
console.log(e)
console.log(res)
that.drawImg(e,res) //两张图片都获取成功后，调用绘图方法，注意传递过去的参数区别，不要混淆
},
fail:function(e){
console.log("------------- fail -----------")
console.log(e)
},
complete:function(e) {
console.log("------------- complete -----------")
console.log(e)
}
});
},
fail:function(res){
console.log("------------- fail -----------")
console.log(res)
},
complete:function(res) {
console.log("------------- complete -----------")
console.log(res)
}
});
} else {
tip.error(json.data.errorMsg)
console.log('失败')
}
that.$apply();
}
//绘图
drawImg(e,res) {
let that=this;
that.canvasHidden=false //设置画板显示，才能开始绘图
var img=e.path //商品图片保存地址
var img1=res.path //二维码图片保存地址
var name=this.detail.name //图片描述,描述和下面的价格都是从后台获取的内容，可以随意换成其他文本内容，这里不是重点所以就不讲内容的获取方法了
var price=this.detail.price //图片价格
let context = wx.createCanvasContext('share') //这里的“share”是“canvas-id”
context.setFillStyle('#fff') //这里是绘制白底，让图片有白色的背景
context.fillRect(0, 0, 750, 920)
context.drawImage(img, 30, 30, 690, 690) //绘制商品图片
context.setFontSize(28)
context.setFillStyle("#393939")
context.fillText(name, 30, 796) //绘制描述
context.setFontSize(32)
context.setFillStyle("#f31115")
context.fillText('￥'+price, 30, 870) //绘制价格
context.drawImage(img1, 576, 750, 144, 144) //绘制二维码图片
//把画板内容绘制成图片，并回调画板图片路径
context.draw(false, function () {
wx.canvasToTempFilePath({
x: 0,
y: 0,
width: 750,
height: 920,
destWidth: 750,
destHeight: 920,
canvasId: 'share',
success:a=>{
that.shareImgPath=a.tempFilePath, //将绘制的图片地址保存在shareImgPath 中
that.canvasHidden=true //设置画板隐藏，否则影响界面显示
that.$apply(); //更改data的值 等同于小程序原生代码的setData
console.log(that.data.shareImgPath)
wx.previewImage({ //将图片预览出来
urls: [that.data.shareImgPath]
})
wx.hideLoading() //图片已经绘制出来，隐藏提示框
},
fail:e=>{console.log('失败')}
})
})
}
Methods={
//分享事件
share() {
this.getGoodEwm();
}
}
解释下面的代码：
当点击分享按钮时，触发“分享”方法，然后执行“分享”方法中的getGoodEwm方法。需要注意的是，由于二维码和商品图片都是后台获取的网络图片，所以必须先获取二维码图片的地址，再通过“wx.getImageInfo”获取图片信息方法，然后获取产品图像的信息。（因为商品图片的api地址是用其他方式写的，这里就不展示了，原理和二维码获取一样。）获取两张图片后才能开始绘制，否则无法绘制图像。
在Canvas上绘制的方法可以看小程序的官方文档，看一遍代码就可以理解。图片绘制完成后，将地址保存在data的“shareImgPath”中，然后调用“wx.previewImage”方法预览图片。长按图片会自动调用微信小程序的原生功能：保存、采集等。
事实上，整个项目的重点是如何绘制网络图像。如果是本地图片，步骤会少一些，但是网络图片必须先通过wx.getImageInfo()方法保存，然后再调用绘图。在项目中，由于图片是在后台获取的，所以调用api获取背景图片的次数较多。
