如何使用vue完成微信公眾號網頁-微信開發-PHP中文網

首頁

微信小程式

微信開發

如何使用vue完成微信公眾號網頁

little bottle

Apr 29, 2019 am 09:57 AM

csshtmlhtml5javascriptvue.js

有一個H5頁面的功能，比較簡單的一個調查表功能，嵌套在我們微信公眾號裡面。選用的技術棧是Vue。同時用到了微信的登入和分享介面。

主要功能以及遇到的問題：

左右切換動畫
路由帶參數跳轉
移動端引入外部字體樣式
使用htmtl2canvas截圖功能
使用微信介面(前端部分)
行動端螢幕適配
行動端點選一個頁面點擊多次只執行一次問題
ios使用輸入框的時鍵盤彈起來掩蓋住按鈕問題
#打包項目遇到靜態資源載入問題

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.路由帶參數跳轉

這個就是記錄一下，有三種方法。
1.直接在route-link:to 中帶參數：

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

2.在this.$router.push中帶參數：

使用query帶參數: 類似於get傳參參數會拼接到url上面

this.$router.push({name:&#39;home&#39;,query: {id:&#39;1&#39;}})
this.$router.push({path:&#39;/home&#39;,query: {id:&#39;1&#39;}})

使用params帶參數：只能用name 類似post 參數不會拼接

this.$router.push({name:&#39;home&#39;,params: {id:&#39;1&#39;}})

參考連結：https://blog.csdn.net /jiandan...

3.行動端引入外部字體樣式

行動端引入外部樣式，我用的是直接把字體庫的字體下載下來，一般後綴為.ttf/.otf等。在asset文件下建立
fonts文件，將字體文件全部放入。
再新建一個.css文件，相當於註冊你下載的字體，可以自訂給字體們命名，不過一般還是按照以前的名字。 src是檔案所在的路徑。
在需要的地方使用就可以了：font-family："PingFang"

4.使用htmtl2canvas截圖功能，轉換成圖片

先下載html2canvas套件： cnpm i html2canvas -S / import html2canvas from 'html2canvas';

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

題外話：當時做這個的時候真的有點懵。官網文件太少了，當時遇到圖片跨域問題，找了好久，可能是我沒有仔細Jan官網的參數設定檔。浪費了很多時間，哭哭。

參考連結：http://html2canvas.hertzen.com/

5.使用微信介面(前端部分)

我們用微信SDK介面主要是做的登錄和分享功能，首先是上微信公眾平台上邊看看，把權限搞好之後後端配置。前端只需請求得到數據，在進行一些配置就可以。這裡主要介紹分享給朋友和分享到朋友圈功能：

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.行動裝置螢幕適配

現在我們行動裝置螢幕適配，我用的是rem，之前也有看到說有一個felxable.js的庫，後來去查，說是有更好的作者放棄了，並且給我們提供了鏈接，哈哈哈哈真的太可愛了。準備抽時間去仔細看看，公司下一個項目又來了，真的加班了好久，為瞭如期完成項目，完成之後立刻就新開項目，有點心累，這把應該是APP了，完全沒有任何經驗，嗷嗷只能硬著頭皮做，還是要恰飯的，可憐的應屆狗不敢造次。

下面分享一下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 + &#39;px&#39;;
     // console.log(nowFontSize);
     // 5. 把当前计算的根元素的字体大小设置到html上
     document.querySelector(&#39;html&#39;).style.fontSize = nowFontSize;
 }
 // 6. 添加一个屏幕宽度变化的事件  屏幕变化就触发变化根元素字体大小计算的js 
 window.addEventListener(&#39;resize&#39;, setHtmlFontSize);

把這段程式碼引入到main.js裡面，然後使用轉換器把px轉成rem 就可以了。

7.其他問題總結

1.點擊事件點擊多次只執行一次：

可以使用.once修飾符還有很多有用的修飾符，大家有時間可以去看看~~

2.使用ios輸入框的時候，鍵盤彈起來回遮擋下面的按鈕等元素的事件：

我們可以為input註冊一個失去焦點事件，當失去焦點的時候設定document.body.scroolTop = 0;

3.打包專案遇到靜態資源不展示的現像或路徑錯誤：

#我用的是vue-cil3，他把配置文件都放在了node_modules中，官方文檔上面有介紹，如果需要修改配置，

就新建一個vue.config.js文件，他會自動的覆蓋之前的文件。主要是修改成： publicPath: "./"，
文檔已經沒有baseUrl，現在全部使用publicPath,跟著文檔配置就ok了。

相關教學：

Vue框架影片教學

########################