摘要:本篇主要讲述,如何在微信中打开自家的页面,在然后在用户分享的时候,能由我们自定义分享出去后,展示的页面卡片中的页面标题页面描述页面图片和分享链接。
本篇主要讲述,如何在微信中打开自家的页面,在然后在用户分享的时候,能由我们自定义分享出去后,展示的页面卡片中的页面标题、页面描述、页面图片和分享链接。
此功能,具体的来说,是:
在微信打开自家的页面
点击右上角微信的功能按钮,出现功能菜单
点击分享给好友、朋友圈、QQ好友等
选择对应的好友,发送
打开对应的好友聊天界面,可以看到,被分享的页面卡片,在展示上和默认的样式有所不同。
如下如所示左侧是我要分享的页面,右侧就是分享出去的页面的卡片,分别是未自定义分享信息和自定义了分享信息:
仅在样式上就已经有很所不同,此外最关键的,是分享的url也可以自定义。
默认分享的话,你当前页面的url是什么,那么分享出去就是什么,而自定义的情况,则可以自己定义url,有了极大的灵活性,当然也是还有一些限制,但至少,链接的参数是可以完全自定义的,这个后面文章继续介绍。
首先说一下,完成自定义分享信息的,从无到有的流程:基础硬件服务:
需要一个公网可以访问的有效域名:
购买域名,并备案,我是在阿里云购买的,备案需要十几个工作日。
购买ip,然后设置上面的域名,解析到该ip,这个时间可以快到忽略。
拥有自己的服务器,来存放自己页面项目:
我还是在阿里云购买购买服务器,这个花费最大,几百元一年的使用权。
而且这个服务器,本质就是一台电脑,是电脑就有配置,我目前只是自己学习使用,配置几乎是最低的,而且购买的套餐自带公网ip,这么一来我连上面购买ip的钱也省了。
综上所述,最终我只购买了域名和一个套餐自带公网ip的服务器,服务器用来放置前端项目和后台项目。
阿里云ECS:https://cn.aliyun.com/product/ecs
微信公众平台,开发者认证
打开微信公众平台 https://mp.weixin.qq.com/,使用邮箱注册,注意,一个邮箱只能注册一个微信公众平台账号,一个账号只能选择一种账号分类且不能更改,这里一定要慎重,这里选择订阅号。
可选个人类型、企业类型等等,其中,个人类型是不没有分享定制功能的,但企业类型我又不符合。。。最终我还是选择的个人类型,因为即使我的账号没有权限,但微信公众号里面,提供一个功能全开的测试账号,使用测试账号可以进行学习和测试,还是没问题的。
填写信息,绑定微信,注册完成,登录进去。
为了进行开发,需要在这里和你的后台项目和前端项目进行对应的配置,让微信确认后台项目和前台项目都是你的之后,才会提供服务。
有关服务器端和后台项目的配置:
首先需要说明,由于订阅号的功能比较少,如果只是进行学习,建议在 开发 => 开发者工具中选择使用公众平台测试帐号进行学习性开发,这样可以使用全功能的微信服务,配置也比较少。
下面的配置步骤均是使用自己的账号需要进行的配置
开发 => 基本配置 => 公众号开发信息,在这里记下开发者ID(AppID),接着开通服务,记下开发者密码(AppSecret),开发中会需要输入。
设置IP白名单,这里写的是自己的服务器IP地址,因为功能上线后,需要使用这台服务器,通过开发者ID和密码来向微信服务区获取自己服务的access_token
进行下面的后台项目,目的是让微信确定这个后台项目是你的,检验方法是微信发起一个get请求,你返回正确的返回值,启用此配置时调用:
url:接口地址,比如http://wx.my.com/forWx
Token:完全自定义的一个字符串,相当于个暗号,你的返回值需要这个字符串参与拼装。
EncodingAESKey:随机生成即可
消息加解密方式:自选,这里我使用的是明文模式
有关前端项目的配置:
设置 => 公众号设置 => 功能设置 => JS接口安全域名在此处添加你的要使用微信sdk功能的网站的域名,比如wx.qq.com或者wx.qq.com/user,最多可写三个,且需要验证。
> 验证的方式,就是将一个微信提供的txt文件,放在此域名对应的放置于服务器中的web项目的访问根目录中,需要和主文件(大部分默认为```index.html```)放在同一级,当提交的时候,微信会进行访问,来获取文件,确认此域名是你的。
配置完成后,就可以进行开发了。
下面进入代码阶段。
证明后台项目和前端项目时我自己的首先,上面证明服务是自己的部分,我们需要实现一个接口,我用http://wx.my.com/forWx打的比方,那么为了启用配置,我需要实现/forWx给微信调用,下面是代码:
node的基础环境搭建省略,这里只写接口内部方法了,关键是参数加密拼装
const crypto = require("crypto") // 引入加密模块 const config = require("./config") // 引入配置文件 // 提供给微信调用 server.get("/forWx", function (req, res) { res.header("Access-Control-Allow-Origin", "*") // 1.获取微信服务器Get请求的参数 signature、timestamp、nonce、echostr let signature = req.query.signature // 微信加密签名 let timestamp = req.query.timestamp // 时间戳 let nonce = req.query.nonce // 随机数 let echostr = req.query.echost // 随机字符串 // 2.将token、timestamp、nonce三个参数进行字典序排序,其中token就是设置在微信页面中的那个自定义字符串 let array = [config.token, timestamp, nonce] array.sort() // 3.将三个参数字符串拼接成一个字符串进行sha1加密 let tempStr = array.join("") const hashCode = crypto.createHash("sha1") //创建加密类型 let resultCode = hashCode.update(tempStr, "utf8").digest("hex") //4.开发者获得加密后的字符串可与signature对比,标识该请求来源于微信 if (resultCode === signature) { res.send(echostr) } else { res.send("mismatch") } })
完成,上面是证明服务器是我的,后面还需要证明前端项目是我的,这个就跳过了,因为太简单,直接下载那个文件,放到自己服务器中,前端项目的index.html同级即可
上面的操作,是只要想进行微信公页面开发,必须要有的步骤,一切的基础。
开始正式开发首先顺着功能使用流程,顺一下实现此功能的方法:
用户在微信打开页面后,立即或者通过方法触发ajax,把当前url作为参数,请求自己的后台接口。
后台请求微信服务器,发送自己的AppID和AppSecret,得到一个有效期为7200秒的Access_token
后台再次请求微信服务器,发送Access_token,得到一个有效期同样为7200秒的Ticket(如果前端请求自己的时候,Ticket没有过期,就不用这么麻烦请求两次微信服务器了,直接使用即可,Access_token同理)
后台有了可以使用的Ticket,接着,生成如下几个参数,返回给前端:
timestamp:当前时间戳
url:前端传过来的url
jsapi_ticket:获取的Ticket
appId:自己的AppID
signature:使用sh1加密的noncestr、timestamp、url、jsapi_ticket的字符串
前端终于拿到了返回值,然后初始下微信服务(当然初始化微信服务之前,需要引入微信SDK的js文件),初始化服务,需要用到以上参数,同时,可以配置你要监听的用户操作,比如我们的关键---分享页面!
微信配置执行后,书写配置完成的回调函数,这个回调函数里,可以定义用户分享页面时的页面参数,当此页面被分享出去之后,展示的分享卡片,就是我们定义的内容啦!
当然,不仅仅是分享页面,发朋友圈和其他一些也是可以配置,还有更多的配置项,都可以开始进行了!
下面是前端获取微信授权的方法
// 微信初始化 sdk let wxInitSdk = function() { let myUrl = window.location.href.split("#")[0] console.log("我的url: ", myUrl) $.ajax({ url: BASE_URL + "/getsign", type: "post", data: { url: myUrl, }, success: function(data) { console.log(data) wx.config({ debug: false, // 开启调试模式,开发时可以开启 appId: data.appId, // 必填,公众号的唯一标识 由接口返回 timestamp: data.timestamp, // 必填,生成签名的时间戳 由接口返回 nonceStr: data.noncestr, // 必填,生成签名的随机串 由接口返回 url: data.url, // 必填,生成签名的随机串 由接口返回 signature: data.signature, // 必填,签名 由接口返回 jsApiList: [ "updateAppMessageShareData", // 分享 ] // 此处填你所用到的方法 }); // 方法监听 wx.ready(function () { console.log("初始化成功") wx.updateAppMessageShareData({ title: "咱的标题", // 分享标题 desc: "咱的描述", // 分享描述 link: window.location.href, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致 imgUrl: window.location.protocol + "//" + window.location.hostname + "/img.jpg", // 分享图标 type: "link", // 分享类型,music、video或link,不填默认为link dataUrl: "", // 如果type是music或video,则要提供数据链接,默认为空 success: function () { // 用户确认分享后执行的回调函数 console.log("分享配置完成"); }, cancel: function () { // 用户取消分享后执行的回调函数 console.log("分享取消") } }); }) wx.error(function (res) { console.log("初始化失败") console.log(res) }) }, error: function(error) { console.log("错误") } }) }
下面是node端的一系列方法
const sha1 = require("sha1") const config = require("./config") // 引入配置文件 // 临时缓存 const myCache = { access_token: { setedTime: 0, // 数据设置的时间 val: undefined, // 数据的值 }, jsapi_ticket: { setedTime: 0, // 数据设置的时间 val: undefined, // 数据的值 }, } // 获取 access_token const getAccess_token = () => { // access_token 未过期 if (myCache.access_token.val && (Math.floor(Date.now()) - myCache.access_token.setedTime) / 1000 < 7100) { return Promise.resolve(myCache.access_token.val) } else { // access_token 过期了 return new Promise((resolve, reject) => { request(`https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=${config.appId}&secret=${config.appSecret}`, function (error, response, body) { if (!error && response.statusCode == 200) { let tokenMap = JSON.parse(body) // 缓存 access_token myCache.access_token.setedTime = Math.floor(Date.now()) myCache.access_token.val = tokenMap.access_token resolve(tokenMap.access_token) } else { reject(error) } }) }) } } // 获取 Ticket const getJsapi_ticket = () => { // 缓存的签名尚未过期 --- 微信规定过期时间为7200秒,这里自己设置7100秒,留100秒的延迟 if (myCache.jsapi_ticket.val && (Math.floor(Date.now()) - myCache.jsapi_ticket.setedTime) / 1000 < 7100) { return Promise.resolve(myCache.jsapi_ticket.val) } else { // 已过期,重新获取 return new Promise((resolve, reject) => { // 先获取 token utils.getAccess_token().then(access_token => { request("https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" + access_token + "&type=jsapi", function (error, resp, json) { if (!error && resp.statusCode == 200) { let ticketMap = JSON.parse(json) // 缓存 ticket myCache.jsapi_ticket.setedTime = Math.floor(Date.now()) myCache.jsapi_ticket.val = ticketMap.ticket resolve(ticketMap.ticket) } else { reject(error) } }) }).catch(error => reject(error)) }) } } // 我自己的前端调用,获取微信签名 server.post("/getsign", (req, res) => { try { params = req.body if (!params && !params.url) return res.send("please set url of page") let url = params.url // 获取 ticket getJsapi_ticket().then(jsapi_ticket => { let num = Math.random() let noncestr = num.toString(32).substr(3, 20) // 随机字符串 let timestamp = Math.floor(Date.now() / 1000) //精确到秒 let obj = { noncestr, timestamp, url, appId: config.appId, jsapi_ticket, signature: sha1("jsapi_ticket=" + jsapi_ticket + "&noncestr=" + noncestr + "×tamp=" + timestamp + "&url=" + url) } res.send(obj) }).catch(error => { res.send(error) }) } catch (error) { res.send(error) } })
整体功能实现的步骤和具体代码如上,请酌情参考。
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/102599.html
摘要:技术之类加载机制掘金类加载机制是语言的一大亮点,使得类可以被动态加载到虚拟机中。玩转仿探探卡片式滑动效果掘金讲起本篇博客的历史起源,估计有一段历史了。 Java 技术之类加载机制 - Android - 掘金类加载机制是 Java 语言的一大亮点,使得 Java 类可以被动态加载到 Java 虚拟机中。 这次我们抛开术语和概念,从例子入手,由浅入深地讲解 Java 的类加载机制。 本文...
阅读 1703·2021-11-25 09:43
阅读 2666·2019-08-30 15:53
阅读 1810·2019-08-30 15:52
阅读 2899·2019-08-29 13:56
阅读 3317·2019-08-26 12:12
阅读 567·2019-08-23 17:58
阅读 2129·2019-08-23 16:59
阅读 932·2019-08-23 16:21