shine_scp的博客

原创 微信小程序高度计算

微信小程序布局踩坑：先来看是设备的各类高度内容的安全高度(1)获取设备信息const { statusBarHeight, windowHeight, windowWidth, safeArea }=wx.getSystemInfoSync();(2)获取tabbar高度const tabBarHeight = safeArea.height - windowHeight;(3)获取安全高度// navBarHeight = 42(胶囊高度) || 自定义导航的高度；const bo

原创 transform:translate过程中overflow:hidden失效，内容溢出显示

在chrome中正常，在IE 11中，移动的过程，会显示溢出的内容，移动结束恢复。解决方案：.container{ ...styles, //关键代码 backgroud:#ddd; opacity:0.99;}亲测有效，据说是用移动端，方案来自https://jbkflex.wordpress.com/2013/04/04/css3-transformations-showin...

原创 Less动态样式语言IE兼容性Hack写法

项目中需要兼容IE浏览器，万般无赖，怎么办，客户的需求，默默搬起代码。常见的IE hack写法第一种 .box{ margin-top:10px; *margin-top:0; }注：这里只能用*，+在less中是不支持编译的，下面是Less的官方说明These characters are not encoded: , /, ?, ...

原创 markdown生成文件目录结构

在很多项目的文档中，需要描述到项目的基本目录结构，现在有同学贡献了一个node模块来自动生成，非常方便。cd current-project rootyarn add mddircd .\node_modules\mddir\srcls //查看是否存在mddir.js文件node mddir ‘…/…/…/’生成 ‘directoryList.md’ 在 mddir/src 中，...

原创 初识Cesium，与create-react-app的合作

建项准备create-react-app cesium-reactcd cesium-react解锁出react中的webpack配置文件cnpm run eject文件结构如下：|-- .gitignore|-- package.json|-- yarn.lock|-- config| |-- env.js| |-- paths.js| |-- webpa...

原创 git基础知识点

Git 的常用操作git基本操作步骤git 常用命令git log 查看提交日志，可以获取到commit idgit status 查看当前分支的修改保存情况git branch -vv 查看本地分支跟踪的远程分支回退版本的方法：1.git reset --hard xxx 回退到commit id 号为 xxx的版本2.git push -f -u origin xxx...

原创 H5语义化标签

前端项目还在大片使用div+css来构建页面的时候，可读性极低，也导致维护成本很高，所以有了语义化标签。下面从例子中总结语义化标签的意义。比较标签：<b>VS<strong>    <i>VS<em>首先两组标签在页面中的呈现都是相同的效果，第一组显示出来都是文本加粗，第二组则都是显示为斜体，那到底有什么不同呢？<b>与&lt...

原创 查找iframe中的元素

1. 如果在A页面中嵌套了一个iframe B，在B页面中需要取到A页面中的dom“aaa”，该如何取？（ C ）  （A）document.getElementById(“aaa”)  （B）$(“#aaa”,document)  （C）window.parent. document.getElementById(“aaa”)  （D）$(“#aaa”,document.pa

转载 优秀的flex布局讲解

http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_source=tuicool感谢大神博主的贡献

原创 汉字的unicode编码最小值

汉字的unicode编码最小值为：0x4e00，最大值为0x952f

转载 http://www.ruanyifeng.com/blog/2015/07/flex-examples.html

Flex 布局教程：实例篇作者： 阮一峰日期： 2015年7月14日上一篇文章介绍了Flex布局的语法，今天介绍常见布局的Flex写法。你会看到，不管是什么布局，Flex往往都可以几行命令搞定。我只列出代码，详细的语法解释请查阅《Flex布局教程：语法篇》。我的主要参考资料是Landon Schropp的文

原创 微信分享接口修改文案方法

1.引入相关文件2.微信分享方法封装：/**    微信分享*/var wxShare = (function (w) {    var webApiHost = "";    var shareData = { title: '', desc: '', img: '', link: '' };    function wxJSTools() { 

原创 ES6中let与var区别

1.声明的变量不是作用域都不同；2.var 声明的变量将会被提前到函数的最前，赋值留在原地；而let申明的变量则不会；3.var申明的变量可以重复声明被覆盖，而let在同一个作用域中只能申明一次，否则会报错，提示不能重复声明。.  在js预解析以前会做语法分析，预解析的时候会解析变量声明是否合理，而一个基础模块中let相同变量只能声明一次，所以解析的时候就会因为变量声明报错

原创 ios fixed兼容性问题

iOS下的 Fixed + Input 调用键盘的时候空间悬空原理是：页面本来只有一屏，顶部与底部与内容部分。顶部底部fixed，小键盘弹起是将整个视口改变，所以中间增加scroll不会影响调起。但是还是存在一个bug：ios下滑动到底部以后不会停止，可以继续往下滑动漏出微信背景。待解决html如下： class="layout-fixed">

原创 css3:计算宽度

原创 css中，显示省略号以及用js控制显示省略号

单行.overflow {    overflow: hidden;    white-space: nowrap;    text-overflow: ellipsis;    -o-text-overflow: ellipsis;}多行.overflow_2 {        display: -webkit-box !important;

原创 学习Less第一天

首先Less是一个预处理器，他有自己的函数方法，类似于一个语言。好处不说，记录干货。首先将less包下载，并在window+R>>cmd中输入npm install less（当然前提一定是已经安装了Nodejs）配置westorm接下来可以创建自己的文件了；注意的是在html头部中一定有这两句link rel="stylesheet/less" type="text/css"