vue怎么设置微信自定义

对于在Vue项目中开发微信公众号，需要进行微信自定义设置，以适配微信公众号的接口与功能。本文将介绍如何在Vue项目中进行微信自定义设置，让您的程序更加适合微信公众号的开发。

一、设置微信JS SDK

首先需要在微信公众平台注册一个公众号，并获取到公众号的唯一标识（AppID）和秘钥（AppSecret）。然后在Vue项目的index.html中引入微信JS SDK接口。

<
script src="
//res.wx.qq.com/open/js/jweixin-1.2.0.js"
>
<
/script>

Vue.js实战：教你如何设置微信自定义菜单

在Vue项目中创建一个全局的wechat.js文件，编写配置代码：

import wx from 'weixin-js-sdk';


const wechatConfig = {
debug: false, // 调试模式，设置为true后会进行微信调试
appId: '', // 公众号AppID, 必填
timestamp: '', // 生成签名的时间戳，必填
nonceStr: '', // 生成签名的随机串，必填
signature: '', // 签名，必填
jsApiList: [] // 必填，需要使用的JS接口列表
};


/**
* 获取微信配置
* @return {Promise}
*/
function getConfig() {
return new Promise((resolve, reject) =>
{
const url = window.location.href.split('#')[0];

const data = {
url: url
};


axios.post(YOUR_SERVER_API, data).then((result) =>
{
const data = result.data;

wx.config({
beta: true,
debug: wechatConfig.debug,
appId: wechatConfig.appId,
timestamp: wechatConfig.timestamp,
nonceStr: wechatConfig.nonceStr,
signature: wechatConfig.signature,
jsApiList: wechatConfig.jsApiList
});

wx.ready(() =>
{
resolve();

});

}).catch(() =>
{
reject();

});

});

}

export default {
getConfig
}

解释一下代码：

  • line 1-2: 引入微信JS SDK。
  • line 4-14: 创建一个对象weixinConfig，包括公众号的AppID、生成签名的时间戳、生成签名的随机串、签名和需要使用的JS接口列表。
  • line 16-28: 创建一个函数getConfig，在函数内使用axios.post方法向后端服务器发起请求，获取公众号的签名配置信息。获取到配置信息后，调用wx.config方法进行微信配置。
  • line 30-35: 对外暴露了getConfig方法，供其他模块调用，以便获取微信JS SDK配置信息。

二、接口调用

在Vue项目中调用微信接口的方法与在普通网页中的调用方法基本一致，只需要使用Vue的生命周期和事件机制协调好时间即可。

以在Vue项目中分享到微信朋友圈为例：

在Vue组件内，使用created生命周期调用getConfig方法进行微信JS SDK配置，以准备使用微信接口。

import wechatConfig from 'wechatConfig';


export default {
data() {
return {
shareData: {
title: '', // 分享标题
desc: '', // 分享描述
link: '', // 分享链接
imgUrl: '' // 分享图标
}
};

},
created() {
wechatConfig.getConfig().then(() =>
{
wx.checkJsApi({
jsApiList: ['onMenuShareTimeline', 'onMenuShareAppMessage', 'onMenuShareQQ', 'onMenuShareWeibo'], // 需要检测的JS接口列表
success: (res) =>
{
console.log(res.errMsg) // 验证成功后的操作
}
});

});

},
methods: {
wxShareFriendsCircle() {
wx.onMenuShareTimeline({
title: this.shareData.title, // 分享标题
link: this.shareData.link, // 分享链接
imgUrl: this.shareData.imgUrl, // 分享图标
success: () =>
{
console.log('分享成功');

},
cancel: () =>
{
console.log('取消分享');

}
});

}
}
}

解释一下代码：

  • line 1-2: 引入微信自定义配置文件wechatConfig。
  • line 6-15: 创建一个data对象，包括分享的标题、描述、链接、图标。
  • line 17-23: 使用created生命周期，当Vue实例被创建时自动调用getConfig方法进行微信JS SDK配置。配置完成后，使用wx.checkJsApi方法检测所需的JS接口是否可用。
  • line 26-34: 创建wxShareFriendsCircle方法，在Vue组件中注册到点击事件上。当用户打开页面并点击分享按钮时，调用wx.onMenuShareTimeline方法，完成分享相关操作。

总结：

本文介绍了如何在Vue项目中设置微信自定义，以适配微信公众号的接口和功能。方法包括设置微信JS SDK、调用微信接口等。希望本文能够为新手提供参考帮助。



微信公众号已成为企业营销中不可或缺的一部分，如何让你的公众号更加个性化并提高用户体验呢？这里介绍一种简单易操作的方法，即通过Vue.js来设置微信自定义菜单。
一、获取微信的access_token
在设置微信自定义菜单之前，我们需要获取微信的access_token，这样才能够进行后续的操作。获取access_token的方法很多，这里只介绍一种，即使用request模块发送http请求来获取access_token。
二、设置自定义菜单
获取到了access_token后，接下来就是设置自定义菜单了。首先，我们需要引入vue-resource.js，然后使用Vue.http.post()方法发送请求。
三、自定义菜单的结构
微信规定自定义菜单的结构必须是一个json字符串，具体结构可以参考微信开发者文档。下面是一个简单的示例：
{
\"button\": [
{
\"type\": \"click\",
\"name\": \"今日推荐\",
\"key\": \"recommend\"
},
{
\"type\": \"view\",
\"name\": \"更多精彩\",
\"url\": \"http://www.xxx.com\"
},
{
\"name\": \"我的\",
\"sub_button\": [
{
\"type\": \"view\",
\"name\": \"个人资料\",
\"url\": \"http://www.xxx.com/profile\"
},
{
\"type\": \"click\",
\"name\": \"我的订单\",
\"key\": \"my_order\"
}
]
}
]
}
四、自定义菜单的类型
微信自定义菜单支持多种类型，包括click（点击推事件）、view（跳转URL）、scancode_push（扫码推事件）、scancode_waitmsg（扫码推事件且弹出“消息接收中”提示框）、pic_sysphoto（弹出系统拍照发图）、pic_photo_or_album（弹出拍照或者相册发图）、pic_weixin（弹出微信相册发图器）、location_select（弹出地理位置选择器）等。
五、自定义菜单的事件
对于click类型的菜单，我们还可以为其设置一个事件，通过这个事件可以跳转到另一个页面或者执行一些操作。在json字符串中，我们需要添加一个key字段，例如：\"key\": \"recommend\"，然后在自己的服务器端定义一个相应的事件即可。
六、保存自定义菜单
当我们设置好了自定义菜单后，需要通过Vue.http.post()方法将设置好的菜单保存到微信服务器中。保存的方法可以参考微信开发者文档。
七、结语
通过Vue.js来设置微信自定义菜单非常方便，不仅可以提高用户体验，还可以让我们的公众号更加个性化。相信通过这篇介绍，大家已经对如何设置微信自定义菜单有了一定的了解。