微信分享踩坑记（二）——APP分享到微信（HTML5+）

使用框架：Vue.js、微信JS-SDK、HTML5+（HBuilder）
两种场景：微信生态右上角自定义分享、APP分享到微信

前提

在开发中，采用了HBuilder的打包功能，把vue的项目打包成了 webApp，在manifest.json配置相应SDK就能使用HTML5+提供的封装的功能

以下代码均在js文件中实现，.vue文件无法使用

1’ 获取分享的服务列表

const updateSerivces = () => {
  if (!window.plus) {
    return false;
  }
  plus.share.getServices(function(s) {
    shares = {};
    for (const i in s) {
      const t = s[i];
      shares[t.id] = t;
    }
    sweixin = shares['weixin'];
  }, function(e) {
    console.log(`获取分享服务列表失败：${e.message}`);
  });
};

2’ 分享基础配置

const share = (srv, msg, button) => {
  console.log('分享操作!');
  if (!srv) {
    console.log('无效的分享服务!');
    return;
  }
  button && (msg.extra = button.extra);
  // 发送分享
  if (srv.authenticated) {
    console.log('---已授权---');
    doShare(srv, msg);
  } else {
    console.log('---未授权---');
    srv.authorize(function() {
      doShare(srv, msg);
    }, function(e) {
      console.log(`认证授权失败：${JSON.stringify(e)}`);
    });
  }
}

3’ 发送分享

const doShare = (srv, msg) => {
  console.log(JSON.stringify(msg));
  srv.send(msg, function() {
    console.log(`分享到"${srv.description}"成功！`);
  }, function(e) {
    console.log(`分享到"${srv.description}"失败: ${JSON.stringify(e)}`);
  });
};

4’ 分享网页

const shareWeb = (sharemsg) => {
  if (!window.plus) {
    return false;
  }
  const msg = {
    type: 'web',
    thumbs: ['/static/logo.png'],
    href: sharemsg.href,
    title: sharemsg.title,
    content: sharemsg.content,
  };
  console.log('sweixin：', JSON.stringify(sweixin));
  sweixin ? plus.nativeUI.actionSheet({
    title: '分享网页到微信',
    cancel: '取消',
    buttons: buttons
  }, function(e) {
    (e.index > 0) && share(sweixin, msg, buttons[e.index - 1]);
  }) : plus.nativeUI.alert('当前环境不支持微信分享操作!');
}

5’ 分享图片

const shareImage = (sharemsg) => {
  if (!window.plus) {
    return false;
  }
  const msg = {
    type:'image',
  };
  msg.pictures=[sharemsg.url];
  sweixin?plus.nativeUI.actionSheet({
    title:'分享二维码到微信',
    cancel:'取消',
    buttons:buttons
  }, function(e){
  	(e.index > 0) && share(sweixin, msg, buttons[e.index-1]);
  }) : plus.nativeUI.alert('当前环境不支持微信分享操作!');
}

---

           ---------------------------------------可爱的分割线---------------------------------------

---

2018.11.30 踩坑更新
微信开放平台

APP分享到微信是需要现在微信开放平台先注册一个移动应用的，今天第5个工作日总算是通过了（大概需要7个工作日的审核时间）。

Q1：ios能成功分享，但是安卓总是闪退
A：安卓闪退解决办法：
1.检查配置是否一致：

应用签名，如果使用DCloud默认证书，则应该设置值为“59201CF6589202CB2CDAB26752472112”；
包名，需与提交App打包时填写的包名一致，HBuilder中默认的包名为“io.dcloud.%APPID%”。

一定要注意是应用签名，并不是什么MD5、SHA1

2.检查图片的大小

微信SDK对图片的大小做了限制，目前是30K（此值不是图片的文件大小，而是内存中占用的大小），在最新版本中已经做了自动转换以确保符合微信的要求，请更新到最新版本

参考：android微信分享失败、分享插件开发指南

Q2：如果是不小心把签名填错了，去微信开放平台修改，但是安卓还是闪退

A：将微信的数据缓存给清除或者就是将微信客户端重新安装。这是因为客户端会缓存之前的签名。