如何用vue完成微信微信官方账号网页(vue写微信官方账号)

有一个H5页面功能，一个比较简单的问卷功能，嵌套在我们的微信微信官方账号里。选择的技术堆栈是Vue。同时使用微信的登录和分享界面。

主要功能和遇到的问题:用参数跳转从左向右切换动画路线到移动终端引入外部字体样式，使用htmtl2canvas截图功能，使用微信界面(前端部分)适配移动终端屏幕，多次点击一个页面只执行一次。ios使用输入框时，键盘弹出掩盖按钮问题，包项目遇到静态资源加载问题。1.从左到右切换动画--。先是考虑用vue的手机动画库，看了很久，但是项目很小，就放弃了。我首先考虑的是过渡效应。并找到了相关的文章参考。代码如下:

` lt模板 gt ltp id = app gt lt过渡:name = 'fade - # 39；+(方向= = = # 39；前进 # 39；？'最后 # 39；:'下一个 # 39；) gt ltrouter -view gt； lt/router -view gt； lt/transition gt； lt/p gt； lt/template gt； lt脚本 gt导出默认{ name: ；app ，数据:()= gt{ return { direction: ；"};}，观看:{ $route(to，from){ let to name = to . name；const to index = to . meta . index；const from index = from . meta . index；this.direction = toIndex ltfromIndex？"向前 : "；} } } lt/script gt； lt样式范围 gt. fade-last-enter-active {动画:0.6s内bounce -；} . fade -next -enter -active { animation:bounce -out 0.6s；} @ key frames bounce -in { 0% { transform:translate x(-100%)；} 100% { transform:translate x(0 rem)；} } @ key frames bounce -out { 0% { transform:translate x(100%)；} 100% { transform:translate x(0 rem)；} } lt/style gt；`参考:https://yq.aliyun.com/article....

2.用参数jump路由这是为了记录它。有三种方法。1.直接将route-link:中的参数用于:

ltrouter -link:to = ；{姓名: # 39；首页 # 39；，查询:{ id:1 } } ； gt2.在这里输入参数。$router.push:

使用带参数的查询:类似get的参数将被拼接到url。

这个。$ router . push({ name: # 39；首页 # 39；，查询:{ id: # 39；1'}})这个。$ router . push({ path: # 39；/home # 39；，查询:{ id: # 39；1'}})使用params带参数:只能使用name，类似于post参数，不会拼接。

这个。$ router . push({ name: # 39；首页 # 39；，params:{ id: # 39；1'}})参考链接:https://blog.csdn.net/jiandan...

3.在移动端引入外部字体样式。我以前都是直接从字体库下载字体。ttf/。otf等等。在资产文件下创建字体文件，并将所有字体文件放入。创建新的。css文件，相当于注册了你下载的字体。您可以自定义字体的名称，但通常是根据以前的名称。Src是文件所在的路径。

只要用在你需要的地方:font -family:“方平 4.使用htmtl2canvas截图功能，先下载html2canvas包:CNPM I html 2 canvas -s/import html 2 canvas from # 39；html2canvas # 39；查看文档:点击进入直接生成图片。使用微信长按保存图片功能保存settimeout (() = >)。{//这里用了定时器，因为页面一加载我就显示图片。如果图片有一段时间没有生成，html 2 canvas(document . query selector(" # top ；)，{useCORS: true，//要不要尝试使用CORS从服务器加载图像logging: false，//删除打印的日志allow tain:false//这个和第一个很像但是不能同时使用。同时使用toDataURL将无效})。然后(canvas = >；{ let imageSrc = canvas . toda taurl( ；图片/jpg ；);//更改img的路径是this . image src = image src；//定义一个动态:src现在赋给src。图片会显示这一点。$ refs . top . style . display = " none ；；//使页面上的其他元素消失，只显示图片})；}, 1000);题外话:当时这么做的时候真的有点傻。官网文档太少。当时遇到了图片的跨域问题，找了很久。也许我没有仔细看陈安官网的参数配置文件。浪费了很多时间，哭了。

参考:http://html2canvas.hertzen.com/

5.使用微信接口(前端部分)我们主要使用微信SDK接口进行登录和分享功能。先看微信公众平台，做好权限后配置后台。前端只需要请求数据并进行一些配置。这里主要介绍与好友分享和好友分享的功能:

this . code = location . href；//获取codeif(this . code . lastingdexof(" code = ；) != -1){(this . code = this . code . substring(this . code . lastindexof( ；code = )+ 5，this . code . lastindexof( ； 国家 ) ))，这个。$axios。获取( *******8?code = 。concat (this.code))。然后(function(t){//获取参数local storage . setitem( ；unionid ，t . data . union id)；local storage . setitem( ；openid ，t . data . OpenID)；local storage . setitem( ；昵称 ，t . data . nickname)；local storage . setitem( ；headimgurl ，t . data . headimgurl)；});} this . URL = encodeURIComponent(location . href . split( ；#/ ；)[0]);//获取配置的路径this。$ axios . get(` * * * * * * * * * *？url=${this.url} `)。然后(res = gt{ this . RES = RES . data；Wx.config({ debug: false，//打开调试模式，appId: res.data.appId，//必选，企业编号的唯一标识，此处填写企业编号CORPID时间戳:res.data.timest，//必选，生成的时间戳non centr:RES . data . non centr，//必选，生成的随机字符串签名:res.data.signature，//必选。有关签名，请参见附录1 jsApiList:[" updateAppMessageShareData ；， updateTimelineShareData ， showMenuItems ， hideAllNonBaseMenuItem ]//必选，要使用的JS接口列表，所有JS接口见附录2 })；//参考公共平台编写:wx . ready(function(){ wx . hideanlonbasemenuitem()；wx . show menuitems({ menu list:[ ；菜单项:share:app message ；， 菜单项:共享:时间线 ， menuItem:收藏夹 ]//要显示的菜单项，所有菜单项见附录3)；wx . updatetimelinesharedata({ title: ；* * * * * ，//分享标题desc:“* * * * * * * * * ；，//分享描述链接:“* * * * * * * * * * * ；、//分享链接，链接的域名或路径必须与当前页面对应的微信官方账号JS安全域名一致。imgUrl:" * * * * * ；，//共享图标成功:function () {* * * *执行后执行的回调} })；wx . updateappmessagesharedata({ title: ；* * * * * * * ，//分享标题desc:“* * * * * * * * * ；，//分享描述链接:“* * * * * * * * * 、//分享链接，链接的域名或路径必须与当前页面对应的微信官方账号JS安全域名一致。imgUrl:" * * * * * * * *，//分享图标成功:function(){ * * * * * * * * })；});}6.手机屏幕适配。现在我们用rem进行手机屏幕适配。之前也看到有felxable.js的库，然后查了一下，说有更好的作者放弃了，给我们提供了链接。哈哈哈哈真可爱。花点时间仔细看看。公司下一个项目又来了，我真的要加班很久了。为了按时完成项目，我有点厌倦了一个新项目刚完成就马上打开。这个应该是个APP，我一点经验都没有。嗷，只能硬着头皮干了，但还是要吃顿正经的。可怜的鲜狗不敢奢望。这是快速眼动适应的代码:

//默认情况下，调用一次设置setHtmlFontSize()；Sethtmlfontsize () {//1。获取当前屏幕的宽度var window width = document . documentelement . offsetwidth；// console.log(窗口宽度)；// 2.定义标准屏幕宽度假设375 var standardWidth = 375// 3.定义标准屏幕根元素的字体大小。假设100 px 1 rem = 100 px 10 px = 0.1 rem 1px 0.01 rem var标准字体大小= 100；// 4.计算当前屏幕对应的根元素的字体大小varnow font size = window width/standard width * standard font size+ # 39；px # 39；//console . log(now fontsize)；// 5.将当前计算的根元素的字体大小设置为html文档。query selector( # 39；html # 39)、style.fontSize = nowFontSize} // 6.js window . addevent listener( # 39；)添加了一个屏幕宽度改变的事件，并且屏幕改变触发了根元素的字体大小的计算。调整大小 # 39；，setHtmlFontSize)；把这段代码引入main.js，然后用转换器把px转换成rem。

7.其他问题总结。1.点击事件。多次单击并仅执行一次:

您可以使用。有许多有用的修饰语。有时间可以去看看~ ~

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

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

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

我用的是vue-cil3。他把所有的配置文件都放在node_modules里，官方文档里有介绍。如果需要修改配置，创建一个新的vue.config.js文件，它会自动覆盖以前的文件。主要修改为:publicPath:“。/ ；，文档没有baseUrl，现在都用publicPath，用文档配置就可以了。

相关教程:vue框架视频教程以上是如何使用Vue完成微信微信官方账号网页的详细内容。请多关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 微信硬件H5开发的控制灯（微信小程序控制onenet智能灯）
• 如何使用vue完成微信官方账号页面（vue开发微信官方账号页面）
• 微信H5硬件开发的控制灯光

本文由主机参考刊发，转载请注明：如何用vue完成微信微信官方账号网页(vue写微信官方账号) https://zhujicankao.com/79363.html