From 54fe6ccecd5846451e1a40eec6bac3f8e3474369 Mon Sep 17 00:00:00 2001
From: luqianyu <lqygo1234@qq.com>
Date: Wed, 9 Dec 2020 10:29:27 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E6=B7=BB=E5=8A=A0=20=E8=8E=B7=E5=8F=96?=
 =?UTF-8?q?WXML=E8=8A=82=E7=82=B9=E4=BF=A1=E6=81=AF=20=E5=92=8C=20WXML?=
 =?UTF-8?q?=E8=8A=82=E7=82=B9=E5=B8=83=E5=B1=80=E7=9B=B8=E4=BA=A4=E7=8A=B6?=
 =?UTF-8?q?=E6=80=81=20=E9=A1=B5=E9=9D=A2?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 app.json                                      |  4 +-
 pages/API/canvas/canvas.wxml                  |  4 +-
 .../get-wxml-node-info/get-wxml-node-info.js  | 39 ++++++++++++++++
 .../get-wxml-node-info.json                   |  3 ++
 .../get-wxml-node-info.wxml                   | 25 ++++++++++
 .../get-wxml-node-info.wxss                   | 46 +++++++++++++++++++
 pages/API/index/index.js                      |  8 ++++
 .../intersection-observer.js                  | 26 +++++++++++
 .../intersection-observer.json                |  3 ++
 .../intersection-observer.wxml                | 28 +++++++++++
 .../intersection-observer.wxss                | 38 +++++++++++++++
 11 files changed, 221 insertions(+), 3 deletions(-)
 create mode 100644 pages/API/get-wxml-node-info/get-wxml-node-info.js
 create mode 100644 pages/API/get-wxml-node-info/get-wxml-node-info.json
 create mode 100644 pages/API/get-wxml-node-info/get-wxml-node-info.wxml
 create mode 100644 pages/API/get-wxml-node-info/get-wxml-node-info.wxss
 create mode 100644 pages/API/intersection-observer/intersection-observer.js
 create mode 100644 pages/API/intersection-observer/intersection-observer.json
 create mode 100644 pages/API/intersection-observer/intersection-observer.wxml
 create mode 100644 pages/API/intersection-observer/intersection-observer.wxss

diff --git a/app.json b/app.json
index b1abdab..5d3cdfc 100644
--- a/app.json
+++ b/app.json
@@ -55,7 +55,9 @@
     "pages/API/menu-info/menu-info",
     "pages/API/get-location/get-location",
     "pages/API/choose-location/choose-location",
-    "pages/API/canvas/canvas"
+    "pages/API/canvas/canvas",
+    "pages/API/get-wxml-node-info/get-wxml-node-info",
+    "pages/API/intersection-observer/intersection-observer"
   ],
   "window": {
     "backgroundTextStyle": "light",
diff --git a/pages/API/canvas/canvas.wxml b/pages/API/canvas/canvas.wxml
index e50ea4a..c504635 100644
--- a/pages/API/canvas/canvas.wxml
+++ b/pages/API/canvas/canvas.wxml
@@ -3,9 +3,9 @@
 
 <view class="container">
   <template is="head" data="{{title: 'createContext'}}"/>
-  <view>本demo使用官方文档中的CanvasContext写法</view>
+  <view>本demo使用官方文档中的CanvasContext的调用方式</view>
   <view>在微信基础库中可以运行</view>
-  <view>在凡泰基础库中不可运行</view>
+  <view>在凡泰基础库中运行无效</view>
   <view class="page-body">
     <view class="page-section">
       <canvas class="canvas-element" canvas-id="canvas"></canvas>
diff --git a/pages/API/get-wxml-node-info/get-wxml-node-info.js b/pages/API/get-wxml-node-info/get-wxml-node-info.js
new file mode 100644
index 0000000..bcf6265
--- /dev/null
+++ b/pages/API/get-wxml-node-info/get-wxml-node-info.js
@@ -0,0 +1,39 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: '获取WXML节点信息',
+      path: 'packageAPI/pages/get-wxml-node-info/get-wxml-node-info'
+    }
+  },
+
+  data: {
+    metrics: []
+  },
+
+  onReady() {
+    this.getNodeInfo()
+  },
+
+  getNodeInfo() {
+    const $ = wx.createSelectorQuery()
+    const target = $.select('.target')
+    target.boundingClientRect()
+
+    $.exec((res) => {
+      const rect = res[0]
+      if (rect) {
+        const metrics = []
+        // eslint-disable-next-line
+        for (const key in rect) {
+          if (key !== 'id' && key !== 'dataset') {
+            const val = rect[key]
+            metrics.push({key, val})
+          }
+        }
+
+        this.setData({metrics})
+      }
+    })
+  }
+
+})
diff --git a/pages/API/get-wxml-node-info/get-wxml-node-info.json b/pages/API/get-wxml-node-info/get-wxml-node-info.json
new file mode 100644
index 0000000..29237d6
--- /dev/null
+++ b/pages/API/get-wxml-node-info/get-wxml-node-info.json
@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "获取WXML节点信息"
+}
\ No newline at end of file
diff --git a/pages/API/get-wxml-node-info/get-wxml-node-info.wxml b/pages/API/get-wxml-node-info/get-wxml-node-info.wxml
new file mode 100644
index 0000000..8524c09
--- /dev/null
+++ b/pages/API/get-wxml-node-info/get-wxml-node-info.wxml
@@ -0,0 +1,25 @@
+<import src="../../common/head.wxml" />
+<import src="../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'createSelectorQuery'}}"/>
+
+  <view class="page-body">
+    <view class="page-section">
+        <view class="target" x="{{x}}" y="{{y}}" direction="all" bindchange="getNodeInfo">
+          Box
+        </view>
+    </view>
+
+    <view class="page-section">
+      <view class="metric">
+        <view wx:for="{{ metrics }}" wx:key="{{item.key}}">
+          <text class="b">{{ item.key }}</text>
+          <text class="span">{{ item.val }}</text>
+        </view>
+      </view>
+    </view>
+  </view>
+
+  <template is="foot" />
+</view>
diff --git a/pages/API/get-wxml-node-info/get-wxml-node-info.wxss b/pages/API/get-wxml-node-info/get-wxml-node-info.wxss
new file mode 100644
index 0000000..c1f5aad
--- /dev/null
+++ b/pages/API/get-wxml-node-info/get-wxml-node-info.wxss
@@ -0,0 +1,46 @@
+movable-view {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  height: 50px;
+  width: 50px;
+  background: #1AAD19;
+  color: #fff;  
+}
+
+movable-area {
+  height: 200px;
+  width: 200px;
+  background-color: #ccc;
+  overflow: hidden;
+}
+
+.page-section {
+  display: flex;
+  justify-content: center;
+}
+
+.page-body {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.metric {
+  width: 200px;
+  display: flex;
+  justify-content: center;
+  flex-direction:column;
+  align-items:center;
+}
+
+.b {
+  display: inline-block;
+  width: 75px;
+  font-weight: bold;
+}
+
+.span {
+  display: inline-block;
+  width: 50px;
+}
diff --git a/pages/API/index/index.js b/pages/API/index/index.js
index 15def84..24564b6 100644
--- a/pages/API/index/index.js
+++ b/pages/API/index/index.js
@@ -66,6 +66,14 @@ Page({
             zh: '菜单位置信息',
             url: 'menu-info/menu-info'
           },
+          {
+            zh: '获取WXML节点信息',
+            url: 'get-wxml-node-info/get-wxml-node-info'
+          },
+          {
+            zh: 'WXML节点布局相交状态',
+            url: 'intersection-observer/intersection-observer'
+          },
         ]
       }, {
         id: 'device',
diff --git a/pages/API/intersection-observer/intersection-observer.js b/pages/API/intersection-observer/intersection-observer.js
new file mode 100644
index 0000000..7e81325
--- /dev/null
+++ b/pages/API/intersection-observer/intersection-observer.js
@@ -0,0 +1,26 @@
+Page({
+  onShareAppMessage() {
+    return {
+      title: 'WXML节点布局相交状态',
+      path: 'packageAPI/pages/intersection-observer/intersection-observer'
+    }
+  },
+
+  data: {
+    appear: false
+  },
+  onLoad() {
+    this._observer = wx.createIntersectionObserver(this)
+    this._observer
+      .relativeTo('.scroll-view')
+      .observe('.ball', (res) => {
+        console.log(res)
+        this.setData({
+          appear: res.intersectionRatio > 0
+        })
+      })
+  },
+  onUnload() {
+    if (this._observer) this._observer.disconnect()
+  }
+})
diff --git a/pages/API/intersection-observer/intersection-observer.json b/pages/API/intersection-observer/intersection-observer.json
new file mode 100644
index 0000000..3aa4756
--- /dev/null
+++ b/pages/API/intersection-observer/intersection-observer.json
@@ -0,0 +1,3 @@
+{
+  "navigationBarTitleText": "WXML节点布局相交状态"
+}
\ No newline at end of file
diff --git a/pages/API/intersection-observer/intersection-observer.wxml b/pages/API/intersection-observer/intersection-observer.wxml
new file mode 100644
index 0000000..8a1d816
--- /dev/null
+++ b/pages/API/intersection-observer/intersection-observer.wxml
@@ -0,0 +1,28 @@
+<import src="../../common/head.wxml" />
+<import src="../../common/foot.wxml" />
+
+<view class="container">
+  <template is="head" data="{{title: 'intersectionObserver'}}"/>
+
+  <view class="page-body">
+    <view class="page-section message">
+      <text wx:if="{{appear}}">
+        小球出现
+      </text>
+      <text wx:else>
+        小球消失
+      </text>
+    </view>
+    <view class="page-section">
+      <scroll-view class="scroll-view" scroll-y>
+        <view class="scroll-area" style="{{appear ? 'background: #ccc' : ''}}">
+          <text class="notice">向下滚动让小球出现</text>
+          <view class="filling"></view>
+          <view class="ball"></view>
+        </view>
+      </scroll-view>
+    </view>
+  </view>
+
+  <template is="foot" />
+</view>
diff --git a/pages/API/intersection-observer/intersection-observer.wxss b/pages/API/intersection-observer/intersection-observer.wxss
new file mode 100644
index 0000000..41e7ac1
--- /dev/null
+++ b/pages/API/intersection-observer/intersection-observer.wxss
@@ -0,0 +1,38 @@
+.scroll-view {
+  height: 200px;
+  background: var(--weui-BG-2);
+}
+
+.scroll-area {
+  height: 1150px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  transition: .5s;
+}
+
+.notice {
+  margin-top: 75px;
+}
+
+.ball {
+  width: 100px;
+  height: 100px;
+  background: #1AAD19;
+  border-radius: 50%;
+}
+
+.filling {
+  height: 200px;
+}
+
+.message {
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.message text {
+  font-size: 20px;
+  font-family: -apple-system-font, Helvetica Neue,Helvetica,sans-serif;
+}