zoukankan      html  css  js  c++  java
  • 移动端H5做自定义微信分享功能

    最近做一个移动端H5的项目,里面需要用户将结果分享给别人,这就涉及到微信右上角的三个点自定义分享功能,下面给大家说说注意的点以及流程

    1.首先一定要有一个以企业名义开通的微信公众号,因为只有企业微信号才有权限去调用分享接口

    2.对于分享功能,微信要求需要给访问的ip配置白名单,要不然会在后台处理程序的时候报错,ip不在白名单内,配置ip的地方如图所示

    2.引入jssdk.js,具体参考步骤以及文件下载地址请到https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/JS-SDK.html

    3.在自定义分享的时候需要用到企业微信公众号的appid和appsercet,其中appid在前端代码需要使用,后台不仅需要appid,还需要appsecret,后台通过这两个参数去做算法处理,给前端返回签名,appid和appsecret在上图配置ip白名单的上面

    下面是前端请求签名以及自定义分享接口的具体代码

    $.ajax({
    type:'GET',
    url:'你的地址',
    data: {
    "current_url":window.location.href//传给后台的参数,即当前页的url
    },
    dataType:'json',
    timeout: 2000,
    success: function(data){
    // console.log(data);
    wx.config({
    debug: false, //调试阶段建议开启,这里在调试的时候最好打开,打开后你在调用分享的时候会自动给你弹出一些弹窗,方便调试代码使用,可以跟踪是哪一步出问题
    appId: '微信公众号的appid',//APPID
    timestamp: data.timestamp,//后台返回的时间戳timestamp
    nonceStr: data.noise_str,//后台返回的随机数nonceStr
    signature: data.signature,//后台返回的签名signature
    //需要调用的方法接口,这里有个注意的地方,我之前看别人的博客发现好多都过时了,接口都被微信废弃了,所以大家如果在调试的时候,如果出现api不通,就去官网看文档,要不然找问题毫无头绪
    jsApiList: ['updateAppMessageShareData','updateTimelineShareData']
    });
    /* wx.error(function (res) {
    // config信息验证失败会执行error函数,如签名过期导致验证失败,具体错误信息可以打开config的debug模式查看,也可以在返回的res参数中查看,对于SPA可以在这里更新签名。
    alert('error',res);
    }); */
    wx.ready(function(){

    //这个是微信给提供的校验接口是否可用

    /* wx.checkJsApi({
    jsApiList: ['updateAppMessageShareData','updateTimelineShareData'], // 需要检测的JS接口列表,所有JS接口列表见附录2,
    success: function(res) {
    // 以键值对的形式返回,可用的api值true,不可用为false
    // 如:{"checkResult":{"chooseImage":true},"errMsg":"checkJsApi:ok"}
    }
    }); */
    wx.updateTimelineShareData({
    title: '朋友圈分享标题', // 分享标题
    link: window.location.href.split('htmls')[0]+'htmls/share.html?work_id='+show_data.work_id, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致,这里的链接根据自己项目地址去拼接
    imgUrl: "朋友圈分享图标", // 分享图标,绝对路径
    success: function () {
    // alert("朋友圈分享成功")
    // 用户点击了分享后执行的回调函数
    },
    fail: function(res) {
    // alert(res,3333333)
    if(res.errMsg.indexOf('function not exist') > -1){
    alert('版本过低请升级')
    }
    }
    });
    wx.updateAppMessageShareData({
    title: '发送给朋友的标题', // 分享标题
    desc: '发送给朋友的分享描述', // 分享描述
    link: window.location.href.split('htmls')[0]+'htmls/share.html?work_id='+show_data.work_id, // 分享链接,该链接域名或路径必须与当前页面对应的公众号JS安全域名一致,同上
    imgUrl: "发送给朋友的分享图标", // 分享图标
    type: '', // 分享类型,music、video或link,不填默认为link
    dataUrl: '', // 如果type是music或video,则要提供数据链接,默认为空
    success: function () {
    // alert("朋友分享成功")
    // 用户点击了分享后执行的回调函数
    }
    })
    });
    },
    error:function(xhr,type){
    new Error('Ajax error!')
    }
    });

    好啦,以上就是最新的微信自定义分享功能的实现,具体哪里不会可以私信~~

  • 相关阅读:
    cookie
    手写Promise/Promise.all/promise.race
    Hbuilder如何真机调试?
    什么是深拷贝?什么是浅拷贝?如何实现深拷贝?
    Vue.set()?怎么用?
    vueRouter怎么用?
    Vue如何实现组件间通信?
    reduce()累加器
    filter()数组遍历
    map()数组遍历
  • 原文地址:https://www.cnblogs.com/shenwh/p/14818895.html
Copyright © 2011-2022 走看看