微信小程序
微信小程序
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用
提高小程序的速度
小程序启动加载性能：
- 控制代码包的大小
- 分包加载
- 首屏体验（预请求，利用缓存，避免白屏，及时反馈
小程序渲染性能：
封装请求
使用Promise封装
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
| // const BASE_URL = "http://localhost:3000"
const BASE_URL = "http://123.207.32.32:9002"
class API {
request(url, method = "GET", data) {
return new Promise((resolve, reject) => {
wx.request({
url: BASE_URL + url,
method,
data,
success: (res) => {
resolve(res.data)
},
fail: (err) => {
reject(err)
}
})
})
}
get(url, data) {
return this.request(url, "GET", data)
}
post(url, data) {
return this.request(url, "POST", data)
}
}
const axios = new API()
export default axios
|
后续创建对应模块的文件管理接口
1
2
3
4
5
6
7
| export function get(形参) {
return axios.get(路径, {实参})
}
export function post(形参) {
return axios.post(路径, {实参})
}
|
使用第三方包
打开调试器的终端，在根目录下执行，并生成文件
老版本在本地设置中需要勾选npm
安装第三方包，例如
点击工具构建npm，等待执行结束
在需要使用的位置引入即可，例如
1
2
3
4
|
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
|
1
2
3
4
|
"usingComponents": {
"van-button": "@vant/weapp/button/index"
}
|
WXS
.wxs 为后缀名的文件
类似于JS，不支持es6以上，导出得使用module.exports
1
2
3
4
5
6
7
8
| var foo = "'hello world' from tools.wxs";
var bar = function (d) {
return d;
}
module.exports = {
FOO: foo,
bar: bar,
};
|
引入/使用方法
1
2
3
| <wxs src="../../utils/format.wxs" module="format"></wxs>
<view class="count">{{format.formatCount(item.playCount)}}</view>
<view class="duration">{{format.formatDuration(item.mv.videos[0].duration)}}</view>
|
案例
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
| /**
* 数字格式化
* @param count
*/
function formatCount(count) {
var counter = parseInt(count)
if (counter > 100000000) {
return (counter / 100000000).toFixed(1) + "亿"
} else if (counter > 10000) {
return (counter / 10000).toFixed(1) + "万"
} else {
return counter + ""
}
}
/**
* 左边补0
* @param time 时间（分/秒）
*/
function padLeftZero(time) {
time = time + ""
return ("00" + time).slice(time.length)
}
function formatDuration(duration) {
duration = duration / 1000
var minute = (duration / 60) | 0
var second = (duration | 0) % 60
return padLeftZero(minute) + ":" + padLeftZero(second)
}
module.exports = {
formatCount: formatCount,
formatDuration: formatDuration
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
| <wxs src="../../utils/format.wxs" module="format"></wxs>
<view class="item">
<view class="album">
<image class="image" src="{{item.cover}}" mode="widthFix"></image>
<view class="info">
<view class="count">{{format.formatCount(item.playCount)}}</view>
<view class="duration">{{format.formatDuration(item.mv.videos[0].duration)}}</view>
</view>
</view>
<view class="content">
{{item.name}} - {{item.artistName}}
</view>
</view>
|
小程序slot
在小程序中没有办法实在在slot标签中实现默认值的
通过css的伪类：empty配合兄弟元素选择器来实现
empty判断子元素的内容是否为空
实现方法：把默认内容隐藏，当子元素为空是修改兄弟元素的样式，将默认内容显示
1
2
3
4
5
6
7
| .header .slot:empty+.default {
display: flex;
}
.header .default {
display: none;
}
|
