微信小程序项目技巧总结
一、view的边框设置
边框设置要使用border，对其样式，宽度颜色等属性进行设置后方可使用。
阴影设置为box-shadow，一般也算入边框设置里。
微信小程序border使用总结
二、横线滚动布局
微信小程序横向滚动布局scroll-view使用
scroll-view用于小程序中滚动布局的设置。
通过设置scroll-x、scroll-y属性确定展示方向。
white-space: nowrap; 这个属性一定要设置，不然显示起来会自动换行。
三、wx:for循环设置
当我们想要循环设置一些复用的组件时，使用wx:for循环。
注意，这个语句直接加在组件的属性设置里即可。加在哪个组件里，就会对哪个组件生效，循环设置该组件。不需要外层嵌套。
四、字体大小与是否加粗
font-size用于设置字体大小。
font-weight用于设置字体加粗。
五、每一个子项中，布局的横纵设置
微信小程序flex布局使用技巧
flex布局可以设置其布局内内容的横向、纵向展示方式。
flex-direction定义了方向
flex-wrap定义了换行规则
flex-flow是将方向和换行规则合并起来的简写方式。
六、同一数据源，如何设置两列纵向布局
微信小程序中，数据源循环设置使用wx:for语句，这个语句只能做简单循环处理。
想要实现两列，多列，多行的展示形式，就需要我们进行设计。
进行两列展示时，实际上是用同一种数据源循环2次，左侧取奇数，右侧取偶数时展示，其他的隐藏掉。
此方法同理可以用到多行多列的扩展。
后期若有更好的方式，及时更新。
七、每一个内容模块内，子项位置摆放
1、子项自动换行
父布局使用flex模式，同时设置flex-direction为column，纵列展示
2、叠层布局
如何让子布局显示在父布局之上，类似于android的framelayout或者relativelayout
父布局使用position:relative
子布局使用position:absolute
这样子布局就可以根据top,left,bottom,right四个方位相对于父布局进行定位了。
之后子布局（其实是容器）中在设置自身display:flex，align-items:center, justfy-content:center就能实现子布局内容水平垂直居中。
这个嵌套层数会很多，属于粗糙的实现方法，以后有更好的进行更新。
3、列表布局最后一个内容距右侧距离加大
项目中长遇见的情况，一个横向列表，滑到最右侧，应有加大的间距。
土方法：在每一个布局中右侧添加一个间隔，直到最后一个子项时才将其显示，其他均为隐藏。
八、文本超出部分自动换行
在文本控件的wxss样式中设置white-space:pre-line属性。
微信小程序文本自动换行问题
九、父布局宽度适应子布局内容
可以设置min-width为最小宽度，超出则自适应。
十、3列布局，左右固定宽度，中间填充满
中间布局增加属性，flex:auto
十一、子布局在父布局居中显示
父布局设置display:flex，只有在设置水平及垂直轴上的属性。
align-items:center; 垂直居中
justify-content:center;水平居中
附加条件可能为上下或左右需要父布局拥有固定大小，否则无法测量使其居中。
十二、设置圆形图片
简单操作：image控件宽高设置一致，之后设置border-radius为宽高数值的一半，即半径长度。便可实现原型图片。
复杂操作：在canvas上绘制时使用代码进行计算绘制。
十三、布局中设置权重
flex布局中可以设置权重，flex:1，如果一横排或一竖列所有元素权重一致，则平分布局。
十四、布局绑定事件与传参
布局绑定事件
bindtap和catchtap都可以绑定事件，区别在于bindtap不会阻止事件冒泡，catchtap可以阻止事件冒泡。
在布局控件定义时加上属性bindtap="onClick"，其中onClick是事件方法名。之后要在对应的js文件中定义onClick的具体操作。
声明事件的同时，如果有传参，需要使用data-xxx的形式定义传参的参数名称。
之后在js文件中通过event.currentTarget.dataset['xxx']的形式获取点击事件的传参。
十五、控制文本最多显示2行超出部分省略
普通需求，设置over-flow:hidden以及text-overflow:ellipsis属性，同时设置display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;借用了-webkit-box样式，设置了展示方向及行数。
增强版需求，若此文本前面还有一个标题内容，则由于设置了box类型，会导致显示异常。
研究rich-text
十六、微信小程序页面跳转
tab页面跳转：wx.navigateTo 和 wx.redirectTo 不允许跳转到 tabbar 页面，只能用 wx.switchTab 跳转到 tabbar 页面。此方法不允许携带参数。若业务要求使用参数，可以在跳转时设置全局变量，来到跳转页面后调用全局变量满足业务要求。
普通页面使用wx.navigateTo 和 wx.redirectTo ，前者是最普遍的跳转方式，会保留当前页面。后者则会先关闭当前页面在跳转。
wx.reLaunch 关闭所有页面，打开到应用内的某个页面。
跟wx.redirectTo 一样左上角不会出现返回箭头，但两者却不完全相同
这里要提到小程序中的 getCurrentPages() 方法
在wx.navigateTo中，每跳转一个新的页面，其原始页面就会被加入堆栈，通过调用wx.navigateBack(OBJECT)可通过获取堆栈中保存的页面 返回上一级或多级页面；
wx.redirectTo,方法则不会被加入堆栈,但仍可通过wx.navigateBack(OBJECT)方法返回之前堆栈中的页面
wx.reLaunch 方法则会清空当前的堆栈。
跳转携带参数
使用url拼接方式
wx.navigateTo({
url: '/pages/b/b?id=' + 1 + "&tu=" + 'a.jpg'
});
参数解析
var that = this;
that.setData({ //this.setData的方法用于把传递过来的id转化成小程序模板语言
b_id: options.id, //id是a页面传递过来的名称，a_id是保存在本页面的全局变量 {{b_id}}方法使用
b_tu: options.tu,
})
十七、小程序模块化
module.exports.request = request
module.exports = {
postlist:postData,
}
这两种方式是使得数据或方法得以输出。
之后在其他文件中引用时，如var postData = require('../../data/post-data.js') ;
之后通过postData.postlist即可获取到postData。