使用vue完成微信微信官方账号网页笔记(推荐)

前言：

最近公司有一个H5页面功能，还有一个比较简单的问卷功能，嵌套在我们微信的微信官方账号里。选择的技术堆栈是Vue。同时，我们使用微信的登录和共享界面。Ps:是个白人。如果有问题，希望你能指出来。写文章不仅仅是为了记录，更是为了发现自己的问题。谢谢你，达加！

主要功能和遇到的问题：

切换带参数的动画路由跳转到移动终端引入外部字体样式。使用htmtl2canvas截图功能。使用微信界面(前端部分)。移动终端屏幕适应移动终端。点击页面。仅单击一次。ios使用输入框时，键盘弹出掩盖按钮问题。打包项目遇到静态资源加载问题。1.左右切换动画。

——首先考虑使用vue的移动动画库，看了很久，但是项目很小，所以放弃了这个选择，开始自己写。首先，我考虑过渡效应。并找到了相关的文章参考。代码如下：

` template div id='app '过渡： name=' fade-'(方向==='forward '？'last ' : ' next ')' router-view/router-view/transition/div/templatescript export default { name : ' app '，data :()={ return { direction : ' ' }；}，watch: { $route(to，from){ let toName=to . name；const to index=to . meta . index；const FrOm INDEX=from . meta . INDEX；this . direction=to index from index？转发“:”；} } }/script style scoped . fade-last-enter-active { animation : bounce-in 0.6s；}.淡出-下一次进入-激活{ animation:弹开0.6s} @关键帧弹入{ 0% { transform : translateX(-100%)；} 100% { transform : translateX(0 rem)；} } @关键帧反弹{ 0% { transform : translateX(100%)；} 100% { transform : translateX(0 rem)；}}/style2。带参数跳转的路由

这就是记录，有三种方式。

1.直接在route-link :中获取参数：

router-link : to=' { name : ' home '，query: {id33601}}' 2。取其中的参数。$路由器. push:

使用带有参数：的查询类似于获取。参数将被拼接到url

这个。$ router.push ({name:' home '，query: {id3360' 1'})这。$ router.push ({path3360'/home '，query: {id3360' 1'})使用params tape

这个。$ router.push ({name:' home '，params: { id3360 ' 1 ' })参考链接：https://www.jb51.net/article/160401.htm

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

外部风格介绍到移动终端，我用直接从字体库下载字体，一般后缀是。ttf/。otf等。在资源文件下创建字体文件，并将所有字体文件放入。

创建新的。css文件，这相当于注册你下载的字体。您可以自定义要命名的字体，但它们通常以前面的字体命名。Src是文件所在的路径。

只要在你需要的地方使用它：字体系列：“方平”

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

首先下载html2canvas包：cnpm I HTML 2 canvas-s/从“HTML 2 canvas”导入HTML 2 canvas；

查看文档：点击进入直接生成图片，使用微信长按保存图片功能保存

SetTimeout(()={//这里用的是定时器，因为页面一加载，我就会显示图片。为了防止图片在给定时间内生成，html 2 canvas(document . queryselector(# top))，{usecors: true，//尝试使用cors加载图像日志： false，//从服务器中，//删除打印的日志allowtaint 3360 false//这与第一种类似，但不能同时使用。使用toDataURL将无效})。然后(canvas={ let image src=canvas . todaytaul(' image/jpg ')；//更改img this.imageSrc=imageSrc的路径；//定义一个动态：src现在分配给src，图片会显示这个。$ refs . top . style . display=“none”；//让页面上的其他元素消失，只显示图片})；}, 1000);题外话：我做这个的时候真的很迷茫。官网文档太少，遇到图片跨域问题。我找了很久。可能我没有仔细配置Jan官网的参数文件。浪费很多时间，哭。

5.使用微信界面(前端部分)

我们使用微信SDK界面主要是为了登录和分享功能。首先我们在微信公众平台上看，做好权限后配置后端。前端只需要问数据，可以做一些配置。这里主要介绍一下与朋友分享和与朋友圈分享的功能：

this . code=location . href；//获取代码if (this。code.lastindexof ('code=')优先！=-1){(this . code=this . code . substring(this . code . last index of(' code=')5，this.code.lastIndexOf('state '))，this。$axios。get(' * * * * * * * * 8？代码='。concat(这个。代码))。然后(函数(t){//获取后端发送的参数localstorage.setitem ('union id '，t . data . union id)；localStorage.setItem('openid '，t . data . open id)；localStorage.setItem('昵称，t.data .昵称)；local STORAGE . SetItem(' head imgurl '，t . data . head imgurl)；});} this . URL=encodeURIComponent(location . href . split(' #/')[0])；//获取此的配置路径。$ axios.get (` * * * * * * * *？url=${this.url} `)。然后(RES={ this . RES=RES . data；wx . config({ debug 3360 false，//开始调试模式，appId: res.data.appId，//必选，企业编号的唯一标识，其中企业编号corpid timestamp : RES . data . timestamp填写，//必选。生成签名的时间戳non crest : RES . data . non crest，//必选，生成签名的随机字符串signature re : RES . data . signature，//必选，已签名，参见附录1 jsapi list :[' updateappmessagesharedata '，' updatetimelinesharedata '，' showmenuitems '，' hidalnonbasemoneuitem ']//必选，要使用的JS接口列表，参见附录2所有JS接口列表)；//参考公共平台：wx . ready(function(){ wx . hidealnonbasemanuitem()；Wx。showmenuitems({ menulist :[' menulist: share 3360 app message '，' menuitem3360share3360timeline '，' menuitem 3360收藏夹'))//要显示的所有菜单项见附录3)；wx . updatetimelinesharedata({ title : ' * * * * * '，//共享title desc3360' * * * * * * *，//共享描述链接3360' * * * * * * * '，//共享链接。链接域名或路径必须与当前页面对应的微信官方账号JS安全域名一致。imgUrl: '***** '，//共享图标成功3360 function(){ * * * * * *执行后回调} })；wx . updateappmessagesharedata({ title :' * * * * * * '，//共享标题desc3360 ' * * * * * * *，//共享描述链接： ' * * * * * *，//共享链接，链接域名或路径必须与当前页面对应的微信官方账号JS安全域名一致。imgUrl: ' * * * * * * * * * *，//共享图标成功3360 function(){ * * * * * * * * })；});}6.移动屏幕适配

现在我们调整移动屏幕。我用雷姆。之前看到有一个felxable.js库。后来我查了一下，说有更好的作者放弃了，给我们提供了链接。哈哈哈哈真可爱。我要花时间仔细看看。公司下一个项目又来了，我真的加班很久了。为了如期完成这个项目，我在完成后立即开始了一个新项目。我有点累了。这个应该是APP，我一点经验都没有。我只能咬紧牙关去做，但还是要吃下去。可怜的新鲜狗不能指望它。

让我们分享快速眼动适应的代码：

//set setHtmlFontSize()默认情况下只调用一次；函数setHtmlFontSize() {//1。获取当前屏幕的宽度var window width=document . document element . offset with；//console . log(window width)；//2.假设375 var standardWidth=375，定义标准屏幕宽度；//3.定义标准屏幕根元素的字体大小，假设100 px 1 rem=100 px 10 px=0.1 rem 1px 0.01 rem var标准字体大小=100；//4.计算当前屏幕对应的根元素的字体大小。var now fontsize=窗口宽度/标准宽度*标准fontsize ' px//console . log(NowFontSize)；//5.将当前计算的根元素的字体大小设置为document . queryselector(' HTML '). style . font size=now font size on HTML；} //6.添加屏幕宽度发生变化的事件。JSWindow。AddEventListener ('resize '，sethtmlfontsize)，它触发根元素字体大小的计算；将这段代码引入main.js，然后使用转换器将px转换为rem。

7.其他问题概述

单击事件多次单击仅一次：

您可以使用。曾经的修饰语，还有很多有用的修饰语，有时间可以看看~ ~

使用ios输入框时，键盘会来回跳动以阻止以下按钮和其他元素的事件：

我们可以注册一个失焦事件进行输入，失焦时设置document . body . scroltop=0；

打包项目遇到静态资源不显示或路径错误的现象：

我用的是vue-cil3，他把所有的配置文件都放在node_modules里面，官方文档里有描述。如果需要修改配置，

只需创建一个新的vue.config.js文件，它就会自动覆盖以前的文件。主要修改为：public path :’。/',

文档中没有baseUrl，现在都使用publicPath，按照文档配置就可以了。

结束时间：

以上就是我遇到的所有问题，因为项目比较小，所以没有遇到太多问题。过程真的很可悲。我独立解决问题的能力真的一般。不知道自己有没有当程序员的潜质。当问题出现时，我非常焦虑。解决他们一段时间后，还是没有办法，我会更加焦虑。在上一家公司实习的时候，我的组长就指出了这个问题，我真的反思了很久。目前这家公司还在实习，但是前端只有一个人，小姐姐人很好，但是不需要vue框架，只能自己一个人解决问题。前端妹子是个硬汉。遇到问题，她真的一个个找，不放弃的那种。一开始，我们必须使用flutter，我已经构建环境很长时间了。最后，她陪我做好了。真正去那里是一个学习的过程。我觉得毅力真的是世界上一种宝贵的品质，我渴望拥有它！