wxml

标签严格闭合。
rpx(responsive pixel)尺寸单位。
大小写敏感。

我们只要保持一个原则就可以提高小程序的渲染性能:每次只设置需要改变的最小单位数据。
此外需要注意以下3点:

  • 直接修改 Page实例的this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
  • 由于setData是需要两个线程的一些通信消耗,为了提高性能,每次设置的数据不应超过1024kB。
  • 不要把data中的任意一项的value设为undefined,否则可能会有引起一些不可预料的bug。

“用户在渲染层的行为反馈”以及“组件的部分状态反馈”抽象为渲染层传递给逻辑层的“事件”

数据绑定

通过 大括号大括号 语法可以使得 WXML 拥有动态渲染的能力,除此外还可以在其中进行简单的逻辑运算。
大括号大括号中还可以直接放置数字、字符串或者是数组。

使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供:

  • 字符串,代表在 for 循环的 array 中 item 的某个 property,该 property 的值需要是列表中唯一的字符串或数字,且不能动态改变。
  • 保留关键字 this 代表在 for 循环中的 item 本身,这种表示需要 item 本身是一个唯一的字符串或者数字

模板

WXML提供模板(template),可以在模板中定义代码片段,然后在不同的地方调用。使用 name 属性,作为模板的名字。然后在 <template/> 内定义代码片段

使用 is 属性,声明需要的使用的模板,然后将模板所需要的 data 传入

WXML 提供两种文件引用方式import和include。

import 可以在该文件中使用目标文件定义的 template

import 不具有递归的特性。

条件渲染

在wxml中使用wx:if

1
<text wx:if="{{showPing}}">{{s.ping}} </text>

WXML 中,使用 wx:if=”“ 来判断是否需要渲染该代码块。标签定义的前部使用逻辑判断。
使用 wx:elif 和 wx:else 来添加一个 else 块。

排版布局

水平居中内容

1
2
3
<view style="width:100%; display:flex;flex-direction:row;justify-content:center;">

</view>

flex垂直方向居中

主要靠align-items: center;
不设置高度的时候。

1
2
3
4
5
6
.cfg-start {
display: flex;
flex-direction: row;
margin-right: 20px;
align-items: center;
}

设置了绝对定位。需要同时设置高度。

1
2
3
4
5
6
7
8
9
.cfg-end {
position: absolute;
right: 0px;
height: 5vh;
display: flex;
flex-direction: row;
margin-right: 2px;
align-items: center;
}

确定宽高的view里居中内容

需要设置display: flex;justify-content:center;align-items: center;

1
2
3
4
5
6
7
8
9
10
11
.ball {
width: 30px;
height:30px;
margin: 2px 2px;
display: flex;
justify-content:center;
align-items: center;
border-radius: 15px;
color:white;
font-size: 12px;
}

view位于父容器底部

或者叫做div位于父容器底部。
父容器设置position: relative
子view设置position: absolute
如果父容器没有设置relative属性,子div(或子view)会相对于页面的底部。

CSS DIV在另一个DIV底部居中例子

1
2
3
4
<div style="min-height: 360px;position:relative;">
<div style="position: absolute;bottom: 0px;left: 50%;transform: translate(-50%, -50%);">
</div>
<div>

设置bottom的时候记得带单位。

动态判断背景色。idx表示下标。

1
<view style="background:{{idx%2 == 0? '#757575':'#424242'}}"></view>

动态改变文字颜色

1
<view bindtap="onTapShowType" data-type='1' style="color:{{ showLetterType == 1? '#4fa003':'#424242'}}"></view>

text

font-size 字体大小。
font-weight 字体粗细,580左右能有粗体效果。

scroll-view

使用scroll view。

1
2
3
4
5
<scroll-view class='word-field' enable-back-to-top scroll-into-view="{{toView}}" scroll-y="true" scroll-with-animation="true" >
<view class="child-field">

</view>
</scroll-view>

wx:for子项方向

wx:for的子项方向其实是由它的父view来决定的。

列表自动换行

假设横向(row)排列子项,子项太多的时候会换到下一行。
需要设置flex-flow

1
2
3
4
.correct-field {
display: flex;
flex-flow: row wrap;
}

css 圆角

只设置一个值的话,是4个圆角。

1
border-radius: 4px;

单位是px。如果单位用rpx,则不显示圆角。

背景半透明

真机调试时,小程序设置background: #895fcce0;是无效的,看不到颜色。
要使用opacity属性来设置不透明度。

1
2
background: #895fcc;
opacity:0.85;

背景渐变色
https://developers.weixin.qq.com/community/develop/doc/06e11913e57af653ca251462fcc134f2

css class 按条件选择

1
<view class="{{showPage==1?'chooser.chosen':'chooser'}}" >sample</view>

用大括号里的三目判断。

例子🌰 - 进度条和文字

进度条和文字效果图

需求:显示做题的进度。
进度条作为背景。文字盖在上面。头尾各一个文字。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.top-bar {
position: relative;
height: 40px;
}

.pb {
position: absolute;
width: 100%;
}

.top-title-field {
position: absolute;
margin-left: 10px;
height: 100%;
align-items: center;
display: flex;
justify-content: center;
}

1
2
3
4
5
6
7
8
9
<view class="top-bar">
<progress class="pb" stroke-width="40px" activeColor="#42A5F5" percent="40" />
<view class="top-title-field">
<text>单项选择</text>
</view>
<view class="progress-text">
<text>4/10</text>
</view>
</view>

播放音频

播放音频需要用到InnerAudioContext

播放本地文件

播放本地音频。
音频文件在audio目录里。audio目录和pages目录同级。
先创建InnerAudioContext。并且在onLoad方法中设置监听。
注意本地音频文件的路径写法,不用写相对路径,用绝对路径就好。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
const iac = wx.createInnerAudioContext()

Page({
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
this.registerAudioContext()
console.log('ac ', iac)
},

onTapSound: function(event) {
// console.log(event)
var word = event.currentTarget.id;
console.log('cilck', word)
iac.src = 'audio/a.mp3'
iac.volume = 2
iac.loop = false
iac.play()
console.log('tap sound done. ')
},

// 注册音频
registerAudioContext: function() {
iac.onEnded((res) => {
console.log('on ended', res)
})

iac.onError((res) => {
// 播放音频失败的回调
console.log('播放音频失败', res);
})

iac.onStop((res) => {
console.log('播放结束!');
})

},
})

测试发现,安卓手机播放的音频支持mp3与pepm。iPhone Xs不能播放pepm。
在本地放音频文件时,小程序会提示“文件未上传”。可能是小程序编译完成需小于某个大小(2M)才能上传。
那么我们把音频文件放在服务器上吧。
可以使用微信云开发里的存储。上传文件后,找到文件的下载地址,https开头的。设置给iac的src。

播放网络音频

找到音频文件的url,赋值给iac.src。然后播放。

1
iac.src = 'https://audio....'

文件系统

https://developers.weixin.qq.com/miniprogram/dev/framework/ability/file-system.html

使用FileSystemManager的方法。

判断文件是否存在

异步的方式判断文件是否存在。

1
2
3
4
5
6
7
8
9
10
var fs = wx.getFileSystemManager()
fs.access({
path: audioDir,
success(res) {
console.log(audioDir, remoteDir, res)
},
fail(err) {
console.log(err)
}
});

同步判断。如果不存在则会报错。

1
2
3
4
5
try {
fs.accessSync(localFilePath)
} catch (t) {
console.log(localFilePath, 'not exists.')
}

创建目录 mkdir

1
2
3
4
5
6
7
8
9
fs.mkdir({
dirPath: audioDir,
success(res) {
console.log(res)
},
fail(err) {
console.log('Can not create dir.', audioDir, err)
}
})

界面

跳回上一个界面

1
wx.navigateBack({})
1
2
3
wx.navigateBack({
delta: 1
})

定时任务

1
2
3
setTimeout(function() {
// 操作
}, 1000)

下载

微信小程序提供了下载api。

下载文件

1
2
3
4
5
6
7
8
9
10
wx.downloadFile({
url: targetUrl,
filePath: localFilePath,
success: res => {
console.log('download success')
},
fail: err => {
console.log('download fail',err)
}
})

点击事件

点击事件主要靠bindtap方法。

点击事件传递参数

数据在soundRowA里面。渲染一个列表。
wxml中加上data类型,这里是data-word。也可以起别的名字,但一定要data-开头。

1
2
3
4
5
<view wx:for="{{soundRowA}}" wx:for-index="idx" wx:for-item="s">
<view bindtap="onTapSound" data-word='{{s}}'>
显示一些数据
</view>
</view>

js中实现onTapSound方法。获取点击事件event。
传递回来的数据是在event.currentTarget.dataset中。
根据wxml中data-word,传递回来的数据的key是word

1
2
3
onTapSound: function(event) {
var word = event.currentTarget.dataset.word
},