使用vue完成微信公众号网页笔记

.fade-last-enter-active{animation:bounce-in0.6s;}.fade-next-enter-active{animation:bounce-out0.6s;}@keyframes反弹-in{0%{转换：translateX(-100%);}100%{转换：translateX(0rem);}}@keyframes反弹{0%{transform:translateX(100%);}100%{转换：translateX(0rem);}}前言：公司最近有一个H5页面功能，一个比较简单的问卷调查功能，嵌套在我们的微信公众号中。选择的技术栈是Vue。同时使用微信的登录和分享接口。ps：本人新手，如有疑问，希望大家指出。写文章不仅仅是为了记录，也是为了发现自己的问题。谢谢达喀尔！！！主要功能及遇到的问题：左右切换动画路由带参数跳转移动端导入外部字体样式使用htmtl2canvas截图功能使用微信界面（前半部分）移动端屏幕适配移动端多次点击一个页面只执行一次ios时的问题使用输入框，键盘弹出遮住按键问题。打包项目遇到静态资源加载问题。1.左右切换动画--首先考虑使用Vue的移动端动画库。看了半天，项目很小，干脆放弃这个选项，开始手写。我首先考虑的是过渡效果。并找到相关文章参考。代码如下：`.fade-last-enter-active{animation:bounce-in0.6s;}.fade-next-enter-active{animation:bounce-out0.6s;}@keyframes反弹-in{0%{转换：translateX(-100%);}100%{转换：translateX(0rem);}}@keyframes反弹{0%{transform:translateX(100%);}100%{转换：translateX(0rem);}}`参考：https://yq.aliyun.com/article...2.带参数跳转的路由这个是用来记录的，一共有三个方法1.直接在route-link:to中包含参数：2.在this.$router.push参数中添加参数:带参数使用query：类似get传过来的参数会拼接到urlthis.$router.push({name:'home',query:{id:'1'}})this.$router.push({path:'/home',query:{id:'1'}})useparamswithparameters:只能使用name，类似post参数不会拼接this.$router.push({name:'home',params:{id:'1'}})参考链接：https://blog.csdn.net/jiandan...3、移动端导入外部字体样式。移动端导入外部样式。我直接用字体库字体下载下来后，一般后缀是.ttf/.otf等。在asset文件下创建一个fonts文件，把所有的字体文件放在里面。新建一个.css文件，相当于注册你下载的字体，可以自定义字体的名字，但一般沿用之前的名字。src是文件所在的路径。在需要的地方使用就行：font-family:"PingFang"4、使用htmtl2canvas截图功能，将其转成图片。先下载html2canvas包：cnpmihtml2canvas-S/importhtml2canvasfrom'html2canvas';查看文档：点击直接进入Generatepictures使用微信长按功能保存图片setTimeout(()=>{//这里使用定时器是因为我页面一加载就显示图片，为了防止图片生成，给点时间html2canvas(document.querySelector("#top"),{useCORS:true,//尝试使用CORS从服务器加载图片logging:false,//删除打印日志allowTaint:false//这个和第一个类似但是不能同时使用toDataURL会失效}).then(canvas=>{letimageSrc=canvas.toDataURL("image/jpg");//img的路径this.imageSrc=imageSrc;//定义一个dynamic:src现在赋值给src图片将显示this.$refs.top.style.display="none";//使页面上的其他元素消失，只显示图片});},1000);愚蠢的。官网文档太少。当时遇到了一个图片跨域的问题。我找了很久。可能是我没有仔细查看Jan官网的参数配置文件。浪费了很多时间，哭啊哭啊。参考链接：http://html2canvas.hertzen.com/5。使用微信接口（前端部分）。我们使用微信SDK接口主要是做登录和分享功能。然后后台配置。前端只需要请求数据，做一些配置即可。这里主要介绍分享给好友和分享朋友圈的功能：this.code=location.href;//先获取代码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,//必填，企业ID的唯一标识，这里填写企业号corpidtimestamp:res.data.timestamp,//必填，生成签名的时间戳nonceStr:res.data.nonceStr,//必填，生成签名的随机字符串signature:res.data.signature,//必填，签名，见附1jsApiList:["updateAppMessageShareData","updateTimelineShareData","showMenuItems","hideAllNonBaseMenuItem"]//必填，需要用到的JS接口列表，所有JS接口列表见附录2});//参考公共平台编写：wx.ready(function(){wx.hideAllNonBaseMenuItem();wx.showMenuItems({menuList:["menuItem:share:appMessage","menuItem:share:timeline","menuItem:favorite"]//要显示的菜单项，所有菜单项见附录3});wx.updateTimelineShareData({title:"******",//sharetitledesc:"********",//分享描述链接:"**********",//分享链接，链接域名或路径必须与当前对应的公众号JS安全域名一致pageimgUrl:"******",//分享图标成功:function(){*****执行结束后执行的回调}});wx.updateAppMessageShareData({title:"********",//分享标题desc:"*********",//分享描述链接:"**********",//分享链接，域名或链接路径必须与当前页面对应的公众号JS安全域名一致imgUrl:"*********,//分享图标成功:function(){*****}});});}6.手机屏幕适配下面我们适配手机屏幕，我用的是rem，看到之前有个felx后来查了下able.js的库，说有更好的作者放弃了，给我们提供了一个链接。哈哈哈哈，实在是太可爱了。我要花时间仔细看看。公司下一个项目又来了。真的加班很久，为了按期完成项目，完成后马上开始新的项目，有点累，这应该是个APP，我一点经验都没有，只能咬咬牙子弹做吧，我还得养家糊口，可怜的毕业狗不敢犯错。分享一下rem适配代码：//默认调用一次setHtmlFontSize()；functionsetHtmlFontSize(){//1.获取当前屏幕的宽度varwindowWidth=document.documentElement.offsetWidth;//console.log(windowWidth);//2.假设标准屏幕宽度为375varstandardWidth=375;//3.定义标准屏幕的根元素字体大小assuming100px1rem=100px10px=0.1rem1px0.01remvarstandardFontSize=100;//4.计算当前屏幕对应的根元素的字体大小varnowFontSize=windowWidth/standardWidth*standardFontSize+'px';//console.log(nowFontSize);//5.将当前计算的根元素的字体大小设置为html('html')上的document.querySelector.style.fontSize=nowFontSize;}//6.添加屏幕宽度变化事件。换屏会触发改变根元素字体大小计算的js。window.addEventListener('resize',setHtmlFontSize);将代码导入main.js，然后使用转换器将px转换为rem。7.其他问题总结click事件多次点击只执行一次：可以使用.once修饰符，还有很多有用的修饰符，有时间可以看看~~使用ios输入框时，键盘来回弹跳覆盖按钮等元素的底部事件：我们可以为输入注册一个失去焦点事件，失去焦点时设置document.body.scroolTop=0；打包项目遇到静态资源不显示或者路径错误的现象：我用的是vue-cil3，他把所有的配置文件都放在node_modules里面，官方文档有说明，如果需要修改配置，创建一个新建vue.config.js文件，它会自动覆盖之前的文件。主要修改为：publicPath:"./"，文档没有baseUrl，现在都用publicPath，按照文档配置就ok了。结尾：我遇到的问题大致就这些，因为项目比较小，所以没有遇到太多问题。过程真的很心酸。我独立解决问题的能力真的很一般。不知道是不是因为我没有做程序员的潜质。我在上一家公司实习的时候，我们组长指出这个问题后，我真的反思了很久。现在这家公司还在实习，但是前端只有一个人。小姐姐人很好，就是不会用vue框架，有问题只能自己解决。前台小姐姐是个很顽强的人。遇到问题，她真的是一条一条地寻找线索。不要放弃。一开始，我们会使用flutter。做环保很久了，终于小姐姐陪我把它做好了。的。这真的是一个学习过程。我觉得坚持真的是世界上非常宝贵的一种品质，我渴望拥有它！！！最后祝大家身体健康，幸福快乐。最近打球扭伤了脚踝，哭晕了1秒。真的是太久没有运动了，对手的朋友是男的。当我玩的时候，我觉得我很虚弱。我？？我小丁受得了？在那之后，之后的每一次射击都打破了镜头的生命。打羽毛球的最后一个小时，脚踝扭伤，全身酸痛，一瘸一拐的去了医院。美好的结局！