微信自定义分享

javascript

浏览数:910

2019-1-8

片段 1片段 2


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)
})