最近公司有一个项目,使用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 3559: [Ctsc2014]图的分割【最小生成树+并查集】

    读题两小时系列-- 在读懂题意之后,发现M(c)就是c这块最大权割边也就是的最小生成树的最大权边的权值,所以整个问题都可以在MST的过程中解决(M和c都是跟着并查集变的) 不过不是真的最小生成树,是合 ...

  2. 2014-9-9 NOIP模拟赛

    东方幻想乡系列模拟赛Stage 1命题 Nettle审题 Barty ccy1991911 FlanS39 Wagner T2 高精除高精,从来没写过,不知道怎么写,我就用大数减小数ans次,果断超时 ...

  3. Tcl/Tk语言学习------拆分字符串

    字符串的拆分 前言 字符串的处理是每种语言经常会遇到的问题,tcl作为一门脚本语言自然也不例外,关于字符串的拆分,一般会有两种情况:1.使用单个字符拆分,2.使用字符串拆分. 1.使用单个字符拆分字符 ...

  4. STC单片机掉电断电失电瞬间EEPROM数据保存处理办法(转)

    由于客户在请人设计开发一设备,但是设备用户处总停电,造成设备及其周边耗材损耗严重,因此请我司在现有STC为主要芯片的基础上做掉电瞬间EEPROM里的20个参数保存,上电后通过读取EEPROM中的参数回 ...

  5. ZOJ 4019 Schrödinger's Knapsack (from The 18th Zhejiang University Programming Contest Sponsored by TuSimple)

    题意: 第一类物品的价值为k1,第二类物品价值为k2,背包的体积是 c ,第一类物品有n 个,每个体积为S11,S12,S13,S14.....S1n ; 第二类物品有 m 个,每个体积为 S21,S ...

  6. ios wkwebview 跳转到新的controllerview加载页面 出现闪退问题

    func webView(_ webView: WKWebView, didStartProvisionalNavigation navigation: WKNavigation!) { if(isF ...

  7. flask_context

    定义全局的钩子函数 有的时候在处理请求之前和之后,执行某些特定的代码是很有用的,这就用到了请求钩子 例如在请求之前创建数据库连接或者redis连接:或者是系统里面用户请求处理之前先验证用户的身份,是否 ...

  8. B. Hierarchy

    http://codeforces.com/problemset/problem/17/B 用邻接矩阵建图后, 设cost[v]表示去到顶点v的最小值. 很多个人去顶点v的话,就选最小的那个就OK 然 ...

  9. 一次Socket通信联想到的Zookeeper源码实现

    最近做一个短信平台,要接入短信网关平台,网关平台使用C,短信平台属于公司内部对外应用,使用Java开发,两边通信采用TCP/IP协议

  10. shell脚本解析json文件

    安装jq扩展 下载:jq 根据自己系统下载对应的文件 cp jq-linux64 /usr/bin cd /usr/bin mv jq-linux64 jq chmod +x jq 使用方法 假设有个 ...