Detailed explanation of steps to implement mobile WeChat public account in Vue

This time I will bring you a detailed explanation of the steps to implement the WeChat official account on the mobile terminal with Vue. What are the precautions for implementing the WeChat official account on the mobile terminal with Vue. Here are practical cases, let’s take a look.

I have been using Vue to do WeChat public account projects for some time. I have encountered all kinds of weird problems. Here are the pitfalls:

The first pit: WeChat sharing leads to Android The phone cannot open the photo album and cannot open WeChat recharge

Solution:

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

Needs to delay WeChat sharing by 500 milliseconds, thus solving the problem for Android phones The problem of being unable to call the photo album and recharge via WeChat requires a delay if sharing via WeChat is used.

Second Pitfall: Some third-party input methods on mobile phones will squeeze the page online

Solution:

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

The third pit: Mobile 4Gpost submission in some areas does not respond

My vue project is interface encapsulated by axios. In the project, there are always requests from some areas but no response. I will check later. Finally, the backend only received the options request. The key is that this situation only occurs for individual users. I will read the article laterhttps://itbilu.com/javascript/js/VkiXuUcC .html introduces these requests, let’s go straight to the code without further explanation

Solution:

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)
 }
)

The project has been in progress for several months. I really don’t have time to post it, so I will continue to post the pitfalls I actually encountered in the future. . .

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Analysis of chain call usage in JS design pattern

Add background mock to vue-cli project Detailed explanation of interface steps

The above is the detailed content of Detailed explanation of steps to implement mobile WeChat public account in Vue. For more information, please follow other related articles on the PHP Chinese website!