VPS参考测评推荐
专注分享VPS主机优惠信息
hostkvm优惠促销活动
zji优惠促销活动
衡天云优惠活动
亚马逊云aws.amazon.com最新优惠活动
华纳云最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

有一个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是文件所在的路径。如何用vue完成微信微信官方账号网页(vue写微信官方账号)-主机参考

只要用在你需要的地方: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完成微信微信官方账号网页的详细内容。请多关注主机参考其他相关文章!

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

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

【腾讯云】爆款2核2G云服务器首年40元,企业首购最高获赠300元京东卡
打赏
转载请注明原文链接:主机参考 » 如何用vue完成微信微信官方账号网页(vue写微信官方账号)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!