微信分享

#H5页面分享功能：

#深坑：

1.微信自带浏览器是不支持自定义按钮分享的，必须从右上角自带的按钮分享

2.ios和安卓在url的获取有所差异，会导致config在ios下报错invalid signature，在安卓下正常

#一.引入js

方法一：<script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>,该方法会在全局定义一个wx变量

方法二：npm install weixin-js-sdk --save-dev

#二.首先向后台去请求获取签名，该签名在下一步中会用到

参数[noncestr: 随机的16位字符串, timestamp: 当前的时间戳, url: 深坑一个，下面讲述]

-----16位随机字符串的生成方法：----------------

generalRandomString(len) {

len = len || 32;

const $chars = 'ABCDEFHIJKLMNPQRSTWXYZabcdefhijkmnprstwxyz';

const maxPos = $chars.length;

let pwd = '';

for (let i = 0; i < len; i++) {

pwd += $chars.charAt(Math.floor(Math.random() * maxPos));

}

return pwd;

}

-----url深坑------------------

-在ui-view,vue-router,react-router的history模式下，会引发下面的兼容问题：

IOS：微信IOS版，每次切换路由，SPA的url是不会变的，发起签名请求的url参数必须是最初进入页面时的url

Android：微信安卓版，每次切换路由，SPA的url是会变的，发起签名请求的url参数必须是当前页面的url(不是最初进入页面时的)

-所以url的获取要分两种情况

安卓：url = location.href.split('#')[0], 【必须取#号前面】

ios: 在入口js中先存储一个页面进入时的路径，url = window.entryUrl

if (typeof window.entryUrl === 'undefined' || window.entryUrl === '') {

window.entryUrl = location.href.split('#')[0];

}

#二.在需要增加分享功能的子页面初始化sdk相关配置

wx.config({

debug: false, // 是否开启debugger模式，对wx的所有相关方法的conson.log以及debuggering行统一管理

appId: 'xxx', // 微信公众号唯一标识，此appid必须与后台生成签名的ip相同

timestamp: 'xxx', // 时间戳，精确到秒，必须与上一部的相同

nonceStr: 'xxx', // 随机的16位字符串，必须与上一步的相同

signature: 'xxx', // 随机签名，上一步通过后台获取的

jsApiList: ['xxx', 'xxx'], // 需要用到的sdk内置功能,如onMenuShareTimeline(朋友圈)，onMenuShareAppMessage(好友)

})

// wx.config完成后的回调，不管config成功失败与否，都会走到这儿

wx.ready(() => {

})

// wx.config失败后的回调

wx.error((err) => {

})

#三.检测jsApiList里面的功能是否可用

wx.checkJsApi({

jsApiList: ['xxx', ....],

success: (res) => {

}

})

#四.自定义图片，标题，内容进行分享

上面说了，微信浏览器中仅仅支持右上角浏览器自带的按钮进行分享，那么在点击按钮选中如何分享之前，就应该把分享的内容，标题，图标定义好

/** 动态获取内容后，将内容添加到微信的配置中，shareConfig为后台返回的数据 */

_addContent2WeChat(shareConfig) {

// 分享到朋友圈

wx.onMenuShareTimeline({

title: shareConfig.title, // 分享标题

link: shareConfig.target_url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

imgUrl: shareConfig.image_url, // 分享图标

});

// 分享到微信好友

wx.onMenuShareAppMessage({

title: shareConfig.title, // 分享标题

desc: shareConfig.message, // 分享描述

link: shareConfig.target_url, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致

imgUrl: shareConfig.image_url, // 分享图标

type: 'link', // 分享类型,music、video或link，不填默认为link

dataUrl: '', // 如果type是music或video，则要提供数据链接，默认为空

});

// 分享到qq空间

wx.onMenuShareQZone({

title: shareConfig.title, // 分享标题

desc: shareConfig.message, // 分享描述

link: shareConfig.target_url, // 分享链接

imgUrl: shareConfig.image_url, // 分享图标

});

// 分享到qq好友

wx.onMenuShareQQ({

title: shareConfig.title, // 分享标题

desc: shareConfig.message, // 分享描述

link: shareConfig.target_url, // 分享链接

imgUrl: shareConfig.image_url, // 分享图标

});

}

#五.总结

上面仅仅记录了本次开发中在微信浏览器遇到的两个比较大的问题，若是在pc端浏览器进行分享，可以利用github上的插件share.js进行开发