微信js-sdk分享详解及demo实例

步骤一:绑定域名

先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。


步骤二:引入JS文件

在需要调用JS接口的页面引入如下JS文件,(支持https):http://res.wx.qq.com/open/js/jweixin-1.2.0.js

<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

<script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>

步骤三:通过config接口注入权限验证配置

所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用。

wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: ‘‘, // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: ‘‘, // 必填,生成签名的随机串
    signature: ‘‘,// 必填,签名,见附录1
    jsApiList: [] // 必填,需要使用的JS接口列表,所有JS接口列表见附录2
});

步骤四:通过ready接口处理成功验证

wx.ready(function(){
    //config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
});

步骤五:通过error接口处理失败验证

wx.error(function(res){
    //config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
});

详细页面代码

    <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script type="text/javascript">
        wx.config({
            debug: false,
            appId: ‘${appId!}‘,
            timestamp: ${timestamp!},
            nonceStr: ‘${nonceStr!}‘,
            signature: ‘${signature!}‘,
            jsApiList: [
                ‘checkJsApi‘,
                ‘onMenuShareTimeline‘,
                ‘onMenuShareAppMessage‘,
                ‘onMenuShareQQ‘,
                ‘onMenuShareWeibo‘,
                ‘hideMenuItems‘,
                ‘getLocation‘
            ]
        });
        var shareTitle = "更多优惠,尽在聚惠";
        var shareDesc = "大回馈,花少钱享优质生活,更多优惠商品,就等你喊朋友一起来选!";
        var currentLink = window.location.href;
        var shareLink = currentLink <#if u??> + (currentLink.indexOf("?") > -1 ? ("&u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}") : ("?u=" + "${u!}" + "&t=" + "${t!}" + "&o=" + "${o!}" + "&s=" + "${s!}"))</#if>;
            shareLink = shareLink <#if !city??> + (shareLink.indexOf("?") > -1 ? ("&city=" + "深圳") : ("?city=" + "深圳"))</#if>;
        var shareImgUrl = "${IMGPATH!}/images/banner2.png";
        var shareGid = "";

        wx.ready(function () {
            //分享给朋友
            wx.onMenuShareAppMessage({
                title: shareTitle,
                desc: shareDesc,
                link: shareLink,
                imgUrl: shareImgUrl,
                success: function (res) {
                    shared(shareLink, "friend", shareGid);
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
            //分享到朋友圈
            wx.onMenuShareTimeline({
                title: shareTitle,
                desc: shareDesc,
                link: shareLink,
                imgUrl: shareImgUrl,
                success: function (res) {
                    shared(shareLink, "Timeline", shareGid);
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
            //分享到QQ
            wx.onMenuShareQQ({
                title: shareTitle,
                desc: shareDesc,
                link: shareLink,
                imgUrl: shareImgUrl,
                success: function (res) {
                    shared(shareLink, "QQ", shareGid);
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
            //分享到腾讯QQ
            wx.onMenuShareWeibo({
                title: shareTitle,
                desc: shareDesc,
                link: shareLink,
                imgUrl: shareImgUrl,
                success: function (res) {
                    shared(shareLink, "Weibo", shareGid);
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
            //分享到QZone
            wx.onMenuShareQZone({
                title: shareTitle,
                desc: shareDesc,
                link: shareLink,
                imgUrl: shareImgUrl,
                success: function (res) {
                    shared(shareLink, "QZone", shareGid);
                },
                fail: function (res) {
                    alert(JSON.stringify(res));
                }
            });
        });

        function shared(url, type, gid){
            var rUrl = basePath + "/share/add?type=" + type + "&url=" + encodeURI(url);
            if(!!gid) {
                rUrl += "&gid=" + gid;
            }
            $.ajax({
                type: "GET",
                url: rUrl,
                dataType: "json",
                success: function(rs){
                    //alert("分享成功");
                }
            });
        }
    </script>

注:微信接口文档地址:https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

时间: 2024-10-29 09:19:13

微信js-sdk分享详解及demo实例的相关文章

微信js sdk分享开发摘记java版

绑定域名和引入js的就不说了 废话不说直接上代码 1 public void share(HttpServletRequest request) throws Exception { 2 3 StringBuffer homeUrl = request.getRequestURL(); 4 String queryString =request.getQueryString(); 5 if(StringUtils.isNotBlank(queryString)){ 6 homeUrl.appen

【android】 微信分享详解(分享到朋友和朋友圈)+ PopupWindow的使用和分析

一. 微信分享的实现: 1.到微信开放平台https://open.weixin.qq.com创创建应用申请AppID 2.下载签名生成工具,对签名不了解的自行百度,这里不做说明. 下面是简单的微信分享代码: 首先看一下包结构图 MainActivity: public class MainActivity extends Activity { private static final String appid = "wx86b3d972e5ddd153"; private IWXAP

超轻量级DI容器框架Google Guice与Spring框架的区别教程详解及其demo代码片段分享

原创不易,转载请注明出处:超轻量级DI容器框架Google Guice与Spring框架的区别教程详解及其demo代码片段分享 代码下载地址:http://www.zuidaima.com/share/1759689106541568.htm 依赖注入,DI(Dependency Injection),它的作用自然不必多说,提及DI容器,例如spring,picoContainer,EJB容器等等,近日,google诞生了更轻巧的DI容器--Guice! 废话不多讲了,先看看Guice是如何实现

实战微信JS SDK开发:贺卡制作与播放(1)

前段时间忙于CanTK 2.0的开发,所以博客一直没有更新.CanTK 2.0主要增强了游戏和富媒体的开发,现在编码和测试基本完成了,等文档完成了再正式发布,里面有不少激动人心的功能,等发布时再一一细说吧. 最近同事用CanTK开发了一个基于微信的贺卡制作APP,我虽然没有参与开发,但是提供CanTK和GameBuilder的技术支持,觉得有些东西比较有意思,写几篇博客和大家分享吧.这个贺卡APP完全开源,有需要的朋友可以随意修改和发布. CanTK(Canvas ToolKit)是一个开源的游

微信js sdk上传多张图片

微信js sdk上传多张图片,微信上传多张图片 该案例已tp3.2商城为例 直接上代码: php代码: public function ind(){ $appid="11111111111111111111"; $secret="11111111111111111111"; $token = S('access_token'); if (!$token) { $res = file_get_contents("https://api.weixin.qq.c

Js apply 方法 详解

Js apply方法详解 我在一开始看到JavaScript的函数apply和call时,非常的模糊,看也看不懂,最近在网上看到一些文章对apply方法和call的一些示例,总算是看的有点眉目了,在这里我做如下笔记,希望和大家分享..  如有什么不对的或者说法不明确的地方希望读者多多提一些意见,以便共同提高.. 主要我是要解决一下几个问题: 1.        apply和call的区别在哪里 2.        什么情况下用apply,什么情况下用call 3.        apply的其他

js new date详解

创建一个日期对象: var objDate=new Date([arguments list]); var ini_date=new Date(2014,7,0); //是代表7月最后一天 ,也就是2014-07-31 var ini_date=new Date(2014,7,1); //是代表8月第一天 ,也就是2014-08-01参数形式有 以下5种: new Date("month dd,yyyy hh:mm:ss");   new  Date("month dd,yy

【JS】☆★之详解[Object HTMLDivElement]和[Object Object]

[JS]☆★之详解[Object HTMLDivElement]和[Object Object] <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml">

JS事件类型详解

一般事件 onclick IE3.N2 鼠标点击时触发 此事件 ondblclick IE4.N4 鼠标双击时触发 此事件 onmousedown IE4.N4 按下鼠标时触发 此事件 onmouseup IE4.N4 鼠标按下后松开鼠标时触发 此事件 onmouseover IE3.N2 当鼠标移动到某对象范围的上方时触发 此事件 onmousemove IE4.N4 鼠标移动时触发 此事件 onmouseout IE4.N3 当鼠标离开某对象范围时触发 此事件 onkeypress IE4.