如何使用vue完成微信公众号网页

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

1. 左右切换动画
2. 路由带参数跳转
3. 移动端引入外部字体样式
4. 使用htmtl2canvas截图功能
5. 使用微信接口(前端部分)
6. 移动端屏幕适配
7. 移动端点击一个页面点击多次只执行一次问题
8. ios使用输入框的时键盘弹起来掩盖住按钮问题
9. 打包项目遇到静态资源加载问题

1.左右切换动画

--首先我考虑到用vue的移动端动画库，看了好久，但是项目非常小，就放弃了这个选择自己开始手写。首先我考虑到的是过渡效果。并且找到了相关的文章参考。代码如下：

`<template>   <p id="app">     <transition :name="'fade-'+(direction==='forward'?'last':'next')">       <router-view></router-view>     </transition>   </p> </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>`

参考：https://yq.aliyun.com/article...

2.路由带参数跳转

<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://blog.csdn.net/jiandan...

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

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

   

2. 在需要的地方使用就可以了：font-family："PingFang"

4.使用htmtl2canvas截图功能，转换成图片

1. 先下载html2canvas包： cnpm i html2canvas -S / import html2canvas from 'html2canvas';
2. 查看文档 ： 点击进来直接生成图片 利用微信长按保存图片功能来保存

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官网的参数配置文件。浪费了很多时间，哭哭。

参考链接：http://html2canvas.hertzen.com/

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.移动端屏幕适配

//默认调用一次设置  setHtmlFontSize();    function setHtmlFontSize() {      // 1. 获取当前屏幕的宽度      var windowWidth = document.documentElement.offsetWidth;      // console.log(windowWidth);      // 2. 定义标准屏幕宽度 假设375      var standardWidth = 375;      // 3. 定义标准屏幕的根元素字体大小 假设100px  1rem=100px  10px = 0.1rem  1px 0.01rem      var standardFontSize = 100;      // 4. 计算当前屏幕对应的根元素字体大小      var nowFontSize = windowWidth / standardWidth * standardFontSize + 'px';      // console.log(nowFontSize);      // 5. 把当前计算的根元素的字体大小设置到html上      document.querySelector('html').style.fontSize = nowFontSize;  }  // 6. 添加一个屏幕宽度变化的事件  屏幕变化就触发变化根元素字体大小计算的js   window.addEventListener('resize', setHtmlFontSize);

把这段代码引入到main.js里面，然后使用转换器把px转成rem 就可以了。

7.其他问题汇总

1.点击事件点击多次只执行一次：

可以使用.once修饰符 还有很多有用的修饰符，大家有时间可以去看看~~

2.使用ios输入框的时候，键盘弹起来回遮挡下面的按钮等元素的事件：

我用的是vue-cil3，他把配置文件都放在了node_modules中，官方文档上面有介绍，如果需要修改配置，就新建一个vue.config.js文件，他会自动的覆盖之前的文件。主要是修改成： publicPath: "./"，文档已经没有baseUrl，现在全部使用publicPath,跟着文档配置就ok了。

相关教程：Vue框架视频教程

以上就是如何使用vue完成微信公众号网页的详细内容，更多内容请关注技术你好其它相关文章！