html5 调用微信分享,HTML5教程之微信调用分享接口
1、前端用的angular1框架,首先需要在index页面引入微信接口文件;
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安全域名下的,不然无法分享成功;
分享失败的表现是,分享链接图片无法加载你自定义的图片,分享标题也不对;
4、这个项目是投票类的,所以需要每次点击进来之后获取用户code,如果你只是分享文章,不需要用户信息,直接将link更改为你的文章链接即可;
5、对于投票类,这里特殊处理了,就是重定向了该链接,大家都知道H5获取微信用户信息有两种,一种是关注微信公众号;另一种提示用户需要获取用户公开信息,用户点击确定即可。但是这两种都需要是按照微信的要求来拼接成特殊的微信链接,因此该域名是微信自带的,就不是我们自己公众号的JS安全域名了;
6、所以,对于分享后的链接,如果还需要获取用户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"
}
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持职坐标。
html5 调用微信分享,HTML5教程之微信调用分享接口相关推荐
- 苹果怎么取消微信订阅服务器,教程:取消微信免密支付授权功能设置
随着移动支付的飞速发展,第三方支付平台也越来越多,特别是微信支付宝的普及,给大家带来了极大的便利.之前我们出门必备的银行卡.现金等已经被一部手机取代了.回想一下,小编已经记不清自己上次带钱包出门是什么 ...
- h5 修改title 微信_iH5中级教程:微信必备,为H5设定标题
制作随机抽奖 1.选中页面,点击工具栏层工具,新建一个层,选中右键重命名为奖项.选中层,点击文本工具,在舞台上画一个框,填写文字.添加四个文本,分别为"谢谢惠顾"."一等 ...
- 微信硬件蓝牙教程全集
微信硬件蓝牙教程: 微信公众号蓝牙开发准备工作(第一课) java,H5微信蓝牙设备开发教程申请设备和添加设备(第二课) 微信蓝牙设备开发教程之获取设备deviceid和二维码(第三课) 微信蓝牙设备 ...
- 微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-翟东平-专题视频课程...
微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-2445人已学习 课程介绍 微信小程序系统教程[初级阶段],微信小程序0基础学起,讲解微信小程序开发的基础知识. 微信小 ...
- 视频教程-微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统-微信开发
微信小程序系统教程Java版[3/3阶段]_微信小程序电商系统 微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试 ...
- 视频教程-微信小程序系统教程[2/3阶段]_核心技术-微信开发
微信小程序系统教程[2/3阶段]_核心技术 微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试(软考)--&quo ...
- 视频教程-微信小程序系统教程python版[3/3阶段]_微信小程序支付-手游开发
微信小程序系统教程python版[3/3阶段]_微信小程序支付 微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试 ...
- 微信与php什么区别,微信小店和微信小程序的区别是什么?
区别:微信小店的功能比较少,只拥有基本的商城购物功能,没有营销功能,因而只适合不需要营销推广的个人开店:而小程序则是支持各种功能开发,可以开发商城小程序,也可以开发各种营销推广功能,能够满足商家的多功 ...
- html5编游戏好难,分享微信开发Html5轻游戏中的几个坑
现如今微信为各种移动Web的小应用提供了肥沃的土壤,于是乎形形色色的应用孕育而出.人人都可以做开发,但不是每个人都能开发出好的应用,在开发过程中开发者会应注意哪些"坑"呢?本文转自 ...
最新文章
- Linux自学笔记——haproxy
- 算法工程师必知必会10大基础算法!
- C# 多线程參数传递
- mybatis 分页需要的jar包下载_064、MyBatis
- ATOM插件库,收藏以备不时仔细!
- 区块链共识算法Proof-of-Stake (PoS/权益证明) 常见问题解答 (1)
- OpenCv2 学习笔记(1) Mat创建、复制、释放
- HH SaaS电商系统的商品系统设计
- linux切换到字符界面stemctl,CentOS7两种模式
- 使用VS2010代码分析功能增强ASP.NET应“.NET研究”用程序安全
- mysql 命令行如何输入参数_MySQL命令行参数完整版
- 工科学生考研能选择计算机专业么,考研应该如何选择学校和专业
- 获取指定年份至今年分列表
- Rainmeter雨滴桌面秀教程
- 小米 线刷 android,小米10 Android 11 Beta 1线刷包已放出,安卓11/MIUI 12二选一
- android dbm模式判断,手机信号强弱判断即【dBm/asu】知识普及
- 赵小楼《天道》《遥远的救世主》深度解析(128)神即道,道法自然,如来
- JEECG 3.7.2 专业接口开发版本发布,企业级JAVA快速开发平台
- Flutter无限循环滑动的PageView
- 一个简单的storyboard示例,其中关于添加navigation的部分可以学习,此前没用过
热门文章
- SelectedNode与e.node的区别
- 05-if和switch的简单比较
- 【转载】Fedora网络设置问题解决方法
- php pathseparator,在PHP拥有与命名空间和通过set_include_path()的一个问题
- Java继承知识之基本控制语句(if、switch与穿透现象)
- 微课|玩转Python轻松过二级(2.4节):常用内置函数用法精要3
- Python多线程编程基础2:如何创建线程
- 文具用品分类html,中国商品分类.doc
- hive3新增資料_Hive表新增字段后,新字段无法写入值问题总结
- php 5.6.30 漏洞,PHP 5.6.30 正式发布,安全漏洞修复