init

xhs-mini-demos/api-case/performance/performance.js

@@ -0,0 +1,50 @@
+let performance;
+
+Page({
+  data: {
+    entriesText: '',
+    entriesByName: '',
+    nameValue: ''
+  },
+
+  onLoad() {
+    performance = xhs.getPerformance();
+    const observer = performance.createObserver((entryList) => {
+      console.log('entryList', entryList.getEntries());
+      this.setData('entriesText', JSON.stringify(entryList.getEntries()));
+      console.log('allentryList', performance.getEntries());
+    });
+    observer.observe({ type: 'paint' });
+    console.log('observer', observer);
+    this.observer = observer;
+  },
+
+  onReady() {
+    console.log('onReady', Date.now());
+  },
+
+  onHide() {
+    this.observer.disconnect();
+  },
+
+  onUnload() {
+    console.log('disconnect');
+    this.observer.disconnect();
+  },
+
+
+  getEntries() {
+    const entries = performance?.getEntries();
+    console.log('entries',  entries);
+    this.setData('entriesText', JSON.stringify(entries));
+  },
+
+  getEntriesByName() {
+    const entries = performance?.getEntriesByName(this.data.nameValue);
+    this.setData('entriesByName', JSON.stringify(entries));
+  },
+
+  onNameInput(e) {
+    this.setData('nameValue', e.detail.value);
+  }
+});

xhs-mini-demos/api-case/performance/performance.json

@@ -0,0 +1,8 @@
+{
+  "navigationBarTitleText": "小程序性能监测",
+  "usingComponents": {
+    "showbox": "../../common/component/showbox/index",
+    "box": "../../common/component/container/index",
+    "api-status": "../../common/component/api-status/index"
+  }
+}

xhs-mini-demos/api-case/performance/performance.xhsml

@@ -0,0 +1,42 @@
+<view class="container">
+  <showbox title="getEntries演示">
+    <box>
+      <api-status
+        show-status="{{false}}"
+        text="{{entriesText}}"
+      >
+      </api-status>
+      <view class="_mt8">
+        <button
+          class="_ui-button"
+          hover-class="_ui-button-hover"
+          bindtap="getEntries"
+          >
+            触发
+        </button>
+      </view>
+    </box>
+  </showbox>
+
+  <showbox title="getEntriesByName演示">
+    <box>
+      <api-status
+        show-status="{{false}}"
+        text="{{entriesByName}}"
+      >
+      </api-status>
+      <view class="_ui-space _mt8">
+        <view class="_ui-input">
+          <input value="{{nameValue}}" placeholder="name" type="text" bindinput="onNameInput" />
+        </view>
+        <button
+          class="_ui-button"
+          hover-class="_ui-button-hover"
+          bindtap="getEntriesByName"
+          >
+            触发
+        </button>
+      </view>
+    </box>
+  </showbox>
+</view>