微信开发工具中怎么使用vue vue 微信

转载

blueice 2023-08-27 19:14:07

文章标签 微信开发工具中怎么使用vue 封装公众号分享功能 文章分类 微信开发移动开发

首先做微信网页都要接入微信sdk；

安装sdk

npm install weixin-js-sdk --save

具体可以查看微信公众平台技术文档：https://mp.weixin.qq.com/wiki?t=resource/res_main&id=mp1421141115

引入sdk

vue是单页面项目，比如你想要接入微信分享功能，分享功能在每个路由地址都要有，因为每个路由的url是不一样的，就需要在每个路由地址都引入一遍。

import wx from 'weixin-js-sdk'

在组建的生命周期creatd()和mounted()里面放代码

wx.config({
    
　　debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。　　

　　appId: '', // 必填，公众号的唯一标
    
　　timestamp: , // 必填，生成签名的时间戳

　　nonceStr: '', // 必填，生成签名的随机串

　　signature: '',// 必填，签名

　　jsApiList: [] // 必填，需要使用的JS接口列表

});

//

wx.error(function(res){
    // config信息验证失败会执行error函数，如签名过期导致验证失败，具体错误信息可以打开config的debug模式查看，也可以在返回的res参数中查看，对于SPA可以在这里更新签名。
});

//

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用

wx.ready(function () {   //需在用户可能点击分享按钮前就先调用

    wx.updateAppMessageShareData({ 

　　　　title: '', // 分享标题

　　　　desc: '', // 分享描述

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

　　　　imgUrl: '', // 分享图标

       success: function () {
          
          // 设置成功

 　　　　}

});

坑点：url这里要注意的就是url的问题，如果url没有正确传递，后端也会返回信息，但是签名信息会是错误的。上面提到的完整url指的是：’http(s)://’部分，以及’？’后面的GET参数部分,

但不包括’#’hash后面的部分。可以通过location.href来获取。

注意： 如果你的vue项目，路由没有开启history 模式,也就是你的url上面包含“#”，这个时候要从后端正确获取签名，就需要去掉url上#后面的字符。（url去掉’#’hash部分，可用encodeURIComponent(location.href.split('#')[0]），先编码再传递）