vue怎么设置微信自定义

PHPz

发布时间：2023-05-27 16:04:39

354人浏览过

来源于php中文网

原创

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

一、设置微信JS SDK

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

在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的生命周期和事件机制协调好时间即可。

远航CMS(yhcms)(分站版)2.6.5

远航CMS(yhcms)是一套基于PHP+MYSQL为核心开发的专业营销型企业建站系统。是国内首家免费+开源自带分站系统的php内容管理系统。长期以来不断的完善、创新，远航CMS会为您带来全新的体验！产品十大优势：模板分离：模板程序分离，深度二次开发三网合一：电脑/手机/微信多终端访问自定义广告：图片/文字/动画定时发布：SEO维护，无需人工值守多词生成：栏目关键词多方案生成SEO设置：自定义U

下载

以在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、调用微信接口等。希望本文能够为新手提供参考帮助。