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

vue

微信公众号

13 浏览量更新于2023-03-03 评论收藏 101KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源评论

资源推荐

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

公司最近有一个H5页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。这篇文章主要介绍

了使用vue完成微信公众号网页小记,需要的朋友可以参考下

前言：

公司最近有一个H5页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。选用的技术栈是Vue。同时用到了

微信的登录和分享接口。ps:本人小白，如果有问题希望大家能指出来，写文章不止是为了记录，还是为了发现自己的问题。

谢谢大噶！！！

主要功能以及遇到的问题：

1. 左右切换动画

2. 路由带参数跳转

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

4. 使用htmtl2canvas截图功能

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

6. 移动端屏幕适配

7. 移动端点击一个页面点击多次只执行一次问题

8. ios使用输入框的时键盘弹起来掩盖住按钮问题

9. 打包项目遇到静态资源加载问题

1.左右切换动画左右切换动画

--首先我考虑到用vue的移动端动画库，看了好久，但是项目非常小，就放弃了这个选择自己开始手写。首先我考虑到的是过

渡效果。并且找到了相关的文章参考。代码如下：

`<template>

<router-view></router-view>

</transition>

</div>

</template>

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>

.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);

}

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余3页未读，立即下载

weixin_38728624

粉丝: 4
资源: 882

会员权益专享

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

评论0

会员权益专享

最新资源

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

评论0

vue项目例子

[转]用vue写的一个微信公众号菜单配置

详解Vue微信公众号开发踩坑全记录

vue3 微信公众号网页授权

vue 集成微信公众号 网页授权 #

vue微信公众号网页开发

vue 仿写微信公众号自定义菜单

vue实现微信公众号内嵌h5 授权

vue实现 微信公众号报警功能

vue项目接入微信 公众号

vue3开发微信公众号全流程

vue3 微信公众号ios禁止回弹

如何使用vue3 + ts + vant开发微信公众号

vue微信公众号实现拨打电话

vue怎么跳转微信公众号关注页面

vue 微信公众号分享朋友

大众房产经纪人微信公众号客户端的设计与实现的技术可行性

微信公众号前端vue环境搭建

vue微信公众号项目怎么运行在微信开发者工具里

vue微信公众号上传图片

会员权益专享

最新资源

vue 集成微信公众号网页授权 #

vue实现微信公众号报警功能

vue项目接入微信公众号