「小程序」开发记录

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左右能有粗体效果。

下划线

text-decoration: underline;

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
},

tabbar

https://developers.weixin.qq.com/miniprogram/dev/extended/weui/tabbar.html

在底部，起导航作用