资讯专栏INFORMATION COLUMN

微信公众号开发遇到的一些问题

jayzou / 2290人阅读

摘要:写这篇文章,主要是在前不久的微信公众号开发的时候,遇到了一些问题,记录一下,并希望其他在遇到这些问题,可以进行快速定位及处理。

写这篇文章,主要是在前不久的微信公众号开发的时候,遇到了一些问题,记录一下,并希望其他在遇到这些问题,可以进行快速定位及处理

微信底部工具栏白条
1.首先,底部工具栏白条出现的原因是由于,浏览器跳转留下了历史信息,所以如果我们用H5开发时,如果需要跳转页面,使用window.location.replace这样不会留下历史信息。
2.由前端获取微信授权,调用微信的API,微信在授权之后重定向原页面时,会出现底部工具栏白条,且回退是微信授权的空白页,体验极差,处理办法:其实授权可以让后台去调用微信授权,这样让后台重定向页面的时候,不要留下历史信息,就可以拿到微信返回过来的参数,这样也可以减少对后端的多次请求,由后端一次性返回微信返回的参数。

2 . 微信分享

1.微信分享,大家都做过,调用微信API 的分享接口,使用微信浏览器的右上角···去进行分享到朋友,或者分享到朋友圈,但是分享出去的是一个图文模块,更多产品需求是分享图片,识别图中二维码来进入我们的页面或者将图片分享出去,但是微信的分享图片机制是分享长摁位置的图片,而不是将页面直接转化为图片
 2. 后台可以将分享页面,使用后台的插件进行绘图,但是后台毕竟是服务端语言,对图形文字字体的处理没有浏览器端处理的完美,比如 如果微信昵称包含emjio表情包,那么在绘图的时候就不会展示的很好,因为是是做H5页面,所以我们可以使用canvas去进行绘制图片,因为渲染在浏览器,所以对emjio的支持度很高
 
直接贴代码
html
```
   
```
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`,而且前端绘图,比后天绘图,更容易调试和修改。
 

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/99796.html

相关文章

  • 使用vue开发微信公众下SPA站点填坑之旅

    摘要:原文见我的博客,点击进入使用开发微信公众号下站点的填坑之旅本文为我创业过程中,开发项目的填坑之旅。作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱。 原文见我的博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅。作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^_^。 ...

    yeyan1996 评论0 收藏0
  • 微信公众页面(VUE)中如何配置微信JS-SDK和高德地图,以及遇到一些问题记录

    摘要:安装并引入依赖包这里是说明文档下载依赖包在需要用到的模块引入检查是否引入成功可以在引入的模块中执行控制台显示以上代码表示引入成功配置微信所有需要使用的页面必须先注入配置信息,否则将无法调用开启调试模式调用的所有的返回值会 1.安装并引入JS-SDK依赖包 这里是JS-SDK说明文档 1.1 npm 下载依赖包 npm install weixin-js-sdk --save 1.2.在...

    Joyven 评论0 收藏0
  • Evil Python

    摘要:用将倒放这次让我们一个用做一个小工具将动态图片倒序播放发现引力波的机构使用的包美国科学家日宣布,他们去年月首次探测到引力波。宣布这一发现的,是激光干涉引力波天文台的负责人。这个机构诞生于上世纪年代,进行引力波观测已经有近年。 那些年我们写过的爬虫 从写 nodejs 的第一个爬虫开始陆陆续续写了好几个爬虫,从爬拉勾网上的职位信息到爬豆瓣上的租房帖子,再到去爬知乎上的妹子照片什么的,爬虫...

    Turbo 评论0 收藏0
  • 浅析微信支付:前篇大纲

    摘要:浅析微信支付前篇大纲本文是浅析微信支付系列文章的第一篇,主要会介绍一下为何写下这个系列以及对于微信支付的一点小经验,与君共勉。下面讲一下我是如何去学习微信支付的。 浅析微信支付:前篇大纲 本文是【浅析微信支付】系列文章的第一篇,主要会介绍一下为何写下这个系列以及对于微信支付的一点小经验,与君共勉。 以下会分几个步骤讲一下我学习微信支付的过程,也是一部辛酸史,也是希望朋友们不要再次跌进...

    mayaohua 评论0 收藏0

发表评论

0条评论

jayzou

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<