公司最近有一个H5页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。选用的技术栈是Vue。同时用到了微信的登录和分享接口。ps:本人小白，如果有问题希望大家能指出来，写文章不止是为了记录，还是为了发现自己的问题。谢谢大噶！！！
主要功能以及遇到的问题：
左右切换动画
路由带参数跳转
移动端引入外部字体样式
使用htmtl2canvas截图功能
使用微信接口(前端部分)
移动端屏幕适配
移动端点击一个页面点击多次只执行一次问题
ios使用输入框的时键盘弹起来掩盖住按钮问题
打包项目遇到静态资源加载问题
1.左右切换动画
--首先我考虑到用vue的移动端动画库，看了好久，但是项目非常小，就放弃了这个选择自己开始手写。首先我考虑到的是过渡效果。并且找到了相关的文章参考。代码如下：
`<template> <div> <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'}})
参考链接：https://www.jb51.net/article/160401.htm
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官网的参数配置文件。浪费了很多时间，哭哭。
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.移动端屏幕适配