So vervollständigen Sie die WeChat-Webseite für öffentliche Konten mit Vue

Es gibt eine H5-Seitenfunktion, eine relativ einfache Fragebogenfunktion, eingebettet in unser offizielles WeChat-Konto. Der gewählte Technologie-Stack ist Vue. Auch die Login- und Sharing-Schnittstellen von WeChat kommen zum Einsatz.

Hauptfunktionen und aufgetretene Probleme:

1. Links- und Rechtsschaltanimation
2. Routing mit Parametersprung
3. Move Introduce externe Schriftstile für den Client
4. Verwenden Sie die html2canvas-Screenshot-Funktion
5. Verwenden Sie die WeChat-Schnittstelle (Frontend-Teil)
6. Mobile Bildschirmanpassung
7. Klicken Sie auf a Seite auf der mobilen Seite Das Problem, dass nach mehrmaligem Klicken nur einmal ausgeführt wird
8. Bei Verwendung des Eingabefelds unter iOS wird die Tastatur angezeigt, um die Schaltflächen abzudecken
9. Das gepackte Projekt stößt auf eine statische Ressource Ladeproblem

1 .Animation nach links und rechts wechseln

--Zuerst habe ich lange darüber nachgedacht, die mobile Animationsbibliothek von Vue zu verwenden, aber das Projekt war sehr klein, also habe ich diese Option aufgegeben und angefangen, selbst handschriftlich zu schreiben. Das erste, woran ich dachte, war der Übergangseffekt. Und relevante Artikelreferenzen gefunden. Der Code lautet wie folgt:

`<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>`

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

2. Routing mit Parametersprung

Das ist einfach Für die Aufnahme gibt es drei Methoden.
1. Bringen Sie Parameter direkt in route-link:to:

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

2. Bringen Sie Parameter in this.$router.push:

Verwenden Sie eine Abfrage mit Parametern: ähnlich, um das übergebene zu erhalten Parameter werden in die URL gespleißt

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

Verwenden Sie Parameter, um Parameter zu bringen: Es kann nur der Name verwendet werden, ähnlich wie im Beitrag. Parameter werden nicht gespleißt

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

Referenzlink: https ://blog.csdn.net /jiandan...

3. Das mobile Terminal führt externe Schriftstile ein

1. Das mobile Terminal führt externe Stile direkt ein Laden Sie die Schriftarten aus der Schriftartenbibliothek herunter. Das allgemeine Suffix ist .ttf/.otf usw. Erstellen Sie eine Schriftartendatei
   unter der Asset-Datei und fügen Sie alle Schriftartendateien darin ein.
2. Erstellen Sie eine neue CSS-Datei. Dies entspricht der Registrierung der heruntergeladenen Schriftarten. Sie können die Namen der Schriftarten anpassen, im Allgemeinen werden jedoch die vorherigen Namen verwendet. src ist der Pfad, in dem sich die Datei befindet.

   
   

3. Verwenden Sie es einfach dort, wo es benötigt wird: Schriftfamilie: „PingFang“

4. Verwenden Sie die Screenshot-Funktion von htmltl2canvas, „Konvertieren in“. Bild

1. Laden Sie zuerst das html2canvas-Paket herunter: cnpm i html2canvas -S / import html2canvas from 'html2canvas';
2. Dokument anzeigen: Klicken Sie hinein, um das Bild direkt zu generieren WeChat zum Speichern des Bildes.

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: Ich war wirklich verwirrt, als ich das gemacht habe. Es gibt zu wenige Dokumente auf der offiziellen Website. Zu diesem Zeitpunkt bin ich auf ein domänenübergreifendes Problem mit Bildern gestoßen und habe lange danach gesucht. Möglicherweise habe ich die Parameterkonfigurationsdatei der offiziellen Website nicht sorgfältig gelesen. Es wurde viel Zeit mit Weinen verschwendet.

Referenzlink: http://html2canvas.hertzen.com/

5. Verwendung der WeChat-Schnittstelle (Frontend-Teil)

Wir verwenden hauptsächlich die WeChat SDK-Schnittstelle Für die Anmeldung und die Freigabefunktion gehen Sie zunächst zur öffentlichen WeChat-Plattform, um sie auszuprobieren, und konfigurieren Sie dann das Backend, nachdem Sie die Berechtigungen korrigiert haben. Das Frontend muss lediglich Daten anfordern und einige Konfigurationen durchführen. Hier stellen wir hauptsächlich die Funktionen des Teilens mit Freunden und des Teilens mit Momenten vor:

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. Jetzt adaptiere ich den mobilen Bildschirm, den ich zuvor gesehen habe Es wurde gesagt, dass es eine felxable.js-Bibliothek gibt. Später habe ich festgestellt, dass ein besserer Autor aufgegeben und uns einen Link zur Verfügung gestellt hat. Ich werde mir etwas Zeit nehmen, um es mir genauer anzusehen. Das nächste Projekt der Firma ist wieder da. Um das Projekt wie geplant abzuschließen, habe ich sofort begonnen . Ich bin ein bisschen müde, ich habe überhaupt keine Erfahrung, Ao Ao kann es nur noch richtig machen, und der arme frischgebackene Hund tut es nicht wagen, Fehler zu machen.

Lassen Sie mich den folgenden Rem-Anpassungscode teilen:

//默认调用一次设置
 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);

Fügen Sie diesen Code in main.js ein und verwenden Sie dann den Konverter, um px in rem zu konvertieren.

7. Zusammenfassung anderer Probleme

1. Das Klickereignis wird nur einmal ausgeführt, wenn es mehrmals angeklickt wird:

Sie können den Modifikator .once verwenden und es gibt viele nützliche Modifikatoren . Jeder hat es. Sie können es ausprobieren, wenn Sie Zeit haben.

2 Bei Verwendung des iOS-Eingabefelds springt die Tastatur nach oben und zurück, um die Tasten und andere Elemente unten abzudecken:

Wir können ein Fokusverlustereignis für die Eingabe registrieren. Wenn der Fokus verloren geht, setzen Sie document.body.scoolTop = 0; Das verpackte Projekt stößt auf das Phänomen, dass statische Ressourcen nicht angezeigt werden oder der Pfad ist falsch:

Ich verwende vue-cil3, das die Konfigurationsdateien in node_modules ablegt. Wenn Sie die Konfiguration ändern müssen,

erstellen Sie einfach eine neue vue.config.js-Datei und das vorherige Dokument wird automatisch überschrieben. Die Hauptänderung ist: publicPath: „./“,

Das Dokument hat keine baseUrl mehr und verwendet jetzt alle publicPath. Folgen Sie einfach der Dokumentkonfiguration und es ist in Ordnung.

Verwandte Tutorials:
Video-Tutorial zum Vue-Framework

Das obige ist der detaillierte Inhalt vonSo vervollständigen Sie die WeChat-Webseite für öffentliche Konten mit Vue. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!