标签：index 绑定 wxml demo 程序开发 js ----- wxss data
小程序UI开发
布局
创建一个小程序项目演示UI组件及样式。
1. 适配
众所周之移动设备种类较多，如操作系统有 Android、IOS、Windows Phone等，屏幕尺寸有 4寸、4.7寸、5.5寸等，甚至屏幕像素密码也存在差异，开发者不得不针对不同的操作系统和不同的屏幕尺寸进行处理。
开发小程序不用担心操作系统的差异，小程序运行在微信中，微信有 Android版本 和 IOS版本，天然可以实现跨平台（操作系统）运行。
为了保证小程序能够在任何尺寸的屏幕上都能正常显示，开发人员需要进行适配置处理，为此微信团队在底层做了专门处理，提供了一个新的尺寸单位 rpx ，rpx是一个相对长度单位，会根据屏幕尺寸自动调整（有点类似百分比的意思）。
rpx（responsive pixel）可以根据屏幕宽度进行自适应。规定所有屏幕宽为750rpx。
rpx 与 px 的换算关系：
| 设备 | 屏幕尺寸 | rpx换算px (屏幕宽度/750) | px换算rpx (750/屏幕宽度) |
|---|---|---|---|
| iPhone5 | 320px | 1rpx = 0.42px | 1px = 2.34rpx |
| 小米MIX 2S | 360px | 1rpx = 0.48px | 1px = 2.083rpx |
| iPhone6 | 375px | 1rpx = 0.5px | 1px = 2rpx |
| iPhone6 Plus | 414px | 1rpx = 0.552px | 1px = 1.81rpx |
| HUAWEI Mate 10 | 480px | 1rpx = 0.64px | 1px = 1.562rpx |
上述表格展示了 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>
标签：index,绑定,wxml,demo,程序开发,js,-----,wxss,data 来源： https://blog.csdn.net/weixin_45176415/article/details/115477772
本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享； 2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关； 3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关； 4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除； 5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。