How to use vue to complete the WeChat public account webpage

There is an H5 page function, a relatively simple questionnaire function, nested in our WeChat official account. The technology stack chosen is Vue. WeChat’s login and sharing interfaces are also used.

Main functions and problems encountered:

1. Left and right switching animation
2. Routing with parameter jump
3. Move Introduce external font styles on the end
4. Use html2canvas screenshot function
5. Use WeChat interface (front-end part)
6. Mobile terminal screen adaptation
7. Mobile terminal clicks a page The problem of only executing once after clicking multiple times
8. When using the input box in ios, the keyboard pops up and covers the button problem
9. The packaged project encounters the problem of loading static resources

1 .Switch animations left and right

--First of all, I considered using vue’s mobile animation library. I looked at it for a long time, but the project was very small, so I gave up and started writing by hand. The first thing I considered was the transition effect. And found relevant article references. The code is as follows:

`<template>
  <p id="app">
    <transition :name="&#39;fade-&#39;+(direction===&#39;forward&#39;?&#39;last&#39;:&#39;next&#39;)">
      <router-view></router-view>
    </transition>
  </p>
</template>
<script>
export default {
  name: "app",
  data: () => {
    return {
      direction: ""
    };
  },
  watch: {
    $route(to, from) {
      let toName = to.name;
      const toIndex = to.meta.index;
      const fromIndex = from.meta.index;
      this.direction = toIndex < fromIndex ? "forward" : "";
    }
  }
}
</script>
<style scoped>
.fade-last-enter-active {
  animation: bounce-in 0.6s;
}
.fade-next-enter-active {
  animation: bounce-out 0.6s;
}
@keyframes bounce-in {
  0% {
    transform: translateX(-100%);
  }
  100% {
    transform: translateX(0rem);
  }
}
@keyframes bounce-out {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0rem);
  }
}
</style>`

Reference: https://yq.aliyun.com/article...

2. Routing with parameter jump

This is just for recording, There are three methods.
1. Directly bring parameters in route-link:to:

<router-link :to="{name:&#39;home&#39;, query: {id:1}}">

2. Bring parameters in this.$router.push:

Use query with parameters: similar to get The parameters passed will be spliced ​​into the url

this.$router.push({name:'home',query: {id:'1'}})
this.$router.push({path:'/home',query: {id:'1'}})

Use params with parameters: Only name can be used, similar to post, the parameters will not be spliced

this.$router.push({name:'home',params: {id:'1'}})

Reference link: https://blog.csdn.net /jiandan...

3. The mobile terminal introduces external font styles

1. The mobile terminal introduces external styles. What I use is to directly download the fonts from the font library. The general suffix is .ttf/.otf etc. Create a
   fonts file under the asset file and put all the font files into it.
2. Create a new .css file, which is equivalent to registering the fonts you downloaded. You can customize the names for the fonts, but generally they still follow the previous names. src is the path where the file is located.

   
   

3. Just use it where needed: font-family: "PingFang"

4. Use the htmtl2canvas screenshot function, Convert to image

1. First download the html2canvas package: cnpm i html2canvas -S / import html2canvas from 'html2canvas';
2. View the document: Click in to directly generate the image. Long press on WeChat to save the image. Function to save

setTimeout(() => {  //这里用定时器是因为页面一加载出来我就展示的是图片 为了防止图片还未生成 给点时间
      html2canvas(document.querySelector("#top"), {
        useCORS: true,  //是否尝试使用CORS从服务器加载图像 
        logging: false,//删除打印的日志 
        allowTaint: false //这个和第一个很像 但是不能同时使用 同时使用toDataURL会失效
      }).then(canvas => {
        let imageSrc = canvas.toDataURL("image/jpg"); // 转行img的路径 
        this.imageSrc = imageSrc;  //定义一个动态的 ：src 现在是赋值给src 图片就会展现
        this.$refs.top.style.display = "none"; // 让页面上其他元素消失 只显示图片
      });
    }, 1000);

Off topic: I was really confused when I was doing this. There are too few documents on the official website. At that time, I encountered a cross-domain problem with images, and I searched for it for a long time. Maybe I didn’t read the parameter configuration file of the official website carefully. A lot of time was wasted, crying.

Reference link: http://html2canvas.hertzen.com/

5. Using the WeChat interface (front-end part)

We use the WeChat SDK interface mainly for login And the sharing function, first go to the WeChat public platform to check it out, and then configure the backend after correcting the permissions. The front end only needs to request data and perform some configuration. Here we mainly introduce the functions of sharing to friends and sharing to Moments:

this.code = location.href; //首先获取code 
if (this.code.lastIndexOf("code=") != -1) {
  (this.code = this.code.substring(
    this.code.lastIndexOf("code=") + 5,
    this.code.lastIndexOf("&state")
  )),
    this.$axios
      .get("*******8?code=".concat(this.code))
      .then(function(t) {  //获取后端传会来的参数 
        localStorage.setItem("unionid", t.data.unionid);
        localStorage.setItem("openid", t.data.openid);
        localStorage.setItem("nickname", t.data.nickname);
        localStorage.setItem("headimgurl", t.data.headimgurl);
      });
}
this.url = encodeURIComponent(location.href.split("#/")[0]);//获取配置的路径
this.$axios.get(`*********?url=${this.url}`).then(res => {
  this.res = res.data;
  wx.config({
    debug: false, // 开启调试模式,
    appId: res.data.appId, // 必填，企业号的唯一标识，此处填写企业号corpid
    timestamp: res.data.timestamp, // 必填，生成签名的时间戳
    nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
    signature: res.data.signature, // 必填，签名，见附录1
    jsApiList: [
      "updateAppMessageShareData",
      "updateTimelineShareData",
      "showMenuItems",
      "hideAllNonBaseMenuItem"
    ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
  });
  //参考公众平台写的：
  wx.ready(function() {
    wx.hideAllNonBaseMenuItem();
    wx.showMenuItems({
      menuList: [
        "menuItem:share:appMessage",
        "menuItem:share:timeline",
        "menuItem:favorite"
      ] // 要显示的菜单项，所有menu项见附录3
    });
    wx.updateTimelineShareData({
      title: "******", // 分享标题
      desc: "*********", // 分享描述
      link: "**********", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: "******", // 分享图标
      success: function() {
        ***** 执行结束后执行的回调
      }
    });
    wx.updateAppMessageShareData({
      title: "*******", // 分享标题
      desc: "*********", // 分享描述
      link: "*********", // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
      imgUrl: "********, // 分享图标
      success: function() {
        *******
      }
    });
  });
 }

6. Mobile screen adaptation

Now we are adapting to the mobile screen. I use rem, which I have seen before. It was said that there is a felxable.js library. Later I checked it and found that a better author had given up and provided us with a link. Hahahaha, it’s so cute. I'm going to take the time to take a closer look. The next project of the company is here again. I have really worked overtime for a long time. In order to complete the project as scheduled, I started a new project immediately after completion. I am a little tired. This one should be an APP. I have no experience at all. , Ao Ao can only bite the bullet and do it, it still has to be cooked properly, and the poor fresh-graduated dog does not dare to make mistakes.
Share the rem adaptation code below:

//默认调用一次设置
 setHtmlFontSize();
 
 function setHtmlFontSize() {
     // 1. 获取当前屏幕的宽度
     var windowWidth = document.documentElement.offsetWidth;
     // console.log(windowWidth);
     // 2. 定义标准屏幕宽度 假设375
     var standardWidth = 375;
     // 3. 定义标准屏幕的根元素字体大小 假设100px  1rem=100px  10px = 0.1rem  1px 0.01rem
     var standardFontSize = 100;
     // 4. 计算当前屏幕对应的根元素字体大小
     var nowFontSize = windowWidth / standardWidth * standardFontSize + 'px';
     // console.log(nowFontSize);
     // 5. 把当前计算的根元素的字体大小设置到html上
     document.querySelector('html').style.fontSize = nowFontSize;
 }
 // 6. 添加一个屏幕宽度变化的事件  屏幕变化就触发变化根元素字体大小计算的js 
 window.addEventListener('resize', setHtmlFontSize);

Introduce this code into main.js, and then use the converter to convert px to rem.

7. Summary of other issues

1. Click event is executed only once when clicked multiple times:

You can use the .once modifier and there are many useful modifiers. Everyone has You can take a look at the time~~

2. When using the ios input box, the keyboard bounces up and blocks the buttons and other elements below:

We can register a loss of focus event for the input , when the focus is lost, set document.body.scoolTop = 0;

3. The packaged project encounters the phenomenon that static resources are not displayed or the path is wrong:

I use vue-cil3, which puts the configuration files in node_modules. The official document describes it. If you need to modify the configuration,
just create a new vue.config.js file, and it will automatically overwrite the previous one. document. The main modification is to: publicPath: "./",
The document no longer has a baseUrl, and now all uses publicPath. Just follow the document configuration and it will be ok.

Related tutorials: Vue framework video tutorial

##

The above is the detailed content of How to use vue to complete the WeChat public account webpage. For more information, please follow other related articles on the PHP Chinese website!