微信分享设置
用异步ajax的方式获取数字签名 异步的方式好 1、前后端分离啊 2、一个服务可以供多个微信公众帐号的数字签名服务 在服务器端用NodeJS跑起一个数字签名生成服务,web端用ajax方式请求NodeJS服务获取数字签名信息 得到信息后配置微信JS-SDK
步骤 第一步 认证的微信公众帐号 首先你得拥有一个通过认证了的微信公众号或者开发者帐号,没有通过认证的公众帐号。 数字签名认证也能成功,但是分享信息是无法设置成功的; 第二步 添加安全域名 在公众帐号平台后台添加app运行的域名地址,可以理解为为某个域名添加白名单功能 以我们公司旗下的榕树下为例: 微信公众号是:榕树下,添加了game.4gshu.com为安全域名, 那么我在game.4gshu.com上的网页可以使用榕树下公众帐号的数字签名了 第三步 生成数字签名 在微信公众平台后台上面能找到一个 appid 及 secret字符串 通过这两个数据,请求微信提供的两个公开API地址, 生成对应的access_token后再生成ticket再通过规则加密成数字签名 注意,数字签名必须在服务端生成,这里我以NodeJS来实现 数字签名具体生成过程,NodeJS版本
1、获取微信签名所需的access_token
https.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=你的appid写在这里&secret=你的secret写在这里', function(_res) { // 这个异步回调里可以获取access_token })
2、获取微信签名所需的ticket
https.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=上一步中获取的access_token&type=jsapi', function(_res){ // 这个异步回调里可以获取ticket });
3、生成数字签名具体方法 ticket、 noncestr、timestamp、url 通过微信的规则用sha1加密 noncestr和timestamp在微信官方sample包中有具体的生成方法函数
// noncestr var createNonceStr = function() { return Math.random().toString(36).substr(2, 15); }; // timestamp var createTimeStamp = function () { return parseInt(new Date().getTime() / 1000) + ''; };
也可以参考我代码中的代码
// 计算签名方法 var calcSignature = function (ticket, noncestr, ts, url) { var str = 'jsapi_ticket=' + ticket + '&noncestr=' + noncestr + '×tamp='+ ts +'&url=' + url; shaObj = new jsSHA(str, 'TEXT'); return shaObj.getHash('SHA-1', 'HEX'); } var signature = calcSignature(ticket, noncestr, timestamp, url);
4、返回输出signature数字签名以及在生成数字签名时用到的timestamp、nonceStr、url、 及appid 因为在客户内初始化微信JS-SDK中还要用到 5、至此数字签名生成成功 第四步 在web中如何使用数字签名? 1、引入微信JS-SDK http://res.wx.qq.com/open/js/jweixin-1.0.0.js (http://res.wx.qq.com/open/js/jweixin-1.0.0.js) 2、请求服务器获取数字签名 在web上用ajax方式请求NodeJS服务地址, 请求时将当前web地址url上传至服务器 服务器生成数字签名后返回: signature,timestamp, appid, nonceStr 这四个数据用于配置微信JS-SDK
wx.config({ debug: true, appId: appid, timestamp: timestamp, nonceStr: nonceStr, signature: signature, jsApiList: [ 'checkJsApi', 'onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo', 'hideMenuItems', 'chooseImage' ] });
3、在wx.ready内调用API
wx.ready(function(){ var sdata = { title: '那年|时光遗忘了,文字却清晰地复刻着', desc: '那年|时光遗忘了,文字却清晰地复刻着', link: 'http://game.4gshu.com/deep-love/index2.html', imgUrl: 'http://game.4gshu.com/xuangedan/other-project/2015-01-06/img/share-wx-logo.jpg', success: function () { alert('用户确认分享后执行的回调函数'); }, cancel: function () { alert('用户取消分享后执行的回调函数'); } }; wx.onMenuShareTimeline(sdata); wx.onMenuShareAppMessage(sdata); });
4、搞定 关于数字签名过期与微信API的1w次请求的限制问题 由于微信提供的两个数字签名生成API有7200秒的有效期,并且暂时有1w次的限制, 所以在我们自己服务器上需要将数字签名缓存 逻辑是: 如果用户请求时没缓存中没有数字签名,那么请求执行第三步 生成数字签名 如果缓存中有,并且是在2小时内那么直接返回数字签名信息, 不去请求微信服务器 如果缓存中的数字签名过期了(超过2小时)则还是执行第三步 生成数字签名 注意:由于微信规定地址栏中的参数发生变化都认作是新的请求地址,数字签名也需要重新生成。 新生成的数字签名将存入cachedSignatures对象内 缓存中的数据结构将url设为key 数据结构如下:
var cachedSignatures = { 'http://game.4gshu.com/': { appid: ’微信认证帐号的的appid' ,secret: '微信认证帐号的secret' ,timestamp: '1421135250' ,noncestr: 'ihj9ezfxf26jq0k' } }
(function() { var JSSDK_URL = "https://res.wx.qq.com/open/js/jweixin-1.0.0.js"; var _getParameter = function(param) { var reg = new RegExp('[&,?]' + param + '=([^\\&]*)', 'i'); var value = reg.exec(location.search); return value ? value[1] : ''; }; var WXCFG = { appId: 'xxxxxxxxxxxxxxxxxxx', weappNo: 'XX', openid: 'xxxxxxxxxxxxxxxxxxxx', ucp_uri: 'https://www.abc.com/it-pir/' }; var loadscript = function(url, callback) { var script = document.createElement('script'); script.type = 'text/javascript'; if (callback) script.onload = script.onreadystatechange = function() { if (script.readyState && script.readyState != 'loaded' && script.readyState != 'complete') return; script.onreadystatechange = script.onload = null; callback(); }; script.src = url; document.getElementsByTagName('head')[0].appendChild(script); }; var _ts = new Date().getTime(); var _url = WXCFG.ucp_uri + "/getSignature?weappNo=" + WXCFG.weappNo + "&openid=" + WXCFG.openid + "&callback=ucp_callback" + _ts; var _signature; window['ucp_callback' + _ts] = function(data) { _signature = JSON.parse(data); } var jssdk_ready = false, ucp_sign_ready = false; var _wx; var _init_wx = function(callback, debug) { // 注入微信参数 var wx_config = { debug: !!debug, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。 appId: WXCFG.appId, // 公众号的唯一标识 timestamp: _signature.timestamp, // 必填,生成签名的时间戳 nonceStr: _signature.nonce, // 必填,生成签名的随机串 signature: _signature.signature, // 必填,签名,见附录1 jsApiList: window.WXSDK.config.jsApiList || [ // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 'onMenuShareTimeline', 'onMenuShareAppMessage', 'hideOptionMenu', 'showOptionMenu', 'hideOptionMenu', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem' ] }; // 通过config接口注入权限验证配置 wx.config(wx_config); // 通过error接口处理失败验证 wx.error(function(res) { if (debug) { alert('JSSDK接口处理失败验证 ', JSON.parse(res)); } }); // 通过ready接口处理成功验证的回调 wx.ready(function() { _wx = wx; callback & callback(); }); }; // // 分享到朋友圈 // wx.onMenuShareTimeline({ // title: '过来,有个1000万上下的游戏跟你玩一下~', // link: linkUrl, // imgUrl: APP.config.CDN + '/assets/img/tiger/share.jpg', // success: function() {}, // cancel: function() {} // }); // // 分享给朋友 // wx.onMenuShareAppMessage({ // title: '过来,有个1000万上下的游戏跟你玩一下~', // desc: '过来,有个1000万上下的游戏跟你玩一下~', // link: linkUrl, // imgUrl: APP.config.CDN + '/assets/img/tiger/share.jpg', // success: function() {}, // cancel: function() {} // }); window.WXSDK = { config: { jsApiList: [ // 必填,需要使用的JS接口列表,所有JS接口列表见附录2 'onMenuShareTimeline', 'onMenuShareAppMessage', 'hideOptionMenu', 'showOptionMenu', 'hideOptionMenu', 'hideMenuItems', 'showMenuItems', 'hideAllNonBaseMenuItem', 'showAllNonBaseMenuItem' ] }, init: function(data, callback, debug) { callback = callback || function() {} debug = debug || _getParameter("wx_debug") == "true"; try { if (debug) console.log("初始化数据", data); var cb = function() { if (data) { _wx.onMenuShareTimeline(data); _wx.onMenuShareAppMessage(data); callback & callback(_wx); } else { callback & callback(_wx); } } if (!_wx) { var _ready = function() { if (debug) console.log("都准备好了"); _init_wx(function() { cb(); }, debug); } loadscript(_url, function() { if (debug) console.log("获取UCP签名成功", _signature); ucp_sign_ready = true; if (jssdk_ready && ucp_sign_ready) { _ready(); } }); loadscript(JSSDK_URL, function() { jssdk_ready = true; if (debug) console.log("JSSDK加载成功"); if (jssdk_ready && ucp_sign_ready) { _ready(); } }); } else { cb(); } } catch (e) { if (debug) console.log(e); callback & callback(); } } }; // WXSDK.init({ // title: "标题", // desc:"正文", // link: "地址", // imgUrl: "分享图标", // success: function() { // alert(0); // }, // cancel: function() { // alert(1); // } // },function(wx){ // console.log(wx); // }); })();
相关推荐
本文为大家分享了vue微信分享至朋友圈&&分享至朋友代码的封装,供大家参考,具体内容如下 1.新建share.js文件 import {shareSDK} from "../api/common";//分享api import wx from 'weixin-js-sdk' export const ...
android 移动开发微信 分享图文链接
2、利用小程序生成海报保存图片到相册分享到朋友圈,用户长按识别二维码关注公众号或者打开小程序来达到裂变的目的 实现方案 一、分析如何实现 相信大家应该都会有类似的迷惑,就是如何按照产品设计的那样绘制成...
1、分享到微信朋友圈 2、分享给微信好友 3、分享到腾讯微博 4、新的分享接口,包含朋友圈、好友、微博的分享(for iOS) 5、隐藏/显示右上角的菜单入口 6、隐藏/显示底部浏览器工具栏 7、获取当前的网络状态 8、调起...
1、分享到微信朋友圈 2、分享给微信好友 3、分享到腾讯微博 4、隐藏/显示右上角的菜单入口 5、隐藏/显示底部浏览器工具栏 6、获取当前的网络状态 7、调起微信客户端的图片播放组件 8、关闭公众平台Web页面 /**! *...
模块备份 微信分享intent方式和微信Open的api实现方式 分享文字、图片、视频给好友; 分享图片(最多9张)、文字视频到朋友圈
截止到2017年11月18号,微信小程序官方还尚未开放直接分享到朋友圈的能力,但是劳动人民的智慧是伟大的,现在普遍的做法是,生成一张带有小程序码的图片,保存到用户相册,用户自行发布图片到朋友圈 我的套路: ...
1、分享到微信朋友圈 2、分享给微信好友 3、分享到腾讯微博 4、隐藏/显示右上角的菜单入口 5、隐藏/显示底部浏览器工具栏 6、获取当前的网络状态 7、调起微信客户端的图片播放组件 8、关闭公众平台Web页面
最近又在vue中捣鼓了下微信公众号api的接入,不得不说这里边水是真的深啊,上次...分享页面到朋友圈 上文是从官方文档中摘出来的,由此可见,我们如果要实现在公众号的内嵌h5中实现微信分享,支付等功能,就得引入js-sd
分享多图 文字到朋友圈。 下载Demo 观看演示视频 Gradle 依赖 implementation 'com.sch.share:wx-share:1.0.3' 配置 在 strings.xml 中自定义无障碍服务标签。 ShareDemo【多图分享】 权限 由于 SDK 涉及文件操作,...
iOS 端集成微信API、QQ API 进行封装,主要是实现:微信分享到好友、微信支付、微信分享到朋友圈、微信第三方登录, QQ分享到好友、QQ第三方登录、QQ分享到空间
实际使用中,经常需要小程序分享到好友或者朋友圈,一般而言是一个个页面去设置。 官网分享介绍:https://uniapp.dcloud.io/api/plugins/share?id=onshareappmessage 单页面每一个需要分享的页面多需要单独写...
另外本项目已经对官方一些常用的API如分享到朋友圈等的参数结构进行了定义,方便开发者更快捷地完成相关属性配置。使用方法在经过验证可以稳定无误使用后, egret-game-library 中将会加入该模块方便适用。目前果...
1、WeixinApi为何诞生 以前顺便玩儿了下微信公众账号,做Web前端开发的,都对页面脚本充满...// 自定义分享到:微信好友、朋友圈、腾讯微博、QQ好友 WeixinApi.share(wxData,wxCallbacks); 标签:WeixinApi
社交属性强:小程序可以无缝嵌入微信生态,支持分享至聊天窗口、朋友圈等社交场景,有利于用户间的传播和裂变增长。 丰富接口能力:提供丰富的API接口,可调用微信支付、位置服务、用户身份识别等多种功能,方便...
截止我写这篇文章的时候,小程序应该是还没有能够直接分享到朋友圈的api,转发给朋友和群是可以实现的,这篇文章主要是讲如何实现分享到朋友圈,所以分享给朋友我下面还会再另外写一篇文章。 实现思路 那么既然小程序...
手动/自动集成微信API 进行二次封装基于AFNetworking所以依赖的网络库及其基于WechatOpenSDK 封装的微信支付、微信分享好友、微信分享到朋友圈、微信第三方登录等工具类封装,直接调用用法可以直接使用,其具备可移植...
本项目为一款基于微信小程序的音乐播放器设计与实现,采用SSM(Spring、SpringMVC、MyBatis)框架进行后端开发,前端则使用微信小程序的原生组件...6. **社交分享**:用户可将喜欢的音乐和歌单分享给微信好友或朋友圈。
经过多次重大更新,微信始终没有开放小程序直接分享到朋友圈的相关api。 曲线救国 我们直接开门见山,用间接的方式来实现微信小程序分享到朋友圈 这里先来罗列一下实现思路 通过微信api申请小程序二维码 获取小...
无需扫码登录、可收发朋友圈、查看朋友圈、朋友圈互动点赞、评论、 好友列表、微信消息收发、发文本消息、图片消息、名片消息、动图表情、发文件、删好友 添加好友、微信转账、微信红包接收、分享小程序、分享名片...