这个是第三方跳转的网站

微信公众平台前端开发技巧分享

微信公众平台

新版微信做了更改,此文提到的部分方法可能已经不再适用,请关注微信官方开放平台:http://open.weixin.qq.com/document/?lang=zh_CN。

微信很火,微信推出的公众平台也吸引了一部分市场宣传推广团队,像冷笑话大全这种微博养粉大户在微信的公众平台也是异常火爆。

因工作需求,最近为我们的市场部做了几个微信公共平台下的页面,其中涉及微信公众账号的友情链接,转发一篇文章到微信朋友圈,判断是否转发成功的回调机制,判断是否成功关注微信帐号等的前端代码,我也是通过分析冷笑话大全的页面找到的方法,也google过,但没找到微信官方有公布过相关文档,所以就把自己知道的拿来分享一下。

微信内嵌浏览器:

微信内嵌浏览器有一个私有JS 对象:WeixinJSBridge,通过操作这个对象的相关方法可以实现转发链接到微信朋友圈,和判断一个微信号的关注状态,比如在进行转发抽奖的活动时,判断是否转发成功和是否关注成功会很有必要。

转发链接到朋友圈:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
//点击事件调用此函数即可激发一次转发到朋友圈操作
function toWexinFriends(){
    WeixinJSBridge.invoke('shareTimeline',{
        "img_url": "http://example.com/example.png",
        //"img_width": "640",
        //"img_height": "640",
        "link": "http://example.com",
        "desc": "描述",
        "title": "标题"
    },function(res){
        // 返回res.err_msg,取值
        // share_timeline:cancel 用户取消
        // share_timeline:fail 发送失败
        // share_timeline:confirm 发送成功
        WeixinJSBridge.log(res.err_msg);
        if(res.err_msg == 'share_timeline:confirm'){
            //转发成功
        };
    });
}

关注微信公众帐号:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function addFirend(){
//gh_122a2ee67fae 为被添加者的微信ID
WeixinJSBridge.invoke("addContact", {webtype: "1",username: 'gh_122a2ee67fae'}, function(e) {
            WeixinJSBridge.log(e.err_msg);
            //e.err_msg:add_contact:added 已经添加
            //e.err_msg:add_contact:cancel 取消添加
            //e.err_msg:add_contact:ok 添加成功
            if(e.err_msg == 'add_contact:added' || e.err_msg == 'add_contact:ok'){
                //关注成功,或者已经关注过
            }
        })
}

以上都需要在微信内嵌浏览器内才能被识别,通过判断WeixinJSBridge对象是否存在,可以知道是否在微信内浏览的页面。

微信内嵌浏览器还可以识别:

1
<a href="weixin://profile/gh_122a2ee67fae"></a>

此种类型的链接,此链接在微信内会链接到一个公共帐号的介绍界面。
外部浏览器可以使用:

1
<a href="weixin://qr/aHUbFAjE_jaFhxl3nyBM"></a>

此种类型的链接在手机的外部浏览器也会被自动识别并跳转到微信,但会进行条码扫描,体验不是很好。

以上分享希望对大家有所帮助,更希望知情人士分享更多技巧,QQ的社交链真的是强大到可怕,微信已经渐渐成长壮大,必会成为网络营销的另一片沃土!

转载于:https://www.cnblogs.com/milx/p/7270248.html

微信公众平台前端开发技巧分享相关推荐

  1. html5网页分享到朋友圈,微信公众平台网页开发实战--1.微信分享一个网页到朋友圈...

    对微信的JSSDK进行封装一下,创建一份类似的文件结构,增加index.html与shareApi.js文件,结构如图3.3所示. 图3.3  3.2节文件结构 另外,提醒读者一下,wxJSSDK.j ...

  2. [046] 《微信公众平台应用开发:方法、技巧与案例》火热预售中...

    在CSDN连续写了20多篇关于微信公众平台开发的教程,受到了广大读者的一致好评,几乎每篇文章的访问量都过万,评论都是好几十,谢谢大家对我的支持.鼓励和肯定,这让我更加坚定了写书的想法.从2013年8月 ...

  3. 如何学习微信公众平台的开发?

    如何学习微信公众平台的开发? 在整个移动互联网的开发技术中,微信公众号的开发几乎是成本最低,传播最快,影响最广的,你几乎不需要再添加任何配置,就可以开始. 个人可以申请公众号,需要高级权限可以用测试号 ...

  4. 微信公众平台应用开发实战

    微信公众平台应用开发实战 微信营销 ISBN 9787111438618 作者 钟志勇 含税价 59.0元 税后 51.3元 增值税 7.7元 卓越价 40.7元(满49元免运费) 有货 出版社 机械 ...

  5. 微信公众号api关注接口php,微信公众平台接口开发入门示例

    本文实例讲述了微信公众平台接口开发入门示例.分享给大家供大家参考.具体如下: 微信公众平台的接口开发是一个现在比较常用的功能了,很多的人都会去了解一下微信公众平台一些简单开发应用,这里就来给大家介绍一 ...

  6. 微信公众号html在线编辑器,【微信公众平台工具开发】雷人微信网页编辑器

    原标题:[微信公众平台工具开发]雷人微信网页编辑器 [微信公众平台工具开发]雷人微信网页编辑器 雷人微信编辑器--真正的微信神器,可以将热门.头条和自己感兴趣的文章,包括微信朋友圈分享的公众号里面的精 ...

  7. 微信公众平台搭建与开发揭秘//////微信公众平台应用开发实战

    微信公众平台搭建与开发揭秘,完整扫描版 [香港回来了,累啊.这个是从http://www.ckook.com/处获得的电子书,自制的就不上传了,免得被人叽歪] <微信公众平台搭建与开发揭秘> ...

  8. 微信公众平台开发 - 动手篇。使用weinxinFundation开始一个微信公众平台的开发

    本文主要讲解如何使用 weinxinFundation 进行二次开发. 步骤如下: 1.创建新的web项目. 在eclipse里新建一个dynamicly web project,比如本文叫weixi ...

  9. ASP.NET MVC5微信公众平台整合开发实战教程

    <ASP.NET MVC5&微信公众平台整合开发实战(响应式布局.JQuery Mobile,Windows Azure.微信核心开发)> 课程讲师:57Code 课程分类:ASP ...

最新文章

  1. 西湖大学鞠峰:环境微生物宏基因组学(报告视频+PPT,11月23日)
  2. 关于程序中数据库报错“父项未找到”
  3. 追求极致:Repvgg重参数化对YOLO工业落地的实验和思考
  4. Unity学习笔记4 更换编辑器为VS2013及VS的背景图片设置
  5. PyQt4编程之如何做菜单栏
  6. auto errored after 报错解决_MySQL5.7 group_by报错问题解决办法,大部分程序员都收藏了...
  7. mongodb 物理删除数据
  8. jq监听子元素被点击_vue开发app点击字母展示地区列表(兄弟组件之间联动)
  9. 这个工具,可视化分析10W数据后,找到了数据岗位月薪20K的秘诀
  10. ubuntu 18 安装xgboost GPU版本
  11. 《How to Write and Publish a Scientifc Paper》个人笔记
  12. java学生成绩管理系统不使用数据库_java学生成绩管理系统(不用数据库,用txt),写出来有报酬...
  13. 车牌识别系统论文python_车牌识别系统的设计与实现毕业论文
  14. 空芯线圈电感计算公式
  15. 网页类参考文献的引用格式
  16. 解决uniapp的 swiper 组件的随着指示点添加背景宽度不随着内容添加而自动扩大问题,而是溢出。
  17. ufldl tutorial excise - Supervised Learning and Optimization
  18. 朴素的UNIX之-翻开历史
  19. _stdcall是什么?
  20. Java和JDK版本的关系

热门文章

  1. Keepalived+HAProxy基于读写分离方式实现discuz论坛
  2. Fragment:support.v4.content.Loader.deliverResult
  3. 刷新后 页面 保持滚动条位置
  4. 所谓的中间代码(ES5 的 “JSIL”)
  5. initial model for Agile Development Organization: Relationship Graph
  6. SVN 提交子文件夹问题
  7. 【转】3D图形引擎(DX9): FX
  8. 利用Diferencia和Java微服务进行分接比较测试
  9. vector 用法小例子
  10. 转 无障碍阅读 role aria-*