Vue에서 모바일 WeChat 공개 계정을 구현하는 단계에 대한 자세한 설명

이번에는 Vue에서 모바일 WeChat 공식 계정을 구현하는 단계에 대해 자세히 설명하겠습니다. 모바일 WeChat 공식 계정을 구현하기 위한 Vue의 주의 사항은 무엇입니까?

Vue를 사용하여 한동안 WeChat 공개 계정 프로젝트를 진행했는데 온갖 이상한 문제에 직면했습니다. 함정은 다음과 같습니다.

첫 번째 함정: WeChat 공유로 인해 Android 휴대폰이 열리지 않습니다. 사진 앨범을 열 수 없고 WeChat 충전을 열 수 없습니다.

해결 방법:

setTimeout(_ => {
      wx.config(sdkConfig)
     }, 500)

는 WeChat 공유를 500밀리초 지연해야 합니다. 이렇게 하면 Android 휴대폰에서 사진 앨범을 호출할 수 없고 WeChat 공유를 사용하는 경우 문제가 해결됩니다. , 지연을 추가해야 합니다.

두 번째 구덩이: 휴대폰의 일부 타사 입력 방법으로 인해 온라인 페이지가 혼잡해집니다

해결책:

// 特定需求页面，比如评论页面，输入框在顶部之类的
const interval = setInterval(function() {
  document.body.scrollTop = 0;
}, 100)
// 注意关闭页面或者销毁组件的时候记得清空定时器
clearInterval(interval);

세 번째 구덩이: 일부 지역에서는 모바일 4Gpost 제출이 응답하지 않습니다

내 vue 프로젝트는 인터페이스를 캡슐화합니다. 프로젝트에서 항상 일부 영역의 요청이 있지만 응답이 없습니다. 나중에 조사한 결과 백엔드는 옵션 요청만 수신했습니다. 이 상황은 개별 사용자에게만 발생한다는 것입니다. 나중에 기사https: //itbilu.com/javascript/js/VkiXuUcC.html에서 이러한 요청을 소개합니다추가 설명 없이 코드로 직접 이동

해결책:

import axios from 'axios'
import qs from 'qs'
service.interceptors.request.use(
 config => {
 if(config.method === 'post'){
  config.data = qs.stringify(config.data)
 }
 return config
},
 error => {
  console.log(error)
  Promise.reject(error)
 }
)

프로젝트가 시작되었습니다. 몇달간 진행했는데 사실 포스팅할 시간이 없어서 실제로 겪은 함정들에 대해서는 앞으로 계속해서 포스팅하도록 하겠습니다. . .

이 기사의 사례를 읽은 후 방법을 마스터했다고 생각합니다. 더 흥미로운 정보를 보려면 PHP 중국어 웹사이트의 다른 관련 기사를 주목하세요!

추천 자료:

JS 디자인 패턴의 체인 호출 사용 분석

vue-cli 프로젝트에 배경 모의 인터페이스를 추가하는 단계에 대한 자세한 설명

위 내용은 Vue에서 모바일 WeChat 공개 계정을 구현하는 단계에 대한 자세한 설명의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!