小程序canvas生成海报图片保存分享朋友圈

海报组件地址

https://ext.dcloud.net.cn/plugin?id=586
原作者demo里都有详细的注释,pages/hch-poster页面的例子里面有详细说明

注意点

1.小程序码可以在公众平台工具里面生成
小程序canvas生成海报图片保存分享朋友圈_第1张图片
2.海报图片,文字描述,小程序码都可以在pages/hch-poster页面里修改

createCanvasImageEvn(){
				// 这个是固定写死的小程序码
				Object.assign(this.posterData,
				{
				url:'https://img0.zuipin.cn/mp_zuipin/poster/hch-pro.jpg',//商品主图
				icon:'https://img0.zuipin.cn/mp_zuipin/poster/hch-hyj.png',//会员价图标
				title:"诗酒茶系列 武夷大红袍 2018年 花香型中火 一级 体验装 16g",//标题
				discountPrice:"250.00",//折后价格
				orignPrice:"300.00",//原价
				code:'https://img0.zuipin.cn/mp_zuipin/poster/hch-code.png',//小程序码
				})
				this.$forceUpdate();//强制渲染数据
				setTimeout(()=>{
					this.canvasFlag=false;//显示canvas海报
					this.deliveryFlag = false;//关闭分享弹窗
					this.$refs.hchPoster.createCanvasImage();//调用子组件的方法
				},500)}

3.需要判断用户是否授权保存图片至本地
在uni.canvasToTempFilePath的fail回调里

	wx.openSetting({
		})
	开启授权				

你可能感兴趣的:(小程序canvas生成海报图片保存分享朋友圈)