如何使用vue完成微信官方账号页面（vue开发微信官方账号页面）

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

主要功能和遇到的问题:用参数切换左右动画路由、跳转到移动终端、引入外部字体样式、使用htmtl2canvas截图功能、使用微信界面（前端部分）适配移动终端屏幕、多次点击一个页面且仅执行一次。ios使用输入框时，键盘会弹出来掩盖按钮问题。1.切换左右动画--首先，我考虑过使用vue的移动终端动画库，我看了很长时间，但项目很小，所以我放弃了。首先，我考虑过渡效应。并找到了相关的文章参考文献。代码如下:

`

。fade -last -enter -active { animation:bounce -in 0.6s；}。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）；}} `参考资料:https://yq.aliyun.com/article...

2.路由带参数跳转这是为了记录，有三种方式。1.直接获取route -链接中的参数:

2.在这里输入参数。$router.push:

使用带参数的查询:类似于get pass参数的参数将在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是文件所在的路径。

只要在必要的地方使用它:字体-系列:“方平”4。使用htmtl2canvas的截图功能将其转换为图片。先下载html2canvas包:CNPM I HTML 2 canvas -s/import HTML 2 canvas from‘HTML 2 canvas‘；查看文档:点击进入直接生成图片。使用微信长按保存setTimeout（（）=》{//这里使用计时器是因为我会在页面加载后立即显示图片。为了防止图片生成，请给HTML 2 canvas（document。查询选择器（“# top“）。{useCORS: true，//是否尝试加载图像日志记录:false使用CORS的服务器:false，//删除打印的日志allow tain:false//这与第一个类似，但如果不能同时使用它，它将无效}）。然后（canvas =》{ let image src = canvas。toda URL（“image/jpg“）；//切换到img this.imageSrc = imageSrc的路径；//定义一个动态:src现在分配给src，图片将显示这一点。$ 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？代码=“。concat（这。代码）。然后（function（t）{//获取后端发送的参数local storage . setitem（“union id”，t . data . union id）；local storage . setitem（“OpenID“，t . data . OpenID）；localStorage.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 =》{ this . RES = RES . data；wx . config（{ debug:false，//打开调试模式，appId: res.data.appId，//必需，企业编号的唯一标识，此处填写企业编号企业时间戳:res.data.timestamp，//必需，时间戳non centr:RES . data . non centr，//必需，随机字符串签名:res.data.signature，//必需，签名，请参见附录1 jsapi列表:【“updateappmessagesharedata”、“updatetimelinesharedata”、“showmenuitems”、“hideanlonbasemenitem”】//必需，JS的列表//参考公共平台编写:wx . ready（function（）{ wx . hideanlonbasemenitem（）；wx . showmenuitems（{ menulist:【“menuitem:share:app message“、“menuitem: share: timeline“、“menuitem:favorite“】//要显示的菜单项，有关所有菜单项，请参见附录3）；wx . updatetimelinesharedata（{ title:“* * * * *”，//分享标题desc:“* * * * *”，//分享描述链接:“* * * * *”，//分享链接，链接的域名或路径必须与当前页面对应的微信官方账号JS安全域名imgur:“* * * * *”，//分享图标成功:function（）{ * * * * *执行后回调} }）；wx . updateappmessagesharedata（{ title:“* * * * *”，//分享标题desc:“* * * * *”，//分享描述链接:“* * * * *”，//分享链接，链接域名或路径必须与当前页面对应的微信官方账号JS安全域名一致imgur:“* * * * *，//分享图标成功:function（）{ * * * * * * }）；});6.手机屏幕适配现在我们的手机屏幕适配，我用的是rem。之前还看了有一个felxable.js库，后来我去查了一下，说是一个比较好的作者放弃了，给我们提供了一个链接。哈哈哈哈真的很可爱。我要花时间仔细看看。公司的下一个项目又要来了。我真的加班很久了。为了如期完成项目，我在项目完成后立即开始了新的项目。我有点累了。这应该是一个APP，我完全没有经验。我只能硬着头皮去做，但还是要吃得恰到好处。可怜的新鲜狗不敢指望它。让我们分享快速眼动适应的代码:

//默认情况下通过调用一次来设置setHtmlFontSize（）；函数setHtmlFontSize（）{//1。获取当前屏幕的宽度var window width = document . document element . offsetwidth；// console.log（窗口宽度）；// 2.定义标准屏幕宽度并假设375 var standardWidth = 375// 3.定义标准屏幕根元素的字体大小。假设100px 1 rem = 100px 1 px = 0.1 rem1px 0.01 remvar标准字体大小= 100；// 4.计算当前屏幕对应的根元素的字体大小Varnow Fontsize = window width/standard width * standard Fontsize+& # 39；px & # 39；//console . log（nowFontSize）；// 5.将当前计算的根元素的字体大小设置为document . query selector（& # 39；html & # 39）style . font size = now font size；} // 6.添加屏幕宽度改变的事件。如果屏幕发生变化，它将触发js window . addevent listener（& # 39；调整大小& # 39；，setHtmlFontSize）；将这段代码引入main.js，然后使用转换器将px转换为rem。

7.其他问题概述1。点按事件并点按多次，仅点按一次:

您可以使用。有许多有用的修饰语。有空可以去看看他们~ ~

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

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

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

我用的是vue-cil3，他把所有的配置文件都放在node_modules里，官方文档里有描述。如果需要修改配置，将创建一个新的vue.config.js文件，他将自动覆盖以前的文件。主要更改为:publicPath:“。/，文档没有baseUrl，现在都使用publicPath，只需遵循文档配置即可。

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

以上就是如何使用vue完成微信微信官方账号网页的详细介绍。更多资讯请关注主机参考其他相关文章！

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

• 如何使用微信小程序中的车牌号输入法（如何使用微信小程序中的车牌号输入法进行打印）
• 什么是骨架屏？
• 微信小程序开发中var that =this的基本用法
• 回想一下Android智能手机上的微信小程序白屏问题（手机上打开小程序时白屏）。
• 可以转发微信小程序给好友（微信小程序可以转发分享到朋友圈吗？）

本文由主机参考刊发，转载请注明：如何使用vue完成微信官方账号页面（vue开发微信官方账号页面） https://zhujicankao.com/104156.html