nodejs微信开发--调用微信JS SDK

阎祖鹤
2023-12-01

首先要在后台获取的JSconfig传到页面

页面传递数据用ajax

后台nodejs代码:

var config = require('./config');
var API = require('wechat-api');
var express = require('express');
var bodyParser = require('body-parser');
var api = new API(config.appid,config.appsecret)
var app = module.exports = express.createServer();

//使用中间件body-parser获取post参数
app.use(bodyParser.urlencoded({extended: false}));
app.use(bodyParser.json());

app.use(function (req, res, next) {
        //使用wechat-api获取JSconfig
        var param = {
                debug: false,
                jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage'],
                url: req.body.url
        };
        /*api.getTicket(function(err,result){
                console.log(err);
                console.log(result);
        });*/
        api.getJsConfig(param, function(err,result){
                res.send(result);
        });
})

app.listen(1338,function(){
    console.log('port 1338 is running!');
});
~         

前台页面代码

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>微信测试页面</title>
    <script src="http://cdn.bootcss.com/jquery/2.1.4/jquery.min.js"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script>
        $(function(){
            //获取jsconfig
            var param_get_js_config = {'cmd':'get_js_config','url':'http://xl.caiqr.com/test.html'};
            hander_data_from_wechat_api(param_get_js_config,hander_js_config);

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

                // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
                wx.checkJsApi({
                    jsApiList: ['onMenuShareTimeline'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
                    success: function(res) {
                        alert(JSON.stringify(res));
                        // 以键值对的形式返回,可用的api值true,不可用为false
                        // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
                    }
                });
                wx.onMenuShareTimeline({
                    title: '分享的标题', // 分享标题
                    link: 'www.baidu.com', // 分享链接
                    imgUrl: '', // 分享图标
                    success: function (res) {
                        alert('share success');
                        // 用户确认分享后执行的回调函数
                    },
                    cancel: function (res) {
                        alert('share fail')
                        // 用户取消分享后执行的回调函数
                    }
                });
            });
            wx.error(function(res){
                alert(JSON.stringify(res));
                // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。

            });
        }
        //传递参数请求wechat_api数据,请求成功后的回调函数fn处理得到的数据
        function hander_data_from_wechat_api(param,fn) {
            console.info(param);
            //发送请求获取wx_js_config
            $.ajax({
                url: 'http://xl.caiqr.com/wechat',
                type: 'POST',
                data: param,
                datatype: 'json',
                success: function (data) {
                    fn(data);
                }
            })
        }

    </script>
</head>
<body>

</body>
</html>

分享的时候可以设置分享标题拿到分享成功还是失败的状态就成功了

 类似资料: