用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

微客吧 首页 教程 微信小程序 新手教程 查看内容

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

纸飞机 2018-3-8 09:37

作者:wangxinxus,来自授权地址1.公共文件app文件可以放一些经常用到的方法 例如网络请求和判断网络的封装在文件中如果想使用app.js中的方法直接var app = getApp() 直接就可以调用了2.position相关的设置想把文字 ...

作者:wangxinxus,来自

授权地址

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. row-reverse; (横向布局 ,从右到左)
  6. column-reverse;(垂直布局,布局从下到上)
  1. flex-wrap: (当布局一行里面的数据无法全部显示的时候,如何换行)
  2. nowrap; (默认,不换行)
  3. wrap; (换行,第一行在上面)
  4. wrap-reverse; (换行,第一行在下面)
  1. flex-flow: (是flex-directionflex-wrap的简写,默认值是,row, nowrap)
  2. 例子:flex-flow:row||nowrap;
  3. justify-content: (父布局对其中的子布局的对齐方式)
  4. flex-start;(左对齐)
  5. flex-end;(右对齐)
  6. center;(居中)
  7. space-between;( 两端对齐,子控件之间的间隔等分)
  8. space-around; (两侧,和子控件之间都有间隔,子控件的间隔是两个间隔的两倍)
  1. align-items: (属性在交叉轴上如何对齐)
  2. flex-start;(交叉轴的起点对齐)
  3. flex-end;(交叉轴的终点对齐)
  4. center;(交叉轴的中点对齐)
  5. baseline;(项目第一行文字的基线对齐)
  6. stretch;(如果项目未设置高度或是设置为auto,将占满整个容器的高度)
  1. align-content:(子类里面有多行布局时的对齐方式,只有一个布局时,该属性不起作用)
  2. flex-start;(交叉轴的起点对齐)
  3. flex-end;(交叉轴的终点对齐)
  4. center;(交叉轴的中点对齐)
  5. space-between;( 两端对齐,子控件之间的间隔等分)
  6. space-around; (两侧,和子控件之间都有间隔,子控件的间隔是两个间隔的两倍
  7. 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. name="wxParse">
  3. wx:for="{{wxParseData}}" wx:key="">
  4. is="wxParse0" data="{{item}}"/>

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

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

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

鲜花
鲜花
握手
握手
雷人
雷人
路过
路过
鸡蛋
鸡蛋
分享至 : QQ空间
收藏