「小程序」开发记录
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。
<text wx:if="{{showPing}}">{{s.ping}} </text>WXML 中，使用 wx:if=”“ 来判断是否需要渲染该代码块。标签定义的前部使用逻辑判断。
使用 wx:elif 和 wx:else 来添加一个 else 块。
排版布局
水平居中内容
<view style="width:100%; display:flex;flex-direction:row;justify-content:center;">
</view>flex垂直方向居中
主要靠align-items: center;。
不设置高度的时候。
.cfg-start {
display: flex;
flex-direction: row;
margin-right: 20px;
align-items: center;
}设置了绝对定位。需要同时设置高度。
.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;。
.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底部居中例子
<div style="min-height: 360px;position:relative;">
<div style="position: absolute;bottom: 0px;left: 50%;transform: translate(-50%, -50%);">
</div>
<div>设置bottom的时候记得带单位。
动态判断背景色。idx表示下标。
<view style="background:{{idx%2 == 0? '#757575':'#424242'}}">五</view>动态改变文字颜色
<view bindtap="onTapShowType" data-type='1' style="color:{{ showLetterType == 1? '#4fa003':'#424242'}}">五</view>text
font-size 字体大小。 font-weight 字体粗细，580左右能有粗体效果。
scroll-view
使用scroll view。
<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。
.correct-field {
display: flex;
flex-flow: row wrap;
}css 圆角
只设置一个值的话，是4个圆角。
border-radius: 4px;单位是px。如果单位用rpx，则不显示圆角。
背景半透明
真机调试时，小程序设置background: #895fcce0;是无效的，看不到颜色。
要使用opacity属性来设置不透明度。
background: #895fcc;
opacity:0.85;背景渐变色
https://developers.weixin.qq.com/community/develop/doc/06e11913e57af653ca251462fcc134f2
css class 按条件选择
<view class="{{showPage==1?'chooser.chosen':'chooser'}}" >sample</view>用大括号里的三目判断。
例子? - 进度条和文字
需求：显示做题的进度。 进度条作为背景。文字盖在上面。头尾各一个文字。
.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;
}<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方法中设置监听。 注意本地音频文件的路径写法，不用写相对路径，用绝对路径就好。
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。然后播放。
iac.src = 'https://audio....'文件系统
https://developers.weixin.qq.com/miniprogram/dev/framework/ability/file-system.html
使用FileSystemManager的方法。
判断文件是否存在
异步的方式判断文件是否存在。
var fs = wx.getFileSystemManager()
fs.access({
path: audioDir,
success(res) {
console.log(audioDir, remoteDir, res)
},
fail(err) {
console.log(err)
}
});
同步判断。如果不存在则会报错。
try {
fs.accessSync(localFilePath)
} catch (t) {
console.log(localFilePath, 'not exists.')
}创建目录 mkdir
fs.mkdir({
dirPath: audioDir,
success(res) {
console.log(res)
},
fail(err) {
console.log('Can not create dir.', audioDir, err)
}
})界面
跳回上一个界面
wx.navigateBack({})wx.navigateBack({
delta: 1
})定时任务
setTimeout(function() {
// 操作
}, 1000)下载
微信小程序提供了下载api。
下载文件
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-开头。
<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。
onTapSound: function(event) {
var word = event.currentTarget.dataset.word
},