摘要：前言公司最近有一個(gè)頁(yè)面的功能，比較簡(jiǎn)單的一個(gè)調(diào)查表功能，嵌套在我們微信公眾號(hào)里面。同時(shí)用到了微信的登錄和分享接口。參考鏈接使用微信接口前端部分我們用微信接口主要是做的登錄和分享功能，首先是上微信公眾平臺(tái)上邊看看，把權(quán)限搞好之后后端配置。

公司最近有一個(gè)H5頁(yè)面的功能，比較簡(jiǎn)單的一個(gè)調(diào)查表功能，嵌套在我們微信公眾號(hào)里面。選用的技術(shù)棧是Vue。同時(shí)用到了微信的登錄和分享接口。ps:本人小白，如果有問(wèn)題希望大家能指出來(lái)，寫(xiě)文章不止是為了記錄，還是為了發(fā)現(xiàn)自己的問(wèn)題。謝謝大噶?。?！

左右切換動(dòng)畫(huà)

路由帶參數(shù)跳轉(zhuǎn)

移動(dòng)端引入外部字體樣式

使用htmtl2canvas截圖功能

使用微信接口(前端部分)

移動(dòng)端屏幕適配

移動(dòng)端點(diǎn)擊一個(gè)頁(yè)面點(diǎn)擊多次只執(zhí)行一次問(wèn)題

ios使用輸入框的時(shí)鍵盤(pán)彈起來(lái)掩蓋住按鈕問(wèn)題

打包項(xiàng)目遇到靜態(tài)資源加載問(wèn)題

--首先我考慮到用vue的移動(dòng)端動(dòng)畫(huà)庫(kù)，看了好久，但是項(xiàng)目非常小，就放棄了這個(gè)選擇自己開(kāi)始手寫(xiě)。首先我考慮到的是過(guò)渡效果。并且找到了相關(guān)的文章參考。代碼如下：

`

`

參考：https://yq.aliyun.com/article...

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

2.在this.$router.push中帶參數(shù)：

使用query帶參數(shù): 類(lèi)似于get傳參 參數(shù)會(huì)拼接到url上面

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

使用params帶參數(shù)： 只能用name 類(lèi)似于post 參數(shù)不會(huì)拼接

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

參考鏈接：https://blog.csdn.net/jiandan...

移動(dòng)端引入外部樣式，我用的是直接把字體庫(kù)的字體下載下來(lái)，一般后綴為 .ttf/.otf等。在asset文件下創(chuàng)建
fonts文件，將字體文件全部放入。

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

在需要的地方使用就可以了：font-family："PingFang"

先下載html2canvas包： cnpm i html2canvas -S / import html2canvas from "html2canvas";

查看文檔 ： 點(diǎn)擊進(jìn)來(lái)直接生成圖片 利用微信長(zhǎng)按保存圖片功能來(lái)保存

setTimeout(() => {  //這里用定時(shí)器是因?yàn)轫?yè)面一加載出來(lái)我就展示的是圖片 為了防止圖片還未生成 給點(diǎn)時(shí)間
      html2canvas(document.querySelector("#top"), {
        useCORS: true,  //是否嘗試使用CORS從服務(wù)器加載圖像 
        logging: false,//刪除打印的日志 
        allowTaint: false //這個(gè)和第一個(gè)很像 但是不能同時(shí)使用 同時(shí)使用toDataURL會(huì)失效
      }).then(canvas => {
        let imageSrc = canvas.toDataURL("image/jpg"); // 轉(zhuǎn)行img的路徑 
        this.imageSrc = imageSrc;  //定義一個(gè)動(dòng)態(tài)的 ：src 現(xiàn)在是賦值給src 圖片就會(huì)展現(xiàn)
        this.$refs.top.style.display = "none"; // 讓頁(yè)面上其他元素消失 只顯示圖片
      });
    }, 1000);

題外話： 當(dāng)時(shí)做這個(gè)的時(shí)候真的有點(diǎn)懵。官網(wǎng)文檔太少了，當(dāng)時(shí)遇到圖片跨域問(wèn)題，找了好久，可能是我沒(méi)有仔細(xì)Jan官網(wǎng)的參數(shù)配置文件。浪費(fèi)了很多時(shí)間，哭哭。

參考鏈接：http://html2canvas.hertzen.com/

我們用微信SDK接口主要是做的登錄和分享功能，首先是上微信公眾平臺(tái)上邊看看，把權(quán)限搞好之后后端配置。前端只需請(qǐng)求得到數(shù)據(jù)，在進(jìn)行一些配置就可以。這里主要介紹分享給朋友和分享到朋友圈功能：

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) {  //獲取后端傳會(huì)來(lái)的參數(shù) 
        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, // 開(kāi)啟調(diào)試模式,
    appId: res.data.appId, // 必填，企業(yè)號(hào)的唯一標(biāo)識(shí)，此處填寫(xiě)企業(yè)號(hào)corpid
    timestamp: res.data.timestamp, // 必填，生成簽名的時(shí)間戳
    nonceStr: res.data.nonceStr, // 必填，生成簽名的隨機(jī)串
    signature: res.data.signature, // 必填，簽名，見(jiàn)附錄1
    jsApiList: [
      "updateAppMessageShareData",
      "updateTimelineShareData",
      "showMenuItems",
      "hideAllNonBaseMenuItem"
    ] // 必填，需要使用的JS接口列表，所有JS接口列表見(jiàn)附錄2
  });
  //參考公眾平臺(tái)寫(xiě)的：
  wx.ready(function() {
    wx.hideAllNonBaseMenuItem();
    wx.showMenuItems({
      menuList: [
        "menuItem:share:appMessage",
        "menuItem:share:timeline",
        "menuItem:favorite"
      ] // 要顯示的菜單項(xiàng)，所有menu項(xiàng)見(jiàn)附錄3
    });
    wx.updateTimelineShareData({
      title: "******", // 分享標(biāo)題
      desc: "*********", // 分享描述
      link: "**********", // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
      imgUrl: "******", // 分享圖標(biāo)
      success: function() {
        ***** 執(zhí)行結(jié)束后執(zhí)行的回調(diào)
      }
    });
    wx.updateAppMessageShareData({
      title: "*******", // 分享標(biāo)題
      desc: "*********", // 分享描述
      link: "*********", // 分享鏈接，該鏈接域名或路徑必須與當(dāng)前頁(yè)面對(duì)應(yīng)的公眾號(hào)JS安全域名一致
      imgUrl: "********, // 分享圖標(biāo)
      success: function() {
        *******
      }
    });
  });
 }
 

現(xiàn)在我們移動(dòng)端屏幕適配，我用的是rem，之前也有看到說(shuō)有一個(gè)felxable.js的庫(kù)，后來(lái)去查，說(shuō)是有更好的作者放棄了，并且給我們提供了鏈接，哈哈哈哈真的太可愛(ài)了。準(zhǔn)備抽時(shí)間去仔細(xì)看看，公司下一個(gè)項(xiàng)目又來(lái)了，真的加班了好久，為了如期完成項(xiàng)目，完成之后立馬就新開(kāi)項(xiàng)目，有點(diǎn)心累，這把應(yīng)該是APP了，完全沒(méi)有任何經(jīng)驗(yàn)，嗷嗷只能硬著頭皮做，還是要恰飯的，可憐的應(yīng)屆狗不敢造次。
下面分享一下rem適配的代碼：

//默認(rèn)調(diào)用一次設(shè)置
 setHtmlFontSize();
 
 function setHtmlFontSize() {
     // 1. 獲取當(dāng)前屏幕的寬度
     var windowWidth = document.documentElement.offsetWidth;
     // console.log(windowWidth);
     // 2. 定義標(biāo)準(zhǔn)屏幕寬度 假設(shè)375
     var standardWidth = 375;
     // 3. 定義標(biāo)準(zhǔn)屏幕的根元素字體大小 假設(shè)100px  1rem=100px  10px = 0.1rem  1px 0.01rem
     var standardFontSize = 100;
     // 4. 計(jì)算當(dāng)前屏幕對(duì)應(yīng)的根元素字體大小
     var nowFontSize = windowWidth / standardWidth * standardFontSize + "px";
     // console.log(nowFontSize);
     // 5. 把當(dāng)前計(jì)算的根元素的字體大小設(shè)置到html上
     document.querySelector("html").style.fontSize = nowFontSize;
 }
 // 6. 添加一個(gè)屏幕寬度變化的事件  屏幕變化就觸發(fā)變化根元素字體大小計(jì)算的js 
 window.addEventListener("resize", setHtmlFontSize);

把這段代碼引入到main.js里面，然后使用轉(zhuǎn)換器把px轉(zhuǎn)成rem 就可以了。

點(diǎn)擊事件點(diǎn)擊多次只執(zhí)行一次：

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

使用ios輸入框的時(shí)候，鍵盤(pán)彈起來(lái)回遮擋下面的按鈕等元素的事件：

我們可以給input注冊(cè)一個(gè)失去焦點(diǎn)事件，當(dāng)失去焦點(diǎn)的時(shí)候設(shè)置document.body.scroolTop = 0;  

打包項(xiàng)目遇到靜態(tài)資源不展示的現(xiàn)象或者是路徑錯(cuò)誤：

我用的是vue-cil3，他把配置文件都放在了node_modules中，官方文檔上面有介紹，如果需要修改配置，
就新建一個(gè)vue.config.js文件，他會(huì)自動(dòng)的覆蓋之前的文件。主要是修改成： publicPath: "./"，
文檔已經(jīng)沒(méi)有baseUrl，現(xiàn)在全部使用publicPath,跟著文檔配置就ok了。 

我遇到的問(wèn)題大致就這些，因?yàn)轫?xiàng)目比較小，所以沒(méi)有遇到太多問(wèn)題。過(guò)程真的有點(diǎn)心酸，我獨(dú)立解決問(wèn)題的能力真的很一般，不知道是不是沒(méi)有做程序員的潛質(zhì)，出現(xiàn)問(wèn)題就很焦慮，解決了一段時(shí)間以后，還是沒(méi)有辦法，就會(huì)更加焦慮。在上家公司實(shí)習(xí)的時(shí)候，我們組長(zhǎng)指出來(lái)這個(gè)問(wèn)題以后，我真的反省了好久。現(xiàn)在這家公司還是在實(shí)習(xí)，但是前端就一個(gè)人，小姐姐人很好，但是不用vue框架，所以遇到問(wèn)題還是得多帶帶解決。前端小姐姐是很堅(jiān)韌的人，遇到問(wèn)題，真的是一個(gè)一個(gè)線索的去找，不放棄那種，一開(kāi)始我們要用flutter，我環(huán)境搭建搞了好久，最后是小姐姐陪我搞好的。真的走到那里都是學(xué)習(xí)的過(guò)程。我覺(jué)得堅(jiān)毅真的是世界上特別珍貴的品質(zhì)，渴望擁有!!!

最后祝大家身體健康，快快樂(lè)樂(lè)。最近打球腳崴了，我哭暈1s，真的是太久不運(yùn)動(dòng)了，而且跟我對(duì)手的朋友是男的，打球的時(shí)候覺(jué)得我力氣小。我？？我小丁是能忍的人？之后的每一拍都把命給拍出去的打。最后一個(gè)小時(shí)的羽毛球腳崴了全身酸痛，跛著腳去醫(yī)院。happy ending!