博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
微信自定义分享
阅读量:4460 次
发布时间:2019-06-08

本文共 7734 字,大约阅读时间需要 25 分钟。

test.html

<!DOCTYPE html><html><head>    <meta charset="utf-8">    <title>微信JS-SDK Demo</title>    <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=0">    <link rel="stylesheet" href="http://203.195.235.76/jssdk/css/style.css">    <script src="https://cdn.bootcss.com/jquery/1.12.4/jquery.min.js"></script></head><body ontouchstart="">    <div class="wxapi_container">        <div class="lbox_close wxapi_form">            <span class="desc">获取“分享给朋友”按钮点击状态及自定义分享内容接口</span>            <button class="btn btn_primary" id="onMenuShareAppMessage">onMenuShareAppMessage</button>        </div>    </div></body><script src="//res.wx.qq.com/open/js/jweixin-1.0.0.js"></script><script>    // 微信配置    $.ajax({        type: 'get',        url: '/getWXConfig',        data: {            url: window.location.href.split('#')[0]        },        success: function (config) {            console.log(config)            initWechat(config)        },        dataType: 'json'    })    function initWechat(config) {        /*           * 注意:           * 1. 所有的JS接口只能在公众号绑定的域名下调用,公众号开发者需要先登录微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”。           * 2. 如果发现在 Android 不能分享自定义内容,请到官网下载最新的包覆盖安装,Android 自定义分享接口需升级至 6.0.2.58 版本及以上。           * 3. 常见问题及完整 JS-SDK 文档地址:http://mp.weixin.qq.com/wiki/7/aaa137b55fb2e0456bf8dd9148dd613f.html           *           * 开发中遇到问题详见文档“附录5-常见错误及解决办法”解决,如仍未能解决可通过以下渠道反馈:           * 邮箱地址:weixin-open@qq.com           * 邮件主题:【微信JS-SDK反馈】具体问题           * 邮件内容说明:用简明的语言描述问题所在,并交代清楚遇到该问题的场景,可附上截屏图片,微信团队会尽快处理你的反馈。           */        wx.config({            debug: true,            appId: config.appId,            timestamp: config.timestamp,            nonceStr: config.nonceStr,            signature: config.signature,            jsApiList: [                'checkJsApi',                'onMenuShareTimeline',                'onMenuShareAppMessage',                'onMenuShareQQ',                'onMenuShareWeibo',                'onMenuShareQZone'            ]        })        wx.ready(function () {            // 监听“分享给朋友”,按钮点击、自定义分享内容及分享结果接口            document.querySelector('#onMenuShareAppMessage').onclick = function () {                wx.onMenuShareAppMessage({                    title: '我生平最佩服四种人',  // 分享标题                    desc: '看黄片不快进的人,看黄片不打飞机的人,看完黄片还没打出来的人,打完了还能把黄片看完的人。 因为这代表了人类最珍贵的四种品质:踏实,正直,坚持,执着',  // 分享描述                    link: window.location.origin + '/file/hentai.html',  // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致                    imgUrl: window.location.origin + '/file/huaji.png',  // 分享图标                    type: 'link',  // 分享类型,music、video或link,不填默认为link                    dataUrl: '',  // 如果type是music或video,则要提供数据链接,默认为空                    trigger: function (res) {                        // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回                        alert('用户点击发送给朋友')                    },                    success: function (res) {                        // 用户确认分享后执行的回调函数                        alert('已分享')                    },                    cancel: function (res) {                        // 用户取消分享后执行的回调函数                        alert('已取消')                    },                    fail: function (res) {                        // 分享失败时执行的回调函数                        alert(JSON.stringify(res))                    }                })                alert('已注册获取“发送给朋友”状态事件')            }        })        wx.error(function (res) {            alert(res.errMsg)        })    }</script><script src="http://203.195.235.76/jssdk/js/zepto.min.js"></script></html>

express.js

const fs = require('fs')const http = require('http')const https = require('https')const crypto = require('crypto')const express = require('express')const bodyParser = require('body-parser')const app = express()const APP_ID = '测试号的APP_ID'const APP_SECRET = '测试号的APP_SECRET'const TOKEN = '手动填写的TOKEN'/** * 加密/校验流程如下: * 1)将token、timestamp、nonce三个参数进行字典序排序 * 2)将三个参数字符串拼接成一个字符串进行sha1加密 * 3)开发者获得加密后的字符串可与signature对比,标识该请求来源于微信 */app.get('/verify', function (req, res) {    const timestamp = req.query.timestamp    const nonce = req.query.nonce    const shasum = crypto.createHash('sha1')    shasum.update([TOKEN, timestamp, nonce].sort().join(''))    const generatedSignature = shasum.digest('hex')    if (generatedSignature === req.query.signature) {  // 来自微信服务器        res.send(req.query.echostr)    } else {        res.send('fail')    }})/** * 访问根目录下的静态文件 */app.get('/file/:path', function (req, res, next) {    res.sendFile(req.params.path, { root: __dirname })})/** * 获取缓存中的accessToken * @returns {Promise} */function getAccessToken() {    if (fs.existsSync('./access-token.txt')) {  // 从文件系统中获取        const accessToken = fs.readFileSync('./access-token.txt', { flag: 'r', encoding: 'utf8' })        console.log('get cached accessToken: ', accessToken)        return Promise.resolve(accessToken)    } else {  // 从微信服务器中获取        return new Promise((resolve, reject) => {            https.get('https://api.weixin.qq.com/cgi-bin/token?grant_type=client_credential&appid=' + APP_ID + '&secret=' + APP_SECRET, function (req, res) {                let jsonStr = ''                req.on('data', function (data) {                    jsonStr += data                })                req.on('end', function () {                    const accessToken = JSON.parse(jsonStr)['access_token']                    console.log('refresh access token: ', accessToken)                    fs.writeFileSync('./access-token.txt', accessToken, { flag: 'w', encoding: 'utf8' })                    resolve(accessToken)                })            })        })    }}/** * 获取缓存中的ticket * @param {boolean} accessToken * @returns {Promise} */function getTicket(accessToken) {    if (fs.existsSync('./ticket.txt')) {  // 从文件系统中获取        const ticket = fs.readFileSync('./ticket.txt', { flag: 'r', encoding: 'utf8' })        console.log('get cached ticket: ', ticket)        return Promise.resolve(ticket)    } else {  // 从微信服务器中获取        return new Promise((resolve, reject) => {            https.get('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + accessToken + '&type=jsapi', function (req, res) {                let jsonStr = ''                req.on('data', function (data) {                    jsonStr += data                })                req.on('end', function () {                    const ticket = JSON.parse(jsonStr)['ticket']                    console.log('refresh ticket: ', ticket)                    fs.writeFileSync('./ticket.txt', ticket, { flag: 'w', encoding: 'utf8' })                    resolve(ticket)                })            })        })    }}/** * H5客户端 获取分享的信息 */app.all('/getWXConfig', function (req, res) {    const url = req.query.url    // 获取jsapi_ticket    getAccessToken()        .then(accessToken => getTicket(accessToken))        .then(ticket => {            // 生成签名            const timestamp = new Date().getTime()  // 时间戳            const nonceStr = 'niu_bi'  // 随机字符串            const tempString = 'jsapi_ticket=' + ticket + '&noncestr=' + nonceStr + '&timestamp=' + timestamp + '&url=' + url            const shasum = crypto.createHash('sha1')            shasum.update(tempString)            const signature = shasum.digest('hex')            console.log('signature: ', signature)            res.json({                appId: APP_ID,                timestamp: timestamp,                nonceStr: nonceStr,                signature: signature            })        })})// 启动服务器const server = app.listen(3000, function () {    const host = server.address().address    const port = server.address().port    console.log('server listening at %s:%s', host, port)})

转载于:https://www.cnblogs.com/lalalagq/p/10207754.html

你可能感兴趣的文章
java8 按对象属性值排序
查看>>
[转帖]nvidia nvlink互联与nvswitch介绍
查看>>
【转帖】国产x86处理器KX-6000发布
查看>>
04-js的运算符
查看>>
第三天 while循环 及其用法
查看>>
Delphi 10 seattle 去掉自带的代码连接线
查看>>
构建高并发高可用的电商平台架构实践(转)
查看>>
Geometry Imager Viewport Filter
查看>>
九度oj 题目1025:最大报销额
查看>>
数字及字符串
查看>>
【转载】OmniGraffle (二)基础绘图和模具
查看>>
一些提高开发效率的 Category
查看>>
拓扑排序基础题——排序
查看>>
转:iphone 申请证书
查看>>
Python就业方向
查看>>
一步步学习SPD2010--第二章节--处理SP网站(3)--创建网站层次架构
查看>>
TCP
查看>>
Excel常用函数大全
查看>>
团队-团队编程项目中国象棋-模块测试过程
查看>>
10个经典的C语言面试基础算法及代码
查看>>