feat:首页输入框、文字卡片

miniprogram/components/navigation-bar/navigation-bar.less

@@ -3,6 +3,7 @@
     --height: 44px;
     --left: 16px;
 }
+
 .weui-navigation-bar .android {
     --height: 48px;
 }
@@ -90,6 +91,7 @@
     from {
         transform: rotate(0);
     }
+
     to {
         transform: rotate(360deg);
     }

miniprogram/components/navigation-bar/navigation-bar.ts

@@ -1,6 +1,6 @@
 Component({
     options: {
-    multipleSlots: true // 在组件定义时的选项中启用多slot支持
+        multipleSlots: true, // 在组件定义时的选项中启用多slot支持
     },
     /**
      * 组件的属性列表
@@ -8,27 +8,27 @@ Component({
     properties: {
         extClass: {
             type: String,
-      value: ''
+            value: '',
         },
         title: {
             type: String,
-      value: ''
+            value: '',
         },
         background: {
             type: String,
-      value: ''
+            value: '',
         },
         color: {
             type: String,
-      value: ''
+            value: '',
         },
         back: {
             type: Boolean,
-      value: true
+            value: true,
         },
         loading: {
             type: Boolean,
-      value: false
+            value: false,
         },
         homeButton: {
             type: Boolean,
@@ -37,41 +37,44 @@ Component({
         animated: {
             // 显示隐藏的时候opacity动画效果
             type: Boolean,
-      value: true
+            value: true,
         },
         show: {
             // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
             type: Boolean,
             value: true,
-      observer: '_showChange'
+            observer: '_showChange',
         },
         // back为true的时候，返回的页面深度
         delta: {
             type: Number,
-      value: 1
+            value: 1,
         },
     },
     /**
      * 组件的初始数据
      */
     data: {
-    displayStyle: ''
+        displayStyle: '',
     },
     lifetimes: {
         attached() {
-      const rect = wx.getMenuButtonBoundingClientRect()
+            const rect = wx.getMenuButtonBoundingClientRect();
             wx.getSystemInfo({
                 success: (res) => {
-          const isAndroid = res.platform === 'android'
+                    const isAndroid = res.platform === 'android';
-          const isDevtools = res.platform === 'devtools'
+                    const isDevtools = res.platform === 'devtools';
                     this.setData({
                         ios: !isAndroid,
                         innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
                         leftWidth: `width: ${res.windowWidth - rect.left}px`,
-            safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px` : ``
+                        safeAreaTop:
-          })
+                            isDevtools || isAndroid
-        }
+                                ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px`
-      })
+                                : ``,
+                    });
+                },
+            });
         },
     },
     /**
@@ -79,27 +82,25 @@ Component({
      */
     methods: {
         _showChange(show: boolean) {
-      const animated = this.data.animated
+            const animated = this.data.animated;
-      let displayStyle = ''
+            let displayStyle = '';
             if (animated) {
-        displayStyle = `opacity: ${
+                displayStyle = `opacity: ${show ? '1' : '0'};transition:opacity 0.5s;`;
-          show ? '1' : '0'
-        };transition:opacity 0.5s;`
             } else {
-        displayStyle = `display: ${show ? '' : 'none'}`
+                displayStyle = `display: ${show ? '' : 'none'}`;
             }
             this.setData({
-        displayStyle
+                displayStyle,
-      })
+            });
         },
         back() {
-      const data = this.data
+            const data = this.data;
             if (data.delta) {
                 wx.navigateBack({
-          delta: data.delta
+                    delta: data.delta,
-        })
+                });
-      }
-      this.triggerEvent('back', { delta: data.delta }, {})
             }
+            this.triggerEvent('back', { delta: data.delta }, {});
         },
-})
+    },
+});

miniprogram/components/navigation-bar/navigation-bar.wxml

@@ -1,8 +1,9 @@
 <view class="weui-navigation-bar {{extClass}}">
-  <view class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}" style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
+    <view
-
+        class="weui-navigation-bar__inner {{ios ? 'ios' : 'android'}}"
+        style="color: {{color}}; background: {{background}}; {{displayStyle}}; {{innerPaddingRight}}; {{safeAreaTop}};">
         <!-- 左侧按钮 -->
-    <view class='weui-navigation-bar__left' style="{{leftWidth}};">
+        <view class="weui-navigation-bar__left" style="{{leftWidth}};">
             <block wx:if="{{back || homeButton}}">
                 <!-- 返回上一页 -->
                 <block wx:if="{{back}}">
@@ -13,9 +14,9 @@
                             hover-class="weui-active"
                             hover-stay-time="100"
                             aria-role="button"
-              aria-label="返回"
+                            aria-label="返回">
-            >
+                            <view
-              <view class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
+                                class="weui-navigation-bar__button weui-navigation-bar__btn_goback"></view>
                         </view>
                     </view>
                 </block>
@@ -27,9 +28,9 @@
                             class="weui-navigation-bar__btn_home_wrapper"
                             hover-class="weui-active"
                             aria-role="button"
-              aria-label="首页"
+                            aria-label="首页">
-            >
+                            <view
-              <view class="weui-navigation-bar__button weui-navigation-bar__btn_home"></view>
+                                class="weui-navigation-bar__button weui-navigation-bar__btn_home"></view>
                         </view>
                     </view>
                 </block>
@@ -40,13 +41,9 @@
         </view>
 
         <!-- 标题 -->
-    <view class='weui-navigation-bar__center'>
+        <view class="weui-navigation-bar__center">
             <view wx:if="{{loading}}" class="weui-navigation-bar__loading" aria-role="alert">
-        <view
+                <view class="weui-loading" aria-role="img" aria-label="加载中"></view>
-          class="weui-loading"
-          aria-role="img"
-          aria-label="加载中"
-        ></view>
             </view>
             <block wx:if="{{title}}">
                 <text>{{title}}</text>
@@ -57,7 +54,7 @@
         </view>
 
         <!-- 右侧留空 -->
-    <view class='weui-navigation-bar__right'>
+        <view class="weui-navigation-bar__right">
             <slot name="right"></slot>
         </view>
     </view>

miniprogram/components/word-card/word-card.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "usingComponents": {
+        "van-icon": "@vant/weapp/icon/index"
+    }
+}

miniprogram/components/word-card/word-card.less

@@ -0,0 +1,43 @@
+.word-card {
+    display: flex;
+    flex-direction: row;
+    // width: 324rpx;
+    height: 100rpx;
+    border-radius: 16rpx;
+    background-color: #EEFCFC;
+    align-items: center;
+    box-shadow: 0 2rpx 2rpx rgba(0, 0, 0, 0.35);
+
+    .color-box {
+        width: 60rpx;
+        height: 60rpx;
+        border-radius: 50%;
+        background-color: #ff0000;
+        margin-left: 20rpx;
+        border: 1rpx solid #141414;
+    }
+
+    .word-box {
+        margin: 0 24rpx;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        width: 82rpx;
+        height: 52rpx;
+        border: 1rpx solid #000;
+        background-color: #fff;
+
+        .word-content {
+            font-size: 28rpx;
+            color: #141414;
+            text-align: center;
+
+        }
+    }
+
+    .delete-icon {
+        padding: 20rpx;
+        margin-right: 8rpx;
+        color: #141414;
+    }
+}

miniprogram/components/word-card/word-card.ts

@@ -0,0 +1,27 @@
+Component({
+    options: {
+        // multipleSlots: true, // 在组件定义时的选项中启用多slot支持
+    },
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        extClass: {
+            type: String,
+            value: '',
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        displayStyle: '',
+    },
+    lifetimes: {
+        attached() {},
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {},
+});

miniprogram/components/word-card/word-card.wxml

@@ -0,0 +1,9 @@
+<view class="word-card">
+    <view class="color-box"></view>
+    <view class="word-box">
+        <text class="word-content">文</text>
+    </view>
+    <view class="delete-icon">
+        <van-icon name="delete" custom-class="delete-icon-inner" size="44rpx" />
+    </view>
+</view>

miniprogram/components/word-input/word-input.json

@@ -0,0 +1,7 @@
+{
+    "component": true,
+    "styleIsolation": "apply-shared",
+    "usingComponents": {
+        "van-icon": "@vant/weapp/icon/index"
+    }
+}

miniprogram/components/word-input/word-input.less

@@ -0,0 +1,22 @@
+.word-input-container {
+    display: flex;
+    flex-direction: row;
+    width: 100%;
+    border-radius: 20rpx;
+    background-color: #f8f8f8;
+    align-items: center;
+
+    .word-input-icon {
+        // border: 1px solid red;
+        padding: 22rpx;
+    }
+
+    .word-input {
+        flex: 1;
+        height: 92rpx;
+        padding-right: 20rpx;
+        // padding: 0 20rpx 0 10rpx;
+        font-size: 28rpx;
+        line-height: 92rpx;
+    }
+}

miniprogram/components/word-input/word-input.ts

@@ -0,0 +1,27 @@
+Component({
+    options: {
+        // multipleSlots: true, // 在组件定义时的选项中启用多slot支持
+    },
+    /**
+     * 组件的属性列表
+     */
+    properties: {
+        extClass: {
+            type: String,
+            value: '',
+        },
+    },
+    /**
+     * 组件的初始数据
+     */
+    data: {
+        displayStyle: '',
+    },
+    lifetimes: {
+        attached() {},
+    },
+    /**
+     * 组件的方法列表
+     */
+    methods: {},
+});

miniprogram/components/word-input/word-input.wxml

@@ -0,0 +1,9 @@
+<view class="word-input-container">
+    <van-icon name="miniprogram-o" custom-class="word-input-icon" size="48rpx" />
+    <input
+        class="word-input"
+        type="text"
+        placeholder="请输入小朋友喜欢的文字"
+        bindconfirm="onConfirm"
+        maxlength="6" />
+</view>

miniprogram/pages/demoIndex/index.json

@@ -0,0 +1,7 @@
+{
+    "navigationBarTitleText": "首页",
+    "navigationBarBackgroundColor": "#d2e7d8",
+    "homeButton": true,
+    "backgroundColor": "#e8eddb",
+    "enablePullDownRefresh": false
+}

miniprogram/pages/demoIndex/index.less

@@ -0,0 +1,33 @@
+/**index.less**/
+page {
+    height: 100vh;
+    display: flex;
+    flex-direction: column;
+}
+
+.scroll-view {
+    flex: 1;
+    overflow-y: hidden;
+}
+
+.card {
+    margin: 10px;
+    padding: 10px;
+    background-color: #fff;
+    border-radius: 10px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
+    width: calc(33.33% - 20px);
+    /* Adjust width for three cards per row */
+    box-sizing: border-box;
+    /* Ensure padding and margin are included in the width */
+    display: inline-block;
+    /* Allow cards to sit next to each other */
+    vertical-align: top;
+    /* Align cards to the top */
+
+    .card-title {
+        font-size: 18px;
+        font-weight: bold;
+        color: #333;
+    }
+}

miniprogram/pages/demoIndex/index.ts

@@ -0,0 +1,32 @@
+Page({
+    data: {
+        cards: [
+            {
+                key: 0,
+                title: '文本绘制',
+                url: '/demoPages/textPaint/textPaint',
+            },
+            {
+                key: 1,
+                title: '文本绘制2',
+                url: '/demoPages/textPaint2/textPaint',
+            },
+            {
+                key: 2,
+                title: '文本绘制',
+                url: '/demoPages/textPaint/textPaint',
+            },
+            {
+                key: 3,
+                title: '文本绘制',
+                url: '/demoPages/textPaint/textPaint',
+            },
+        ],
+    },
+
+    tapCard(e: WechatMiniprogram.TouchEvent) {
+        const { url } = e.currentTarget.dataset;
+        console.log('navigateTo url:', url);
+        wx.navigateTo({ url });
+    },
+});

miniprogram/pages/demoIndex/index.wxml

@@ -0,0 +1,12 @@
+<!--index.wxml-->
+<scroll-view class="scroll-view" scroll-y type="list">
+    <view 
+        class="card" 
+        wx:for="{{cards}}"
+        wx:for-item="card"
+        wx:key="*this"
+        bindtap="tapCard" 
+        data-url="{{card.url}}">
+        <view class="card-title">{{card.title}}</view>
+    </view>
+</scroll-view>

miniprogram/pages/index/index.json

@@ -1,7 +1,11 @@
 {
-    "navigationBarTitleText": "首页",
+    "navigationBarTitleText": "涂鸦丫",
-    "navigationBarBackgroundColor": "#d2e7d8",
+    "navigationBarBackgroundColor": "#FFD719",
     "homeButton": true,
-    "backgroundColor": "#e8eddb",
+    "backgroundColor": "#F6F6F6",
-    "enablePullDownRefresh": false
+    "enablePullDownRefresh": false,
+    "usingComponents": {
+        "word-input": "../../components/word-input/word-input",
+        "word-card": "../../components/word-card/word-card"
+    }
 }

miniprogram/pages/index/index.less

@@ -1,33 +1,38 @@
-/**index.less**/
 page {
-    height: 100vh;
+    background-color: #F6F6F6;
+}
+
+.page-container {
+    background-color: #F6F6F6;
+    padding: 24rpx;
+    box-sizing: border-box;
+
+    .wrapper {
+        background-color: #ffffff;
+        border-radius: 20rpx;
+        padding: 30rpx;
+        box-shadow: 0 3rpx 4rpx rgba(0, 0, 0, 0.15);
+        margin: 30rpx 0;
         display: flex;
         flex-direction: column;
-}
 
-.scroll-view {
+        .wrapper-title {
-    flex: 1;
+            font-size: 32rpx;
-    overflow-y: hidden;
+            color: #141414;
-}
+            margin-bottom: 30rpx;
-
-.card {
-    margin: 10px;
-    padding: 10px;
-    background-color: #fff;
-    border-radius: 10px;
-    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
-    width: calc(33.33% - 20px);
-    /* Adjust width for three cards per row */
-    box-sizing: border-box;
-    /* Ensure padding and margin are included in the width */
-    display: inline-block;
-    /* Allow cards to sit next to each other */
-    vertical-align: top;
-    /* Align cards to the top */
-
-    .card-title {
-        font-size: 18px;
             font-weight: bold;
-        color: #333;
+            text-align: center;
+        }
+    }
+
+    .word-card-box {
+        margin-top: 30rpx;
+    }
+
+    .word-card-list {
+        display: flex;
+        flex-direction: row;
+        justify-content: space-between;
+        margin-bottom: 24rpx;
     }
 }

miniprogram/pages/index/index.ts

@@ -1,28 +1,5 @@
 Page({
-    data: {
+    data: {},
-        cards: [
-            {
-                key: 0,
-                title: '文本绘制',
-                url: '/demoPages/textPaint/textPaint',
-            },
-            {
-                key: 1,
-                title: '文本绘制2',
-                url: '/demoPages/textPaint2/textPaint',
-            },
-            {
-                key: 2,
-                title: '文本绘制',
-                url: '/demoPages/textPaint/textPaint',
-            },
-            {
-                key: 3,
-                title: '文本绘制',
-                url: '/demoPages/textPaint/textPaint',
-            },
-        ],
-    },
 
     tapCard(e: WechatMiniprogram.TouchEvent) {
         const { url } = e.currentTarget.dataset;

miniprogram/pages/index/index.wxml

@@ -1,12 +1,19 @@
-<!--index.wxml-->
+<scroll-view class="page-container" scroll-y type="list">
-<scroll-view class="scroll-view" scroll-y type="list">
+    <view class="wrapper">
-    <view 
+        <text class="wrapper-title">设置文字和颜色</text>
-        class="card" 
+        <word-input />
-        wx:for="{{cards}}"
+        <view class="word-card-box">
-        wx:for-item="card"
+            <view class="word-card-list">
-        wx:key="*this"
+                <word-card />
-        bindtap="tapCard" 
+                <word-card />
-        data-url="{{card.url}}">
+            </view>
-        <view class="card-title">{{card.title}}</view>
+            <view class="word-card-list">
+                <word-card />
+                <word-card />
+            </view>
+        </view>
+    </view>
+    <view class="wrapper">
+        <text class="wrapper-title">预览打印效果</text>
     </view>
 </scroll-view>

miniprogram/ui/README.md

@@ -0,0 +1 @@
+# ui 目录用于放UI类组件