如何使用vue完成微信公众号网页

有一个H5页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。选用的技术栈是Vue。同时用到了微信的登录和分享接口。

主要功能以及遇到的问题： 左右切换动画 路由带参数跳转 移动端引入外部字体样式 使用htmtl2canvas截图功能 使用微信接口(前端部分) 移动端屏幕适配 移动端点击一个页面点击多次只执行一次问题 ios使用输入框的时键盘弹起来掩盖住按钮问题 打包项目遇到静态资源加载问题 1.左右切换动画

--首先我考虑到用vue的移动端动画库，看了好久，但是项目非常小，就放弃了这个选择自己开始手写。首先我考虑到的是过渡效果。并且找到了相关的文章参考。代码如下：

` template 
 p id= app 
 transition :name= #39;fade- #39;+(direction=== #39;forward #39;? #39;last #39;: #39;next #39;) 
 router-view /router-view 
 /transition 
 /template 
 script 
export default {
 name: app ,
 data: () = {
 return {
 direction: 
 watch: {
 $route(to, from) {
 let toName = to.name;
 const toIndex = to.meta.index;
 const fromIndex = from.meta.index;
 this.direction = toIndex fromIndex ? forward : 
 /script 
 style scoped 
.fade-last-enter-active {
 animation: bounce-in 0.6s;
.fade-next-enter-active {
 animation: bounce-out 0.6s;
@keyframes bounce-in {
 0% {
 transform: translateX(-100%);
 100% {
 transform: translateX(0rem);
@keyframes bounce-out {
 0% {
 transform: translateX(100%);
 100% {
 transform: translateX(0rem);
 /style `

参考：https://yq.aliyun.com/article...

2.路由带参数跳转

这个就是记录一下，有三种方法。
1.直接在route-link:to 中带参数：

立即学习“前端免费学习笔记（深入）”；

 router-link :to= {name: #39;home #39;, query: {id:1}} 

2.在this.$router.push中带参数：

使用query带参数: 类似于get传参 参数会拼接到url上面

this.$router.push({name: #39;home #39;,query: {id: #39;1 #39;}})
this.$router.push({path: #39;/home #39;,query: {id: #39;1 #39;}})

使用params带参数： 只能用name 类似于post 参数不会拼接

this.$router.push({name: #39;home #39;,params: {id: #39;1 #39;}})

参考链接：https://blog.csdn.net/jiandan...

3.移动端引入外部字体样式移动端引入外部样式，我用的是直接把字体库的字体下载下来，一般后缀为 .ttf/.otf等。在asset文件下创建
fonts文件，将字体文件全部放入。再新建一个.css文件，相当于注册你下载的字体，可以自定义给字体们命名，不过一般还是按照以前的名字。src是文件所在的路径。

在需要的地方使用就可以了：font-family："PingFang"4.使用htmtl2canvas截图功能，转换成图片先下载html2canvas包： cnpm i html2canvas -S / import html2canvas from html2canvas 查看文档 ： 点击进来直接生成图片 利用微信长按保存图片功能来保存

setTimeout(() = { //这里用定时器是因为页面一加载出来我就展示的是图片 为了防止图片还未生成 给点时间
 html2canvas(document.querySelector( #top ), {
 useCORS: true, //是否尝试使用CORS从服务器加载图像 
 logging: false,//删除打印的日志 
 allowTaint: false //这个和第一个很像 但是不能同时使用 同时使用toDataURL会失效
 }).then(canvas = {
 let imageSrc = canvas.toDataURL( image/jpg // 转行img的路径 
 this.imageSrc = imageSrc; //定义一个动态的 ：src 现在是赋值给src 图片就会展现
 this.$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?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, // 必填，企业号的唯一标识，此处填写企业号corpid
 timestamp: res.data.timestamp, // 必填，生成签名的时间戳
 nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
 signature: res.data.signature, // 必填，签名，见附录1
 jsApiList: [
 updateAppMessageShareData ,
 updateTimelineShareData ,
 showMenuItems ,
 hideAllNonBaseMenuItem 
 ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
 //参考公众平台写的：
 wx.ready(function() {
 wx.hideAllNonBaseMenuItem();
 wx.showMenuItems({
 menuList: [
 menuItem:share:appMessage ,
 menuItem:share:timeline ,
 menuItem:favorite 
 ] // 要显示的菜单项，所有menu项见附录3
 wx.updateTimelineShareData({
 title: ****** , // 分享标题
 desc: ********* , // 分享描述
 link: ********** , // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
 imgUrl: ****** , // 分享图标
 success: function() {
 ***** 执行结束后执行的回调
 wx.updateAppMessageShareData({
 title: ******* , // 分享标题
 desc: ********* , // 分享描述
 link: ********* , // 分享链接，该链接域名或路径必须与当前页面对应的公众号JS安全域名一致
 imgUrl: ********, // 分享图标
 success: function() {
 *******
 }

6.移动端屏幕适配

现在我们移动端屏幕适配，我用的是rem，之前也有看到说有一个felxable.js的库，后来去查，说是有更好的作者放弃了，并且给我们提供了链接，哈哈哈哈真的太可爱了。准备抽时间去仔细看看，公司下一个项目又来了，真的加班了好久，为了如期完成项目，完成之后立马就新开项目，有点心累，这把应该是APP了，完全没有任何经验，嗷嗷只能硬着头皮做，还是要恰饭的，可怜的应届狗不敢造次。
下面分享一下rem适配的代码：

//默认调用一次设置
 setHtmlFontSize();
 function setHtmlFontSize() {
 // 1. 获取当前屏幕的宽度
 var windowWidth = document.documentElement.offsetWidth;
 // console.log(windowWidth);
 // 2. 定义标准屏幕宽度 假设375
 var standardWidth = 375;
 // 3. 定义标准屏幕的根元素字体大小 假设100px 1rem=100px 10px = 0.1rem 1px 0.01rem
 var standardFontSize = 100;
 // 4. 计算当前屏幕对应的根元素字体大小
 var nowFontSize = windowWidth / standardWidth * standardFontSize + #39;px #39;;
 // console.log(nowFontSize);
 // 5. 把当前计算的根元素的字体大小设置到html上
 document.querySelector( #39;html #39;).style.fontSize = nowFontSize;
 // 6. 添加一个屏幕宽度变化的事件 屏幕变化就触发变化根元素字体大小计算的js 
 window.addEventListener( #39;resize #39;, setHtmlFontSize);

把这段代码引入到main.js里面，然后使用转换器把px转成rem 就可以了。

7.其他问题汇总

1.点击事件点击多次只执行一次：

可以使用.once修饰符 还有很多有用的修饰符，大家有时间可以去看看~~

2.使用ios输入框的时候，键盘弹起来回遮挡下面的按钮等元素的事件：

我们可以给input注册一个失去焦点事件，当失去焦点的时候设置document.body.scroolTop = 0;  

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

我用的是vue-cil3，他把配置文件都放在了node_modules中，官方文档上面有介绍，如果需要修改配置，
就新建一个vue.config.js文件，他会自动的覆盖之前的文件。主要是修改成： publicPath: "./"，
文档已经没有baseUrl，现在全部使用publicPath,跟着文档配置就ok了。

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

以上就是如何使用vue完成微信公众号网页的详细内容，更多请关注php中文网其它相关文章！

微信app下载

微信是一款手机通信软件，支持通过手机网络发送语音短信、视频、图片和文字。微信可以单聊及群聊，还能根据地理位置找到附近的人，带给大家全新的移动沟通体验，有需要的小伙伴快来保存下载体验吧！