使用vue完成微信公众号网页小记

jiezi

6 年前

公司最近有一个 H5 页面的功能，比较简单的一个调查表功能，嵌套在我们微信公众号里面。选用的技术栈是 Vue。同时用到了微信的登录和分享接口。ps: 本人小白，如果有问题希望大家能指出来，写文章不止是为了记录，还是为了发现自己的问题。谢谢大噶！！！

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

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

`<template>
  <div id="app">
    <transition :name="'fade-'+(direction==='forward'?'last':'next')">
      <router-view></router-view>
    </transition>
  </div>
</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…

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

<router-link :to="{name:'home', query: {id:1}}">

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

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

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

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

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

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

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

先下载 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/

我们用微信 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() {*******}
    });
  });
 }

现在我们移动端屏幕适配，我用的是 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 + 'px';
     // console.log(nowFontSize);
     // 5. 把当前计算的根元素的字体大小设置到 html 上
     document.querySelector('html').style.fontSize = nowFontSize;
 }
 // 6. 添加一个屏幕宽度变化的事件  屏幕变化就触发变化根元素字体大小计算的 js 
 window.addEventListener('resize', setHtmlFontSize);

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

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

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

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

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

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

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

我遇到的问题大致就这些，因为项目比较小，所以没有遇到太多问题。过程真的有点心酸，我独立解决问题的能力真的很一般，不知道是不是没有做程序员的潜质，出现问题就很焦虑，解决了一段时间以后，还是没有办法，就会更加焦虑。在上家公司实习的时候，我们组长指出来这个问题以后，我真的反省了好久。现在这家公司还是在实习，但是前端就一个人，小姐姐人很好，但是不用 vue 框架，所以遇到问题还是得单独解决。前端小姐姐是很坚韧的人，遇到问题，真的是一个一个线索的去找，不放弃那种，一开始我们要用 flutter，我环境搭建搞了好久，最后是小姐姐陪我搞好的。真的走到那里都是学习的过程。我觉得坚毅真的是世界上特别珍贵的品质，渴望拥有!!!

最后祝大家身体健康，快快乐乐。最近打球脚崴了，我哭晕 1s，真的是太久不运动了，而且跟我对手的朋友是男的，打球的时候觉得我力气小。我？？我小丁是能忍的人？之后的每一拍都把命给拍出去的打。最后一个小时的羽毛球脚崴了全身酸痛，跛着脚去医院。happy ending!

使用vue完成微信公众号网页小记

前言：

主要功能以及遇到的问题：

1. 左右切换动画

2. 路由带参数跳转

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

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

5. 使用微信接口 (前端部分)

6. 移动端屏幕适配

7. 其他问题汇总

结尾：