美文网首页
15.h5页面调用微信JS-SDK分享到微信好友、朋友圈、微博等

15.h5页面调用微信JS-SDK分享到微信好友、朋友圈、微博等

作者: 欢乐毅城 | 来源:发表于2021-04-16 14:41 被阅读0次

    一、准备工作:

    • 公众号管理平台配置安全域:
       自定义页面分享功能需要微信认证才能使用,需要开发者ID等信息。

    二、代码示例:

    1. 引入微信JS-SDK:
    <script type="text/javascript" 
           src="http://res.wx.qq.com/open/js/jweixin-1.6.0.js">
    </script>
    
    1. 页面配置使用:
     <script type="text/javascript">
       function init() {
            $.ajax({
                   type: "POST", 
                   url: "......",//后台接口
                   data: parms, //可选参数
                   dataType: "json",
                        success: function(data){ 
                             //初始化配置
                              wx.config({
                                appId: data.appId,  // 公众号的唯一标识 
                                timestamp: data.timestamp, //生成签名的时间戳
                                nonceStr: data.nonceStr,
                                signature: data.signature, //签名
                                    //配置可分享功能列表
                                jsApiList: ['chooseImage', 'uploadImage', 'downloadImage',
                                    'previewImage', 'openLocation', 'getLocation',
                                    'scanQRCode', 'checkJsApi', 'onMenuShareTimeline',
                                    'onMenuShareAppMessage', 'onMenuShareQQ',
                                    'onMenuShareWeibo', 'onMenuShareQZone']  //配置分享功能
                            });
                        }
                    });
                }
    
      //初始化:
       $(function () {
          init();
        });
    
       //需在用户可能点击分享按钮前就先调用
       function initwx(){
                wx.ready(function () {
                   //1.定位
                    wx.getLocation({
                        type: 'gcj02',
                        success: function (res) {
                              alert("定位成功");
                              localStorage.setItem("lng", res.longitude);
                             localStorage.setItem("lat", res.latitude);
                        },
                        cancel: function (res) {
                             alert('用户拒绝授权获取地理位置');
                        },
                    });
          
                    //2.分享朋友链接自定义样式设置:(自定义)
                    wx.onMenuShareAppMessage({
                         title: ..., // 分享标题
                         desc : ..., // 分享描述
                         imgUrl: ...,
                         type : 'link', // 分享类型,music、video或link,不填默认为link
                         success : function() {
                         },
                         cancel : function() {
                         }
                   });
    
                  //3.分享....
       }      
    </script>
    

    相关文章

      网友评论

          本文标题:15.h5页面调用微信JS-SDK分享到微信好友、朋友圈、微博等

          本文链接:https://www.haomeiwen.com/subject/dorelltx.html