使用vue完成微信公众号网页小记(推荐)


Posted in Javascript onApril 28, 2019

前言:

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

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

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

1.左右切换动画

--首先我考虑到用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>

2.路由带参数跳转

这个就是记录一下,有三种方法。

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://3water.com/article/160401.htm

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

移动端引入外部样式,我用的是直接把字体库的字体下载下来,一般后缀为 .ttf/.otf等。在asset文件下创建 fonts文件,将字体文件全部放入。

再新建一个.css文件,相当于注册你下载的字体,可以自定义给字体们命名,不过一般还是按照以前的名字。src是文件所在的路径。

使用vue完成微信公众号网页小记(推荐)

在需要的地方使用就可以了: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官网的参数配置文件。浪费了很多时间,哭哭。

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

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

7.其他问题汇总

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

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

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

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

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

我用的是vue-cil3,他把配置文件都放在了node_modules中,官方文档上面有介绍,如果需要修改配置,

就新建一个vue.config.js文件,他会自动的覆盖之前的文件。主要是修改成: publicPath: "./",

文档已经没有baseUrl,现在全部使用publicPath,跟着文档配置就ok了。

结尾:

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

Javascript 相关文章推荐
JS小框架 fly javascript framework
Nov 26 Javascript
js给页面加style无效果的解决方法
Jan 20 Javascript
jquery实现仿新浪微博评论滚动效果
Aug 06 Javascript
jquery实现具有收缩功能的垂直导航菜单
Feb 16 Javascript
JS表格组件神器bootstrap table详解(强化版)
May 26 Javascript
Easyui在treegrid添加控件的实现方法
Jun 23 Javascript
JS+HTML5 FileReader实现文件上传前本地预览功能
Mar 27 Javascript
vuex state及mapState的基础用法详解
Apr 19 Javascript
vue中接口域名配置为全局变量的实现方法
Sep 20 Javascript
有关vue 开发钉钉 H5 微应用 dd.ready() 不执行问题及快速解决方案
May 09 Javascript
小程序自定义弹框效果
Nov 16 Javascript
JS实现刷新网页后之前浏览位置保持不变示例详解
Aug 14 Javascript
详解VUE项目中安装和使用vant组件
Apr 28 #Javascript
详解JavaScript对数组操作(添加/删除/截取/排序/倒序)
Apr 28 #Javascript
vue slot与传参实例代码讲解
Apr 28 #Javascript
Vue项目从webpack3.x升级webpack4不完全指南
Apr 28 #Javascript
Easyui 关闭jquery-easui tab标签页前触发事件的解决方法
Apr 28 #jQuery
vue项目中在外部js文件中直接调用vue实例的方法比如说this
Apr 28 #Javascript
微信小程序--特定区域滚动到顶部时固定的方法
Apr 28 #Javascript
You might like
echo(),print(),print_r()之间的区别?
2006/11/19 PHP
PHP根据IP判断地区名信息的示例代码
2014/03/03 PHP
php中实现可以返回多个值的函数实例
2015/03/21 PHP
JXTree对象,读取外部xml文件数据,生成树的函数
2007/04/02 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
javascript的switch用法注意事项分析
2015/02/02 Javascript
JS实现为表格动态添加标题的方法
2015/03/31 Javascript
JavaScript中的pow()方法使用详解
2015/06/15 Javascript
基于jQuery实现文本框只能输入数字(小数、整数)
2016/01/14 Javascript
JS在一定时间内跳转页面及各种刷新页面的实现方法
2016/05/26 Javascript
JS返回只包含数字类型的数组实例分析
2016/12/16 Javascript
学习使用Bootstrap输入框、导航、分页等常用组件
2017/05/11 Javascript
详解Node.js开发中的express-session
2017/05/19 Javascript
jQuery修改DOM结构_动力节点Java学院整理
2017/07/05 jQuery
BootStrap中Table隐藏后显示问题的实现代码
2017/08/31 Javascript
修改npm全局安装模式的路径方法
2018/05/15 Javascript
解决vue select当前value没有更新到vue对象属性的问题
2018/08/30 Javascript
微信小程序日历组件使用方法详解
2018/12/29 Javascript
BootStrap表单验证中的非Submit类型按钮点击时触发验证的坑
2019/09/05 Javascript
vue限制输入框只能输入8位整数和2位小数的代码
2019/11/06 Javascript
js实现表格数据搜索
2020/08/09 Javascript
vue.js watch经常失效的场景与解决方案
2021/01/07 Vue.js
python通过ftplib登录到ftp服务器的方法
2015/05/08 Python
Python实现的破解字符串找茬游戏算法示例
2017/09/25 Python
微信跳一跳python辅助脚本(总结)
2018/01/11 Python
Numpy 将二维图像矩阵转换为一维向量的方法
2018/06/05 Python
Django实战之用户认证(初始配置)
2018/07/16 Python
浅谈pycharm使用及设置方法
2019/09/09 Python
Python依赖包迁移到断网环境操作
2020/07/13 Python
世界首屈一指的钓鱼用品商店:TackleDirect
2016/07/26 全球购物
西班牙自行车和跑步商店:Alltricks
2018/07/07 全球购物
吃空饷专项治理工作实施方案
2014/03/04 职场文书
上海世博会志愿者口号
2014/06/17 职场文书
2014年电话客服工作总结
2014/12/09 职场文书
公司地址变更通知
2015/04/25 职场文书
本科毕业论文致谢词
2015/05/14 职场文书