1.static，absolute，relative，fixed，flex五种布局
static
（1）static 是默认值。表示没有定位，或者说不算具有定位属性。
（2）如果元素position 属性值为static（或者未设position 属性），该元素出现在正常的流中（忽略top,bottom,left,right 或者 z-index 声明）。
absolute
（1）absolute 生成绝对定位的元素。
（2）绝对定位的元素使用left、right、top、bottom 属性相对于其最接近的一个具有定位属性的父元素进行绝对定位。
（3）如果不存在这样的父元素，则相对于body 元素，即相对于浏览器窗口。
fixed
（ 1）fixed 生成绝对定位的元素，该元素相对于浏览器窗口进行定位。
（2）固定定位的元素不会随浏览器窗口的滚动条滚动而变化，也不会受文档流动影响，而是始终位于浏览器窗口内视图的某个位置。
relative
（1）relative 生成相对定位的元素，相对于其正常位置进行定位
flex
弹性布局（实现上下左右居中，等间隔放置等很方便）
默认存在两根轴：水平的主轴和垂直的交叉轴
以下是几个常用属性
a.设置主轴：flex-direction: row | row-reverse | column | column-reverse
row（默认值）：主轴为水平方向，起点在左端。
row-reverse：主轴为水平方向，起点在右端。
column：主轴为垂直方向，起点在上沿。
column-reverse：主轴为垂直方向，起点在下沿。
b. 设置是否换行：flex-wrap: nowrap | wrap | wrap-reverse;
c.设置主轴上的对齐方式justify-content: flex-start | flex-end | center | space-between | space-around;
flex-start（默认值）：左对齐
flex-end：右对齐
center：居中
space-between：两端对齐，项目之间的间隔都相等。
space-around：每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍。
更多http://www.runoob.com/w3cnote/flex-grammar.html
2.布局的层级与z-index
对于同级元素，默认情况下文档流后面的元素会覆盖前面的。
对于同级元素，position不为static且z-index存在的情况下z-index大的元素会覆盖z-index小的元素，即z-index越大优先级越高。
IE6/7下position不为static，且z-index不存在时z-index为0，除此之外的浏览器z-index为auto。
z-index为auto的元素不参与层级关系的比较，由向上遍历至此且z-index不为auto的元素来参与比较。
如果A的父节点在B的父节点上面，即使B的z-index比A的大，A仍然是在B的上面
3.left，margin-left，padding-left的区别
注意:padding-left跟Android的是不同的
4.上传图片到七牛（另起篇幅）
5.绘制canvas并保存到本地（分享便签，另起篇幅）
6.正则校验手机号与判断是否含有emoji
//判断是否为手机号
function isPhoneAvailable(phone){
var reg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
if(!reg.test(phone)){
return false;
} else {
return true;
}
}
//判断是否含有表情符号
function isEmojiCharacter(substring){
var regRule = /\uD83C[\uDF00-\uDFFF]|\uD83D[\uDC00-\uDE4F]/g;
if(substring.match(regRule)){
return true;
}
7.图片显示的配适
设置mode属性（最常用的）：
scaleToFill：不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来
aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来。
widthFix：宽度不变，高度自动变化，保持原图宽高比不变
8.页面间的数据传递与页面的生命周期
页面间传递数据：url+”XX?=”+xx;
获取数据，在onLoad的options里面获取options.XX
页面数据传递给js：
在js里：
getData: function(e){
var v= e.currentTarget.dataset.XX;
}
Input（即输入框）传递数据到js相对简单：
>
在js中
getData: function(e){
var v=e.detail.value;
}
生命周期注意：onLoad，onReady，onShow初始化数据时的区别
9.文字居中，划线，背景色
文字居中：text-alight：center；line-height：文本的真实高度；
注意：当text没有文字时，设置背景色是无效的（要想实现自定义的横线请使用view）
给文字设置下划线：text-decoration:line-through;
给文字设置中划线：text-decoration:underline;
当给text设置行间高度时，line-height不生效，需要设置该text的display属性为flex
10.border的使用
border：solid 1px #ff0000;
border-bottom或者border-top设置item的间隔线
border-radius设置圆角（关于border-radius画半径的规则）
11.组件和模版的使用建议
对于能多次使用或者具有公用特性的，可以提取出来封装成组件或者模版，注意封装的独立性，不应存在对外的引用。
12.下拉刷新与上拉加载（尽量不要使用srollerview，目前小程序的支持不是很好，会有很多坑，建议直接使用整个页面设置为ennablerefresh=true，然后使用position：fixed的方式固定不动的部分，或者使用sticky的属性进行实现）
13.class的样式设置技巧：
14.动画的使用：
15.兼容问题：
在ios8及以下，父容器设置了flex，并设置居中时，子元素在使用absolute布局的时候，必须指定top、left、宽、高，或者直接设定top、left、bottom、right四个属性。
flex弹性盒模型有3个版本: 旧版本、混合版本和新版本。
关于flex的使用说明：
如果用了flex，就应该准备放弃一些过于旧版本的支持，如果要完全处理兼容性，会变得繁琐，并且有些常用的特性是失效的，如：space-around。
Android
2.3开始就支持旧版本display:-webkit-box;
4.4开始支持标准版本display: flex;
IOS
6.1开始支持旧版本display:-webkit-box;
7.1开始支持标准版本display: flex;
更多flex的兼容性请参考：
https://www.cnblogs.com/zhangkeyu/p/6645183.html
https://blog.csdn.net/u010130282/article/details/52627661
16.js的一些知识
A.方法的返回值
B.方法的回调
C.“this”上下文的作用范围
js通过函数管理作用域。在函数内部声明的变量只在这个函数内部，函数外面不可用.
每个JavaScript环境有一个全局对象，在任意的函数外面使用this的时候可以访问到，
如：
//最外层
func1:function(){
var that=this;
func2:function(){
console.log(this);//undefined
console.log(that);//this
}
}
D.置顶解析:在函数的任何位置声明多个var语句,最终会像是在函数顶部声明一样发挥作用，如
name = "global";//全局变量
function func(){
console.log(name);// "undefined"
var name = "local";
console.log(name);// "local"
}
func();
E.加载更多的数据拼接技巧
F.js的变量在比较的时候会隐式类型转换，如：false == 0或“”== 0返回的结果是true
建议：
为避免引起混乱的隐含类型转换:比较值和表达式类型的时候建议使用===和!==操作符；
为了避免脚本引用一些第三方脚本时，后面的变量覆盖前面的，可能少的使用全局变量；
17.一些基础的逻辑的搭建
网络请求
数据保存请求
全局变量app的设计
请求权限模块的设计（包含拒绝权限的处理）
更多请查看微信小程序的官方开发文档，已经相当详细（css部分是几乎没有的，但是很重要，可以到w3school上去学习），按着文档来就好，这里只是列举一些要注意的地方
一些比较抽象的关于代码设计的总结
页面
编写页面时不应该着急动手，应该先分析好页面的构成（看似 缓慢，其实分析好了就是最快的方法）
可从以下几个方面去考虑
A.页面的不同层次（即页面的纵向深度z-index）
B.页面的同一层次的各个构成部分（即页面的广度）
C.构成页面的“部分”的可变性（包括位置的不固定，大小的不固定，显示文字长度的不确定性）
D.可重复使用
业务逻辑
编写代码时分析业务注意一下几个方面
A.搞清业务的功能使用流程
B.代码的逻辑结构应按业务划分成最基本的逻辑块（即不能含有交叉部分，可以是包含关系或者是组成关系，甚至是相互独立的关系）
C.代码逻辑块的关联与走向
D.逻辑块应该放的位置（考虑全局的复用）
D.数据的共享与传递，其次是数据的作用域与存活时间
E.数据的结构、容量和类型
数据解析
将数据的解析与网络的请求放到同一层次的逻辑里，应该解析好（包括数据的类型转换、排序，数据结构的转换，增加辅佐的变量等），再传给业务逻辑层直接使用
网络请求
对于一些场景，网络很慢时，使用网络请求会影响用户的体验，应该提前缓存到本地（在调用此功能前）
最后一定要进行高延迟网络和断网测试
一些用户体验的建议：
网友评论