对接微信 js-sdk

1 分享

网上很多人发的都是点系统分享按钮后自定分享信息，我说的是h5页面自己的button按钮分享(我用vue写的)

备注：我的项目是企业微信微应用，用vue写的h5页面;

<!-- 我项目用的vue, index.html 中引用 建议用1.1.0这个版本，我用1.2.0的版本出现好几个接口ios兼容问
题，要单独处理更麻烦 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js">
</script>
<!-- 分享.vue -->
<template>
  <div>
<button @click="invokeShare('user')">分享给客户</button>
<button @click="invokeShare()">分享朋友圈</button>
  </div>
</template>
<script>
...
created() {
    // 一定要初始化时去设置onMenuShareAppMessage，onMenuShareTimeline 方法
    this.wechatShare();
},
methods: {
 // 分享
    wechatShare(info) {
      let url = location.href.split("#")[0];
 // 去后台拿微信授权签名(签名公司后台计算), 具体请看微信sdk api
      getWxConfig({ url }).then(res => {
        if (res && res.code == 200) {
          // 认证
          wx.config({
            beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
            debug: false, // 开启调试模式,
            appId: res.data.corpid, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.noncestr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: [
              // 所有要调用的 API 都要加到这个列表中
              "checkJsApi",
              "onMenuShareAppMessage", //  分享到朋友接口
              "onMenuShareTimeline", // 分享到朋友圈接口
              "shareAppMessage",
              "shareTimeline"
            ]
          });
          // 错误时
          wx.error(function(res) {
            // alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，
            // 会弹出窗口哪里错误，然后根据微信文档查询即可。
          });
          wx.ready(function() {
            wx.checkJsApi({
              jsApiList: [
                "onMenuShareAppMessage",
                "onMenuShareTimeline",
                "shareAppMessage",
                "ShareTimeline"
              ],
              success: function(res) {}
            });
            // 微信分享的数据
            let shareData = {
              imgUrl: "分享图标", // 分享显示的缩略图地址
              link: "分享地址", // 分享地址:域名要跟微信后面定义的安全域名一致
              desc: "分享描述", // 分享描述
              title: "分享标题", // 分享标题
              success: function() {
                // 分享成功可以做相应的数据处理
                setTimeout(function() {
                  //回调要执行的代码
                  alert("分享成功");
                }, 500);
              },
              fail: function(res) {
                // alert("调用失败");
              }
            };
            // 这两个接口是点微信自己的分享按钮触发的
            wx.onMenuShareAppMessage(shareData);
            wx.onMenuShareTimeline(shareData);
          });
        }
      });
    },
    // h5自定义按钮触发分享
    invokeShare(type) {
      try {
        // 我刚开始引用的1.2.0安卓可以 ios没反应做的兼容， 1.1.0 应该不需要分开处理我没试，
        // 你们可以试下
        let u = navigator.userAgent;
        //android终端
        var isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; 
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/);
        if (type === "user") { // 分享给用户
          if (isAndroid) {
            wx.invoke("shareAppMessage", this.shareInfo, function(res) {
              if (res.err_msg == "shareAppMessage:ok") {
              }
            });
          } else if (isiOS) {
            WeixinJSBridge.invoke("shareAppMessage", this.shareInfo);
          }
        } else { // 分享到朋友圈
          if (isAndroid) {
            wx.invoke("shareTimeline", this.shareInfo, function(res) {
              if (res.err_msg == "shareAppMessage:ok") {
              }
            });
          } else if (isiOS) {
            //我是ios终端
            WeixinJSBridge.invoke("shareTimeline", this.shareInfo);
          }
        }
      } catch (err) {
        console.log(JSON.stringify(err));
      }
    }
}
</script>

View Code

2 会话 - 打开企业微信会话

<!-- 我项目用的vue, index.html 中引用 建议用1.1.0这个版本，我用1.2.0的版本出现ios兼容问
题，要单独处理更麻烦 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.1.0.js">
</script>

<!-- 打开会话.vue -->
<template>
  <div>
<button @click="openWxContactChat('user')">大漠孤烟</button>
  </div>
</template>

<script>
...
created() {
    this.setconfig();
},
methods: {
   setconfig(info) {
      let url = location.href.split("#")[0];
      // 去后台拿微信授权签名(签名公司后台计算), 具体请看微信sdk api
      getWxConfig({ url }).then(res => {
        if (res && res.code == 200) {
          // 认证
          wx.config({
            beta: true, // 必须这么写，否则wx.invoke调用形式的jsapi会有问题
            debug: false, // 开启调试模式,
            appId: res.data.corpid, // 必填，企业号的唯一标识，此处填写企业号corpid
            timestamp: res.data.timestamp, // 必填，生成签名的时间戳
            nonceStr: res.data.noncestr, // 必填，生成签名的随机串
            signature: res.data.signature, // 必填，签名，见附录1
            jsApiList: [
              // 所有要调用的 API 都要加到这个列表中
              "checkJsApi",
              "openEnterpriseChat", 
            ]
          });

          // 错误时
          wx.error(function(res) {
            // alert("出错了：" + res.errMsg); //这个地方的好处就是wx.config配置错误，
            // 会弹出窗口哪里错误，然后根据微信文档查询即可。
          });

          wx.ready(function() {
            wx.checkJsApi({
              jsApiList: [
                "openEnterpriseChat",
              ],
              success: function(res) {}
            });
          });
        }
      });
    },
    openWxContactChat(item) {
      wx.openEnterpriseChat({
        // 注意：userIds和externalUserIds至少选填一个，且userIds+externalUserIds
        // 总数不能超过2000。
        externalUserIds: `${item.contactId}`, // 参与会话的外部联系人列表，格式为userId1;userId2;…，用分号隔开。
        groupName: "", // 必填，会话名称。单聊时该参数传入空字符串""即可。
        success: function(res) {
          // 回调
        },
        fail: function(res) { 
          if (res.errMsg.indexOf("function not exist") > -1) {
            alert("版本过低请升级");
          }
        }
      });
    },
}
</script>

View Code

总结：

1 尽量使用<script>引用，不要使用npm安装依赖，不要使用过新的版本，我用的1.1.0, 我测试的1.2.0 分享，打开会话ios都有问题, 每个项目版本不一样，大家也可以自行去试;

2 注意自己项目部署的协议，<script>引用时http、https是对应自己项目的;

3 打开debug没有报错提示，在接口外面加个try{}catch(err){ alert(JSON.stringfiy(err)} 打印报错信息，尽量用安卓机测试报错信息比较详细

4 首先确保自己的签名正确nonceStr(尽量官网复制，避免弱智问题)，可以用扫码接口测试，扫码一般没有版本问题，分享可能出现在错误：1 分享地址不是微信后台设置的安全域名 2 图标大小问题(网上说的32k我没遇到)

5 ios有问题，一般是接口支持问题，看他提示的接口ok时会有他支持的接口打印;

....

posted @ 2019-09-24 22:50 Hsiunmon 阅读(261) 评论(0) 收藏举报

刷新页面返回顶部

Hsiunmon

对接微信 js-sdk

公告