最近公司有一个项目,使用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. bzoj3771: Triple(容斥+生成函数+FFT)

    传送门 咳咳忘了容斥了-- 设\(A(x)\)为斧头的生成函数,其中第\(x^i\)项的系数为价值为\(i\)的斧头个数,那么\(A(x)+A^2(x)+A^3(x)\)就是答案(于是信心满满的打了一 ...

  2. 【微服务】Dubbo初体验

    一.前言 之前微服务这块只用过SpringCloud搭建,但是最近面试会被问到dubbo框架,虽然之前也学了但是都忘了,故写此博客加深印象. 二.原理简介 Dubbo是一个分布式服务框架,以及阿里巴巴 ...

  3. typescript学习笔记(一)----基础类型

    1.使用typescript前第一个操作就是全局配置typescript环境 ---------------npm install -g typescript 2.typescript(以下称为ts, ...

  4. iOS开发 - 线程与进程的认识与理解

    进程: 进程是指在系统中正在运行的一个应用程序,比如同时打开微信和Xcode,系统会分别启动2个进程; 每个进程之间是独立的,每个进程均运行在其专用且受保护的内存空间内; 线程: 一个进程要想执行任务 ...

  5. [题解](单调队列)luogu_P2216_BZOJ_1047 理想的正方形

    调了半天,发现这个写法确实极易错...... 对于每列都维护一个单调队列记录最大最小值,这样一次操作后就把最大最小值压到了一维, 然后再对这一行维护一个单调队列,每次更新ans值,然而对于数组和队列下 ...

  6. flask_之参数传递

    参数篇 request接收数据 request对象 method:当前请求方法(POST,GET等) url:当前链接地址 path:当前链接的路径 environ:潜在的WSGI环境 headers ...

  7. [coci2015-2016 coii] torrent【树形dp 二分】

    传送门:http://www.hsin.hr/coci/archive/2015_2016/ 进去之后点最下面那个. 这道题没有想出来,可惜了,其实不难的. 题目是两个“源”的,我们先考虑单源的问题. ...

  8. IIS7文件无法下载问题处理

    使用IIS建立了静态站点,内部放置了一些文件供内部局域网下载使用,但deb等文件格式无法下载. 解决办法: 1.在IIS管理器中点击站点,选择右侧的MIME类型. 2.在MIME类型中添加需要下载文件 ...

  9. 在 Java 的多线程中,如何去判断给定的一个类是否是线程安全的(另外:synchronized 同步是否就一定能保证该类是线程安全的。)

    同步代码块和同步方法的区别:同步代码块可以传入任意对象,同步方法中 如果多个线程检查的都是一个新的对象,不同的同步锁对不同的线程不具有排他性,不能实现线程同步的效果,这时候线程同步就失效了. 两者的区 ...

  10. sftp 常用命令 以及 以及与 scp 的比较

    1.scp 不能容忍网络闪断,因此一旦出现网络闪断,那么scp 命令就会异常退出 sftp 可以容忍网络闪断,而且具备断电续传,因此sftp 适用于网络更慢的环境, 2. sftp 是一个交互式文件传 ...