使用vue完成微信公众号网页小记(推荐)

前言：

公司最近有一个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'}})

参考链接：https://www.Vevb.com/article/160401.htm

3.移动端引入外部字体样式

移动端引入外部样式，我用的是直接把字体库的字体下载下来，一般后缀为 .ttf/.otf等。在asset文件下创建 fonts文件，将字体文件全部放入。

再新建一个.css文件，相当于注册你下载的字体，可以自定义给字体们命名，不过一般还是按照以前的名字。src是文件所在的路径。