Skip to content

Instantly share code, notes, and snippets.

@Visionchen

Visionchen/h5微信功能

Last active December 4, 2019 10:02
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Visionchen/3fc0991cf2bd3d654294e2bdb89004dc to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Visionchen/3fc0991cf2bd3d654294e2bdb89004dc to your computer and use it in GitHub Desktop.
Download ZIP
学到了
Raw
h5微信功能
### 关于一位数补0
```javascript
var n = 9;
('0'+n).slice(-2);//"09"
var n = 19;
('0'+n).slice(-2)//"19"
//未知兼容性
var n=19;
(''+n).padStart(2,'0')
```
### setCookie 相关
```javascript
var domain = window.location.host.substr(window.location.host.indexOf('.')).slice(1);
需要设置在根域名的cookie,便不设置domain
其他可设置domain截取第一个.后面的
```
### 微信h5页面转图片-->长按保存页面图片
```javascript
setTimeout(function () {
drawCanvas('.qx_result_bg');
},300)
/**
* 根据window.devicePixelRatio获取像素比
*/
function DPR() {
if (window.devicePixelRatio && window.devicePixelRatio > 1) {
return window.devicePixelRatio;
}
return 4;
}
/**
* 将传入值转为整数
*/
function parseValue(value) {
return parseInt(value, 10);
};
/**
* 绘制canvas
*/
function drawCanvas (selector) {
// 获取想要转换的 DOM 节点
var dom = document.querySelector(selector);
var box = window.getComputedStyle(dom);
// DOM 节点计算后宽高
var width = parseValue(box.width);
var height = parseValue(box.height);
// 获取像素比
var scaleBy = 4;//DPR();
// 创建自定义 canvas 元素
var canvas = document.createElement('canvas');
// 设定 canvas 元素属性宽高为 DOM 节点宽高 * 像素比
canvas.width = width * scaleBy;
canvas.height = height * scaleBy;
// 设定 canvas css宽高为 DOM 节点宽高
canvas.style.width = $('.qx_result_bg').width();
canvas.style.height = $('.qx_result_bg').height();
// 获取画笔
var context = canvas.getContext('2d');
// 将所有绘制内容放大像素比倍
context.scale(scaleBy, scaleBy);
var x = width;
var y = height;
// html2canvas(dom, {canvas}).then(function () {
//
// convertCanvasToImage(canvas, x ,y)
//
// })
var opts = {
dpi: window.devicePixelRatio * 4,
scale: 4, // 添加的scale 参数
canvas: canvas, //自定义 canvas
// logging: true, //日志开关，便于查看html2canvas的内部执行流程
width: $('.qx_result_bg').width(), //dom 原始宽度
height: $('.qx_result_bg').height(),
useCORS: true // 【重要】开启跨域配置
};
html2canvas(dom, opts).then((canvas) => {
// document.body.appendChild(canvas);
convertCanvasToImage(canvas, x ,y)
})
// html2canvas(dom, {opts},{
// onrendered: function(canvas) {
// convertCanvasToImage(canvas, x ,y)
// },
// })
}
/**
* 图片转base64格式
*/
function convertCanvasToImage(canvas, x, y) {
var image = new Image();
var _container = document.getElementsByClassName('qx_result_bg')[0];
var _body = document.getElementsByTagName('body');
image.width = x;
image.height = y;
image.src = canvas.toDataURL("image/png");
// _body.removeChild(_container);
_container.remove()
$('body').append(image);
return image;
}
```
### vue环境下自定义分享
```javascript
// wetchat.js －－ 个人封装
import wx from 'weixin-js-sdk'; // 引入wxJS
import apiUrl from "@/api/index"; // 本项目的api （根据自己项目）
export function wxChatShare(param) {
let _url = encodeURIComponent(param.url) // 当前页面的url
apiUrl.wechatConfig(_url) // wechatConfig是获取微信配置相关信息的接口，此处根据个人项目写法而定，类似于this.$ajax
.then (res => {
if(res.data.code==200) {
// 接口返回配置信息
wx.config({
debug: false,
appId: res.data.content.appid,
timestamp: res.data.content.timestamp, // 必填，生成签名的时间戳
nonceStr: res.data.content.nonceStr, // 必填，生成签名的随机串
signature: res.data.content.signature, // 必填，签名
jsApiList: [ // 用的方法都要加进来
'updateAppMessageShareData', 'updateTimelineShareData', 'onMenuShareTimeline', 'onMenuShareAppMessage'
]
});
wx.ready(function () {
//分享到朋友圈
wx.updateTimelineShareData({
title: param.title, // 分享标题
link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: param.imgUrl, // 分享图标
success: function () {
// 设置成功
console.log("分享到朋友圈成功返回的信息为:", res);
this.$Message.message("设置成功!");
}
})
wx.onMenuShareTimeline({
title: param.title, // 分享标题
link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: param.imgUrl, // 分享图标
success: function () {
// 用户点击了分享后执行的回调函数
},
})
//分享给朋友
wx.updateAppMessageShareData({
title: param.title, // 分享标题
desc: param.desc, // 分享描述
link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: param.imgUrl, // 分享图标
success: function () {
// 设置成功
console.log("分享到朋友圈成功返回的信息为:", res);
this.$Message.message("设置成功!");
}
})
wx.onMenuShareAppMessage({
title: param.title, // 分享标题
desc: param.desc, // 分享描述
link: param.link, // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
imgUrl: param.imgUrl, // 分享图标
type: param.type, // 分享类型,music、video或link，不填默认为link
dataUrl: param.dataUrl, // 如果type是music或video，则要提供数据链接，默认为空
success: function () {
// 用户点击了分享后执行的回调函数
}
});
});
wx.error(function (res) {
console.log('验证失败返回的信息:', res);
});
} else {
console.log(res.data.message);
}
})
}
// home.vue
import * as wechatJS from '@/utils/wechat' // 引入wechat.js
// 写在方法中调用，或者在生命周期中调用
let _param = {
studentId: 1, // 个人项目而定
activityId: 1, // 个人项目而定
url: window.location.href, // 当前页面url
title: "为我点赞，一起免费抢考拉阅读VIP会员卡，畅读一万本好书～", // 分享数据配置
desc: "孩子要读书，上考拉阅读", // 分享数据配置
link: _nowUrl, // 分享数据配置
imgUrl: url, // 分享数据配置 －－ 全路径
type: "link", // 分享类型,music、video或link，不填默认为link
dataUrl: " ", // 如果type是music或video，则要提供数据链接，默认为空
}
```
```javascript
//可能遇到的问题
按照正常情况下，传递给后端的URL和此时网站的URL肯定是一样的。但是，**在iOS环境下，当切换路由时，网站的真实URL是不变的，**而安卓下的真实URL会随着路由切换而变化，这就是问题的原因所在。
因此可以解释上述iOS的表现：
点击www.test.com进入网站，没有切换路由，此时真实的URL和表面的URL都是www.test.com，能正常分享；
切换路由到www.test.com/page1，此时表面的URL已经是www.test.com/page1，这个时候使用location.href获取到的也是www.test.com/page1，但真实的URL还是www.test.com。在这个时候，我们获取到的当前地址是www.test.com/page1，把这个URL传递给后端获取到的配置参数和现在真实的URL不符，所以报错invalid signature；
当手动刷新www.test.com/page1后，真实的URL也变成了www.test.com/page1了，此时分享也就正常了。
解决办法
针对上述情况，可以对安卓和iOS系统采取不同解决办法。
安卓系统在每次路由切换后，重新请求配置接口，传给后端的URL就是当前的URL。
iOS系统则需要在页面加载的时候，保存下初始的URL，以后每次请求配置接口时，都使用这个初始URL。
// 微信分享
Vue.prototype._share = function (param) {
// 默认配置
let set = {
title: '我是自定义的标题', // 分享标题
desc: '我是自定义的分享描述', // 分享描述
link: location.href.split('#')[0], // 分享链接
imgUrl: 'http://images-gungunbook.oss-cn-hangzhou.aliyuncs.com/20180510/5af3eb2c6f628.png', // 分享配图
callback: function () {} // 分享回调
}
Object.assign(set,param);
Vue.prototype.fetch({
url: `jssdk`,
method: 'post',
// _isiOS是判断是否是iOS环境的函数
// g_first_url是进入网站的初始URL
data: { url: Vue.prototype._isiOS() ? encodeURIComponent(Vue.prototype.g_first_url) :encodeURIComponent(location.href.split('#')[0])},
success: data => {
wx.config({
debug: false, // 开启调试模式
appId: data.appId, // 必填，公众号的唯一标识
timestamp: data.timestamp, // 必填，生成签名的时间戳
nonceStr: data.nonceStr, // 必填，生成签名的随机串
signature: data.signature,// 必填，签名
jsApiList: ['onMenuShareAppMessage','onMenuShareTimeline'] // 必填，需要使用的JS接口列表
});
wx.ready(() => {
// 分享给朋友
wx.onMenuShareAppMessage({
title: set.title,
desc: set.desc,
link: set.link,
imgUrl: set.imgUrl,
type: 'link',
dataUrl: '',
complete: function () {
set.callback('friend')
},
});
// 分享到朋友圈
wx.onMenuShareTimeline({
title: set.desc,
link: set.link,
imgUrl: set.imgUrl,
complete: function () {
set.callback('timeline')
},
});
})
}
})
}
```
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment