一.小程序主要文件
- WXML——模板文件
- WXSS——样式文件,样式可直接通过import导入
- JS——逻辑脚本文件,逻辑处理,网络请求
- JSON——配置/设置文件,如标题,tabber,页面注册
- app.json ——配置文件入口,整个小程序的全局配置,网络超时时间,底部tab,页面路径
- app.js——可以没有内容,可以在里面声明全局变量,监听生命周期
- app.wxss——全局配置样式文件
二.常用命令
2.1 模板语法——数据绑定{{}}
2.1.1 普通写法
<view> {{ message }} </view>
2.1.2 组件类型
<view id="item-{{id}}"> </view>
Page({
data: {
message: 'Hello MINA!'
}
})
2.1.3 bool类型
<checkbox checked="{{false}}"> </checkbox>
不要直接写checked=“false”，其计算结果是⼀个字符串
2.运算
2.2.1 三元运算
<view hidden="{{flag ? true : false}}"> Hidden </view>
2.2.2 算数运算
<view> {{a + b}} + {{c}} + d </view>
Page({
data: {
a: 1,
b: 2,
c: 3
}
})
2.2.3 逻辑运算
<view wx:if="{{length > 5}}"> </view>
字符串运算
<view>{{"hello" + name}}</view>
Page({
data:{
name: 'MINA'
}
})
注意:花括号和引号之间如果有空格，将最终被解析成为字符串
3.列表渲染
3.1 wx:for
项的变量名默认为 item wx:for- item 可以指定数组当前元素的变量名
下标变量名默认为 index wx:for- index可以指定数组当前下标的变量名
wx:key⽤来提⾼数组渲染的性能
wx:key 绑定的值?有如下选择
3.1.1string类型，表⽰循环项中的唯⼀属性。如
list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key="id"
3.1.2 保留字*this，它的意思是item本⾝，*this代表的必须是唯⼀的字符串和数组。
list:[1,2,3,4,5]
wx:key="*this"
3.2 block
渲染⼀个包含多节点的结构块?block最终不会变成真正的dom元素
<block wx:for="{{[1, 2, 3]}}" wx:key="*this" >
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
4.条件渲染
4.1 条件渲染 wx:if
在框架中，使⽤wx:if="{{condition}}" 来判断是否需要渲染该代码块：
<view wx:if="{{false}}">1</view>
<view wx:elif="{{true}}">2</view>
<view wx:else>3</view>
4.2 hidden
<view hidden="{{condition}}"> True </view>
类似wx:if
频繁切换⽤ hidden
不常使⽤⽤ wx:if
5.事件绑定
⼩程序中绑定事件，通过bind关键字来实现。如 bindtap bindinput bindchange 等
不同的组件⽀持不同的事件，具体看组件的说明即可
5.1 wxml
<input bindinput="handleInput" />
5.2 page
Page({
// 绑定的事件
handleInput: function(e) {
console.log(e);
console.log("值被改变了");
}
})
5.3 特别注意 5.3.1 绑定事件时不能带参数,不能带括号,以下为错误写法
<input bindinput="handleInput(100)" />
5.3.2 事件传值通过标签⾃定义属性的⽅式和value
<input bindinput="handleInput" data-item="100" />
5.3.3 事件触发时获取数据
handleInput: function(e) {
// {item:100}
console.log(e.currentTarget.dataset)
// 输入框的值
console.log(e.detail.value);
}
6.样式WXSS
6.1 介绍
WXSS是⼀套样式语⾔，⽤于描述WXML的组件样式。
与CSS相⽐，WXSS扩展的特性有：
- 响应式⻓度单位rpx
- 样式导⼊
6.2 尺寸单位
rpx （responsive pixel）:可以根据屏幕宽度进⾏⾃适应。规定屏幕宽为 750rpx 。如在iPhone6上，屏幕宽度为 375px ，共有750个物理像素，则 750rpx = 375px = 750物理像素 ,1rpx = 0.5px = 1物理像素
| 设备 | rpx换算px(屏幕宽度/750) | px换算rpx(750/屏幕宽度) |
|---|---|---|
| iPhone5 | 1rpx=0.42px | 1px=2.34rpx |
| iPhone6 | 1rpx=0.5px | 1px=2rpx |
| iPhone6 Plus | 1rpx=0.552px | 1px=1.81rpx |
建议：开发微信⼩程序时设计师可以⽤iPhone6作为视觉稿的标准。
使⽤步骤：
1.确定设计稿宽度pageWidth
2.计算⽐例 750rpx = pageWidth px ,因1px=750rpx/pageWidth
3.在less⽂件中，只要把设计稿中的px =>750/pageWidth rpx 即可。
6.3 样式导⼊
wxss中直接就⽀持，样式导⼊功能。
也可以和less中的导⼊混⽤。
使⽤@import 语句可以导⼊外联样式表，只⽀持相对路径。
/** common.wxss **/
.small-p {
padding:5px;
}
/** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
6.4 选择器
特别需要注意的是⼩程序不⽀持通配符*因此以下代码⽆效！
*{
margin:0;
padding:0;
box-sizing:border-box;
}
⽬前⽀持的选择器有：
| 选择器 | 样例 | 样例描述 |
|---|---|---|
| .class | .intro | 选择所有拥有class=intro的组件 |
| #id | #firstname | 选择拥有id=firstname的组件 |
| element | view | 选择所有view?组件 |
| element,element | view,checkbox | 选择所有⽂档的view组件和所有的checkbox组件 |
| nth-child(n) | view:nth-child(n) | 选择某个索引的标签 |
| ::after | view::after | 在view组件后边插⼊内容 |
| ::before | view::before | 在view组件前边插⼊内容 |
7.常见组件
view,text,button,image,navigator,icon,swiper,radio,checkbox,rich- text
7.1 view
代替原来的div标签
<view hover-class="h-class">
点击我试试
</view>
7.2 text 1.⽂本标签 2.只能嵌套text 3.⻓按⽂字可以复制（只有该标签有这个功能） 4.可以对空格回⻋进⾏编码
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| selectable | Boolean | false | ⽂本是否可选 |
| decode | Boolean | false | 是否解码 |
<text selectable="{{false}}" decode="{{false}}">
普 通
</text>
7.3 image 1.图⽚标签，image组件默认宽度320px、⾼度240px 2.⽀持懒加载
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| src | String | 图⽚资源地址 | |
| mode | String | scaleToFill | 图⽚裁剪、缩放的模式 |
| lazy-load | Boolean | false | 图⽚懒加载 |
mode有效值： mode有13种模式，其中4种是缩放模式，9种是裁剪模式。
| 模式 | 值 | 说明 |
|---|---|---|
| 缩放 | scaleToFill | 不保持纵横⽐缩放图⽚，使图⽚的宽⾼完全拉伸⾄填满image元素 |
| 缩放 | aspectFit | 保持纵横⽐缩放图⽚，使图⽚的⻓边能完全显⽰出来 |
| 缩放 | aspectFill | 保持纵横⽐缩放图⽚，只保证图⽚的短边能完全显⽰出来。 |
| 缩放 | widthFix | 宽度不变，⾼度⾃动变化，保持原图宽⾼⽐不变 |
| 裁剪 | top | 不缩放图⽚，只显⽰图⽚的顶部区域 |
| 裁剪 | bottom | 不缩放图⽚，只显⽰图⽚的底部区域 |
| 裁剪 | center | 不缩放图⽚，只显⽰图⽚的中间区域 |
| 裁剪 | left | 不缩放图⽚，只显⽰图⽚的左边区域 |
| 裁剪 | right | 不缩放图⽚，只显⽰图⽚的右边区域 |
| 裁剪 | top left | 不缩放图⽚，只显⽰图⽚的左上边区域 |
| 裁剪 | top right | 不缩放图⽚，只显⽰图⽚的右上边区域 |
| 裁剪 | bottom left | 不缩放图⽚，只显⽰图⽚的左下边区域 |
| 裁剪 | bottom right | 不缩放图⽚，只显⽰图⽚的右下边区域 |
7.4 swiper 微信内置轮播图组件 默认宽度100%.⾼度150px
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| indicator-dots | Boolean | false | 是否显⽰⾯板指⽰点 |
| indicator-color | Color | rgba(0,0,0,.3) | 指⽰点颜⾊ |
| indicator-active-color | Color | #000000 | 当前选中的指⽰点颜⾊ |
| autoplay | Boolean | false | 是否⾃动切换 |
| interval | Number | 5000 | ⾃动切换时间间隔 |
| circular | Boolean | false | 是否循环轮播 |
7.4.1 滑块视图容器-swiper 7.4.2 滑块-swiper-item 默认宽度和⾼度都是100%
8.navigator 导航组件 类似超链接标签
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| target | String | self | 在哪个⽬标上发⽣跳转，默认当前⼩程序，可选值self/miniProgram |
| url | String | 当前⼩程序内的跳转链接 | |
| open-type | String | navigate | 跳转⽅式 |
open-type有效值：
| 值 | 说明 |
|---|---|
| navigate | 保留当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不能跳到tabbar⻚⾯ |
| redirect | 关闭当前⻚⾯，跳转到应⽤内的某个⻚⾯，但是不允许跳转到tabbar⻚⾯ |
| switchTab | 跳转到tabBar⻚⾯，并关闭其他所有⾮tabBar⻚⾯ |
| reLaunch | 关闭所有⻚⾯，打开到应⽤内的某个⻚⾯ |
| navigateBack | 关闭当前⻚⾯，返回上⼀⻚⾯或多级⻚⾯。可通过getCurrentPages()获取当前的⻚⾯栈，决定需要返回⼏层 |
| exit | 退出⼩程序，target=miniProgram时⽣效 |
9.rich-text 富文本标签,可以将字符串解析成?对应标签，类似?vue中? v v- -l html 功能
