feat: add common

pages/common/foot.wxml

@@ -0,0 +1,5 @@
+<template name="foot">
+  <navigator class="page-foot" openType="switchTab" url="/page/component/index" hover-class="none">
+    <image class="icon-foot" src="../../../../image/icon_foot.png"></image>
+  </navigator>
+</template>

pages/common/head.wxml

@@ -0,0 +1,7 @@
+<template name="head">
+  <view class="page-head">
+    <view class="page-head-title">{{title}}</view>
+    <view class="page-head-line"></view>
+    <view wx:if="{{desc}}" class="page-head-desc">{{desc}}</view>
+  </view>
+</template>

pages/common/index.wxss

@@ -0,0 +1,130 @@
+.index-hd {
+  padding: 40px 40px 20px;
+  text-align: center;
+}
+.index-bd {
+  /* padding: 0 15px 20px; */
+  padding: 0 15px 20px;
+}
+.index-ft {
+  padding-bottom: 10px;
+  text-align: center;
+}
+.index-logo {
+  /* width: 43px;
+  height: 43px; */
+  width: 43px;
+  height: 43px;
+}
+.index-desc {
+  margin-top: 10px;
+  color: var(--weui-FG-1);
+  /* font-size: 14px; */
+  font-size: 14px;
+}
+
+
+.navigator-box {
+  opacity: 0;
+  position: relative;
+  background-color: var(--weui-BG-2);
+  line-height: 1.41176471;
+  /* font-size: 32px; */
+  font-size: 17px;
+
+  transform: translateY(-50%);
+  transition: .3s;
+}
+.navigator-box-show {
+  opacity: 1;
+  transform: translateY(0);
+}
+.navigator {
+  /* padding: 10px 15px; */
+  padding: 10px 15px;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.navigator:before {
+  content: " ";
+  position: absolute;
+  /* left: 15px; */
+  left: 15px;
+  top: 0;
+  /* right: 15px; */
+  right: 15px;
+  height: 1px;
+  /* border-top: 1px solid var(--weui-FG-3); */
+  border-top: 1px solid var(--weui-FG-3);
+  color: var(--weui-FG-3);
+}
+.navigator:first-child:before {
+  display: none;
+}
+.navigator-text {
+  flex: 1;
+}
+.navigator-arrow {
+  /* padding-right: 13px; */
+  padding-right: 13px;
+  position: relative;
+}
+.navigator-arrow:after {
+  content: " ";
+  display: inline-block;
+  /* height: 9px;
+  width: 9px;
+  border-width: 1px 1px 0 0; */
+  height: 9px;
+  width: 9px;
+  border-width: 1px 1px 0 0;
+  border-color: var(--weui-FG-2);
+  border-style: solid;
+  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+  position: absolute;
+  top: 50%;
+  /* margin-top: -4px; */
+  margin-top: -4px;
+  /* right: 14px; */
+  right: 14px;
+}
+
+
+.kind-list-item {
+  /* margin: 10px 0; */
+  margin: 10px 0;
+  background-color: var(--weui-BG-2);
+  border-radius: 2px;
+  overflow: hidden;
+}
+.kind-list-item:first-child {
+  margin-top: 0;
+}
+.kind-list-text{
+  flex: 1;
+}
+.kind-list-img {
+  /* width: 30px;
+  height: 30px; */
+  width: 30px;
+  height: 30px;
+}
+.kind-list-item-hd {
+  /* padding: 15px; */
+  padding: 15px;
+  display: flex;
+  align-items: center;
+
+  transition: opacity .3s;
+}
+.kind-list-item-hd-show {
+  opacity: .2;
+}
+.kind-list-item-bd {
+  height: 0;
+  overflow: hidden;
+}
+.kind-list-item-bd-show {
+  height: auto;
+}

pages/component/index/index.js

@@ -1,54 +1,64 @@
-//index.js
-//获取应用实例
-const app = getApp()
-
 Page({
+  onShareAppMessage() {
+    return {
+      title: '小程序官方组件展示',
+      path: 'page/component/index'
+    }
+  },
+
   data: {
-    motto: 'Hello World',
+    list: [
-    userInfo: {},
+      {
-    hasUserInfo: false,
+        id: 'view',
-    canIUse: wx.canIUse('button.open-type.getUserInfo')
+        name: '视图容器',
-  },
+        open: false,
-  //事件处理函数
+        pages: ['view', 'scroll-view', 'swiper']
-  bindViewTap: function() {
+      }, {
-    wx.navigateTo({
+        id: 'content',
-      url: '../logs/logs'
+        name: '基础内容',
-    })
+        open: false,
-  },
+        pages: ['text', 'icon', 'progress']
-  onLoad: function () {
+      }, {
-    if (app.globalData.userInfo) {
+        id: 'form',
-      this.setData({
+        name: '表单组件',
-        userInfo: app.globalData.userInfo,
+        open: false,
-        hasUserInfo: true
+        pages: ['button', 'checkbox', 'form', 'input', 'label', 'picker', 'picker-view', 'radio', 'slider', 'switch', 'textarea']
-      })
+      }, {
-    } else if (this.data.canIUse){
+        id: 'nav',
-      // 由于 getUserInfo 是网络请求，可能会在 Page.onLoad 之后才返回
+        name: '导航',
-      // 所以此处加入 callback 以防止这种情况
+        open: false,
-      app.userInfoReadyCallback = res => {
+        pages: ['navigator']
-        this.setData({
+      }, {
-          userInfo: res.userInfo,
+        id: 'media',
-          hasUserInfo: true
+        name: '媒体组件',
-        })
+        open: false,
+        pages: ['image', 'video']
+      }, {
+        id: 'canvas',
+        name: '画布',
+        open: false,
+        pages: ['canvas']
+      }, {
+        id: 'open',
+        name: '开放能力',
+        open: false,
+        pages: ['web-view']
       }
+    ]
+  },
+
+  kindToggle(e) {
+    const id = e.currentTarget.id
+    const list = this.data.list
+    for (let i = 0, len = list.length; i < len; ++i) {
+      if (list[i].id === id) {
+        list[i].open = !list[i].open
       } else {
-      // 在没有 open-type=getUserInfo 版本的兼容处理
+        list[i].open = false
-      wx.getUserInfo({
-        success: res => {
-          app.globalData.userInfo = res.userInfo
-          this.setData({
-            userInfo: res.userInfo,
-            hasUserInfo: true
-          })
       }
-      })
     }
-  },
-  getUserInfo: function(e) {
-    console.log(e)
-    app.globalData.userInfo = e.detail.userInfo
     this.setData({
-      userInfo: e.detail.userInfo,
+      list
-      hasUserInfo: true
     })
   }
 })

pages/component/index/index.wxml

@@ -1,13 +1,28 @@
-<!--index.wxml-->
+<view class="index">
-<view class="container">
+  <view class="index-hd">
-  <view class="userinfo">
+    <image class="index-logo" src="resources/kind/logo.png"></image>
-    <button wx:if="{{!hasUserInfo && canIUse}}" open-type="getUserInfo" bindgetuserinfo="getUserInfo"> 获取头像昵称 </button>
+    <view class="index-desc">以下将展示小程序官方组件能力，组件样式仅供参考。</view>
-    <block wx:else>
+  </view>
-      <image bindtap="bindViewTap" class="userinfo-avatar" src="{{userInfo.avatarUrl}}" mode="cover"></image>
+  <view class="index-bd">
-      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
+    <view class="kind-list">
+      <block wx:for-items="{{list}}" wx:key="{{item.id}}">
+        <view class="kind-list-item">
+          <view id="{{item.id}}" class="kind-list-item-hd {{item.open ? 'kind-list-item-hd-show' : ''}}" bindtap="kindToggle">
+            <view class="kind-list-text">{{item.name}}</view>
+            <image class="kind-list-img" src="resources/kind/{{item.id}}.png"></image>
+          </view>
+          <view class="kind-list-item-bd {{item.open ? 'kind-list-item-bd-show' : ''}}">
+            <view class="navigator-box {{item.open ? 'navigator-box-show' : ''}}">
+              <block wx:for-items="{{item.pages}}" wx:for-item="page" wx:key="*item">
+                <navigator url="pages/component/{{page}}" class="navigator">
+                  <view class="navigator-text">{{page}}</view>
+                  <view class="navigator-arrow"></view>
+                </navigator>
+              </block>
+            </view>
+          </view>
+        </view>
       </block>
     </view>
-  <view class="usermotto">
-    <text class="user-motto">{{motto}}</text>
   </view>
 </view>

pages/component/index/index.wxss

@@ -1,21 +1,6 @@
-/**index.wxss**/
+@import "../../common/index.wxss";
-.userinfo {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
 
-.userinfo-avatar {
+.weui-agree__link {
-  width: 128rpx;
+  display: inline;
-  height: 128rpx;
+  color: var(--weui-LINK);
-  margin: 20rpx;
-  border-radius: 50%;
-}
-
-.userinfo-nickname {
-  color: #aaa;
-}
-
-.usermotto {
-  margin-top: 200px;
 }