写这篇文章,主假如在前不久的微信民众号开辟的时刻,碰到了一些题目,纪录一下,并愿望其他在碰到这些题目,能够举行疾速定位及处置惩罚。
- 微信底部工具栏白条,
1.起首,底部工具栏白条涌现的原因是由于,浏览器跳转留下了汗青信息,所以假如我们用H5开辟时,假如须要跳转页面,运用window.location.replace
如许不会留下汗青信息。
2.由前端猎取微信受权,挪用微信的API,微信在受权以后重定向原页面时,会涌现底部工具栏白条,且回退是微信受权的空白页,体验极差,处置惩罚方法:实在受权能够让背景去挪用微信受权,如许让背景重定向页面的时刻,不要留下汗青信息,就能够拿到微信返回过来的参数,如许也能够削减对后端的屡次要求,由后端一次性返回微信返回的参数。
2 . 微信分享
1.微信分享,人人都做过,挪用微信API 的分享接口,运用微信浏览器的右上角···去举行分享到朋侪,或许分享到朋侪圈,然则分享出去的是一个图文模块,更多产物需求是分享图片,辨认图中二维码来进入我们的页面或许将图片分享出去,然则微信的分享图片机制是分享长摁位置的图片,而不是将页面直接转化为图片
2. 背景能够将分享页面,运用背景的插件举行画图,然则背景毕竟是服务端言语,对图形笔墨字体的处置惩罚没有浏览器端处置惩罚的圆满,比方 假如微信昵称包括emjio脸色包,那末在画图的时刻就不会展现的很好,由于是是做H5页面,所以我们能够运用canvas去举行绘制图片,由于渲染在浏览器,所以对emjio的支撑度很高
直接贴代码
html
```
<img class="imageShare" style="display:block"/>
```
js
```
// 画图
var canvas = document.createElement(‘canvas’);
canvas.width = 750;
canvas.height = 1206;
var ctx = canvas.getContext('2d');
var img = new Image();
img.onload = function () {
var img_left = new Image();
img_left.onload = function () {
var img_ewm = new Image();
img_ewm.onload = function(){
ctx.font = "24px 黑体";
ctx.drawImage(img, 0, 0);
ctx.drawImage(img_left, 310, 160,115,115);
ctx.drawImage(img_ewm, 310, 925, 115, 115);
ctx.fillStyle = "#773f15";
ctx.textAlign='center';
ctx.fillText(nickName,375,138);//用户昵称
//$('body').html(canvas);
$('.imageShare').attr('src',canvas.toDataURL("image/jpeg"))
}
img_ewm.src='../../images/financialTest/ewm.png';//二维码
img_ewm.crossOrigin = "anonymous";
}
img_left.src="/wechat/getuserImagesV2?urlHead="+urlHead;//用户头像
img_left.crossOrigin = "anonymous";
}
img.src='../../images/financialTest/'+imageType;
img.crossOrigin = "anonymous";
```
如许,就能够直接将分享页转化为`img`,而且前端画图,比后天画图,更轻易调试和修正。