vue を使用して WeChat パブリック アカウント Web ページを完成させる方法

WeChat公式アカウントには、比較的シンプルなアンケート機能であるH5ページ機能がネストされています。選択されたテクノロジー スタックは Vue です。 WeChat のログインおよび共有インターフェイスも使用されます。

主な機能と発生した問題:

1. 左右切り替えアニメーション
2. パラメータジャンプによるルーティング
3. 移動紹介末端の外部フォントスタイル
4. html2canvasスクリーンショット機能を使用
5. WeChatインターフェース(フロントエンド部分)を使用
6. モバイル端末の画面適応
7. モバイル端末のクリック数ページ 複数回クリックしても 1 回しか実行されない問題
8. iOS で入力ボックスを使用すると、キーボードがポップアップしてボタンを覆ってしまう問題
9. パッケージ化されたプロジェクトで静的ファイルの読み込みの問題が発生しました。リソース

1 .アニメーションを左右に切り替える

--まずはvueのモバイルアニメーションライブラリを利用することを考えました。とても小さいので諦めて手書きで書き始めました。私が最初に考えたのはトランジション効果でした。そして、関連する参考文献を見つけました。コードは次のとおりです:

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

参考: https://yq.aliyun.com/article...

2. パラメータjumpを使用したルーティング

これは単なるものです。録音には3つの方法があります。
1. Route-link:to にパラメータを直接取り込みます:

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

2. this.$router.push にパラメータを取り込みます:

パラメータを含むクエリを使用します: パラメータを取得するのと同様です渡されたものは URL に結合されます

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

Use params withparameters: 名前のみを使用できます。投稿と同様に、パラメーターは結合されません

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

参考リンク: https:/ /blog.csdn.net /jiandan...

3. モバイル端末には外部フォント スタイルが導入されます

1. モバイル端末には外部フォント スタイルが導入されます。フォント ライブラリからのフォント。一般的なサフィックスは .ttf/.otf などです。アセット ファイルの下に
   フォント ファイルを作成し、すべてのフォント ファイルをその中に入れます。
2. 新しい .css ファイルを作成します。これは、ダウンロードしたフォントを登録するのと同じです。フォントの名前はカスタマイズできますが、通常は以前の名前が残ります。 src は、ファイルが配置されているパスです。

   
   

3. 必要な場合に使用してください: font-family: "PingFang"

4. htmtl2canvas スクリーンショット関数を使用し、次のように変換します。 image

1. 最初に html2canvas パッケージをダウンロードします: cnpm i html2canvas -S / import html2canvas from 'html2canvas';
2. ドキュメントを表示します: をクリックして画像を直接生成します。画像を保存する WeChat 保存する機能

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

余談: これをやっていたとき、私は本当に混乱しました。公式サイトのドキュメントが少なすぎて、その時に画像のクロスドメインの問題に遭遇して、長時間探したのですが、もしかしたら公式サイトのパラメータ設定ファイルをよく読んでいなかったのかもしれません。泣きながら多くの時間を無駄にしました。

参考リンク: http://html2canvas.hertzen.com/

5. WeChat インターフェースの使用 (フロントエンド部分)

WeChat SDK インターフェースを主に使用します。ログインと共有機能については、まず WeChat パブリック プラットフォームにアクセスして確認し、権限を修正した後にバックエンドを構成します。フロントエンドはデータを要求し、いくつかの構成を実行するだけで済みます。ここでは主に友達への共有機能とモーメントへの共有機能を紹介します:

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. モバイル画面への適応

現在、モバイル画面への適応を行っています。 felxable.js というライブラリがあるとのことでしたが、後で調べてみたら、もっと上手い作者さんが諦めてリンクを貼ってくれていました。はははは、かわいいですね。時間をかけて詳しく見ていきます。また会社の次のプロジェクトが来ています。本当に長い間残業してきました。予定通りプロジェクトを完了するために、直後に新しいプロジェクトを開始しました。完了。少し疲れています。これはアプリにする必要があります。まったく経験がありません。、Ao Ao は弾丸を噛んで実行することしかできません、それはまだ適切に調理されなければなりません、そして、かわいそうな卒業したての犬はそうしますあえて間違いを犯さないこと。
以下の rem アダプテーション コードを共有します:

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

このコードを main.js に導入し、コンバーターを使用して px を rem に変換します。

7. その他の問題の概要

1. 複数回クリックされた場合、クリック イベントは 1 回だけ実行されます:

.once 修飾子を使用でき、便利な修飾子がたくさんあります。 . 誰もが持っています 時間を見てみることができます~~

2. ios 入力ボックスを使用すると、キーボードが跳ね上がり、以下のボタンやその他の要素がブロックされます:

登録できますinput のフォーカス喪失イベント、フォーカスが失われたとき、document.body.scoolTop = 0;

3. パッケージ化されたプロジェクトで、静的リソースまたはパスが表示されない現象が発生しました。は間違っています:

私は vue-cil3 を使用しており、node_modules に設定ファイルを置きます。公式ドキュメントに説明があります。設定を変更する必要がある場合は、
新しい vue.config を作成してください。 .js ファイルを作成すると、前のドキュメントが自動的に上書きされます。主な変更点は次のとおりです: publicPath: "./",
ドキュメントにはbaseUrlがなくなり、すべてpublicPathが使用されます。ドキュメントの設定に従うだけで問題ありません。

##関連チュートリアル:

Vue フレームワーク ビデオ チュートリアル

##

以上がvue を使用して WeChat パブリック アカウント Web ページを完成させる方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。