init

xhs-mini-demos/common/component/api-status/index.css

@@ -0,0 +1,59 @@
+.title {
+  text-align: center;
+  font-weight: 600;
+}
+
+.status-container {
+  display: flex;
+  justify-content: space-between;
+  padding: 10px 0;
+}
+
+.status-container > view {
+  padding: 5px 10px;
+  transition: all 0.3s;
+  border-radius: 10px;
+  border: 1px solid grey;
+  color: grey;
+}
+
+/* .status-success {
+  border: 1px solid green;
+  color: green;
+} */
+
+.status-container .status-success-active {
+  border: 1px solid green;
+  background-color: green;
+  color: white
+}
+
+/* .status-fail {
+  border: 1px solid red;
+  color: red;
+} */
+
+.status-container .status-fail-active {
+  border: 1px solid red;
+  background-color: red;
+  color: white
+}
+
+/* .status-complete {
+  border: 1px solid blue;
+  color: blue;
+} */
+
+.status-container .status-complete-active {
+  border: 1px solid green;
+  background-color: green;
+  color: white
+}
+
+.text-area {
+  box-sizing: border-box;
+  width: 100%;
+  padding: 10px;
+  border: 1px solid red;
+  border-radius: 10px;
+}

xhs-mini-demos/common/component/api-status/index.js

@@ -0,0 +1,42 @@
+const formatJsonForNotes = require("../../../util/formatJson");
+
+Component({
+  properties: {
+    success: {
+      type: Boolean,
+      value: false,
+    },
+    fail: {
+      type: Boolean,
+      value: false,
+    },
+    complete: {
+      type: Boolean,
+      value: false,
+    },
+    text: {
+      type: String,
+      value: ''
+    },
+    showStatus: {
+      type: Boolean,
+      value: true
+    }
+  },
+
+  data: {
+    formatText: ''
+  }, 
+
+  observers: {
+    text(value) {
+      let t = '';
+      try {
+        t = formatJsonForNotes(value);
+      } catch(err) {
+        t = value || '无返回值';
+      }
+      this.setData('formatText', t);
+    }
+  }
+});

xhs-mini-demos/common/component/api-status/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

xhs-mini-demos/common/component/api-status/index.xhsml

@@ -0,0 +1,26 @@
+<view>
+  <block xhs:if="{{showStatus}}">
+    <view class="title">
+      api调用状态
+    </view>
+    <view class="status-container">
+      <view class="status-success{{success ? '-active' : ''}}">
+        成功
+      </view>
+      <view class="status-fail{{fail ? '-active' : ''}}">
+        失败
+      </view>
+      <view class="status-complete{{complete ? '-active' : ''}}">
+        完成
+      </view>
+    </view>
+  </block>
+  <view class="title" xhs:if="{{text}}" style="padding-bottom: 10px;">
+    api调用返回结果
+  </view>
+  <scroll-view scroll-y class="text-area" xhs:if="{{text}}">
+    <text style="white-space:break-spaces;">
+      {{formatText}}
+    </text>
+  </scroll-view>
+</view>

xhs-mini-demos/common/component/apipan/index.js

@@ -0,0 +1,7 @@
+Component({
+  properties: {
+    success: '',
+    fail: '',
+    complete: '',
+  },
+});

xhs-mini-demos/common/component/apipan/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

xhs-mini-demos/common/component/apipan/index.xhsml

@@ -0,0 +1,4 @@
+<view class="inner">
+  {{innerText}}
+  31313123
+</view>

xhs-mini-demos/common/component/container/index.js

@@ -0,0 +1,24 @@
+Component({
+  properties: {
+    pad: {
+      type: String,
+      value: '16px',
+    },
+    pt: {
+      type: String,
+      value: undefined,
+    },
+    pb: {
+      type: String,
+      value: undefined,
+    },
+    pl: {
+      type: String,
+      value: undefined,
+    },
+    pr: {
+      type: String,
+      value: undefined,
+    }
+  }
+});

xhs-mini-demos/common/component/container/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

xhs-mini-demos/common/component/container/index.xhsml

@@ -0,0 +1,5 @@
+<view 
+  style="padding: {{pad}}; padding-top: {{pt}}; padding-bottom: {{pb}}; padding-left: {{pl}}; padding-right: {{pr}};"
+>
+  <slot></slot>
+</view>

xhs-mini-demos/common/component/example/index.css

@@ -0,0 +1,15 @@
+.container {
+  margin-bottom: 20px;
+}
+
+.container view{
+  text-align: center;
+}
+
+._ui-space > * {
+  margin-bottom: 20px;
+}
+
+._ui-space > *:last-child  {
+  margin-bottom: 0;
+}

xhs-mini-demos/common/component/example/index.js

@@ -0,0 +1,24 @@
+Component({
+  properties: {
+    value: Number
+  },
+
+  data: {
+    value2: ''
+  },
+
+  methods: {
+    onClick() {
+      this.triggerEvent('myevent');
+    }
+  },
+
+  observers: {
+    value: function(value) {
+      // 在 numberA 或者 numberB 被设置时，执行这个函数
+      this.setData({
+        value2: value && '[' + value + ']' 
+      });
+    }
+  }
+});

xhs-mini-demos/common/component/example/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

xhs-mini-demos/common/component/example/index.xhsml

@@ -0,0 +1,5 @@
+<view class="container _ui-space">
+  <view>组件内部的value值: {{value}}</view>
+  <view>监听组件value值的变化: {{value2}}</view>
+  <button bindtap="onClick" class="_ui-button" hover-class="_ui-button-hover">组件内重置value值</button>
+</view>

xhs-mini-demos/common/component/showbox/index.css

@@ -0,0 +1,35 @@
+.xhs-demo-card {
+  margin: 10px;
+  background-color: white;
+  border-radius: 12px;
+  overflow: hidden;
+}
+
+.xhs-demo-card-title {
+  margin: 0 16px;
+  padding: 15px 0;
+  font-size: 14px;
+  font-weight: 500;
+  line-height: 18px;
+}
+
+.xhs-demo-card-content {
+  background-color: #ffffff;
+}
+
+.xhs-demo-card-spiver{
+  position: relative;
+  border: 0;
+}
+
+.xhs-demo-card-spiver:after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  left: 0;
+  width: 100%;
+  height: 1px;
+  background: #efefef;
+  -webkit-transform-origin: 0 100%;
+  transform-origin: 0 100%;
+}

xhs-mini-demos/common/component/showbox/index.js

@@ -0,0 +1,9 @@
+Component({
+  // behaviors: [{}],
+  properties: {
+    title: {
+      type: String,
+      value: '',
+    }
+  }
+});

xhs-mini-demos/common/component/showbox/index.json

@@ -0,0 +1,3 @@
+{
+  "component": true
+}

xhs-mini-demos/common/component/showbox/index.xhsml

@@ -0,0 +1,8 @@
+<view class="xhs-demo-card">
+  <view xhs:if="{{title}}" class="xhs-demo-card-title xhs-demo-card-spiver">
+    {{title}}
+  </view>
+  <view class="xhs-demo-card-content">
+   <slot></slot>
+  </view>
+</view>

xhs-mini-demos/common/global.css

@@ -0,0 +1,85 @@
+@import './styles/margins.css';
+@import './styles/components.css';
+@import './styles/reset.css';
+
+/* 定义一些全局的主题颜色 */
+:root {
+  --xhs-theme-color: red;
+}
+
+/* 定义一些常用的通用的颜色基础类 */
+
+._cred {
+  color: var(--xhs-theme-color);
+}
+
+._bcred {
+  background-color: var(--xhs-theme-color);
+  color: white;
+}
+
+/* 定义一些常用的通用的布局基础类 */
+
+._dflex {
+  display: flex;
+}
+
+
+._fd_column {
+  flex-direction: column;
+}
+
+._jc_space-around {
+  justify-content: space-around;
+}
+
+._jc_center {
+  justify-content: center;
+}
+
+._jc_space-between {
+  justify-content: space-between;
+}
+
+._ai_center {
+  align-items: center;
+}
+
+._flex_1 {
+  flex: 1;
+}
+
+/* 其他 */
+
+._text_wrap {
+  word-break: break-all;
+}
+
+/* input {
+  border: 1px solid #eeeeee;
+  border-radius: 5px;
+  height: 40px !important;
+} */
+
+._end_split {
+  position: relative;
+  border: 0;
+}
+
+._end_split::after {
+  content: "";
+  position: absolute;
+  bottom: 0;
+  height: 1px;
+  background: #ebebeb;
+  left: 0;
+  right: 0;
+}
+
+._ui-space > * {
+  margin-bottom: 20px;
+}
+
+._ui-space > *:last-child  {
+  margin-bottom: 0;
+}

xhs-mini-demos/common/index.css

@@ -0,0 +1,111 @@
+.index-hd {
+  padding: 40px;
+  text-align: center;
+}
+.index-bd {
+  padding: 0 15px 20px;
+}
+.index-ft {
+  padding-bottom: 10px;
+  text-align: center;
+}
+.index-logo {
+  width: 43px;
+  height: 43px;
+}
+.index-desc {
+  margin-top: 10px;
+  color: #888888;
+  font-size: 14px;
+}
+
+
+.navigator-box {
+  opacity: 0;
+  position: relative;
+  background-color: #FFFFFF;
+  line-height: 1.41176471;
+  font-size: 32px;
+
+  transform: translateY(-50%);
+  transition: .3s;
+}
+.navigator-box-show {
+  opacity: 1;
+  transform: translateY(0);
+}
+.navigator {
+  padding: 10px 15px;
+  position: relative;
+  display: flex;
+  align-items: center;
+}
+.navigator:before {
+  content: " ";
+  position: absolute;
+  left: 15px;
+  top: 0;
+  right: 15px;
+  height: 1px;
+  border-top: 1px solid #D8D8D8;
+  color: #D8D8D8;
+}
+.navigator:first-child:before {
+  display: none;
+}
+.navigator-text {
+  flex: 1;
+}
+.navigator-arrow {
+  padding-right: 13px;
+  position: relative;
+}
+.navigator-arrow:after {
+  content: " ";
+  display: inline-block;
+  height: 9px;
+  width: 9px;
+  border-width: 1px 1px 0 0;
+  border-color: #888888;
+  border-style: solid;
+  transform: matrix(0.71, 0.71, -0.71, 0.71, 0, 0);
+  position: absolute;
+  top: 50%;
+  margin-top: -4px;
+  right: 14px;
+}
+
+
+.kind-list-item {
+  margin: 10px 0;
+  background-color: #FFFFFF;
+  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;
+}
+.kind-list-item-hd {
+  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;
+}

xhs-mini-demos/common/styles/components.css

@@ -0,0 +1,26 @@
+
+._ui-input {
+  background-color: rgba(51, 51, 51, 0.025);
+  border-radius: 18px;
+  padding: 9px 16px;
+}
+
+._ui-textarea {
+  background-color: rgba(0, 0, 0, 0.04);
+  border-radius: 8px;
+  padding: 14px 12px;
+}
+
+._ui-button {
+  background-color: rgb(255, 36, 66);
+  color: white;
+}
+
+._ui-button-hover {
+  background-color: #ff2442b3;
+  color: white;
+}
+
+._ui-button-hover::after {
+  border: none;
+}

xhs-mini-demos/common/styles/margins.css

@@ -0,0 +1,237 @@
+/* 定义一些常用的通用的边距基础类 */
+
+/* 4px */
+._ma2 {
+  margin: 4px;
+}
+._mx2 {
+  margin: 0 4px;
+}
+._my2 {
+  margin: 4px 0;
+}
+
+._mt2 {
+  margin-top: 4px;
+}
+._mb2 {
+  margin-bottom: 4px;
+}
+._ml2 {
+  margin-left: 4px;
+}
+._mr2 {
+  margin-right: 4px;
+}
+
+._pa2 {
+  padding: 4px;
+}
+._px2 {
+  padding: 0 4px;
+}
+._py2 {
+  padding: 4px 0;
+}
+
+._pt2 {
+  padding-top: 4px;
+}
+._pb2 {
+  padding-bottom: 4px;
+}
+._pl2 {
+  padding-left: 4px;
+}
+._pr2 {
+  padding-right: 4px;
+}
+
+/* 8px */
+._ma4 {
+  margin: 8px;
+}
+._mx4 {
+  margin: 0 8px;
+}
+._my4 {
+  margin: 8px 0;
+}
+
+._mt4 {
+  margin-top: 8px;
+}
+._mb4 {
+  margin-bottom: 8px;
+}
+._ml4 {
+  margin-left: 8px;
+}
+._mr4 {
+  margin-right: 8px;
+}
+
+._pa4 {
+  padding: 8px;
+}
+._px4 {
+  padding: 0 8px;
+}
+._py4 {
+  padding: 8px 0;
+}
+
+._pt4 {
+  padding-top: 8px;
+}
+._pb4 {
+  padding-bottom: 8px;
+}
+._pl4 {
+  padding-left: 8px;
+}
+._pr4 {
+  padding-right: 8px;
+}
+
+/* 12px */
+._ma6 {
+  margin: 12px;
+}
+._mx6 {
+  margin: 0 12px;
+}
+._my6 {
+  margin: 12px 0;
+}
+
+._mt6 {
+  margin-top: 12px;
+}
+._mb6 {
+  margin-bottom: 12px;
+}
+._ml6 {
+  margin-left: 12px;
+}
+._mr6 {
+  margin-right: 12px;
+}
+
+._pa6 {
+  padding: 12px;
+}
+._px6 {
+  padding: 0 12px;
+}
+._py6 {
+  padding: 12px 0;
+}
+
+._pt6 {
+  padding-top: 12px;
+}
+._pb6 {
+  padding-bottom: 12px;
+}
+._pl6 {
+  padding-left: 12px;
+}
+._pr6 {
+  padding-right: 12px;
+}
+
+/* 16px */
+._ma8 {
+  margin: 16px;
+}
+._mx8 {
+  margin: 0 16px;
+}
+._my8 {
+  margin: 16px 0;
+}
+
+._mt8 {
+  margin-top: 16px;
+}
+._mb8 {
+  margin-bottom: 16px;
+}
+._ml8 {
+  margin-left: 16px;
+}
+._mr8 {
+  margin-right: 16px;
+}
+
+._pa8 {
+  padding: 16px;
+}
+._px8 {
+  padding: 0 16px;
+}
+._py8 {
+  padding: 16px 0;
+}
+
+._pt8 {
+  padding-top: 16px;
+}
+._pb8 {
+  padding-bottom: 16px;
+}
+._pl8 {
+  padding-left: 16px;
+}
+._pr8 {
+  padding-right: 16px;
+}
+
+
+/* 20px */
+._ma10 {
+  margin: 20px;
+}
+._mx10 {
+  margin: 0 20px;
+}
+._my10 {
+  margin: 20px 0;
+}
+
+._mt10 {
+  margin-top: 20px;
+}
+._mb10 {
+  margin-bottom: 20px;
+}
+._ml10 {
+  margin-left: 20px;
+}
+._mr10 {
+  margin-right: 20px;
+}
+
+._pa10 {
+  padding: 20px;
+}
+._px10 {
+  padding: 0 20px;
+}
+._py10 {
+  padding: 20px 0;
+}
+
+._pt10 {
+  padding-top: 20px;
+}
+._pb10 {
+  padding-bottom: 20px;
+}
+._pl10 {
+  padding-left: 20px;
+}
+._pr10 {
+  padding-right: 20px;
+}

xhs-mini-demos/common/styles/reset.css

@@ -0,0 +1,59 @@
+picker {
+  border: 1px solid #eeeeee;
+  border-radius: 5px;
+}
+
+button {
+  height: 40px;
+  border-radius: 1000px;
+  font-size: 16px;
+  font-weight: 500;
+  line-height: 40px;
+}
+
+button::after {
+  border: none;
+}
+
+.button-hover::after {
+  border: none;
+}
+
+textarea {
+  padding: 0;
+}
+
+/* textarea > *:first-child > *:first-child {
+  color: #999 !important;
+} */
+
+.xhs-inner-switch-control-switch::after {
+  background-color: aqua;
+}
+
+picker {
+  border: none;
+}
+
+/* dakjdhkjhsjf */
+radio * {
+  display: flex;
+}
+
+checkbox * {
+  display: flex;
+}
+
+slider > div > div > div > div:nth-child(2) {
+  width: 16px !important;
+  height: 16px !important;
+  margin-top: -8px !important;
+  margin-left: -8px !important;
+}
+
+/* switch > * > *:last-child::after {
+  width: 24px !important;
+  height: 24px !important;
+  top: 50% !important;
+  margin-top: -12px !important;
+} */

xhs-mini-demos/common/template.xhsml

@@ -0,0 +1,5 @@
+<template name="template">
+  <view style="text-align: center;">
+    template内部的value值：{{value}}
+  </view>
+</template>