微信自定义分享

项目经理要移动端官网分享自定义分享内容还有图片，费了半天的功夫终于弄好了，有些坑，记录一下。

第一步：首先要获取openId以及开发者密码(AppSecret)，还有ip白名单设置，这个一定要设置不然没用，我就是因为这个没有配上线后没有效果。这个在mp.weixin.qq.com/advanced/ad…（传送门）

接着 要去公众号设置-功能设置-去设置js安全域名（不要带http://）

设置完成后就可以写代码了，因为是vue项目所以直接install 的weixin-js-sdk,

把我封装的代码放在下面，很简单没有做什么处理，看其他文章说要把中文转译啥的，我直接放中文没有问题，还有就是二次分享，说然微信加了参数，但是我项目不影响。

import wx from "weixin-js-sdk";import axios from "axios";
export function getWEIXIN() {  
let sendUrl = window.location.href.split("#")[0];  
axios    
.post("/weixin", {      
url: sendUrl    
})    
.then(res => {
      if (res.data.code == 200) {        
// 接口返回配置信息        
wx.config({          
debug: false,          
appId: res.data.data.appId,          
timestamp: res.data.data.timestamp, // 必填，生成签名的时间戳          
nonceStr: res.data.data.nonceStr, // 必填，生成签名的随机串          
signature: res.data.data.signature, // 必填，签名          
jsApiList: [            // 用的方法都要加进来            
"updateAppMessageShareData",            
"updateTimelineShareData"          
]       
 });       
 wx.ready(function() {
          //自定义“分享到朋友圈”及“分享到QQ空间”按钮的分享内容          
wx.updateTimelineShareData({            
title: "", // 分享标题            
link: "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致            
imgUrl: "", // 分享图标            
success: function() {              // 设置成功              
console.log("分享到朋友圈成功返回的信息为:", res);              
// this.$Message.message("设置成功!");           
 }          
});          
//自定义“分享给朋友”及“分享到QQ”按钮的分享内容          
wx.updateAppMessageShareData({            
title: "", // 分享标题           
 desc: "", // 分享描述            
link: "", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致            
imgUrl: "", // 分享图标            
success: function() {              
// 设置成功              
console.log("分享到朋友圈成功返回的信息为:", res);              
// this.$Message.message("设置成功!");           
 }          
});       
 });        
wx.error(function(res) {          
console.log("验证失败返回的信息:", res);        
});      
} else {        
console.log(res.data.message);     
 }    
});}

微信文档developers.weixin.qq.com/doc/offiacc…

这里说明一下这个让后端生成签名，我们去获取就行。还有就是这个url，一定是当前页面的完整url。

附上一些错误的原因及排查方式,去看看,测试账号。

因为也就是做个简单的处理，也不是很完整，有错误的地方，希望大家提出来，谢谢！