uniapp 微信小程序实现走势图生成图片分享_如何做一个走势的小程序

项目场景：

提示：当前页面分享时 把走势图生成一张图片 并且生成图文分享分享出去：
效果图：

 

 

 

 

 

 

---

走势图部分：

提示：这部分是走势图部分的代码html：

<view class="qiun-charts" >
    <canvas canvas-id="qykccanvasMixid" id="qykccanvasMixid" 
        class="charts" @error="error" @touchstart="touchMix" @touchmove="moveMix"                     
        @touchend="touchEndMix"></canvas>
    <view class="coverLayer"></view>
</view>

提示：这部分是走势图的js ：

toTempFilePath(type) {	    
	let that = this;
	//wo我这里把id 写了区分
	let cansids ='';
	if(type ==0){
	cansids ='qykccanvasMixid';
	}else if(type ==1){
		cansids ='mrgycanvasMixid';
	}
	// 将生成的canvas图片，转为真实图片
	wx.canvasToTempFilePath({
		 x: 0,
		 y: 0,
		 canvasId: cansids,//对应要生成图片的块id
		 success: function (res) {
            //zstImage 就是我们要拿的图片了 分享时传递过去就行了
		   that.zstImage = res.tempFilePath;
		 },
		 fail: function (res) {
		 }
	},that)
},

提示：生成图片的代码 微信官方生成图片文档 wx.canvasToTempFilePath：

---

图文分享：

提示：分享html 注意 ：

<button class="shareE" hover-class='none'  open-type="share" style="position:absolute;right:0rpx;top:0rpx;margin-top:16rpx;"><image src="../../static/shareE.png"></image>分享</button>

注意：open-type="share"  这样设置之后才能调取微信分享 详情见微信文档 ：button | 微信开放文档 

js：具体分享方法：

//分享方法
onShareAppMessage(res) {
	var that = this;
	 return {
		title: this.groupid ==0 ?'测试测试' : '测试二',//分享图文我这里不同走势图写的分享内容不一样
		path: `/pages/XXX/XXX`,//分享要打开的页面 因为我的这个页面不需要登录 就打开的这个页面
		imageUrl: that.zstImage//自定义图片路径 支持PNG及JPG。显示图片长宽比是 5:4。
	 };
},

参考官方文档：  转发 | 微信开放文档