Skip to content

Commit 60598d0

Browse files
author
romzhong
committed
Add samples: getBackgroundFetchData, getBackgtoundPrefetchData
1 parent 365a822 commit 60598d0

13 files changed

+223
-3
lines changed

‎miniprogram/app.js

+3
Original file line numberDiff line numberDiff line change
@@ -12,6 +12,9 @@ App({
1212
traceUser: true,
1313
})
1414
}
15+
wx.setBackgroundFetchToken({
16+
token: 'getBackgroundFetchToken',
17+
})
1518
},
1619
onShow(opts) {
1720
console.log('App Show', opts)

‎miniprogram/app.json

+3-1
Original file line numberDiff line numberDiff line change
@@ -152,7 +152,9 @@
152152
"page/API/pages/get-performance/get-performance",
153153
"page/API/pages/get-battery-info/get-battery-info",
154154
"page/API/pages/bluetooth/slave/slave",
155-
"page/API/pages/udp-socket/udp-socket"
155+
"page/API/pages/udp-socket/udp-socket",
156+
"page/API/pages/get-background-fetch-data/get-background-fetch-data",
157+
"page/API/pages/get-background-prefetch-data/get-background-prefetch-data"
156158
],
157159
"window": {
158160
"navigationBarTextStyle": "black",

‎miniprogram/page/API/index.js

+11-1
Original file line numberDiff line numberDiff line change
@@ -231,7 +231,17 @@ Page({
231231
}, {
232232
id: 'storage',
233233
name: '数据',
234-
url: 'storage/storage'
234+
pages: [{
235+
zh: '本地存储',
236+
url: 'storage/storage'
237+
}, {
238+
zh: '周期性更新',
239+
url: 'get-background-fetch-data/get-background-fetch-data'
240+
241+
}, {
242+
zh: '数据预拉取',
243+
url: 'get-background-prefetch-data/get-background-prefetch-data'
244+
}],
235245
}, {
236246
id: 'worker',
237247
name: '多线程',

‎miniprogram/page/API/pages/get-background-fetch-data/get-background-fetch-data.js

+39
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
// 使用周期性数据的时候，需要先调用setBackgroundFetchToken, 可在 app.js 中查看具体例子
2+
Page({
3+
onLoad() {
4+
// 获取缓存的周期性更新数据
5+
this.getBackgroundFetchData();
6+
},
7+
data: {
8+
openid: '',
9+
appid: '',
10+
},
11+
getBackgroundFetchData() {
12+
console.log('读取周期性更新数据')
13+
const that = this;
14+
wx.getBackgroundFetchData({
15+
// 当type = 'periodic' 微信客户端会每隔 12 小时向服务器请求一次数据。
16+
fetchType: 'periodic',
17+
success(res) {
18+
console.log(res)
19+
const { fetchedData } = res;
20+
const result = JSON.parse(fetchedData)
21+
that.setData({
22+
appid: result.appid,
23+
openid: result.openid,
24+
})
25+
console.log('读取周期性更新数据成功')
26+
},
27+
fail() {
28+
console.log('读取周期性更新数据失败')
29+
wx.showToast({
30+
title: '无缓存数据',
31+
icon: 'none'
32+
})
33+
},
34+
complete() {
35+
console.log('结束读取')
36+
}
37+
})
38+
}
39+
})

‎miniprogram/page/API/pages/get-background-fetch-data/get-background-fetch-data.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"usingComponents": {}
3+
}

‎miniprogram/page/API/pages/get-background-fetch-data/get-background-fetch-data.wxml

+29
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
<import src="../../../common/head.wxml" />
2+
<import src="../../../common/foot.wxml" />
3+
4+
<view class="container">
5+
<template is="head" data="{{title: 'getBackgroundFetchData'}}"/>
6+
7+
<view class="page-body">
8+
<view class="page-section">
9+
<view class="page-body-info">
10+
<view class="page-body-title">周期性缓存数据</view>
11+
<block wx:if="{{appid}}">
12+
<block>
13+
<text class="page-body-text">OpenID</text>
14+
<text class="context-value">{{openid}}</text>
15+
</block>
16+
<block>
17+
<text class="page-body-text">AppID</text>
18+
<text class="context-value">{{appid}}</text>
19+
</block>
20+
</block>
21+
<block>
22+
<text class="page-body-text">微信客户端每隔 12 个小时才会发起一次请求</text>
23+
<text class="page-body-text">为了方便调试周期性数据，可以在 工具 -> 拉取周期性缓存数据 开启</text>
24+
</block>
25+
</view>
26+
</view>
27+
</view>
28+
<template is="foot" />
29+
</view>

‎miniprogram/page/API/pages/get-background-fetch-data/get-background-fetch-data.wxss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.page-body-info {
2+
padding-bottom: 0;
3+
height: 300px;
4+
}
5+
.page-body-text {
6+
padding: 0 30rpx;
7+
text-align: center;
8+
}
9+
.page-body-title {
10+
margin-bottom: 40rpx;
11+
}
12+
.context-value {
13+
font-size: 38rpx;
14+
}

‎miniprogram/page/API/pages/get-background-prefetch-data/get-background-prefetch-data.js

+67
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
// 使用预缓存数据的时候，需要先调用setBackgroundFetchToken, 可在 app.js 中查看具体例子
2+
3+
Date.prototype.Format = function (fmt) {
4+
var o = {
5+
"M+": this.getMonth() + 1, //月份
6+
"d+": this.getDate(), //日
7+
"h+": this.getHours(), //小时
8+
"m+": this.getMinutes(), //分
9+
"s+": this.getSeconds(), //秒
10+
"q+": Math.floor((this.getMonth() + 3) / 3), //季度
11+
"S": this.getMilliseconds() //毫秒
12+
};
13+
14+
if (/(y+)/.test(fmt)) fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
15+
for (var k in o){
16+
if (new RegExp("(" + k + ")").test(fmt)) {
17+
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
18+
}
19+
}
20+
21+
return fmt;
22+
}
23+
24+
Page({
25+
onLoad() {
26+
// 获取缓存的周期性更新数据
27+
this.getBackgroundFetchData();
28+
},
29+
data: {
30+
openid: '',
31+
appid: '',
32+
getDataTime: '',
33+
},
34+
getBackgroundFetchData() {
35+
console.log('读取周期性更新数据')
36+
const that = this;
37+
wx.getBackgroundFetchData({
38+
fetchType: 'pre',
39+
success(res) {
40+
console.log(res)
41+
const { fetchedData } = res;
42+
const result = JSON.parse(fetchedData)
43+
// 在 Iphone 下返回的 timeStamp 单位是秒
44+
const systemInfo = wx.getSystemInfoSync();
45+
const timeStamp = systemInfo.brand === 'iPhone' ? res.timeStamp * 1000 : res.timeStamp
46+
const time = new Date(timeStamp).Format("yyyy-MM-dd hh:mm:ss");
47+
that.setData({
48+
appid: result.appid,
49+
openid: result.openid,
50+
getDataTime: time,
51+
52+
})
53+
console.log('读取周期性更新数据成功')
54+
},
55+
fail() {
56+
console.log('读取周期性更新数据失败')
57+
wx.showToast({
58+
title: '无缓存数据',
59+
icon: 'none'
60+
})
61+
},
62+
complete() {
63+
console.log('结束读取')
64+
}
65+
})
66+
}
67+
})

‎miniprogram/page/API/pages/get-background-prefetch-data/get-background-prefetch-data.json

+3
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
{
2+
"usingComponents": {}
3+
}

‎miniprogram/page/API/pages/get-background-prefetch-data/get-background-prefetch-data.wxml

+34
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<import src="../../../common/head.wxml" />
2+
<import src="../../../common/foot.wxml" />
3+
4+
<view class="container">
5+
<template is="head" data="{{title: 'getBackgroundFetchData'}}"/>
6+
7+
<view class="page-body">
8+
<view class="page-section">
9+
<view class="page-body-info">
10+
<view class="page-body-title">数据预拉取</view>
11+
<block wx:if="{{appid}}">
12+
<block>
13+
<text class="page-body-text">OpenID</text>
14+
<text class="context-value">{{openid}}</text>
15+
</block>
16+
<block>
17+
<text class="page-body-text">AppID</text>
18+
<text class="context-value">{{appid}}</text>
19+
</block>
20+
<block>
21+
<text class="page-body-text">数据缓存的时间</text>
22+
<text class="context-value">{{getDataTime}}</text>
23+
</block>
24+
</block>
25+
<block>
26+
<text class="page-body-text">用户启动小程序时，调用 wx.getBackgroundFetchData() 获取已缓存到本地的数据。
27+
</text>
28+
</block>
29+
30+
</view>
31+
</view>
32+
</view>
33+
<template is="foot" />
34+
</view>

‎miniprogram/page/API/pages/get-background-prefetch-data/get-background-prefetch-data.wxss

+14
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,14 @@
1+
.page-body-info {
2+
padding-bottom: 0;
3+
height: 340px;
4+
}
5+
.page-body-title {
6+
margin-bottom: 40rpx;
7+
}
8+
.page-body-text {
9+
padding: 0 30rpx;
10+
text-align: center;
11+
}
12+
.context-value {
13+
font-size: 38rpx;
14+
}

‎miniprogram/page/API/pages/get-performance/util.js

+1
Original file line numberDiff line numberDiff line change
@@ -21,6 +21,7 @@ Date.prototype.Format = function (fmt) {
2121

2222
return fmt;
2323
}
24+
2425
util.renderName = (name) => {
2526
switch (name) {
2627
case 'appLaunch':

‎project.config.json

+2-1
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,8 @@
2424
"ignore": [],
2525
"disablePlugins": [],
2626
"outputPath": ""
27-
}
27+
},
28+
"preloadBackgroundData": true
2829
},
2930
"compileType": "miniprogram",
3031
"libVersion": "2.11.0",

0 commit comments

Comments
 (0)