微信端html5页面调用分享接口示例


Posted in HTML / CSS onMarch 14, 2018

最近公司做了一个给学生投票的H5页面,主要是在微信端使用,需要添加微信分享功能;

本文章主要是记录调用微信分享接口需要注意的事项;

1、前端用的angular1框架,首先需要在index页面引入微信接口文件;

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

2、在myApp.run文件中写微信分享函数,注意该函数需要将当前页面的url获取并解析,然后发给后端来生成对应签名,直接上代码;

// 微信分享函数
    function wxShare() {
        var url = $location.absUrl().split('#')[0];
            wxServices.postWxShare(url).then(function (res) {
            if (res.data.code == 0) {
                var respanse = res.data.data;
                wx.config({
                    debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
                    appId: respanse.appId,
                    timestamp: respanse.timestamp, // 必填,生成签名的时间戳
                    nonceStr: respanse.nonceStr, // 必填,生成签名的随机串
                    signature: respanse.signature,// 必填,签名
                    jsApiList: ['onMenuShareTimeline',
                        'onMenuShareAppMessage',
                        'onMenuShareQQ',
                        'onMenuShareWeibo',
                        'onMenuShareQZone']// 必填,需要使用的JS接口列表
                });
            }
        })
    }

将当前url解析后,发给后端接口,后端需要将appId,时间戳,随机字符串和签名返回,然后接口列表(jsApiList)根据需要自己手动添加,注意是一个数组的形式,我这里只需要调用分享接口;
调试的时候,可以将debug更改为true,这样在就每次调用微信接口的时候就会有接口信息alert出来,方便查看接口调用是否正常了;

3、在该函数后,自定义分享内容,代码如下;

wx.ready(function () {
        var obj = {
            title: 'SPBCN团体赛开始投票啦!', // 分享标题
            desc: 'SPBCN团体赛开始投票了,快来为我们加油吧!', // 分享描述
            link: 'http://dev.spbcn.org/wechat-vote-phone/redirect.html', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            // 该链接是重定向链接,因为需要获取用户code,但是该链接又无法直接写微信获取code的链接,
            // 所以需要点击后重新加载新的页面,来实现重定向,重新打开获取code的微信链接,实现获取用户信息的功能;
            imgUrl: 'http://cdn.spbcn.org/img/logo-image.png', // 分享图标
            fail: function (res) {
                alert(JSON.stringify(res));
            }
        };
        // 2.1 监听“分享给朋友”,按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareAppMessage(obj);

        // 2.2 监听“分享到朋友圈”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareTimeline(obj);

        // 2.3 监听“分享到QQ”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareQQ(obj);

        // 2.4 监听“分享到微博”按钮点击、自定义分享内容及分享结果接口
        wx.onMenuShareWeibo(obj);

        // 2.5 监听“分享到QZone”按钮点击、自定义分享内容及分享接口
        wx.onMenuShareQZone(obj);
    })

wx.ready是在wx.config之后自动运行的,我是定义了一个分享内容的通用对象,然后直接调用即可,也可以根据需要来分别定义分享朋友、朋友圈、微博等的不同内容,具体查看微信接口文档即可;
主要强调一下分享链接,该链接必须是你的公众号设置的JS安全域名下的,不然无法分享成功;

分享失败的表现是,分享链接图片无法加载你自定义的图片,分享标题也不对;

5、我这个项目是投票类的,所以需要每次点击进来之后获取用户code,如果你只是分享文章,不需要用户信息,直接将link更改为你的文章链接即可;

6、对于投票类,我这里特殊处理了,就是重定向了该链接,大家都知道H5获取微信用户信息有两种,一种是关注微信公众号;另一种提示用户需要获取用户公开信息,用户点击确定即可。但是这两种都需要是按照微信的要求来拼接成特殊的微信链接,因此该域名是微信自带的,就不是我们自己公众号的JS安全域名了;

7、所以,对于分享后的链接,如果还需要获取用户code,就要用其他方法实现,我用的是添加了一个空白页面,在该页面加载后跳转微信获取code的链接,http://dev.spbcn.org/wechat-vote-phone/redirect.html该链接是个空白页面,该页面代码如下;

window.onload = function () {
        // 重定向链接,跟微信公众号中获取用户code是一样的链接
        window.location.href="https://open.weixin.qq.com/connect/oauth2/authorize?appid=公众号appid&redirect_uri=http%3A%2F%2Fdev.spbcn.org%2Fwechat-vote-phone?type=weixin&scope=snsapi_userinfo&response_type=code&state=STATE#wechat_redirect"
    }

8、该方法有弊端,就是多加了一个空白页面,暂时没想到好的办法,欢迎大家留言;

9、如果不加这一步,分享出来的链接显示正常,但是获取不到code,后端就无法判断用户,导致无法限制用户投票;

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

HTML / CSS 相关文章推荐
CSS3悬停效果案例应用
Nov 21 HTML / CSS
css3 仿写阿里云水纹效果的示例代码
Feb 10 HTML / CSS
CSS3 新增选择器的实例
Nov 13 HTML / CSS
css3 中translate和transition的使用方法
Mar 26 HTML / CSS
Html5画布_动力节点Java学院整理
Jul 13 HTML / CSS
html5本地存储之localstorage 、本地数据库、sessionStorage简单使用示例
May 08 HTML / CSS
详解HTML5 Canvas绘制时指定颜色与透明度的方法
Mar 25 HTML / CSS
canvas仿写贝塞尔曲线的示例代码
Dec 29 HTML / CSS
浅析HTML5中的download属性使用
Mar 13 HTML / CSS
详解CSS中的特指度和层叠问题
Jul 15 HTML / CSS
CSS的calc函数用法小结
Jun 25 HTML / CSS
css让页脚保持在底部位置的四种方案
Jul 23 HTML / CSS
使用html5新特性轻松监听任何App自带返回键的示例
Mar 13 #HTML / CSS
配置H5的滚动条样式的示例代码
Mar 09 #HTML / CSS
Canvas制作旋转的太极的示例
Mar 09 #HTML / CSS
详解px单位html5响应式方案
Mar 08 #HTML / CSS
html5开发三八女王节表白神器
Mar 07 #HTML / CSS
使用HTML5和CSS3制作一个模态框的示例
Mar 07 #HTML / CSS
Canvas制作的下雨动画的示例
Mar 06 #HTML / CSS
You might like
php中禁止单个IP与ip段访问的代码小结
2012/07/04 PHP
Php无限级栏目分类读取的实现代码
2014/02/19 PHP
PHP自毁程序(慎用)
2015/07/09 PHP
Ubuntu server 11.04安装memcache及php使用memcache来存储session的方法
2016/05/31 PHP
CodeIgniter整合Smarty的方法详解
2017/08/25 PHP
laravel框架添加数据,显示数据,返回成功值的方法
2019/10/11 PHP
Javascript &amp; DHTML 实例编程(教程)(三)初级实例篇1—上传文件控件实例
2007/06/02 Javascript
读jQuery之十二 删除事件核心方法
2011/07/31 Javascript
6款经典实用的jQuery小插件及源码(对话框/提示工具等等)
2013/02/04 Javascript
Javascript实现关联数据(Linked Data)查询及注意细节
2013/02/22 Javascript
使用javascript过滤html的字符串(注释标记法)
2013/07/08 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
JavaScript修改浏览器tab标题小技巧
2015/01/06 Javascript
js实现的彩色方块飞舞奇幻效果
2016/01/27 Javascript
实例剖析AngularJS框架中数据的双向绑定运用
2016/03/04 Javascript
浅析JavaScript中break、continue和return的区别
2016/11/30 Javascript
微信小程序 es6-promise.js封装请求与处理异步进程
2017/06/12 Javascript
基于vue2框架的机器人自动回复mini-project实例代码
2017/06/13 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
2017/08/10 jQuery
在vue项目中,将juery设置为全局变量的方法
2018/09/25 Javascript
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
js遍历详解(forEach, map, for, for...in, for...of)
2019/08/28 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
原生JS实现汇率转换功能代码实例
2020/05/13 Javascript
Python内置模块ConfigParser实现配置读写功能的方法
2018/02/12 Python
TensorFlow 滑动平均的示例代码
2018/06/19 Python
python pands实现execl转csv 并修改csv指定列的方法
2018/12/12 Python
Python爬虫——爬取豆瓣电影Top250代码实例
2019/04/17 Python
Django 自定义权限管理系统详解(通过中间件认证)
2020/03/11 Python
python实现斗地主分牌洗牌
2020/06/22 Python
CSS3属性使网站设计增强同时不消弱可用性
2009/08/29 HTML / CSS
一款利用纯css3实现的win8加载动画的实例分析
2014/12/11 HTML / CSS
导游实习生自荐书
2014/01/28 职场文书
2014年中班元旦活动方案
2014/02/14 职场文书
社会实践评语
2014/04/28 职场文书