1、注册微信小程序
1.1、注册地址:https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN
1.2、登录后的一些设置
点击左侧的"设置"
设置用户名头像
查看自己的AppId(这个值非常重要,开发会遇到)
1.3、开发者工具下载以及使用
下载地址:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
开发工具的使用
- 1、打开工具,使用自己的微信扫描二维码进行登录
- 2、根据自己的需求填写项目信息(AppID就是上上边注册账号后的那个值)
- 3、创建好之后,进入开发的主界面,有如下三大区域
- 4、主界面介绍
注意:新建子页面的时候,只需要自己在pages文件夹下新建后缀是wxml的文件即可,在app.json注册这个页面后,其他三个对应的文件会自动创建
2、小程序配置、组件介绍
2.1、目录结构说明
在小程序中,对于html、js、css均做了扩展与限制,并且对其文件后缀有了新的定义
主体文件,由三个文件组成,必须放在项目的根目录,如下:
文件 | 必填 | 作用 |
---|---|---|
app.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共设置 |
app.wxss | 否 | 小程序公共样式表 |
文件类型 | 必填 | 作用 |
---|---|---|
js | 是 | 页面逻辑 ( 微信小程序没有window和document对象 ) |
wxml | 是 | 页面结构 ( WeiXin Markup Language,不是HTML语法 ) |
wxss | 否 | 页面样式表 (WeiXin Style Sheets 拓展了rpx尺寸单位,微信专属响应式像素 ) |
json | 否 | 页面配置 |
2.2、配置说明
2.2.1、app.json 配置项列表
app.json 文件用来对微信小程序进行全局配置,决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等
示例:
{
"pages": ["pages/index/index", "pages/logs/index"],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}
属性:
属性 | 类型 | 必填 | 描述 | 支持版本 |
---|---|---|---|---|
pages | StringArray | 是 | 页面路径列表 | |
window | Object | 否 | 全局的默认窗口表现 | |
tabBar | Object | 否 | 底部 tab 栏的表现 | |
networkTimeout | Object | 否 | 网络超时时间 | |
debug | Boolean | 否 | 是否开启 debug 模式,默认关闭 | |
functionalPages | Boolean | 否 | 是否启用插件功能页,默认关闭 | 2.1.0 |
subpackages | Object Array | 否 | 分包结构配置 | 1.7.3 |
workers | String | 否 | worker代码放置的目录 | 1.9.90 |
requiredBackgroundModes | String Array | 否 | 需要在后台使用的能力,如「音乐播放」 | |
plugins | Object | 否 | 使用到的插件 | 1.9.6 |
preloadRule | Object | 否 | 分包预下载规则 | 2.3.0 |
resizable | Boolean | 否 | iPad 小程序是否支持屏幕旋转,默认关闭 | 2.3.0 |
navigateToMiniProgramAppIdList | String Array | 否 | 需要跳转的小程序列表,详见 wx.navigateToMiniProgram | 2.4.0 |
usingComponents | Object | 否 | 全局自定义组件配置,开发者工具 1.02.1810190 及以上版本支持此字段 |
2.2.2、window配置
用于设置小程序的状态栏、导航条、标题、窗口背景色。
属性 | 类型 | 默认值 | 描述 | 最低版本 |
---|---|---|---|---|
navigationBarBackgroundColor | HexColor | #000000 | 导航栏背景颜色,如 #000000 | |
navigationBarTextStyle | String | white | 导航栏标题颜色,仅支持 black / white | |
navigationBarTitleText | String | 导航栏标题文字内容 | ||
navigationStyle | String | default | 导航栏样式,仅支持以下值: default 默认 样式 custom 自定义导航栏,只保留右上角胶 囊按钮 | 微信版本6.6.0 |
backgroundColor | HexColor | #ffffff | 窗口的背景色 | 微信版本6.6.0 |
backgroundTextStyle | String | dark | 下拉 loading 的样式,仅支持 dark / light | |
backgroundColorTop | String | #ffffff | 顶部窗口的背景色,仅 iOS 支持 | 微信版本6.5.16 |
backgroundColorBottom | String | #ffffff | 底部窗口的背景色,仅 iOS 支持 | 微信版本6.5.16 |
enablePullDownRefresh | Boolean | false | 是否开启当前页面的下拉刷新。 详见Page.onPullDownRefresh | |
onReachBottomDistance | Number | 50 | 页面上拉触底事件触发时距页面底部距离,单 位为px。 详见 Page.onReachBottom | |
pageOrientation | String | portrait | 屏幕旋转设置,仅支持 auto / portrait 详 见 响应显示区域变化 | 微信版本6.7.3 |
- 注:HexColor(十六进制颜色值),如"#ff00ff"
- 注:navigationStyle 只在 app.json 中生效。开启 custom 后,低版本客户端需要做好兼容。开发者工具基础库版本切到 1.7.0(不代表最低版本,只供调试用)可方便切到旧视觉
- 注:客户端 6.7.2 版本开始,navigationStyle: custom 对 组件无效
示例:
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#33FF00",
"navigationBarTitleText": "我的微信小程序",
"navigationBarTextStyle": "black"
}
}
效果:
2.2.3、tabBar
如果小程序是一个多 tab 应用(客户端窗口的底部或顶部有 tab 栏可以切换页面),可以通过 tabBar 配置项指定 tab 栏的表现,以及 tab 切换时显示的对应页面
属性 | 类型 | 必填 | 默认值 | 描述 |
---|---|---|---|---|
color | HexColor | 是 | tab 上的文字默认颜色,仅支持十六进制颜色 | |
backgroundColor | HexColor | 是· | tab 上的文字选中时的颜色,仅支持十六进制颜色 | |
selectedColor | HexColor | 是 | tab 的背景色,仅支持十六进制颜色 | |
borderStyle | String | 否 | black | tabbar上边框的颜色, 仅支持 black / white |
list | Array | 是 | tab 的列表,详见 list 属性说明,最少2个、最 多5个 tab | |
position | String | 否 | bottom | tabBar的位置,仅支持 bottom / top |
属性 | 类型 | 必填 | 说明 |
---|---|---|---|
pagePath | String | 是 | 页面路径,必须在 pages 中先定义 |
text | String | 是 | tab 上按钮文字 |
iconPath | String | 否 | 图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支 持网络图片。 当 postion 为 top 时,不显示 icon。 |
selectedIconPath | String | 否 | 选中时的图片路径,icon 大小限制为40kb,建议尺寸为 81px * 81px,不支持网络图片。 当 postion 为 top 时,不显示 icon。 |
{
"pages": [
"pages/index/index",
"pages/logs/logs"
],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#33FF00",
"navigationBarTitleText": "我的微信小程序",
"navigationBarTextStyle": "black"
},
"tabBar": {
"list": [{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
}
}
会发现,下面的tabBar文字不居中,实际上这是编辑器的问题,在真机上测试是正常的。
问题来了,如何在真机上测试呢?
用手机微信扫码该二维码即可进行真机调试,非常的方便。
2.3、组件
官方文档:https://developers.weixin.qq.com/miniprogram/dev/component/
2.3.1、视图组件
2.3.1.1、view
视图容器,相当于html中的div
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
hover-class | String | none | 指定按下去的样式类。当 hover-class="none" 时,没有点击态效果 | |
hover-stoppropagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 | 1.5.0 |
hover-start-time | Number | 50 | 按住后多久出现点击态,单位毫秒 | |
hover-stay-time | Number | 400 | 按住后多久出现点击态,单位毫秒 | 手指松开后点击态保留时间,单位毫秒 |
<view class="section">
<view class="section__title">flex-direction: row</view>
<view class="flex-wrp" style="flex-direction:row;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
<view class="section">
<view class="section__title">flex-direction: column</view>
<view class="flex-wrp" style="height: 300px;flex-direction:column;">
<view class="flex-item bc_green">1</view>
<view class="flex-item bc_red">2</view>
<view class="flex-item bc_blue">3</view>
</view>
</view>
样式(wxss文件):
/* pages/demo/index.wxss */
.page-section{
margin-bottom: 20rpx;
} .
flex-wrp {display: flex;}
.bc_green {background: green;width:100px; height: 100px;}
.bc_red {background: red;width:100px; height: 100px;}
.bc_blue {background: blue;width:100px; height: 100px;}
2.3.1.2、swiper
滑块视图容器
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
indicator-dots | Boolean | false | 是否显示面板指示点 | |
indicator-color | Color | rgba(0,0, 0, .3) | 指示点颜色 | 1.1.0 |
indicator-activecolor | Color | #000000 | 当前选中的指示点颜色 | 1.1.0 |
autoplay | Boolean | false | 是否自动切换 | |
current | Number | 0 | 当前所在滑块的 index | |
current-item-id | String | "" | 当前所在滑块的 item-id ,不能与 current 被同时指定 | 1.9.0 |
interval | Number | 5000 | 自动切换时间间隔 | |
duration | Number | 500 | 滑动动画时长 | |
circular | Boolean | false | 是否采用衔接滑动 | |
vertical | Boolean | false | 滑动方向是否为纵向 | |
previous-margin | String | "0px" | 前边距,可用于露出前一项的一小部分, 接受 px 和 rpx 值 | 1.9.0 |
next-margin | String | "0px" | 后边距,可用于露出后一项的一小部分, 接受 px 和 rpx 值 | 1.9.0 |
display-multipleitems | Number | 1 | 同时显示的滑块数量 | 1.9.0 |
skip-hidden-itemlayout | Boolean | false | 是否跳过未显示的滑块布局,设为 true 可优化复杂情况下的滑动性能,但会丢失 隐藏状态滑块的布局信息 | 1.9.0 |
bindchange | EventHandle | current 改变时会触发 change 事件, event.detail = {current: current, source: source} | ||
bindanimationfinish | EventHandle | 动画结束时会触发 animationfinish 事 件,event.detail 同上 | 1.9.0 |
示例:
<swiper indicator-dots="true" autoplay="true" interval="3000" duration="500">
<swiper-item>
<image src="http://itcast-haoke.oss-cnqingdao.aliyuncs.com/images/2018/11/30/15435106627858721.jpg" width="375"
height="150"/>
</swiper-item>
<swiper-item>
<image src="http://itcast-haoke.oss-cnqingdao.aliyuncs.com/images/2018/11/30/15435107119124432.jpg" width="375"
height="150"/>
</swiper-item>
</swiper>
效果:
2.3.2、基础组件
2.3.2.1、icon图标
属性名 | 类型 | 默认值 | 说明 |
---|---|---|---|
type | String | false | icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear |
size | Number / String | 23px | icon的大小,单位px(2.4.0起支持rpx) |
color | Color | icon的颜色,同css的color |
<view class="group">
<icon type="success" size="20" />
<icon type="success_no_circle" size="30" />
<icon type="waiting" size="40" />
<icon type="search" size="50" />
</view>
效果:
2.3.2.2、text文本
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
selectable | Boolean | false | 文本是否可选 | 1.1.0 |
space | String | false | 显示连续空格 | 1.4.0 |
decode | Boolean | false | 是否解码 | 1.4.0 |
值 | 说明 |
---|---|
ensp | 中文字符空格一半大小 |
emsp | 中文字符空格大小 |
nbsp | 根据字体设置的空格大小 |
- decode可以解析的有 < > & '
- 各个操作系统的空格标准并不一致。
- text组件内只支持text嵌套。
- 除了文本节点以外的其他节点都无法长按选中。
<view class="container">
<text>这是一段文本</text>
</view>
2.3.2.3、progress进度条
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
percent | Float | 无 | 百分比0~100 | |
show-info | Boolean | false | 在进度条右侧显示百分比 | |
border-radius | Number / String | 0 | 圆角大小,单位px(2.4.0起支持rpx) | 2.3.1 |
font-size | Number / String | 16 | 右侧百分比字体大小,单位px(2.4.0起支 持rpx) | 2.3.1 |
stroke-width | Number / String | 6 | 进度条线的宽度,单位px(2.4.0起支持rpx) | |
color | Color | #09BB07 | 进度条颜色 (请使用 activeColor) | |
activeColor | Color | 已选择的进度条的颜色 | ||
backgroundColor | Color | 未选择的进度条的颜色 | ||
active | Boolean | false | 进度条从左往右的动画 | |
active-mode | String | backwards | backwards: 动画从头播;forwards:动 画从上次结束点接着播 | 1.7.0 |
bindactiveend | EventHandle | 动画完成事件 | 2.4.1 |
<view>
<progress percent="20" show-info />
<progress percent="40" stroke-width="12" />
<progress percent="60" color="pink" />
<progress percent="80" active />
</view>
样式:
/* pages/demo/index.wxss */
progress{
margin: 10px
}
2.3.3
2.3.3.1、button按钮
属性名 | 类型 | 默认值 | 说明 | 生效时机 |
---|---|---|---|---|
size | String | default | 按钮的大小 | |
type | String | default | 按钮的样式类型 |
<view>
<button size='default'>默认尺寸按钮</button>
<button size='mini'>mini按钮</button>
<button size='mini' type="primary">绿色mini按钮</button>
<button size='mini' type="warn">红色mini按钮</button>
</view>
效果:
2.3.3.2、form表单
将组件内的用户输入的内容提交。
当点击表单中 form-type 为 submit 的按钮组件时,会将表单组件中的 value 值进行提交,需要在表单组件中加上name 来作为 key。
属性名 | 类型 | 说明 | 最低版本 |
---|---|---|---|
reportsubmit | Boolean | 是否返回 formId 用于发送模板消息 | |
bindsubmit | EventHandle | 携带 form 中的数据触发 submit 事件,event.detail = {value : {'name': 'value'} , formId: ''} | |
bindreset | EventHandle | 表单重置时会触发 reset 事件 |
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="section section_gap">
<view class="section__title">switch</view>
<switch name="switch" />
</view>
<view class="section section_gap">
<view class="section__title">slider</view>
<slider name="slider" show-value></slider>
</view>
<view class="section">
<view class="section__title">input</view>
<input name="input" placeholder="please input here" />
</view>
<view class="section section_gap">
<view class="section__title">radio</view>
<radio-group name="radio-group">
<label>
<radio value="radio1" /> radio1
</label>
<label>
<radio value="radio2" /> radio2
</label>
</radio-group>
</view>
<view class="section section_gap">
<view class="section__title">checkbox</view>
<checkbox-group name="checkbox">
<label>
<checkbox value="checkbox1" /> checkbox1
</label>
<label>
<checkbox value="checkbox2" /> checkbox2
</label>
</checkbox-group>
</view>
<view class="btn-area">
<button form-type="submit">Submit</button>
<button form-type="reset">Reset</button>
</view>
</form>
点击事件:
Page({
formSubmit: function(e) {
console.log('form发生了submit事件,携带数据为:', e.detail.value)
},
formReset: function() {
console.log('form发生了reset事件')
}
})
效果:
2.3.4、image组件
属性名 | 类型 | 默认值 | 说明 | 最低版本 |
---|---|---|---|---|
src | String | 图片资源地址,支持云文件ID(2.2.3起) | ||
mode | String | 'scaleToFill' | 图片裁剪、缩放的模式 |
- 注1:image组件默认宽度300px、高度225px
- 注2:image组件中二维码/小程序码图片不支持长按识别。仅在wx.previewImage中支持长按识别
mode 有 13 种模式,其中 4 种是缩放模式,9 种是裁剪模式。
模式 | 值 | 说明 |
---|---|---|
缩 放 | scaleToFill | 不保持纵横比缩放图片,使图片的宽高完全拉伸至填满 image 元素 |
缩 放 | aspectFit | 保持纵横比缩放图片,使图片的长边能完全显示出来。也就是说,可以完整地将图片显 示出来。 |
示例:
<image src="http://itcast-haoke.oss-cnqingdao.aliyuncs.com/images/2018/11/30/15435106627858721.jpg"></image>
<image src="http://itcast-haoke.oss-cnqingdao.aliyuncs.com/images/2018/11/30/15435106627858721.jpg" mode="top"></image>
效果:
2.4、注册程序
- App() 函数用来注册一个小程序。接受一个 Object 参数,其指定小程序的生命周期回调等。
App() 必须在 app.js 中调用,必须调用且只能调用一次。不然会出现无法预期的后果。
Object 参数说明:
属性 | 类型 | 描述 | 触发时机 |
---|---|---|---|
onLaunch | Function | 生命周期回调—监听小程序初始化 | 小程序初始化完成时(全局只 触发一次) |
onShow | Function | 生命周期回调—监听小程序显示 | 小程序启动,或从后台进入前 台显示时 |
- 前台、后台定义: 当用户点击左上角关闭,或者按了设备 Home 键离开微信,小程序并没有直接销毁,而是
进入了后台;当再次进入微信或再次打开小程序,又会从后台进入前台。需要注意的是:只有当小程序进入
后台一定时间,或者系统资源占用过高,才会被真正的销毁
示例:
App({
onLaunch(options) {
// Do something initial when launch.
},
onShow(options) {
// Do something when show.
},
onHide() {
// Do something when hide.
},
onError(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
2.5、场景值
场景值 | 说明 |
---|---|
1001 | 发现栏小程序主入口,「最近使用」列表(基础库2.2.4版本起包含「我的小程序」列表) |
1005 | 顶部搜索框的搜索结果页 |
App({
onLaunch(options) {
// Do something initial when launch.
console.log(options.scene);
},
onShow(options) {
// Do something when show.
},
onHide() {
// Do something when hide.
},
onError(msg) {
console.log(msg)
},
globalData: 'I am global data'
})
模拟器:
2.6、注册页面
- Page(Object) 函数用来注册一个页面。接受一个 Object 类型参数,其指定页面的初始数据、生命周期回调、
事件处理函数等。
Object 参数说明:
属性 | 类型 | 描述 |
---|---|---|
data | object | 页面的初始数据 |
onLoad | Function | 生命周期回调—监听页面加载 |
2.6.1、初始化数据
- data 是页面第一次渲染使用的初始数据。
页面加载时, data 将会以 JSON 字符串的形式由逻辑层传至渲染层,因此 data 中的数据必须是可以转成 JSON的类型:字符串,数字,布尔值,对象,数组;渲染层可以通过 WXML 对数据进行绑定。
示例:
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
效果:
2.6.2、生命周期回调函数
Page({
data: {
text: 'init data',
array: [{
msg: '1'
}, {
msg: '2'
}]
},
onLoad(options) {
console.log("页面加载完成",options);
},
onReady() {
console.log("页面初次渲染完成");
},
onShow() {
console.log("页面显示");
},
onHide() {
console.log("页面隐藏");
},
onUnload() {
console.log("页面卸载");
}
})
生命周期函数说明:
函数 | 说明 |
---|---|
onLoad(Object query) | 页面加载时触发。一个页面只会调用一次,可以在 onLoad 的参数中获取打开当前页 面路径中的参数。 |
onShow() | 页面显示/切入前台时触发 |
2.6.3、组件事件处理函数
- Page 中还可以定义组件事件处理函数。在渲染层的组件中加入事件绑定,当事件被触发时,就会执行 Page 中定
义的事件处理函数
<!--绑定点击事件-->
<view bindtap="viewTap">click me</view>
Page({
viewTap() {
console.log('view tap')
}
})
2.6.4、setData()
Page.prototype.setData(Object data, Function callback)
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)
参数说明
字段 | 类型 | 必填 | 描述 | 最低版本 |
---|---|---|---|---|
data | Object | 是 | 这次要改变的数据 | |
callback | Function | 否 | setData引起的界面更新渲染完毕后的回调函数 | 1.5.0 |
注意:
- 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
- 仅支持设置可 JSON 化的数据。
- 单次设置的数据不能超过1024kB,请尽量避免一次设置过多的数据。
- 请不要把 data 中任何一项的 value 设为 undefined ,否则这一项将不被设置并可能遗留一些潜在问题
示例:
<view>{{text}}</view>
<button bindtap="changeText">Change normal data</button>
<view>{{num}}</view>
<button bindtap="changeNum">Change normal num</button>
<view>{{array[0].text}}</view>
<button bindtap="changeItemInArray">Change Array data</button>
<view>{{object.text}}</view>
<button bindtap="changeItemInObject">Change Object data</button>
<view>{{newField.text}}</view>
<button bindtap="addNewField">Add new data</button>
js:
Page({
data: {
text: 'init data',
num: 0,
array: [{ text: 'init data' }],
object: {
text: 'init data'
}
},
changeText() {
// this.data.text = 'changed data' // 不要直接修改 this.data
// 应该使用 setData
this.setData({
text: 'changed data'
})
},
changeNum() {
// 或者,可以修改 this.data 之后马上用 setData 设置一下修改了的字段
this.data.num = 1
this.setData({
num: this.data.num
})
},
changeItemInArray() {
// 对于对象或数组字段,可以直接修改一个其下的子字段,这样做通常比修改整个对象或数组更好
this.setData({
'array[0].text': 'changed data'
})
},
changeItemInObject() {
this.setData({
'object.text': 'changed data'
})
},
addNewField() {
this.setData({
'newField.text': 'new data'
})
}
})
2.6.5、图解生命周期
2.7、模块化
可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者exports 才能对外暴露接口
注意:
- exports 是 module.exports 的一个引用,因此在模块里边随意更改 exports 的指向会造成未知的错误。所以更推荐开发者采用 module.exports 来暴露模块接口,除非你已经清晰知道这两者的关系。
- 小程序目前不支持直接引入 node_modules , 开发者需要使用到 node_modules 时候建议拷贝出相关的代码到小程序的目录中或者使用小程序支持的 npm 功能
// common.js
function sayHello(name) {
console.log(`Hello ${name} !`)
}
function sayGoodbye(name) {
console.log(`Goodbye ${name} !`)
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye
在需要使用这些模块的文件中,使用 require(path) 将公共代码引入
const common = require('common.js')
Page({
helloMINA() {
common.sayHello('MINA')
},
goodbyeMINA() {
common.sayGoodbye('MINA')
}
})
3、视图层
3.1、WXML
WXML(WeiXin Markup Language)是框架设计的一套标签语言,结合基础组件、事件系统,可以构建出页面的结构
3.1.1、数据绑定
<!--wxml-->
<view>{{message}}</view>
// page.js
Page({
data: {
message: 'Hello MINA!'
}
})
3.1.2、列表渲染
<!--wxml-->
<view wx:for="{{array}}">{{item}}</view>
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5]
}
})
3.1.3、条件渲染
<!--wxml-->
<view wx:if="{{view == 'WEBVIEW'}}">WEBVIEW</view>
<view wx:elif="{{view == 'APP'}}">APP</view>
<view wx:else="{{view == 'MINA'}}">MINA</view>
// page.js
Page({
data: {
view: 'MINA'
}
})
3.1.4、模板
<!--wxml-->
<template name="staffName">
<view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// page.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
3.1.5、引用
WXML 提供两种文件引用方式 import 和 include 。
3.1.5.1、import
import 可以在该文件中使用目标文件定义的 template ,如:
在 item.wxml 中定义了一个叫 item 的 template :
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml,就可以使用 item 模板:
<import src="item.wxml" />
<template is="item" data="{{text: 'forbar'}}" />
3.1.5.2、import 的作用域
import 有作用域的概念,即只会 import 目标文件中定义的 template,而不会 import 目标文件 import 的template。
如:C import B,B import A,在C中可以使用B定义的template,在B中可以使用A定义的template,但是C不
能使用A定义的template。
<!-- A.wxml -->
<template name="A">
<text>A template</text>
</template>
<!-- B.wxml -->
<import src="a.wxml" />
<template name="B">
<text>B template</text>
</template>
<!-- C.wxml -->
<import src="b.wxml" />
<template is="A" />
<!-- Error! Can not use tempalte when not import A. -->
<template is="B" />
3.1.5.3、include
include 可以将目标文件除了 <template/> <wxs/>
外的整个代码引入,相当于是拷贝到 include 位置,
如:
<!-- index.wxml -->
<include src="header.wxml" />
<view>body</view>
<include src="footer.wxml" />
<!-- header.wxml -->
<view>header</view>
<!-- footer.wxml -->
<view>footer</view>
3.2、WXSS
WXSS(WeiXin Style Sheets)是一套样式语言,用于描述 WXML 的组件样式。
WXSS 用来决定 WXML 的组件应该怎么显示。
为了适应广大的前端开发者,WXSS 具有 CSS 大部分特性。同时为了更适合开发微信小程序,WXSS 对 CSS 进行了扩充以及修改。
与 CSS 相比,WXSS 扩展的特性有:
- 尺寸单位
- 样式导入
3.2.1、尺寸单位
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 作为视觉稿的标准。
注意: 在较小的屏幕上不可避免的会有一些毛刺,请在开发时尽量避免这种情况。
3.2.2、样式导入
使用 @import
语句可以导入外联样式表, @import
后跟需要导入的外联样式表的相对路径,用 ;
表示语句结束。
示例代码:
/** common.wxss **/
.small-p {
padding:5px;
} /
** app.wxss **/
@import "common.wxss";
.middle-p {
padding:15px;
}
3.2.3、内联样式
框架组件上支持使用 style、class 属性来控制组件的样式。
- style:静态的样式统一写到 class 中。style 接收动态的样式,在运行时会进行解析,请尽量避免将静态的样式写进 style 中,以免影响渲染速度。
<view style="color:{{color}};" />
- class:用于指定样式规则,其属性值是样式规则中类选择器名(样式类名)的集合,样式类名不需要带上
.
,样式类名之间用空格隔。
<view class="normal_view" />
3.2.4、选择器
目前支持的选择器有:
选择器 | 样例 | 样例描述 |
---|---|---|
.class | .intro | 选择所有拥有 class="intro" 的组件 |
#id | #firstname | 选择拥有 id="firstname" 的组件 |
3.2.5、全局样式与局部样式
定义在 app.wxss 中的样式为全局样式,作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式,只作用在对应的页面,并会覆盖 app.wxss 中相同的选择器。
3.3、WXS
WXS(WeiXin Script)是小程序的一套脚本语言,结合 WXML
,可以构建出页面的结构。
注意:
- wxs 不依赖于运行时的基础库版本,可以在所有版本的小程序中运行。
- wxs 与 javascript 是不同的语言,有自己的语法,并不和 javascript 一致。
- wxs 的运行环境和其他 javascript 代码是隔离的,wxs 中不能调用其他 javascript 文件中定义的函数,也不能调用小程序提供的API。
- wxs 函数不能作为组件的事件回调。
- 由于运行环境的差异,在 iOS 设备上小程序内的 wxs 会比 javascript 代码快 2 ~ 20 倍。在 android 设备上二者运行效率无差异。
以下是一些使用 WXS 的简单示例:
页面渲染:
<!--wxml-->
<wxs module="m1">var msg = "hello world"; module.exports.message = msg;</wxs>
<view>{{m1.message}}</view>
页面输出:
hello world
数据处理:
// page.js
Page({
data: {
array: [1, 2, 3, 4, 5, 1, 2, 3, 4]
}
})
<!--wxml-->
<!-- 下面的 getMax 函数,接受一个数组,且返回数组中最大的元素的值 -->
<wxs module="m1">
var getMax = function(array) { var max = undefined; for (var i = 0; i <
array.length; ++i) { max = max === undefined ? array[i] : (max >= array[i] ?
max : array[i]); } return max; } module.exports.getMax = getMax;
</wxs>
<!-- 调用 wxs 里面的 getMax 函数,参数为 page.js 里面的 array -->
<view>{{m1.getMax(array)}}</view>
页面输出:
5
更多资料:https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxs/