uniapp开发小程序问题总结

一、微信开发者工具当前系统代理不是安全代理，是否信任，点击信任以后点击登录二维码显示无法连接网络。

1.下载安装charles
2.打开charles
3.重新打开微信开发者工具

二、微信小程序包过大无法发布解决方法

1.分包
分包方式见官方介绍跳转官网
2.删除过大的插件或者库换成压缩包或者使用其他小的插件替换方式
3.图片压缩+分包
图片压缩可以在网上随便找个压缩网站或者压缩器压缩，然后把static里面的图片分散到各个分包里面，注意图片分包后只可以在当前分包中使用，并且在ios系统下需要require引入。
4.components中的组件分包
注意组件分包中的组件之可以在当前分包中使用，跨包无法使用.
5.easycom打包后会自动剔除没有使用的组件，对组件库的使用尤为友好
easycom使用方式见官网
6.代码压缩，uniapp运行-运行到微信小程序-勾选运行时是否压缩代码，有效减少vendor.js的代码

三、图片加水印

			// base64topath.js
			const FILE_BASE_NAME = 'tmp_base64src'; //⾃定义⽂件名
			function base64src(base64data, cb) {
			  const [, format, bodyData] = /data:image\/(\w+);base64,(.*)/.exec(base64data) || [];
			  if (!format) {
			    return (new Error('ERROR_BASE64SRC_PARSE'));
			  }
			  const filePath = `${wx.env.USER_DATA_PATH}/${FILE_BASE_NAME}.${format}`;
			  const buffer = wx.base64ToArrayBuffer(bodyData);
			  // console.log(filePath)
			  let fms = wx.getFileSystemManager()
			  fms.writeFile({
			    filePath,
			    data: buffer,
			    encoding: 'binary',
			    success() {
					// console.log(filePath)
			      cb(filePath);
			    },
			    fail() {
			      return (new Error('error'))
				  }
				})
			}
			export default base64src
			// 添加水印
			addWatermark(tempFilePath) {
				let self = this;
				return new Promise(async (resolve, reject) => {
					// 获取图片信息
					wx.getImageInfo({
						src: tempFilePath,
						success: async (res) => {
						const canvas = uni.createOffscreenCanvas({type: '2d', width: res.width, height: res.height})
						canvas._id = 'myCanvas';
						let context = canvas.getContext('2d')
						const image = canvas.createImage()
						  // 等待图片加载
						  await new Promise(resolve => {
							image.onload = resolve
							image.src = tempFilePath // 要加载的图片 url
						  })
						context.drawImage(image, 0, 0, res.width, res.height);
						
						// 设置文字字号及字体
						context.font = '28px sans-serif'
						// 设置画笔颜色
						context.fillStyle = 'rgba(0,0,0,0.2)';
						// 绘制矩形
						context.fillRect(0, 0, res.width, res.height)
						// 设置画笔颜色
						context.fillStyle = '#ffffff';
						context.textBaseline = 'top';
						context.shadowOffsetX=-2;//用来设定阴影在 X轴的延伸距
						context.shadowOffsetX=-2;//用来设定阴影在 Y轴的延伸距
						context.shadowBlur = 2;//设定阴影的模糊程度 默认0
						context.shadowColor = "rgba(0, 0, 0, 0.8)";
						// 填入文字
						let name = this.userInfo.name + '(' + this.userInfo.userName + ')';
						context.fillText(name, 20, 30);
						context.fillText(this.address, 20, 70);
						let date = moment(new Date()).format("YYYY-MM-DD HH:mm:ss")
						context.fillText(date, 20,110);
						// 将base64转为本地路径
						base64Img(context.canvas.toDataURL(), res => {
							resolve(res) // res为转换后的地址可以上传到后台服务
						})
					}
					})
				})
			},

四、自定义时间切换组件

呈现效果

// timeselect.vue

// 使用page.vue