微信的js sdk开发媒体播放、微信分享和微信支付

2022年05月22日 阅读489次 分类:开发 标签:js微码教程经验

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1892.html

注意:此篇文章不包含服务端的签名。

微信官方jssdk文档 https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

基本操作

第一步 对微信公众号进行配置

详细配置请看这篇位置“微信公众号服务号授权获取用户信息、分享和微信支付的配置

第二步 引入微信js sdk

// 引入微信的jssdk
<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
// 或者
npm install weixin-js-sdk

var wx = require('weixin-js-sdk');

第三步 通过config接口注入权限验证配置

<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
wx.config({
    debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId: '', // 必填,公众号的唯一标识
    timestamp: , // 必填,生成签名的时间戳
    nonceStr: '', // 必填,生成签名的随机串
    signature: '',// 必填,签名
    jsApiList: [] // 必填,需要使用的JS接口列表,我这里用到的接口有"updateAppMessageShareData","updateTimelineShareData","chooseWXPay"
});
</script>

注意:这里的微信配置签名等是由后端程序来生成

其他接口请查看微信文档。

第四步 使用接口

所有接口的使用必须在:

wx.ready(function(){
    // 所有接口必须在这里写,才会保证生效。
});

媒体播放

iPhone手机有个很麻烦的问题,就是在网页中无法自动播放音乐,需要用户手动点击播放才可以。

为此我们使用微信提供的sdk来解决音乐播放问题。

<audio id="bgm" src="test.mp3" loop></audio>
<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
wx.config({
    // ...
});
wx.ready(function(){
    // 这里即可自动播放音乐
    document.getElementById('bgm').play();
});

微信分享

<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
wx.config({
    // ...
});
wx.ready(function(){
    var shareData = {
        title:'标题',
        desc:'描述',
        link:'http://test.com',//这里要带域名的绝对地址
        imgUrl:'http://test.com/image.jpg'  //这里要带域名的绝对地址
    };
    wx.updateAppMessageShareData(shareData);
    wx.updateTimelineShareData(shareData);
});

怎样进行动态的更换分享的内容呢?这种使用场景,尝尝用于单页应用场景,如:vue和react项目。

// 其实很简单,只需要把分享的数据挂载到window对象下即可。
window.shareData = {
   title:'标题',
   desc:'描述',
   link:'http://test.com',
   imgUrl:'
};
wx.updateAppMessageShareData(shareData);
wx.updateTimelineShareData(shareData);

// 要动态更换时
window.shareData.title = '新标题';
window.shareData.desc = '新描述';

微信支付

<script src="//res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
<script>
wx.config({
    // ...
});
wx.ready(function(){
    // 注意:下面除了回调函数,其他的像paySign签名等是由服务端下单后生成返回的。
    wx.chooseWXPay({
        timestamp: 0, // 支付签名时间戳
        nonceStr: '', // 支付签名随机串
        package: '', // 统一支付接口返回的prepay_id参数值,提交格式如:prepay_id=\*\*\*)
        signType: '', // 签名方式,默认为'SHA1',使用新版支付需传入'MD5'
        paySign: '', // 支付签名
        success: function (res) {
            if(res.errMsg == "chooseWXPay:ok"){
                alert('支付成功。');
            }else if(res.errMsg == "chooseWXPay:cancel"){
                alert('支付失败,用户取消支付。');
            }else if(res.errMsg == "chooseWXPay:fail"){
                alert('支付失败。');
            }else{
                alert(res.errMsg);
            }
        },
        cancel: function (res) {
            alert('支付失败,用户取消支付。');
        },
        fail: function (res) {
            alert('支付失败。');
        }
    });
});

注意:除了回调函数,其他的像paySign签名等是由服务端下单后生成返回的。

关联文章

(本篇完)

是不是学到了很多?可以

版权声明:本文为博主原创或转载自网络,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。

本文链接:http://www.zhuyanjun.cn/development/1892.html