本文主要是介绍小程序-----小程序开发组件布局，数据绑定，事件，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

小程序UI开发

布局

创建一个小程序项目演示UI组件及样式。

1. 适配

众所周之移动设备种类较多，如操作系统有 Android、IOS、Windows Phone等，屏幕尺寸有 4寸、4.7寸、5.5寸等，甚至屏幕像素密码也存在差异，开发者不得不针对不同的操作系统和不同的屏幕尺寸进行处理。

开发小程序不用担心操作系统的差异，小程序运行在微信中，微信有 Android版本 和 IOS版本，天然可以实现跨平台（操作系统）运行。

为了保证小程序能够在任何尺寸的屏幕上都能正常显示，开发人员需要进行适配置处理，为此微信团队在底层做了专门处理，提供了一个新的尺寸单位 rpx ，rpx是一个相对长度单位，会根据屏幕尺寸自动调整（有点类似百分比的意思）。

rpx（responsive pixel）可以根据屏幕宽度进行自适应。规定所有屏幕宽为750rpx。

rpx 与 px 的换算关系：

上述表格展示了 rpx 与 px 的换算关系，但是是由微信小程序在执行过程中自动换算的，我们只需要了解换算关系就可以了。

一句话：开发小程序时所有屏幕宽度都是 750rpx。

注：开发微信小程序时设计师可以用 750px 作为视觉稿的标准，这样可以一定程序上避免换算带来的误差。

2. 样式

└── FC
    ├── app.js
    ├── app.json
    ├── app.wxss
    ├── pages
    │   └── style ................................................. 演示 wxss 的使用
    │       ├── common.wxss
    │       ├── index.js
    │       ├── index.wxml
    │       └── index.wxss
    └── project.config.json

小程序会自动根据 wxml 文件名，自动将 wxss 进行加载，例如 当加载 pages/style/index.wxml 时，会自动将 pages/style/index.wxss 加载。

• 样式导入

  使用 @import 语句可以导入外联样式表， @import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。

  /** common.wxss **/
  page {
  	background: #F0F0F0;
  }
  

  /** index.wxss **/
  @import "common.wxss";
  page {
  	background: #F2F2F2;
  }
  

• 内联样式

  • 通过 style 属性直接定义样式。

  <!-- index.wxml -->
  <view style="color: red">学习开发小程序</view>
  

• 外部样式

  • 通过 class 属性指定样式规则，属性值为类选择器名称，可以同时指定多个样式规则，中间以空格进行分隔。

  /** index.wxss **/
  .demo {
      width: 3750rpx;
      height: 100rpx;
      background: pink;
  }
  

  <!-- index.wxml -->
  
  <!-- demo 类选择器 -->
  <view class="demo">学习小程序</view>
  

  • 通过 id 属性指定样式规则，属性值为 id 选择器名称。

  /** index.wxss **/
  .demo {
      width: 375rpx;
      height: 100rpx;
      background: pink;
  }
  
  #test {
      text-align: center;
      line-height: 100rpx;
      font-size: 40rpx;
  }
  

  <!-- index.wxml -->
  
  <!-- test id选择器 -->
  <view class="demo" id="test">学习小程序</view>
  

3. 组件

小程序里的组件其实指的是 wxml 的标签，如 input、form、view等。

创建 demo 目录，演示各组件的使用

└── FC
    ├── app.js
    ├── app.json
    ├── app.wxss
    ├── pages
+   │   ├── demo ............................................... 演示各组件的使用
    │   └── style
    │       ├── common.wxss
    │       ├── index.js
    │       ├── index.wxml
    │       └── index.wxss
    └── project.config.json

1.image 相当于 html 中的 img 标签，用来加载图片。

创建 image.js 和 image.wxml，将提前准备好的 static 粘进来

└── FC
    ├── app.js
    ├── app.json
    ├── app.wxss
    ├── pages
    │   ├── demo
+   │   │   ├── image.js
+   │   │   └── image.wxml .................................... 演示 image 组件
    │   └── style
    │       ├── common.wxss
    │       ├── index.js
    │       ├── index.wxml
    │       └── index.wxss
    ├── project.config.json
+   └── static
+       ├── images
+       │   ├── blank.png
+       │   ├── icon.png
+       │   ├── ......
+       │   └── ......
+       └── uploads
+           ├── content_1.png
+           ├── slide_3.jpg
+           ├── slide_4.jpg
+           ├── ......
+           └── ......

image 组件的使用

<!-- image.wxml -->

<!-- 通过 src 属性加载图片 -->
<!-- 通过 mode 属性调整 图片的的显示方式 (裁切/缩放) -->
<!-- image 组件默认宽度为300px，默认高度为225px -->
<image src="../../static/uploads/item_1.png" mode="aspectFit"></image>

关于 mode 有效值

2. text 相当于 html 中的 span，用来定义文本

└── FC
    ├── app.js
    ├── app.json
    ├── app.wxss
    ├── pages
    │   ├── demo
    │   │   ├── image.js
    │   │   ├── image.wxml
+   │   │   ├── text.js
+   │   │   └── text.wxml .................................... 演示 image 组件
    │   └── style
    │       ├── common.wxss
    │       ├── index.js
    │       ├── index.wxml
    │       └── index.wxss
    ├── project.config.json
    └── static
        ├── images
        └── uploads

text 组件的使用

<!-- text.wxml -->
<text>世上本无事，庸人自扰之</text>

3. view 相当于 html 中的 div，一般做为容器出现。

└── FC
    ├── app.js
    ├── app.json
    ├── app.wxss
    ├── pages
    │   ├── demo
    │   │   ├── image.js
    │   │   ├── image.wxml
    │   │   ├── text.js
    │   │   ├── text.wxml
+   │   │   ├── view.js
+   │   │   └── view.wxml .................................... 演示 view 组件
    │   └── style
    ├── project.config.json
    └── static
        ├── images
        └── uploads

view 组件的使用

<!-- view.wxml -->

<!-- 模仿 PC网页 布局结构 -->
<view class="wrapper">
    <!-- 头部 -->
    <view class="header"></view>
    <!-- 主体 -->
    <view class="body">
        <!-- 侧边栏 -->
    	<view class="aside"></view>
        <!-- 内容 -->
        <view class="content"></view>
    </view>
    <!-- 底部 -->
    <view class="footer"></view>
</view>

4. 小试牛刀

到目前为止我们学习了 image、text、image 三个组件，下面使用这三个组件布局一个页面。

创建 index 目录及 index.wxml、index.wxss、index.js 三个文件。

└── FC
    ├── app.js
    ├── app.json
    ├── app.wxss
    ├── pages
    │   ├── demo
    │   │   ├── image.js
    │   │   ├── image.wxml
    │   │   ├── text.js
    │   │   ├── text.wxml
    │   │   ├── view.js
    │   │   └── view.wxml
+   │   ├── index
+   │   │   ├── index.js
+   │   │   ├── index.wxml
+   │   │   └── index.wxss
    │   └── style
    ├── project.config.json
    └── static
        ├── images
        └── uploads

效果如下图所示:

5. swiper 滑块组件，可以用来实现类似轮播图布局效果。

└── FC
    ├── app.js
    ├── app.json
    ├── app.wxss
    ├── pages
    │   ├── demo
    │   │   ├── image.js
    │   │   ├── image.wxml
+   │   │   ├── swiper.js
+   │   │   ├── swiper.wxml .................................. 演示 swiper 组件
+   │   │   ├── swiper.wxss
    │   │   ├── text.js
    │   │   ├── text.wxml
    │   │   ├── view.js
    │   │   └── view.wxml
    │   ├── index
    │   └── style
    ├── project.config.json
    └── static
        ├── images
        └── uploads

swiper 使用如下

<!-- swiper.wxml -->
<swiper>
    <swiper-item>1</swiper-item>
    <swiper-item>2</swiper-item>
    <swiper-item>3</swiper-item>
</swiper>

/* swiper.wxss */
swiper-item {
    background: pink;
    text-align: center;
    line-height: 300rpx;
    font-size: 80rpx;
}

6. 继续完善 index 页面，添加轮播图

通过学习 view、image、text、swiper 对组件有了基本了解，小程序还有其它组件，后续学习中在对应的应用场景再进行学习。也可以扫码查看可微信团队官方演示

7. 真机访问

写到这里相信不少猿人已经尝试扫码进行真机调试了，然而会遇到一个错误警告！！！

原因在于小程序总大小（包括图片、字体等静态资源）不能超过 2MB。

这个问题也很好解决，可以将图片、字体等静态资源放到服务器（公司会购买）上，然后通网络地址进行访问，也可以使用当下比较流行的图床服务。

然后将代码中图片路径换成网络地址，如下所示

<!-- 原来路径 -->
<image src="../../static/uploads/item_1.png" mode="aspectFit"></image>

<!-- 新图片路径 -->
<image src="http://fc.botue.com/uploads/item_1.png" class="thumb" mode="aspectFit"/>

4. 弹性盒子

数据

通过前面了解，掌握了小程序页面的布局，然而小程序页面中显示的内容都是静态（写列）的，真正线上运行的小程序内容都应该是动态的，接下来我们学习如何在小程序中处理页面数据。

1. 数据绑定

小程序内容数据是由 JavaScript 控制提供的。

我们知道每个页面都是由 .wxml、.wxss、.js、.json 构成，其中 wxml 定义结构，wxss 定义表现、json 进行配置，.js 则专门处理逻辑。

当加载页面时，同名的 js 文件会自动加载并执行，如加载 pages/demo/data.wxml 时，pages/demo/data.js 会自动被加载执行。

所谓数据绑定是指数据与页面中组件的关联关系。使用 Mustache 语法（双大括号）将数据变量包起来。

创建 data.js、data.wxml、data.wxss 三个文件

└── FC
    ├── app.js
    ├── app.json
    ├── app.wxss
    ├── pages
    │   ├── demo
+   │   │   ├── data.js ........................................... 数据逻辑
+   │   │   ├── data.wxml ......................................... 演示数据处理
+   │   │   ├── data.wxss
    │   │   ├── image.js
    │   │   ├── image.wxml
    │   │   ├── ......
    │   │   ├── view.js
    │   │   └── view.wxml
    │   ├── index
    │   └── style
    ├── project.config.json
    └── static
        ├── images
        └── uploads

1. 简单数据

// pages/demo/data.js

// Page 是全局提供的，用来创建一个页面实例
Page({
    // 通过 data 属性，初始化页面中用到的数据
    data: {
        // 字符串类型
        message: 'hello world!'
    }
});

<!-- pages/demo/data.wxml -->
<text class="msg">{{message}}</text>

/* pages/demo/data.wxss */
page {
    height: 100%;
    display: flex;
}

.msg {
    display: block;
    margin: auto;
    font-size: 60rpx;
    font-weight: bold;
}

2. 复杂数据

// pages/demo/data.js
Page({
    // 通过 data 属性，初始化页面中用到的数据
    data: {
        user: {
            name: '小明',
            age: 16
        },
        courses: ['wxml', 'wxss', 'javascript']
    }
});

<!-- pages/demo/data.wxml -->
<text>我叫{{user.name}}，我今年{{user.age}}岁了，我在学习{{courses[0]}}课程。</text>

3. 运算

// pages/demo/data.js
Page({
    // 通过 data 属性，初始化页面中用到的数据
    data: {
        a: 10,
        b: 5
    }
});

<!-- pages/demo/data.wxml -->
<text>{{a}} + {{b}} = {{a + b}}</text>

4. 组合

视情况介绍

2. 列表数据

将数组数据遍历绑定到组件中。通过 wx:for 属性实现。

1. 基本用法

// pages/demo/data.js
Page({
    // 通过 data 属性，初始化页面中用到的数据
    data: {
        users: [
            {name: '小明', age: 16, gender: '男'},
            {name: '小刚', age: 19, gender: '男'},
            {name: '小红', age: 18, gender: '女'},
            {name: '小丽', age: 17, gender: '女'}
        ]
    }
});

<!-- pages/demo/data.wxml -->
<view wx:for="{{users}}">
    <text>{{index+1}}</text>
    <text>{{item.name}}</text>
    <text>{{item.age}}</text>
    <text>{{item.gender}}</text>
</view>

wx:for 属性将当前组件按着数组的长度动态创建，并且通过 index 变量可以访问到数组的索引值，通过item变量可以访问到单元值。

2. 指定索引值变量、单元值变量

通过 wx:for 对数组数据进行遍历时，可以分别指定访问数组索引值变量和单元值的变量。

wx:for-index 指定索引值变量，wx:for-item 批定单元值变量。

wx:for 支持嵌套

// pages/demo/data.js
Page({
    // 通过 data 属性，初始化页面中用到的数据
    data: {
        brands: [
            {
                name: '耐克',
                origin: '美国',
                category: ['男装', '女装', '鞋', '体育用品']
            },
            {
                name: 'SK-II',
                origin: '韩国',
                category: ['防晒霜','面膜', '洗护']
            }
        ]
    }
});

<!-- pages/demo/data.wxml -->
<view wx:for="{{brands}}" wx:for-index="k" wx:for-item="v">
    <view>
        <text>{{k+1}} </text>
        <text> {{v.name}} </text>
        <text> {{v.origin}}</text>
    </view>
    <view>
        <text wx:for="{{v.category}}">{{item}}</text>
    </view>
</view>

执行结果

3. block

通过 block 可以将多个组件元素“包”到一起进行渲染，block 只是提供一种结构，并不会被渲染到页面中。一般这样做的目的是可以精简组件结构。

<!-- pages/demo/data.wxml -->   wx:key
<block wx:for="{{users}}">
    <text>{{item.name}}</text>
    <text>{{item.age}}</text>
</block>

// pages/demo/data.js
Page({
    // 通过 data 属性，初始化页面中用到的数据
    data: {
        users: [
            {name: '小明', age: 18},
            {name: '小红', age: 16}
        ]
    }
});

3. 条件数据

根据条件控制是否渲染某个（些）组件，通过 wx:if 属性实现。

1. 基本用法

<!-- pages/demo/data.wxml -->
<view wx:if="{{true}}">
    <text>锄禾日当午</text>
</view>

2. 多分支

<!-- pages/demo/data.wxml -->
<view wx:for="{{users}}">
    <text>{{index+1}} </text>
    <text> {{item.name}}</text>
    <text> {{item.age}} </text>
    <text wx:if="{{item.age <= 14}}"> 儿童</text>
    <text wx:elif="{{item.age <= 18}}"> 未成年</text>
    <text wx:else> 成年人</text>
</view>

// pages/demo/data.js
Page({
    // 通过 data 属性，初始化页面中用到的数据
    data: {
        users: [
            {name: '小明', age: 18},
            {name: '小红', age: 13},
            {name: '小丽', age: 19}
        ]
    }
});

3. block

将满足同一条件的组件“包”起来，同时控制是否渲染。

<!-- pages/demo/data.wxml -->
<view>
    <text>序号 </text>
    <text> 姓名 </text>
    <text> 年龄 </text>
    <text> 成年 </text>
    <text> 批准</text>
</view>
<view wx:for="{{users}}">
    <text>{{index+1}} </text>
    <text> {{item.name}}</text>
    <text> {{item.age}} </text>
    <block wx:if="{{item.age>18}}">
        <text>是</text>
        <text>是</text>
    </block>
    <block wx:else>
        <text>否</text>
        <text>否</text>
    </block>
</view>

// pages/demo/data.js
Page({
    // 通过 data 属性，初始化页面中用到的数据
    data: {
        users: [
            {name: '小明', age: 18},
            {name: '小红', age: 16},
            {name: '小丽', age: 19}
        ]
    }
});

事件

小程序中的事件同 DOM 中的事件含义一样，只是语法及及其执行细节上有些差异。

1. 事件监听

小程中通过属性为组件添加事件的监听。例如 tap 事件（相当于 html 中的 click事件）

语法格式： bind:事件名称="回调函数"

<!-- pages/demo/data.wxml -->
<!-- 为button组件绑定了 tap 事件，当用户点击了，会执行 sayHi 函数 -->
<button type="primary" bind:tap="sayHi">点我试试</button>

// pages/demo/data.js
Page({
    // 事件回调函数
    sayHi: function () {
        console.log('Hi~')
    }
});

监听表单的 blur、 focus事件：

// pages/demo/data.js
Page({
    // 事件回调函数
    sayHi: function () {
        console.log('Hi~');
    },
    sayBye: function () {
        console.log('Bye~');
    }
});

<!-- pages/demo/data.wxml -->
<view> 
    <label for="">姓名: </label>
    <input type="text" bind:focus="sayHi" bind:blur="sayBye" />
</view>
<view> 
    <label for="">密码: </label>
    <input type="text"/>
</view>

以前在学习 DOM 时见到的事件，绝大多数在小程序中都是被支持的。

2. 事件冒泡

小程序事件处理机制与DOM类似，冒泡现象依然存在，但并非所有事件都会冒泡。

<!-- pages/demo/data.wxml -->
<view class="parent" bind:tap="foo">
    <view class="child" bind:tap="bar"></view>
</view>

// pages/demo/data.js
Page({
    // 事件回调函数
    foo: function () {
        console.log('parent');
    },
    bar: function () {
        console.log('child');
    }
});

如下图所示，当点击 .child 盒子时，同时触发了 .child 和 .parent 的 tap事件

3. 事件对象

同 DOM 一样，当某个事件被触发时，通过一个对象可以获得被触发事件的相关信息，例如 事件类型、触发元素等。

事件对象，通过回调函数的第一个参数来接收，习惯命名为 ev。

// pages/demo/data.js
Page({
    // 事件回调函数
    sayHi: function (ev) {
        console.log(ev);
    }
});

<!-- pages/demo/data.wxml -->
<button type="primary" bind:tap="sayHi">点我试试</button>

这篇关于小程序-----小程序开发组件布局，数据绑定，事件的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！