在前端艰难爬行之H5网页支持微信分享

作者: Realank | 来源:发表于2018-06-27 16:57 被阅读1579次

在前端艰难爬行之H5网页支持微信分享
在微信公众平台前端网页上添加分享按钮
H5网页如何在微信中自定义分享链接（可设置标题+简介+图片）
2020开发H5还能赚钱吗？
微信公众号移植到小程序的总结
微信登录前端开发指南
微信支付前端开发指南
微信公众号内分享功能的实现
微信JS-SDK updateAppMessageShareDa
前端新手 Vue应用部署到服务器的正确方式

微信真坑，鼓捣了一天，眼睛都瞎了，最后发现个人微信公众账号没有权限，尼玛。。。

1. 注册微信公众平台

为了能够使用微信的接口，需要注册开发者账号身份，这个自行百度

2.搭建一个服务器

我们需要一个服务器，来获取访问微信API的签名，这里使用NodeJS服务器：

const request = require('request')
var express = require('express');
var app = express();
const sha1 = require('sha1')
const waterfall = require('async/waterfall')
const NodeCache = require('node-cache')
const cache = new NodeCache({stdTTL: 3600, checkperiod: 3600})

// app.get('/wxJssdk', function (req, res) {
//     let wx = req.query

//     // 1）将token、timestamp、nonce三个参数进行字典序排序
//     let token = 'jegfjaeghfuyawegfgjdbh'
//     let timestamp = wx.timestamp
//     let nonce = wx.nonce

//     // 2）将三个参数字符串拼接成一个字符串进行sha1加密
//     let list = [token, timestamp, nonce]
//     let result = sha1(list.sort().join(''))

//     // 3）开发者获得加密后的字符串可与signature对比，标识该请求来源于微信
//     if (result === wx.signature) {
//         res.send(wx.echostr)
//     } else {
//         res.send(false)
//     }
// })

app.get('/wxJssdk/getJssdk', function (req, res) {
    let grant_type = 'client_credential'
    let appid = 'xxxx'
    let secret = 'xxxx' // appscret

    let steps = []

    // 第一步，获取access_token
    steps.push((cb) => {

        let steps1 = []

        // 第1.1步，从缓存中读取access_token
        steps1.push((cb1) => {
            let access_token = cache.get('access_token', (err, access_token) => {
                cb1(err, access_token)
            })
        })

        // 第1.2步，缓存中有access_token则直接返回，如果没有，则从服务器中读取access_token
        steps1.push((access_token, cb1) => {
            if (access_token) {
                cb1(null, access_token, 'from_cache')
            } else {
                request('https://api.weixin.qq.com/cgi-bin/token?grant_type=' + grant_type + '&appid=' + appid + '&secret=' + secret, (err, response, body) => {
                    cb1(err, JSON.parse(body).access_token, 'from_server')
                })
            }
        })

        // 第1.3步，如果是新从服务器取的access_token，则缓存起来，否则直接返回
        steps1.push((access_token, from_where, cb1) => {
            if (from_where === 'from_cache') {
                console.log(' === 成功从缓存中读取access_token: ' + access_token + ' ===')
                cb1(null, access_token)
            } else if (from_where === 'from_server') {
                cache.set('access_token', access_token, (err, success) => {
                    if (!err && success) {
                        console.log(' === 缓存已过期，从服务器中读取access_token: ' + access_token + ' ===')
                        cb1(null, access_token)
                    } else {
                        cb1(err || 'cache设置access_token时，出现未知错误')
                    }
                })
            } else {
                cb1('1.3获取from_where时，from_where值为空')
            }
        })


        waterfall(steps1, (err, access_token) => {
            cb(err, access_token)
        })
    })


    // 第二步，获取ticket
    steps.push((access_token, cb) => {
        let steps1 = []

        // 第2.1步，从缓存中读取ticket
        steps1.push((cb1) => {
            let ticket = cache.get('ticket', (err, ticket) => {
                cb1(err, ticket)
            })
        })

        // 第2.2步，缓存中有ticket则直接返回，如果没有，则从服务器中读取ticket
        steps1.push((ticket, cb1) => {
            if (ticket) {
                cb1(null, ticket, 'from_cache')
            } else {
                request('https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=' + access_token + '&type=jsapi', (err, response, body) => {
                    cb1(err, JSON.parse(body).ticket, 'from_server')
                })
            }
        })

        // 第2.3步，如果新从服务器取的ticket，则缓存起来，否则直接返回
        steps1.push((ticket, from_where, cb1) => {
            if (from_where === 'from_cache') {
                console.log(' === 成功从缓存中读取ticket: ' + ticket + ' ===')
                cb1(null, ticket)
            } else if (from_where === 'from_server') {
                cache.set('ticket', ticket, (err, success) => {
                    if (!err && success) {
                        console.log(' === 缓存已过期，从服务器中读取ticket: ' + ticket + ' ===');
                        cb1(null, ticket)
                    } else {
                        cb1(err || 'cache设置ticket时，出现未知错误')
                    }
                })
            } else {
                cb1('2.3获取from_where时，from_where值为空')
            }
        })

        waterfall(steps1, (err, ticket) => {
            cb(err, ticket)
        })
    })


    // 第三步，生成签名
    steps.push((ticket, cb) => {
        let jsapi_ticket = ticket
        let nonce_str = '123456'
        let timestamp = Math.floor((new Date().getTime())/1000)
        let url = req.query.url

        let str = 'jsapi_ticket=' + jsapi_ticket + '&noncestr=' + nonce_str + '&timestamp=' + timestamp + '&url=' + url
        console.log('signature ' + str)
        let signature = sha1(str)
        console.log('==> ' + signature)
        cb(null, {
            appId: appid,
            timestamp: timestamp,
            nonceStr: nonce_str,
            signature: signature,
            ticket: ticket
        })
    })

    waterfall(steps, (err, data) => {
        res.setHeader("Content-Type", "text/json");
        res.setHeader("Access-Control-Allow-Origin", "*");
        if (err) {
            res.send({status: 'error', data: err})
        } else {
            res.send({status: 'success', data: data})
        }
    })
})

app.use('/wxJssdk/public', express.static('public'))

var server = app.listen(3000, function () {
    var host = server.address().address;
    var port = server.address().port;

    console.log('Example app listening at http://%s:%s', host, port);
})

出处是：https://www.jb51.net/article/118729.htm

一定要注意，生成签名的部分打log，然后和微信公众平台上的签名验证工具对比一下，比如时间戳位数，url对不对等

3. 在H5中导入

<script src="./js/jquery-1.11.1.js"></script>
<script src="http://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script>

    var currentUrl =  encodeURIComponent(location.href.split('#')[0])
    $.get('http://xxxx.com/wxJssdk/getJssdk?url=' + currentUrl, function (data, status) {

        wx.config({
            debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
            appId: data.data.appId, // 必填，公众号的唯一标识
            timestamp: data.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: data.data.nonceStr, // 必填，生成签名的随机串
            signature: data.data.signature,// 必填，签名
            jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'] // 必填，需要使用的JS接口列表
        });

        console.log('wx finish');
        wx.ready(function(){
            console.log('wx ready');
            // alert('wx ready')

            wx.error(function(res){
                // config 信息验证失败会执行 error 函数，如签名过期导致验证失败，具体错误信息可以打开 config 的 debug 模式查看，也可以在返回的 res 参数中查看，对于 SPA 可以在这里更新签名。
                console.log("errorMSG:"+res);
            });

            wx.checkJsApi({
                jsApiList: ['onMenuShareTimeline','onMenuShareAppMessage'], // 需要检测的JS接口列表，所有JS接口列表见附录2,
                success: function(res) {
                    // 以键值对的形式返回，可用的api值true，不可用为false
                    // 如：{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    console.log('res'+ res);
                }
            });

            var shareParam = {
                title: '刘彦博李茜婷的结婚请柬', // 分享标题
                // desc: '邀请您的参加', // 分享描述
                link: 'http://www.realank.com/wedding/', // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
                imgUrl: 'http://www.realank.com/wedding/headimgwx.jpg', // 分享图标
                // type: 'link', // 分享类型,music、video或link，不填默认为link
                // dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空
                trigger: function (res) {
                    console.log('用户点击发送给朋友');
                },
                success: function (res) {
                    console.log('已分享');
                },
                cancel: function (res) {
                    console.log('已取消');
                },
                fail: function (res) {
                    console.log(JSON.stringify(res));
                }
            };

            wx.onMenuShareTimeline(shareParam);
            wx.onMenuShareAppMessage(shareParam);

        });

    })
</script>

这里使用的是ajax请求的，请求签名的时候，需要加上一个url参数，取当前url一定要使用encodeURIComponent(location.href.split('#')[0])方法啊，忘记从哪个网站上看到的了，试了好几个小时，因为这个大哥茅塞顿开，好人啊

然后在微信web开发者工具中测试就能通过，但是真机没法通过，因为个人微信公众号没有权限！！！

在前端艰难爬行之H5网页支持微信分享
微信真坑，鼓捣了一天，眼睛都瞎了，最后发现个人微信公众账号没有权限，尼玛。。。 1. 注册微信公众平台为了能够使...
在微信公众平台前端网页上添加分享按钮
微信公众平台开始支持前端网页，大家可能看到很多网页上都有分享到朋友圈，关注微信等按钮，点击它们都会弹出一个窗口让你...
H5网页如何在微信中自定义分享链接（可设置标题+简介+图片）
最近开发h5网页，在分享网页到微信好友时，发现我的分享链接只有标题和链接地址：却不像自定义微信分享链接一样，分享...
2020开发H5还能赚钱吗？
H5：简单、简约、好看、兼价 H5=HTML5？ H5=微信网页？ H5在国内火于微信，16年微信H5非常火，过了...
微信公众号移植到小程序的总结
微信小程序能通过web-view直接嵌套H5链接。小程序若要嵌套微信公众号，仅支持基础接口，不支持公众号的网页授...
微信登录前端开发指南
使用场景微信公众号内嵌H5网页调用微信登录在微信浏览器中的网页唤起微信登录界面详情可以查阅微信登录官方文档 ...
微信支付前端开发指南
使用场景微信公众号内嵌H5网页调用微信支付在微信浏览器中的网页唤起微信支付界面详情可以查阅微信支付官方文档 ...
微信公众号内分享功能的实现
分享场景在微信公众号的前端网页内, 我们以前经常会看到分享到朋友圈或者是关注微信等按钮, Click, 之后会弹...
微信JS-SDK updateAppMessageShareDa
最近开发一个项目时，有微信H5网页自定义分享功能，使用了微信JS-SDK的分享到好友和分享到朋友圈功能。微信开发...
前端新手 Vue应用部署到服务器的正确方式
作者简介：陈老师5年多前端工作经验，主要分享：vue.js,等前端技术，微信开发公众号：H5前端开发社区掘金专栏：...