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