美文网首页
js-微信公众号-判断是否在微信打开-微信分享相关

js-微信公众号-判断是否在微信打开-微信分享相关

作者: jackson等567人 | 来源:发表于2018-11-19 14:37 被阅读0次

    // 微信官方demo => http://203.195.235.76/jssdk/
    var wx = require('weixin-js-sdk'); //引入微信js-SDK,https://github.com/yanxi-me/weixin-js-sdk
    import apiUrl from '@/api/environment';
    import axios from 'axios';

    // 判断是否在微信打开
    const isWeiXin = () => {
    let ua = navigator.userAgent.toLowerCase();
    if (ua.match(/MicroMessenger/i) != 'micromessenger') {
    return false;
    } else {
    return true;
    }
    };

    // 微信打开详情页时 的分享接口调用
    /**

    • 初始化微信配置信息wx.config
    • @Author jok
    • @DateTime 2018-01-10T11:49:38+0800
    • @param shareData json格式
    • shareData = {title: '分享标题',desc: '分享描述',link: '分享链接',imgUrl: '分享图片链接'}
      */
      const initWechatShare = (shareData) => {

    // 发送当前页面url,检测当前页面是否有分享权限
    // 完整获取config配置接口
    // var currentUrl = "https://m.9kacha.com/share/getwxConfiginfo.htm?from_url=" + encodeURIComponent(window.location.href);
    // var currentUrl = weChatInterface/share?url=${window.location.href};

    var currentUrl = ${apiUrl}/h5_api/weChatInterface/share?url=${encodeURIComponent(window.location.href)};
    // var currentUrl = ${apiUrl}/h5_api/weChatInterface/share?url=${window.location.href};

    // console.log(currentUrl)

    axios.get(currentUrl, {
    dataType: 'html'
    })
    .then((res) => {

         // console.log(res.data)
    
         // 返回微信配置信息,appId,timestamp,nonceStr,signature
         initWeiXinJsApi(res.data);
         // checkJsApi() //检测是否授权
    
         wx.ready(() => {
           initWXShareData(shareData); //注册需要用到的api
         });
    
         wx.error((res) => {
           console.log(res.errMsg);
         });
    
       });
    

    };

    // 初始化微信js-SDK配置,微信官方demo => http://203.195.235.76/jssdk/
    const initWeiXinJsApi = (wxConfigInfo) => {
    // console.log(wxConfigInfo)
    // 微信配置信息
    wx.config({
    debug : false, // 开启调试模式,调用的所有api的返回值会在客户端console.log出来,若要查看传入的参数,可以在pc端打开,参数信息会通过log打出,仅在pc端时才会打印。
    appId : wxConfigInfo.appid, // 必填,公众号的唯一标识
    timestamp: wxConfigInfo.timestamp, // 必填,生成签名的时间戳
    nonceStr : wxConfigInfo.noncestr, // 必填,生成签名的随机串
    signature: wxConfigInfo.signature,// 必填,签名,见附录1

    // 初始化需要使用到微信api
    jsApiList: [
      'checkJsApi',//必填,检测api是否有权限
      'onMenuShareTimeline',
      'onMenuShareAppMessage',
      'onMenuShareQQ',
      'onMenuShareWeibo',
      'onMenuShareQZone'
    ]
    

    });

    };

    // 检测客户端是否支持jsApiList中的api,是否已经申请该api权限,测试中使用
    const checkJsApi = () => {
    wx.checkJsApi({
    jsApiList: ['onMenuShareTimeline'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
    success : (res) => {
    // 以键值对的形式返回,可用的api值true,不可用为false
    // 如:{"checkResult":{"onMenuShareTimeline":true},"errMsg":"checkJsApi:ok"}
    console.log(JSON.stringify(res));
    },
    fail : () => {
    console.log('当前客户端版本不支持微信分享至朋友圈接口');
    }
    });

    wx.error((res) => {
    console.log('当前页面未获取微信jsapi授权');
    });
    };

    const initWXShareData = (shareData) => {

    var shareData = {
    title : shareData.shareTitle, //分享标题
    desc : shareData.shareDescription,//分享描述
    link : shareData.shareUrl,//分享链接
    imgUrl: shareData.shareImageURLString//分享图片
    };

    console.log(shareData);

    //(需要检测是否分享成功的完整写法)
    // 分享到好友,群
    wx.onMenuShareAppMessage({
    title : shareData.title,//分享标题
    desc : shareData.desc,//分享描述
    link : shareData.link,//分享链接
    imgUrl: shareData.imgUrl//分享图片

    // // 以下函数,检测分享是否成功,可以不写
    // trigger: (res) => {
    //   // 不要尝试在trigger中使用ajax异步请求修改本次分享的内容,因为客户端分享操作是一个同步操作,这时候使用ajax的回包会还没有返回
    //   console.log('用户点击发送给朋友');
    // },
    // success: (res) => {
    //   console.log('已分享');
    // },
    // cancel: (res) => {
    //   console.log('已取消');
    // },
    // fail: (res) => {
    //   console.log(JSON.stringify(res));
    // }
    

    });

    // (不需要检测是否分享成功的写法)
    // 分享到朋友圈,分别对应传入的json数据
    wx.onMenuShareTimeline({
    title : shareData.title,//分享标题
    // desc: shareData.desc,//分享描述,朋友圈不能展示分享描述
    link : shareData.link,//分享链接
    imgUrl: shareData.imgUrl//分享图片
    });

    // 分享到QQ好友,直接用传入的shareData,json格式
    wx.onMenuShareQQ(shareData);

    // 分享到QQ空间
    wx.onMenuShareQZone(shareData);

    //分享到微博
    wx.onMenuShareWeibo(shareData);
    };

    export {isWeiXin, initWechatShare};

    相关文章

      网友评论

          本文标题:js-微信公众号-判断是否在微信打开-微信分享相关

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