uniapp入门级最佳实践（五） | 8月更文挑战

这是我参与8月更文挑战的第22天，活动详情查看：8月更文挑战

一、生成分享海报

效果图：

<view class="shareContainer">
	<canvas style="height: 100%;width: 100%;backgroundColor: #FFFFFF" canvas-id="shareCanvas"></canvas>
</view>
data() {
	return {
		bgCanvas: '',//canvas背景图片
		shareCodeCanvas: '',//canvas二维码
		screenWidth: '',       //设备屏幕宽度
		screenHeight: '',//设备屏幕高度
	}
},
onLoad(options) {
	let _this = this;
	//获取用户设备信息，屏幕宽度
	uni.getSystemInfo({
		success: res => {
			_this.screenWidth= res.screenWidth;
			_this.screenHeight = res.screenHeight;
		}
	})
	//先把所有用到的网址图片下载下来，存到本地
	uni.getImageInfo({
		src: "https://a.png",//背景图片
		success: function (res) {
			_this.bgCanvas = res.path;
		}
	})
	uni.getImageInfo({
	    src: "https://a.png",//二维码
	    success: function (res) {
			_this.shareCodeCanvas = res.path;
	    }
	})
},
methods: {
	saveImg() {
		let _this = this;
		let ctx = uni.createCanvasContext('shareCanvas');
		uni.showLoading({
			title:'保存中……'
		})
		let maxWidth = _this.screenWidth;
		let screenHeight = _this.screenHeight;
		ctx.drawImage(_this.bgCanvas, 0, 0, _this.screenWidth, 650);//这个是背景图片
		setTimeout(()=> {
			ctx.drawImage(_this.shareCodeCanvas, 100, 170, 150, 150);//画二维码，要在背景图片后画二维码不然就上下的图片
			ctx.setFontSize(20);
			ctx.textAlign = 'center';//文字居中要提前写
			ctx.setFillStyle('#333333');
			ctx.font = 'normal bold 20px sans-serif';//文字加粗也要提前写
			ctx.fillText('邀请来分享',maxWidth/2,375,maxWidth);//text,x,y,maxWidth
			//这里maxWidth/2就是为了无论文字多长都会居中
		},800)
		
		setTimeout(()=> {
			ctx.draw(false, () => {
				uni.canvasToTempFilePath({
　　　 　　　　　　 	x: 0,
 　　 　　　　　　　	y: 0,
					width: uni.upx2px(750),
					height: uni.upx2px(1300),
					destWidth: uni.upx2px(750),
					destHeight: uni.upx2px(1300),
					canvasId: 'shareCanvas',
					fileType: 'jpg',
					success: function(res) {
						uni.hideLoading();
						uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success: function() {
								uni.showToast({
									title: '保存成功！'
								})
							}
						});
					}
				})
			})
		},1500)
	}
}

关于canvas真的很多要注意的，不然就有很多问题。

注意：

1、一定要把背景图和用到的图片都提前下载下来，不然后面加载会慢或者会不展示。

2、所有图片必须是https安全域名，不然真机上会出现黑色背景

3、背景图和二维码要分次加载，不然就不是背景图了，所以设置了延时

4、文字加粗、字体、字号、居中都要卸载fillText之前，不然就会失效，文字居中最重要的是fillText第二个参数x的位置一定要设置为整个宽度除以2就会居中！

**二、**运行打包发布

• 小程序运行发布

1、才想起来没有写如何运行项目，先选择运行，运行到小程序模拟器，微信开发者工具，然后打开小程序开发者工具即可。每次保存页面都会触发小程序开发工具更新。

2、小程序可以直接在开发者工具上进行上传到体验版，然后在微信平台进行上传审核，审核成功后就是正式版小程序了。

• H5运行发布

1、H5运行可以选择到浏览器，如果不是公众号类型，直接这样运行即可，然后dist目录下会有文件可以直接打包发到服务器上放在nginx目录下就行

2、如果是公众号类型，必须要进行发行,选择网站-PC-Web或手机H5，最后在文件夹内项目名\unpackage\dist\build\h5，然后发到服务器上，再到微信开发工具改为公众号调试的模式，地址栏输入页面地址，只能访问线上的，就比较麻烦，所以调接口要多打印一些文件，最好先在小程序上调完了，然后在到微信运行H5看看哪里有问题再改，最好是先调好一个平台再优化另一个平台。