微信小程序开发的几个小技巧

1.公共文件app文件可以放一些经常用到的方法 例如网络请求和判断网络的封装

在文件中如果想使用app.js中的方法直接var app = getApp() 直接就可以调用了

2.position相关的设置

想把文字放在图片上边 position: relative;

如果想把控件放在页面的最下边position:fixed; 

 

3.实现渐变色

第一个是起点颜色，慢慢过渡到第二个颜色 
从上到下的线性渐变： 
background: linear-gradient(red, blue); 
从左到右的线性渐变： 
background: linear-gradient(to right, red , blue); 

 

4.裁圆角

设置弧度 顺序是 左上角 右上角 右下角 左下角 （顺时针） 
border-radius: 3px 0px 0px 3px; 
5.使用rpx可以自适应 就不用考虑适配的问题了 建议使用iphone6测试 因为这个机型1px=2rpx; 

 

6.下拉刷新和上拉加载

1）首先在要刷新类的.json文件里添加

1. {
2. "enablePullDownRefresh": true
3. }

2）然后在js里实现"onPullDownRefresh"和"onReachBottom"方法即可

下拉事件

1. onPullDownRefresh: function() {
2. console.log('刷新');
3. },

上拉事件

1. onReachBottom: function() {
2. console.log(' 下一页');
3. },

注意：刷新可能会和scroll-view控件冲突

7.布局的一些属性

1. display : flex; （display : flex 容器声明）
2. flex-direction: (view中布局的方向)
3. row; （横向布局 ，从左到右）
4. column; （垂直布局，布局从上往下）
5.  
6. row-reverse; （横向布局 ，从右到左）
7. column-reverse;（垂直布局，布局从下到上）

1. flex-wrap: (当布局一行里面的数据无法全部显示的时候，如何换行)
2.  
3. nowrap; (默认，不换行)
4.  
5. wrap; (换行，第一行在上面)
6.  
7. wrap-reverse; (换行，第一行在下面)

1. flex-flow: (是flex-direction和flex-wrap的简写，默认值是，row, nowrap)
2.  
3. 例子：flex-flow:row||nowrap;
4.  
5. justify-content: (父布局对其中的子布局的对齐方式)
6.  
7. flex-start;（左对齐）
8.  
9. flex-end;（右对齐）
10.  
11. center;（居中）
12.  
13. space-between;（ 两端对齐，子控件之间的间隔等分）
14.  
15. space-around; （两侧，和子控件之间都有间隔，子控件的间隔是两个间隔的两倍）

1. align-items: (属性在交叉轴上如何对齐)
2.  
3. flex-start;（交叉轴的起点对齐）
4.  
5. flex-end;（交叉轴的终点对齐）
6.  
7. center;（交叉轴的中点对齐）
8.  
9. baseline;（项目第一行文字的基线对齐）
10.  
11. stretch;（如果项目未设置高度或是设置为auto，将占满整个容器的高度）

1. align-content:(子类里面有多行布局时的对齐方式，只有一个布局时，该属性不起作用)
2.  
3. flex-start;（交叉轴的起点对齐）
4.  
5. flex-end;（交叉轴的终点对齐）
6.  
7. center;（交叉轴的中点对齐）
8.  
9. space-between;（ 两端对齐，子控件之间的间隔等分）
10.  
11. space-around; （两侧，和子控件之间都有间隔，子控件的间隔是两个间隔的两倍
12.  
13. stretch;（如果项目未设置高度或是设置为auto，将占满整个容器的高度）

8.margin的使用  margin属性应用于元素外面的空间，或者是位于元素和浏览器窗口之间的区域，或者元素和元素直接的区域。

margin属性分为：margin-top、margin-right、margin-bottom、margin-left 分别对应上右下左的内边距距离，可取值：auto/数值/百分比。

margin: 10rpx 10rpx 10rpx 10rpx; （如果提供了四个参数，将用在上，右，下，左的顺序上）

margin: 10rpx; （如果是一个参数，就是作用在四个方向上）

margin: 10rpx 10rpx; （如果是两个参数，第一个参数用于上下，第二个参数用于左右）

margin: 10rpx 10rpx 10rpx; (如果是三个参数，第一个参数用于上，第二个参数用于左右，第三个参数用于下)

9.template模板的使用

1. <!--入口模版--> name是设置模板的名字
2. <template name="wxParse">
3. <block wx:for="{{wxParseData}}" wx:key="">
4. <template is="wxParse0" data="{{item}}"/>
5. </block>
6. </template>

然后使用模板is后写模板的name..通过data来传递需要是数据

1. <view class="wxParse">
2. <template is="wxParse" data="{{wxParseData:article.nodes}}"/>
3. </view>

10.修改 wxml 和 wxss 文件将会刷新页面 修改 js 和 json 文件将会重新编译小程序 在 app.json 文件 pages 数组中添加目标页面，将会自动生成该页面目录和所需文件