zoukankan      html  css  js  c++  java
  • 微信分享JS-SDK

    微信JS-SDK,提供给开发者的基于微信内的网页开发工具包

    使用微信JS-SDK,网页开发者可借助微信高效地使用拍照、选图、语音、位置等手机系统的能力,同时可以直接使用微信分享、扫一扫、卡券、支付等微信特有的能力

    使用步骤

    1、绑定域名

    微信公众平台进入“公众号设置”的“功能设置”里填写“JS接口安全域名”

    2、引入JS文件

    在需要调用JS接口的页面引入如下JS文件 http://res.wx.qq.com/open/js/jweixin-1.4.0.js

    3、通过config接口注入权限验证配置

    所有需要使用JS-SDK的页面必须先注入配置信息,否则将无法调用

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

    4、通过ready接口处理成功验证

    wx.ready(function(){
        // config信息验证后会执行ready方法,所有接口调用都必须在config接口获得结果之后,config是一个客户端的异步操作,所以如果需要在页面加载时就调用相关接口,则须把相关接口放在ready函数中调用来确保正确执行。对于用户触发时才调用的接口,则可以直接调用,不需要放在ready函数中。
    });
    

    5、通过error接口处理失败验证

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

    6、先检查是否为微信浏览器

    var isWeixin = function () {
        //判断是否是微信
        var ua = navigator.userAgent.toLowerCase();
        return ua.match(/MicroMessenger/i) == "micromessenger";
      };
    

    如果是微信,则请求后端接口获取签名并配置config

      if (isWeixin()) {
        // share
        var url = location.href;
        $.post('/api/weixin/getSignpackage', { url: url }, function (data) {
          var option = JSON.parse(data);
          wx.config({
            // debug: true,
            appId: option.appId,
            timestamp: option.timestamp,
            nonceStr: option.nonceStr,
            signature: option.signature,
            jsApiList: [
            ]
          });
        });
      }
    

    微信分享

    原有的 wx.onMenuShareTimeline、wx.onMenuShareAppMessage、wx.onMenuShareQQ、wx.onMenuShareQZone 接口,即将废弃
    最新接口为户端6.7.2及JSSDK 1.4.0以上版本支持的 wx.updateAppMessageShareData、updateTimelineShareData 接口

    • 自定义“分享给朋友”及“分享到QQ”按钮的分享内容(1.4.0)
    wx.ready(function () {   //需在用户可能点击分享按钮前就先调用
        wx.updateAppMessageShareData({ 
            title: '', // 分享标题
            desc: '', // 分享描述
            link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: '', // 分享图标
            success: function () {
              // 设置成功
            }
    });
    
    • 自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容(1.4.0)
    wx.ready(function () {      //需在用户可能点击分享按钮前就先调用
        wx.updateTimelineShareData({ 
            title: '', // 分享标题
            link: '', // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
            imgUrl: '', // 分享图标
            success: function () {
              // 设置成功
            }
    });
    

    相关文档

    微信JS-SDK说明文档

  • 相关阅读:
    扫面线模板
    (动态规划、栈)leetcode 84. Largest Rectangle in Histogram, 85. Maximal Rectangle
    tmux 常见命令汇总
    leetcode 221
    leetcode 319 29
    (贪心)leetcode 392. Is Subsequence, 771. Jewels and Stones, 463. Island Perimeter
    leetcode 982 668
    Python import 同文件夹下的py文件的函数,pycharm报错
    Windows里Anaconda-Navigator无法打开的解决方案
    Windows下 gpu版 Tensorflow 安装
  • 原文地址:https://www.cnblogs.com/fozero/p/10256862.html
Copyright © 2011-2022 走看看