uni-app开发公众号H5遇到的问题

引言：最近用uni-app框架开发了个中秋博饼公众号H5项目，多多少少遇见了一些问题Mark一下

uni调试时跨域（H5）

让后端配置跨域后，我们这样设置，在

文件中的源码视图中添加如下代码

"h5" : {
        "devServer" : {
            "https" : false,
            "disableHostCheck" : true,
            "port" : 82,		//	你的端口
            "proxy" : {
                "/index" : {
                    "target" : "http://xxxx.test.com",	//	服务器地址
                    "changeOrigin" : true,
                    "secure" : false,
                    "pathRewrite" : {
                        "^/prefix" : ""
                    }
                }
            }
        }
    }

关于海报生成（html2canvas）

有关生成海报进行分享，使用了html2canvas插件，上代码

getImg(call) {
	let el = this.$refs.imageWrapper;	//	获取容器
	window.pageYOffset = 0;				//	不设置会导致生成图片不完整
	
	html2canvas(el,{
		logging: true,
		allowTaint: true,
		backgroundColor: null,
		useCORS: true,
		windowWidth: el.scrollWidth,
		windowHeight: el.scrollHeight
	}).then(canvas => {
		this.imgUrl = canvas.toDataURL("image/png",1.0);
		call&&call();
	});
}

注意点：

1. 容器中不能使用像view这样的标签 需使用div

2. html2canvas生成时图片跨域问题解决方法 ----> 容器中图片转成base64（生成base64中遇见少数图片不能正常转换问题 加了Promise后都正常转换）
   代码：

let el = this.$refs.bg;		//	需要转换的img

urlToBase64: function(el) {
   return new Promise ((resolve,reject) => {
	 	let image = new Image();
		image.src = el.src;
		image.setAttribute('width',el.width);
		image.setAttribute('height',el.height);
	    image.onload = function() {
	        let canvas = document.createElement('canvas');
	        canvas.width = el.width;
	        canvas.height = el.height;
	        // 将图片插入画布并开始绘制
	        canvas.getContext('2d').drawImage(image, 0, 0, el.width, el.height);
	        // result
	        let result = canvas.toDataURL('image/png')
	        resolve(result);
	    };
	
	     // 图片加载失败的错误处理
	     image.onerror = () => {
	         reject(new Error('图片流异常'));
	     };
   })  
}

3. 关于实机测试html2canvas生成不了
   html2canvas版本太高 点击转跳解决方案

实时通讯(WebSocket)

此次项目采用npm安装socket.io-client

注意点：

1. 连接socket后不能马上发送消息 很可能当时没连接上，马上调用的需要加个600~800ms左右定时器，不然做了重连机制会导致一系列问题
   
   
   
   

uni-app使用微信JSSDK

点击转跳查看

1. 注意扫码返回数据取值resultStr
2. 分享点击回调微信官方废弃，只能监听成功设置分享信息，无法监听点击和分享成功后回调

wx.scanQRCode({
  needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
  scanType: ["qrCode","barCode"], // 可以指定扫二维码还是一维码，默认二者都有
  success: function (res) {
    var result = res.resultStr; // 扫码返回的结果
  }
});

uni-app h5打包后静态资源和路径配置

manifest.json文件中的源码视图中h5添加如下代码（此方法只针对H5端）

"router" : {
  "base" : "./",
    "mode" : "hash"
},
"publicPath" : "./",

所有的静态路径采用如： static/xxx.png
前期采用 /static可一键替换