使用使用vue完成微信公众号网页小记完成微信公众号网页小记(推荐推荐)
公司最近有一个H5页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。这篇文章主要介绍
了使用vue完成微信公众号网页小记,需要的朋友可以参考下
前言：
公司最近有一个H5页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。选用的技术栈是Vue。同时用到了
微信的登录和分享接口。ps:本人小白，如果有问题希望大家能指出来，写文章不止是为了记录，还是为了发现自己的问题。
谢谢大噶！！！
主要功能以及遇到的问题：
1. 左右切换动画
2. 路由带参数跳转
3. 移动端引入外部字体样式
4. 使用htmtl2canvas截图功能
5. 使用微信接口(前端部分)
6. 移动端屏幕适配
7. 移动端点击一个页面点击多次只执行一次问题
8. ios使用输入框的时键盘弹起来掩盖住按钮问题
9. 打包项目遇到静态资源加载问题
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);
}
}
weixin_38728624
- 粉丝: 4
- 资源: 882
我的内容管理
收起
- 我的资源
快来上传第一个资源
我的收益 登录查看自己的收益
我的积分
登录查看自己的积分
我的C币
登录后查看C币余额
我的收藏 
我的下载 
下载帮助
会员权益专享
最新资源
- ARM Cortex-A(armV7)编程手册V4.0.pdf
- ABB机器人保养总结解析.ppt
- 【超详细图解】菜鸡如何理解双向链表的python代码实现
- 常用网络命令的使用 ipconfig ping ARP FTP Netstat Route Tftp Tracert Telnet nslookup
- 基于单片机控制的DC-DC变换电路
- RS-232接口电路的ESD保护.pdf
- linux下用time(NULL)函数和localtime()获取当前时间的方法
- Openstack用户使用手册.docx
- KUKA KR 30 hA,KR 60 hA机器人产品手册.pdf
- Java programming with JNI
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
评论0