vue에서 WeChat 사용자 정의를 설정하는 방법

Vue 프로젝트에서 WeChat 공개 계정을 개발하려면 WeChat 공개 계정의 인터페이스와 기능에 맞게 WeChat 사용자 정의 설정이 필요합니다. 이 기사에서는 Vue 프로젝트에서 WeChat 설정을 사용자 정의하여 프로그램을 WeChat 공개 계정 개발에 더 적합하게 만드는 방법을 소개합니다.

1. WeChat JS SDK 설정

먼저 WeChat 공개 플랫폼에 공식 계정을 등록하고 공식 계정의 고유 식별자(AppID)와 비밀 키(AppSecret)를 받아야 합니다. 그런 다음 WeChat JS SDK 인터페이스를 Vue 프로젝트의 index.html에 도입하세요.

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

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
}

코드 설명:

• 라인 1-2: WeChat JS SDK를 소개합니다.
• 라인 4-14: 공식 계정의 AppID, 서명 생성을 위한 타임스탬프, 서명 생성을 위한 임의의 문자열, 서명 및 사용해야 하는 JS 인터페이스 목록을 포함하는 weixinConfig 개체를 생성합니다.
• line 16-28: getConfig 함수를 생성하고 함수 내에서 axios.post 메서드를 사용하여 공식 계정의 서명 구성 정보를 얻기 위해 백엔드 서버에 대한 요청을 시작합니다. 구성 정보를 얻은 후 wx.config 메서드를 호출하여 WeChat을 구성합니다.
• 라인 30-35: getConfig 메소드는 WeChat JS SDK 구성 정보를 얻기 위해 다른 모듈이 호출할 수 있도록 외부 세계에 노출됩니다.

2. 인터페이스 호출

Vue 프로젝트에서 WeChat 인터페이스를 호출하는 방법은 기본적으로 일반 웹페이지에서 호출하는 방법과 동일합니다. 시간을 조정하려면 Vue의 수명 주기와 이벤트 메커니즘만 사용하면 됩니다. .

Vue 프로젝트의 WeChat Moments에 대한 공유를 예로 들어 보겠습니다.

Vue 구성 요소에서 생성된 라이프 사이클을 사용하여 getConfig 메서드를 호출하여 WeChat 인터페이스 사용을 준비하도록 WeChat 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('取消分享');
        }
      });
    }
  }
}

코드 설명:

• 1-2행: WeChat 사용자 정의 구성 파일 wechatConfig를 소개합니다.
• line 6-15: 공유 제목, 설명, 링크 및 아이콘을 포함하는 데이터 개체를 생성합니다.
• line 17-23: 생성된 라이프 사이클을 사용하여 Vue 인스턴스가 생성되면 WeChat JS SDK 구성을 위해 getConfig 메소드가 자동으로 호출됩니다. 구성이 완료되면 wx.checkJsApi 메소드를 사용하여 필수 JS 인터페이스를 사용할 수 있는지 여부를 감지하십시오.
• 라인 26-34: wxShareFriendsCircle 메소드를 생성하고 Vue 컴포넌트의 클릭 이벤트에 등록합니다. 사용자가 페이지를 열고 공유 버튼을 클릭하면 wx.onMenuShareTimeline 메소드가 호출되어 공유 관련 작업이 완료됩니다.

요약:

이 글에서는 WeChat 공식 계정의 인터페이스와 기능에 맞게 Vue 프로젝트에서 WeChat 사용자 정의를 설정하는 방법을 소개합니다. 방법에는 WeChat JS SDK 설정, WeChat 인터페이스 호출 등이 포함됩니다. 이 글이 초보자들에게 참고적인 도움이 되기를 바랍니다.

위 내용은 vue에서 WeChat 사용자 정의를 설정하는 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!