使用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 相关文章推荐
Javascript 验证上传图片大小[客户端]
Aug 01 Javascript
50个比较实用jQuery代码段
Sep 18 Javascript
JavaScript instanceof 的使用方法示例介绍
Oct 23 Javascript
对js关键字命名的疑问介绍
Apr 25 Javascript
JavaScript将Web页面内容导出到Word及Excel的方法
Feb 13 Javascript
究竟什么是Node.js?Node.js有什么好处?
May 29 Javascript
详解JavaScript对W3C DOM模版的支持情况
Jun 16 Javascript
JavaScript中的时间处理小结
Feb 24 Javascript
再次谈论React.js实现原生js拖拽效果引起的一系列问题
Apr 03 Javascript
浅析javascript中的Event事件
Dec 09 Javascript
ionic使用angularjs表单验证(模板验证)
Dec 12 Javascript
nginx部署多个vue项目的方法示例
Sep 06 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
PHP无限分类代码,支持数组格式化、直接输出菜单两种方式
2011/05/18 PHP
PHP实现的带超时功能get_headers函数
2015/02/10 PHP
非集成环境的php运行环境(Apache配置、Mysql)搭建安装图文教程
2016/04/12 PHP
基于Codeigniter框架实现的student信息系统站点动态发布功能详解
2017/03/23 PHP
PHP操作MySQL中BLOB字段的方法示例【存储文本与图片】
2017/09/15 PHP
js模仿html5 placeholder适应于不支持的浏览器
2013/01/13 Javascript
Jquery多选框互相内容交换的实例代码
2013/07/04 Javascript
调试代码导致IE出错的避免方法
2014/04/04 Javascript
node.js操作mongoDB数据库示例分享
2014/11/26 Javascript
chrome不支持form.submit的解决方案
2015/04/28 Javascript
快速解决Canvas.toDataURL 图片跨域的问题
2016/05/10 Javascript
bootstrap modal弹出框的垂直居中
2016/12/14 Javascript
深入学习nodejs中的async模块的使用方法
2017/07/12 NodeJs
使用jquery的cookie实现登录页记住用户名和密码的方法
2019/03/13 jQuery
Vue.js标签页组件使用方法详解
2019/10/19 Javascript
用JS实现选项卡
2020/03/23 Javascript
Python探索之URL Dispatcher实例详解
2017/10/28 Python
python 实现提取某个索引中某个时间段的数据方法
2019/02/01 Python
详解python函数的闭包问题(内部函数与外部函数详述)
2019/05/17 Python
python使用百度文字识别功能方法详解
2019/07/23 Python
Python Celery多队列配置代码实例
2019/11/22 Python
Gap工厂店:Gap Factory
2017/11/02 全球购物
劳力士官方珠宝商:J.R. Dunn Jewelers
2018/09/29 全球购物
大学生个人求职信范文
2013/09/21 职场文书
会议邀请函范文
2014/01/09 职场文书
2014年小班元旦活动方案
2014/02/16 职场文书
家长会主持词
2014/03/26 职场文书
工作推荐信范文
2014/05/10 职场文书
服务行业口号
2014/06/11 职场文书
爱祖国爱家乡演讲稿
2014/09/02 职场文书
2015年度房地产工作总结
2015/04/09 职场文书
2015大学生暑假调查报告
2015/07/13 职场文书
2015年国庆节寄语
2015/08/17 职场文书
大学生干部培训心得体会
2016/01/06 职场文书
银行岗位培训心得体会
2016/01/09 职场文书
赞美教师的句子
2019/09/02 职场文书