2021-12-24

app.json

@@ -1,11 +1,16 @@
 {
   "pages": [
+    "pages/index/index",
+    "pages/logs/logs",
+    "pages/test/icon",
+    "pages/test/cover-view",
+    "pages/test/moveable-view",
     "pages/test/swiper",
     "pages/test/scrollview",
     "pages/test/view",
-        "pages/index/index",
+    "pages/test/text",
-        "pages/logs/logs"
+    "pages/test/rich-text",
-
+    "pages/test/progress"
   ],
   "window": {
     "backgroundTextStyle": "light",

pages/index/index.js

@@ -4,6 +4,27 @@ const app = getApp()
 
 Page({
   data: {
+    pages:[
+      {
+        type:'视图容器',
+        pages:[
+          {title:'view组件',url: "../test/view"},
+          {title:'scroll-view组件',url: "../test/scrollview"},
+          {title:'swiper组件',url: "../test/swiper"},
+          {title:'movable-view组件',url: "../test/moveable-view"},
+          {title:'cover-view组件',url: "../test/cover-view"}
+        ]
+      },
+      {
+        type:'基础内容',
+        pages:[
+          {title:'text组件',url: "../test/text"},
+          {title:'rich-text组件',url: "../test/rich-text"},
+          {title:'icon组件',url: "../test/icon"},
+          {title:'progress组件',url: "../test/progress"}
+        ]
+      }
+    ],
     motto: 'Hello World',
     userInfo: {},
     hasUserInfo: false,

pages/index/index.wxml

@@ -21,3 +21,13 @@
     <text class="user-motto">{{motto}}</text>
   </view>
 </view>
+<view class="pagelist">
+    <block wx:for="{{pages}}" wx:key="index">
+      <view class="title">{{item.type}}</view>
+      <block wx:for="{{item.pages}}" wx:key="index">
+        <navigator url="{{item.url}}" class="pageitem">
+          <button type="primary">{{item.title}}</button>
+        </navigator>
+      </block>
+    </block>
+</view>

pages/index/index.wxss

@@ -17,3 +17,7 @@
 .usermotto {
   margin-top: 200px;
 }
+.pagelist{
+  flex-direction: column;
+  justify-content: space-between;
+}

pages/test/cover-view.js

@@ -0,0 +1,66 @@
+// pages/test/cover-view.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/test/cover-view.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/test/cover-view.wxml

@@ -0,0 +1,12 @@
+<!--pages/test/cover-view.wxml-->
+<text>pages/test/cover-view.wxml</text>
+<view class="demobox">
+  <view class="title">在地图上放置cover-view</view>
+  <map>
+    <cover-view>
+      <cover-view>Cover-view</cover-view>
+      <cover-image src="../../images/11.jpg"></cover-image>
+      <button type="primary" size="mini">这是按钮</button>
+    </cover-view>
+  </map>
+</view>

pages/test/cover-view.wxss

@@ -0,0 +1,15 @@
+/* pages/test/cover-view.wxss */
+map{
+  width: 100%;
+  height: 600rpx;
+}
+cover-view{
+  width: 200rpx;
+  background-color: lightpink;
+  margin: 0 auto;
+}
+cover-image{
+  width: 100rpx;
+  height: 100rpx;
+  margin: 0 auto;
+}

pages/test/icon.js

@@ -0,0 +1,68 @@
+// pages/test/icon.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    iconType:['success','success-no-circle','info','warn','waiting','cancel','download','search','clear'],
+    iconColor:['red','orange','yellow','green','cyan','blue','purple'],
+    iconSize:[20,25,30,35,40,45,50]
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/test/icon.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/test/icon.wxml

@@ -0,0 +1,16 @@
+<!--pages/test/icon.wxml-->
+<text>pages/test/icon.wxml</text>
+<view class="demobox">
+  <view class="title">1.内容的变化</view>
+  <block wx:for="{{iconType}}">
+    <icon type="{{item}}" size="36"></icon>
+  </block>
+  <view class="title">2.颜色的变化</view>
+  <block wx:for="{{iconColor}}">
+    <icon type="info" size="36" color="{{item}}"></icon>
+  </block>
+  <view class="title">3.大小的变化</view>
+  <block wx:for="{{iconSize}}">
+    <icon type="info" size="{{item}}"></icon>
+  </block>
+</view>

pages/test/icon.wxss

@@ -0,0 +1 @@
+/* pages/test/icon.wxss */

pages/test/moveable-view.js

@@ -0,0 +1,66 @@
+// pages/test/moveable-view.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/test/moveable-view.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/test/moveable-view.wxml

@@ -0,0 +1,16 @@
+<!--pages/test/moveable-view.wxml-->
+<text>pages/test/moveable-view.wxml</text>
+<view class="demobox">
+  <view class="title">1.moveable-view在moveable-area内</view>
+  <movable-area>
+    <movable-view id='mv01' direction="all"></movable-view>
+  </movable-area>
+  <view class="title">2.moveable-view超出moveable-area内</view>
+  <movable-area>
+    <movable-view id='mv02' direction="all"></movable-view>
+  </movable-area>
+  <view class="title">3.可缩放moveable-area内</view>
+  <movable-area scale-area="true">
+    <movable-view id='mv03' direction="all" scale="true"></movable-view>
+  </movable-area>
+</view>

pages/test/moveable-view.wxss

@@ -0,0 +1,18 @@
+/* pages/test/moveable-view.wxss */
+movable-area{
+  width: 150rpx;
+  height: 150rpx;
+  background-color: lightblue;
+  margin: 0 auto;
+}
+movable-view{
+  background-color: red;
+}
+#mv01,#mv03{
+  width: 50rpx;
+  height: 50rpx;
+}
+#mv02{
+  width: 180rpx;
+  height: 180rpx;
+}

pages/test/progress.js

@@ -0,0 +1,66 @@
+// pages/test/progress.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/test/progress.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/test/progress.wxml

@@ -0,0 +1,13 @@
+<!--pages/test/progress.wxml-->
+<text>pages/test/progress.wxml</text>
+<view class="title">progress</view>
+<view class="demobox">
+  <view class="title">1.进度条右侧显示百分比</view>
+  <progress percent="25" show-info="true"></progress>
+  <view class="title">2.线条宽度为20px的进度条</view>
+  <progress percent="50" stroke-width="20"></progress>
+  <view class="title">3.自定义颜色的进度条</view>
+  <progress percent="80" activeColor="red"></progress>
+  <view class="title">4.带有动画效果的进度条</view>
+  <progress percent="100" active="true"></progress>
+</view>

pages/test/progress.wxss

@@ -0,0 +1 @@
+/* pages/test/progress.wxss */

pages/test/rich-text.js

@@ -0,0 +1,94 @@
+// pages/test/rich-text.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+    nodes01:[
+      {
+        name:'div',
+        attrs:{
+          style:'line-height:60px;color:red;font-weight:bold'
+        },
+        children:[
+          {
+            type:'text',
+            text:'Hello World'
+          }
+        ]
+      }
+    ],
+    nodes02:[
+      {
+        name:'div',
+        attrs:{
+          class:'myStyle'
+        },
+        children:[
+          {
+            type:'text',
+            text:'Hello World'
+          }
+        ]
+      }
+    ],
+    nodes03:'<div style="line-height:60px;color:red;font-weight:bold">Hello World</div>'
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/test/rich-text.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/test/rich-text.wxml

@@ -0,0 +1,11 @@
+<!--pages/test/rich-text.wxml-->
+<text>pages/test/rich-text.wxml</text>
+<view class="title">rich-text</view>
+<view class="demobox">
+  <view class="title">1.元素节点（使用style样式）</view>
+  <rich-text nodes="{{nodes01}}"></rich-text>
+  <view class="title">2.元素节点（使用class样式）</view>
+  <rich-text nodes="{{nodes02}}"></rich-text>
+  <view class="title">3.文本节点</view>
+  <rich-text nodes="{{nodes03}}"></rich-text>
+</view>

pages/test/rich-text.wxss

@@ -0,0 +1,6 @@
+/* pages/test/rich-text.wxss */
+.myStyle{
+  color:red;
+  line-height: 60px;
+  font-weight: bold;
+}

pages/test/text.js

@@ -0,0 +1,66 @@
+// pages/test/text.js
+Page({
+
+  /**
+   * 页面的初始数据
+   */
+  data: {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面加载
+   */
+  onLoad: function (options) {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面初次渲染完成
+   */
+  onReady: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面显示
+   */
+  onShow: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面隐藏
+   */
+  onHide: function () {
+
+  },
+
+  /**
+   * 生命周期函数--监听页面卸载
+   */
+  onUnload: function () {
+
+  },
+
+  /**
+   * 页面相关事件处理函数--监听用户下拉动作
+   */
+  onPullDownRefresh: function () {
+
+  },
+
+  /**
+   * 页面上拉触底事件的处理函数
+   */
+  onReachBottom: function () {
+
+  },
+
+  /**
+   * 用户点击右上角分享
+   */
+  onShareAppMessage: function () {
+
+  }
+})

pages/test/text.json

@@ -0,0 +1,3 @@
+{
+  "usingComponents": {}
+}

pages/test/text.wxml

@@ -0,0 +1,13 @@
+<!--pages/test/text.wxml-->
+<text>pages/test/text.wxml</text>
+<view class="demobox">
+  <view class="title">1.文本可选</view>
+  <text selectable="true">这是一段长按可以选择的文本内容</text>
+  <view class="title">2.空格显示形式</view>
+  <text space="ensp">这段代码      中文字符空格一半大小</text>
+  <text space="emsp">这段代码      中文字符空格大小</text>
+  <text space="nbsp">这段代码      根据字体设置的空格大小</text>
+  <view class="title">3.文本解码</view>
+  <text>无法解析&nbsp;&lt;&gt;&amp;&apos;&ensp;&emsp;</text>
+  <text decode="true">可以解析&nbsp;&lt;&gt;&amp;&apos;&ensp;&emsp;</text>
+</view>

pages/test/text.wxss

@@ -0,0 +1,8 @@
+/* pages/test/text.wxss */
+text{
+  margin: 15rpx;
+  padding: 15rpx;
+  border: 1rpx solid silver;
+  display: block;
+  font-size: 10pt;
+}