前言：

公司最近有一個H5頁面的功能，比較簡單的一個調查表功能，嵌套在我們微信公眾號里面。選用的技術棧是Vue。同時用到了微信的登錄和分享接口。ps:本人小白，如果有問題希望大家能指出來，寫文章不止是為了記錄，還是為了發現自己的問題。謝謝大噶！！！

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

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

1.左右切換動畫

--首先我考慮到用vue的移動端動畫庫，看了好久，但是項目非常小，就放棄了這個選擇自己開始手寫。首先我考慮到的是過渡效果。并且找到了相關的文章參考。代碼如下：

`<template> <div id="app"> <transition :name="'fade-'+(direction==='forward'?'last':'next')"> <router-view></router-view> </transition> </div></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>

2.路由帶參數跳轉

這個就是記錄一下，有三種方法。

1.直接在route-link:to 中帶參數：

<router-link :to="{name:'home', query: {id:1}}">

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

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

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

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

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

參考鏈接：http://m.survivalescaperooms.com/article/160401.htm

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

移動端引入外部樣式，我用的是直接把字體庫的字體下載下來，一般后綴為 .ttf/.otf等。在asset文件下創建 fonts文件，將字體文件全部放入。

再新建一個.css文件，相當于注冊你下載的字體，可以自定義給字體們命名，不過一般還是按照以前的名字。src是文件所在的路徑。