微信公众平台Js API实现微信分享

今天上班第一天,Boss让实现微信分享后,要知道用户是否分享成功,分享成功后就给用户一个surprise(游戏礼包)。

通过查看API,做简单记录:

1.编写一个简单的jsp页面,加入如下JS代码:

// 开发阶段,开启WeixinApi的调试模式
WeixinApi.enableDebugMode();

// 初始化WeixinApi,等待分享
WeixinApi.ready(function(Api) {

    // 微信分享的数据
    var wxData = {
        "appId": "", // 服务号可以填写appId
        "imgUrl" : ‘http://www.baidufe.com/fe/blog/static/img/weixin-qrcode-2.jpg‘,
        "link" : ‘http://www.baidufe.com‘,
        "desc" : ‘大家好,我是Alien,Web前端&Android客户端码农,喜欢技术上的瞎倒腾!欢迎多交流‘,
        "title" : "大家好,我是赵先烈"
    };

    // 分享的回调
    var wxCallbacks = {
        // 收藏操作不执行回调,默认是开启(true)的
        favorite : false,

        // 分享操作开始之前
        ready : function() {
            // 你可以在这里对分享的数据进行重组
            alert("准备分享");
        },
        // 分享被用户自动取消
        cancel : function(resp) {
            // 你可以在你的页面上给用户一个小Tip,为什么要取消呢?
            alert("分享被取消,msg=" + resp.err_msg);
        },
        // 分享失败了
        fail : function(resp) {
            // 分享失败了,是不是可以告诉用户:不要紧,可能是网络问题,一会儿再试试?
            alert("分享失败,msg=" + resp.err_msg);
        },
        // 分享成功
        confirm : function(resp) {
            // 分享成功了,我们是不是可以做一些分享统计呢?
            alert("分享成功,msg=" + resp.err_msg);
        },
        // 整个分享过程结束
        all : function(resp,shareTo) {
            // 如果你做的是一个鼓励用户进行分享的产品,在这里是不是可以给用户一些反馈了?
            alert("分享" + (shareTo ? "到" + shareTo : "") + "结束,msg=" + resp.err_msg);
        }
    };

    // 用户点开右上角popup菜单后,点击分享给好友,会执行下面这个代码
    Api.shareToFriend(wxData, wxCallbacks);

    // 点击分享到朋友圈,会执行下面这个代码
    Api.shareToTimeline(wxData, wxCallbacks);

    // 点击分享到腾讯微博,会执行下面这个代码
    Api.shareToWeibo(wxData, wxCallbacks);

    // iOS上,可以直接调用这个API进行分享,一句话搞定
    Api.generalShare(wxData,wxCallbacks);
});
2.运行JSP页面。

3. 将运行的JSP页面的网址复制,到http://cli.im/生成二维码。

4.登录微信,打开扫一扫,JSP页面就会在微信中打开。

5.然后就可以测试微信的分享功能了(具体还可以实现些什么功能可以参考API)。

 注意的地方:

  • 1)、WeixinApi.js路径是否引用正确
  • 2)、WeixinApi.ready是否正确执行了?(可以在里面加一个alert,简单粗暴可依赖)
  • 3)、开启WeixinApi.enableDebugMode方便问题定位
  • 4)、WeixinApi.ready执行,但是就是不执行分享时的代码时,请确认端口是不是80端口(我就在这上面耗了很长时间,悲催啊)。

微信API目前只支持80端口   需要其他端口支持需要使用端口映射

源码地址:https://github.com/zxlie/WeixinApi

时间: 2024-12-11 10:03:14

微信公众平台Js API实现微信分享的相关文章

微信公众平台Js API(WeixinApi)

zxlie/WeixinApi 微信公众平台Js API(WeixinApi)微信公众平台Js API(WeixinApi),布布扣,bubuko.com

微信公众平台前端人员对接(微信拍照上传)

前言: 1.本篇主要介绍前端如何对接微信公众平台 2.示例选取微信拍照上传 3.微信JS-SDK说明文档 4.企业号开发者中心 5.请一定要确认自己的帐号类型是否拥有使用微信某项功能的权限,要不然方法回调不起作用 6.企业号对接功能检测图如下: 步骤: 1.确认设置安全域名(设置后,可在该域名下进行测试) 2.获取到AppID和AppSecret 3.通过AppID和AppSecret得到access_token a.请求方式get b.请求链接https://api.weixin.qq.com

PHP微信公众平台开发高级篇—微信JS-SDK

PHP微信公众平台开发高级篇—微信JS-SDK 第一步.绑定域名: 第二步.引入JS文件: 第三部.通过Config接口注入权限验证配置 第四部.通过Read接口处理成功验证 第五部.通过Error接口处理失败验证 实际案例:分享接口内容

【微信公众平台开发】借用微信内置图片浏览功能

开发微信公众平台时,碰到文章中有很多图片,需要可以点开图片浏览:那么点击图片直接调用微信客户端自带的图片播放组件会省很多事.否则你得去摆弄折腾各种图片浏览插件,比如photoswipe. 个人封装功能成一个js文件.把该文件放到你需要的网页里面即可,这样文章当你点击图片时,就会调用图片浏览功能! <script> function addLoadEvent(func){ //将函数作为参数,此函数就是 onload 触发时需要执行的某个函数 var oldonload=window.onloa

微名汇-微信公众平台功能开发(微信聊天机器人)

因为现在小黄鸡智能聊天机器人接口能免费试用7天,7天之后会收费这对于很多用户来说感觉不划算.所以我找了另一个接口:小i机器人,并且完全免费.本文介绍如何在微信公众平台中使用小i智能聊天api接口开发智能聊天机器人. 小i机器人是全球用户量最大的中文聊天机器人,最早在MSN上出现,后拓展到QQ.短信.网页等交互平台上,拥有超过1亿的用户.2012年2月,小i机器人整合了自然语音识别功能,并陆续发布了智能手机.智能电视以及电话上的语音交互版本. 小i机器人申请地址为http://cloud.xiao

微信公众平台开发(一) 申请微信公众账号

一.微信公众平台介绍 微信公众平台是腾讯公司在微信的基础上新增的功能模块,通过这一平台,个人和企业都可以打造一个微信的公众号,可以群发文字.图片.语音.视频.图文消息五个类别的内容. 二.注册微信公众号 1.注册地址: https://mp.weixin.qq.com/ 点击右上角的"立即注册"申请微信公众账号. 2.填写基本信息 3.激活邮箱账号 到邮箱中收取邮件,激活公众平台账号. 4.信息登记 通过邮箱激活后,填写基本信息.选择为"个人"后,后面只能选择&qu

微信公众平台功能开发(微信小店接口)

微信公众平台本次更新增加了微信小店功能,微信小店基于微信支付,包括添加商品.商品管理.订单管理.货架管理.维权等功能.不过此功能只能服务号才有,支付方式有微信支付和支付宝支付,唯一缺点就是所有的模块全部是一样的,容易产生视觉疲劳,上下架商品不是很方便,不过听适合想在微信开店的朋友们. 微名汇:http://weixin.zgtuango.com 联系QQ:44653139 开发者可以通过小店接口来实现快速开店,目前支持以下接口: 1.商品管理接口 开发者可通过商品管理接口,来增加商品.删除商品.

最新微信公众平台js sdk整合PHP版

由于没有持续关注微信公众平台相关的开发,所以看到这个东西时,都没有耐心看完开发文档,或者不知道重点. 重点在哪呢?重点在示例代码:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html#.E9.99.84.E5.BD.956-DEMO.E9.A1.B5.E9.9D.A2.E5.92.8C.E7.A4.BA.E4.BE.8B.E4.BB.A3.E7.A0.81 新版的sdk,变得对开发人员非常友好,直接支持调试模式.

Java微信公众平台开发(十五)--微信JSSDK的使用

转自:http://www.cuiyongzhi.com/post/63.html 在前面的文章中有介绍到我们在微信web开发过程中常常用到的 [微信JSSDK中Config配置] ,但是我们在真正的使用中我们不仅仅只是为了配置Config而已,而是要在我们的项目中真正去使用微信JS-SDK给我们带来便捷,那么这里我们就简述如何在微信web开发中使用必要的方法!微信的JS-SDk中为我们提供的方法很多,这里我有一个简单截图如下: 在上图的提供的所有口中我们可以按照接口实现的难易程度分成两个部分: