最近公司有一个项目,使用Vue开发微信公众号,开发过程遇到一个问题,即设计图的整体背景是白色的,但是公众号里默认的背景是浅灰色,如果某个页面高度没能占满一屏,就会露出浅灰色的默认背景,会显得很不协调。 使用单纯的CSS没能解决这个问题,在网上查了些资料也没发现特别好的方法,最后还是采用了JS解决这个问题。

document.documentElement.style.backgroundColor = "#fff";
this.screenH = window.screen.availHeight;
this.pageH = document.documentElement.offsetHeight;
if (this.pageH < this.screenH) {
document.documentElement.style.height = this.screenH + "px";
document.documentElement.scrollTop = '0';
} else {
document.documentElement.style.height = 'auto';
document.documentElement.scrollTop = '0';
}

思路是,设置网页背景为白色,比较网页高度和屏幕高度,如果网页高度小于屏幕高度,就把网页高度设成屏幕高度。 Vue虽然不推荐直接操作DOM,但是在这个问题中,通过操作DOM能够最简便的解决问题,所以我觉得,该操作DOM的时候还是要用DOM,不要被“Vue中不推荐操作DOM”这句话局限了。

Vue开发微信公众号默认背景为灰色的更多相关文章

  1. vue开发微信公众号--开发准备

    由于工作项目的原因,需要使用vue开发微信公众号,但是这种微信公众号更多是将APP套了一个微信的壳子,除了前面的授权和微信有关系以外,其他的都和微信没多大的关系了,特此记录 开发流程 首先需要在电脑上 ...

  2. 使用vue开发微信公众号下SPA站点的填坑之旅

    原文发表于本人博客,点击进入使用vue开发微信公众号下SPA站点的填坑之旅 本文为我创业过程中,开发项目的填坑之旅.作为一个技术宅男,我的项目是做一个微信公众号,前后端全部自己搞定,不浪费国家一分钱^ ...

  3. vue开发微信公众号--地图

    在最近开发的微信公众号中,要实现一个打卡功能: 由于个人感觉微信SDK里面的地图不太好用,所以使用了腾讯地图. 在项目中引入腾讯地图 1,需要登录腾讯地图网站,注册一个账户,获得一个key. 2,然后 ...

  4. 使用vue开发微信公众号,解决微信缓存

    1.页面加入标红的代码,让页面不缓存 <!DOCTYPE html> <html manifest="IGNORE.manifest"> <head& ...

  5. vux+vuex+vue+Es6开发微信公众号的坑

    初次开发微信公众号遇到很多问题,可能是基础不怎么牢靠,最近几天一直在看vue的东西,现在就来慢慢介绍vux和vue这个骚东西的用法: 细看文档一步步来, npm install vux --save ...

  6. vue+node.js+webpack开发微信公众号功能填坑——v -for循环

    页面整体框架实现,实现小功能,循环出数据,整体代码是上一篇 vue+node.js+webpack开发微信公众号功能填坑--组件按需引入 修改部门代码 app.vue <yd-flexbox&g ...

  7. vue+node.js+webpack开发微信公众号功能填坑——组件按需引入

    初次开发微信公众号,整体框架是经理搭建,小喽喽只是实现部分功能,整体页面效果 整个页面使用两个组件:布局 FlexBox,搜索框 Search,demo文档 http://vue.ydui.org/d ...

  8. Java开发微信公众号(三)---微信服务器请求消息,响应消息,事件消息以及工具处理类的封装

    在前面几篇文章我们讲了微信公众号环境的配置 和微信公众号服务的接入,接下来我们来说一下微信服务器请求消息,响应消息以及事件消息的相关内容,首先我们来分析一下消息类型和返回xml格式及实体类的封装. ( ...

  9. 小机器人自动回复(python,可扩展开发微信公众号的小机器人)

    api来之图灵机器人.我们都知道微信公众号可以有自动回复,我们先用python脚本编写一个简单的自动回复的脚本,利用图灵机器人的api. http://www.tuling123.com/help/h ...

随机推荐

  1. bzoj 5120: [2017国家集训队测试]无限之环【最小费用最大流】

    玄妙的建图-- 这种平衡度数的题按套路是先黑白染色然后分别连ST点,相邻格子连黑向白连费用1流量0的边,然后考虑费用怎么表示 把一个点拆成五个,上下左右中,中间点黑白染色连ST, 对于连S的点,中点连 ...

  2. 洛谷P3338 [ZJOI2014]力(FFT)

    传送门 题目要求$$E_i=\frac{F_i}{q_i}=\sum_{j=1}^{i-1}\frac{q_j}{(i-j)^2}-\sum_{j=i+1}^n\frac{q_j}{(j-i)^2}$ ...

  3. rsync 同步的艺术

    rsync是类unix系统下的数据镜像备份工具,可以提供快速的增量文件传输. rsync 也可用于本机传输,如: # rsync -v mysql--linux-glibc2.-x86_64.tar. ...

  4. Window 10 Alt Tap 切换窗口,设置成Windows 7风格

    升级了Windows 10 以后,切换窗口非常的难受.新版的窗口切换的图标变成了窗口预览了,这总让我一瞬间找不到要去的窗口,所以我打算切换成Windows 7 的小图标风格. Windows + R ...

  5. 给 UILabel 中的文字增加 line-through / Strikethrough (删除线)样式

    iOS 6 中苹果引入了 NSStrikethroughStyleAttributeName 属性,用于设置 NSAttributedString 的删除线样式,用法如下: let attribute ...

  6. get 和 post 请求的区别(转)

    转自 http://www.cnblogs.com/hyddd/archive/2009/03/31/1426026.html http://www.nowamagic.net/librarys/ve ...

  7. nginx 配置步骤

    D:\myphp2017\nginx\conf.nginx.conf37行 吧localhost 改为www.ff.com41行取消注释44行 加D:\myphp2017\nginx\html45 在 ...

  8. P1816 忠诚 倍增

    链接:https://www.luogu.org/problem/show?pid=1816 题目描述 老管家是一个聪明能干的人.他为财主工作了整整10年,财主为了让自已账目更加清楚.要求管家每天记k ...

  9. Linux KDE 设置显示桌面的快捷键 win+d

    原文链接:http://blog.sina.com.cn/s/blog_4b91893c0100sxxg.html 到KDE下以后发现显示桌面的快捷键被用来显示平铺窗口,在Win下的时候一直用这个快捷 ...

  10. Django框架和前端的的基本结合

    1 昨日回顾 a socket b 路由关系 c 模板字符串替换(模板语言) 主流web框架总结: django a用别人的 b自己写的 c自己写的 flask a用别人的 b自己写的 c用别人的(j ...