增加vant组件和wux组件示例

examples/wxcomponents-template/App.vue

@@ -14,13 +14,12 @@
 
 <style>
 	/*每个页面公共css */
-
-	page,
-	view {
-		display: flex;/* uni-app默认使用flex布局。因为flex布局有利于跨更多平台，尤其是采用原生渲染的平台。如不了解flex布局，请参考http://www.w3.org/TR/css3-flexbox/。若不需要flex布局可删除本行*/
-	}
-
 	page {
-		min-height: 100%;
+		min-height: 100%;
+		background: #ECECEC;
+	}
+	.title{
+		padding: 10px;
+		text-align: center;
 	}
 </style>

examples/wxcomponents-template/pages.json

@@ -3,13 +3,34 @@
 		{
 			"path": "pages/index/index",
 			"style": {
-				"navigationBarTitleText": "uni-app"
+				"navigationBarTitleText": "小程序组件示例"
+			}
+		},
+		{
+			"path": "pages/vant/vant",
+			"style": {
+				"navigationBarTitleText": "vant组件示例",
+				"usingComponents": {
+					"van-nav-bar": "/wxcomponents/vant-weapp/dist/nav-bar/index",
+					"van-icon": "/wxcomponents/vant-weapp/dist/icon/index"
+				}
+			}
+		},
+		{
+			"path": "pages/wux/wux",
+			"style": {
+				"navigationBarTitleText": "wux组件示例",
+				"usingComponents": {
+					"wux-calendar": "/wxcomponents/wux-weapp/dist/calendar/index",
+					"wux-cell-group": "/wxcomponents/wux-weapp/dist/cell-group/index",
+					"wux-cell": "/wxcomponents/wux-weapp/dist/cell/index"
+				}
 			}
 		}
 	],
 	"globalStyle": {
 		"navigationBarTextStyle": "black",
-		"navigationBarTitleText": "uni-app",
+		"navigationBarTitleText": "小程序组件示例",
 		"navigationBarBackgroundColor": "#F8F8F8",
 		"backgroundColor": "#F8F8F8"
 	}

examples/wxcomponents-template/pages/index/index.vue

@@ -1,26 +1,22 @@
 <template>
 	<view class="content">
-		<text class="title">{{title}}</text>
+		<navigator url="../vant/vant">
+			<button type="default">vant组件示例</button>
+		</navigator>
+		<navigator url="../wux/wux">
+			<button type="default">wux组件示例</button>
+		</navigator>
 	</view>
 </template>
 
 <script>
 	export default {
-		data: {
-			title: 'Hello'
-		}
+
 	}
 </script>
 
 <style>
-	.content {
-		flex: 1;
-		justify-content: center;
-		align-items: center;
-	}
-
-	.title {
-		font-size: 36upx;
-		color: #8f8f94;
+	button {
+		margin-top: 20px;
 	}
 </style>

examples/wxcomponents-template/pages/vant/vant.vue

@@ -0,0 +1,32 @@
+<template>
+	<view>
+		<view class="title">导航栏</view>
+		<van-nav-bar title="标题" left-text="返回" left-arrow @clickLeft="onClickLeft" @clickRight="onClickRight">
+			<van-icon name="search" slot="right" custom-class="icon" />
+		</van-nav-bar>
+	</view>
+</template>
+
+<script>
+	export default {
+		methods: {
+			onClickLeft() {
+				wx.showToast({
+					title: '点击返回',
+					icon: 'none'
+				});
+			},
+
+			onClickRight() {
+				wx.showToast({
+					title: '点击按钮',
+					icon: 'none'
+				});
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

examples/wxcomponents-template/pages/wux/wux.vue

@@ -0,0 +1,80 @@
+<template>
+	<view>
+		<view class="title">日历组件</view>
+		<wux-calendar id="wux-calendar" />
+
+		<wux-cell-group title="Calendar">
+			<wux-cell title="单选" :extra="value1" @click="openCalendar1"></wux-cell>
+			<wux-cell title="多选" :extra="value2" @click="openCalendar2"></wux-cell>
+			<wux-cell title="Direction = Vertical" :extra="value3" @click="openCalendar3"></wux-cell>
+			<wux-cell title="MinDate & MaxDate" :extra="value4" @click="openCalendar4"></wux-cell>
+		</wux-cell-group>
+	</view>
+</template>
+
+<script>
+	import {
+		$wuxCalendar
+	} from '@/wxcomponents/wux-weapp/dist/index.js'
+
+	export default {
+		data() {
+			return {
+				value1: [],
+				value2: [],
+				value3: [],
+				value4: [],
+			}
+		},
+		methods: {
+			openCalendar1() {
+				$wuxCalendar().open({
+					value: this.value1,
+					onChange: (values, displayValues) => {
+						console.log('onChange', values, displayValues)
+						this.value1 = displayValues
+					},
+				})
+			},
+			openCalendar2() {
+				$wuxCalendar().open({
+					value: this.value2,
+					multiple: true,
+					onChange: (values, displayValues) => {
+						console.log('onChange', values, displayValues)
+						this.value2 = displayValues
+					},
+				})
+			},
+			openCalendar3() {
+				$wuxCalendar().open({
+					value: this.value3,
+					direction: 'vertical',
+					onChange: (values, displayValues) => {
+						console.log('onChange', values, displayValues)
+						this.value3 = displayValues
+					},
+				})
+			},
+			openCalendar4() {
+				const now = new Date()
+				const minDate = now.getTime()
+				const maxDate = now.setDate(now.getDate() + 7)
+
+				$wuxCalendar().open({
+					value: this.value4,
+					minDate,
+					maxDate,
+					onChange: (values, displayValues) => {
+						console.log('onChange', values, displayValues)
+						this.value4 = displayValues
+					},
+				})
+			}
+		}
+	}
+</script>
+
+<style>
+
+</style>

examples/wxcomponents-template/wxcomponents/vant-weapp/dist/icon/index.js

@@ -0,0 +1,20 @@
+import { create } from '../common/create';
+
+create({
+  props: {
+    info: null,
+    name: String,
+    size: String,
+    color: String,
+    classPrefix: {
+      type: String,
+      value: 'van-icon'
+    }
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    }
+  }
+});

examples/wxcomponents-template/wxcomponents/vant-weapp/dist/icon/index.json

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

examples/wxcomponents-template/wxcomponents/vant-weapp/dist/icon/index.wxml

@@ -0,0 +1,7 @@
+<view
+  class="custom-class {{ classPrefix }} {{ classPrefix }}-{{ name }}"
+  style="{{ color ? 'color: ' + color : '' }}; {{ size ? 'font-size: ' + size : '' }}"
+  bind:tap="onClick"
+>
+  <view wx:if="{{ info !== null }}" class="van-icon__info">{{ info }}</view>
+</view>

examples/wxcomponents-template/wxcomponents/vant-weapp/dist/icon/index.wxss

@@ -0,0 +1 @@
+@font-face{font-style:normal;font-weight:400;font-family:vant-icon;src:url(https://img.yzcdn.cn/vant/vant-icon-76f274.ttf) format('truetype')}.van-icon{position:relative;display:inline-block;font:normal normal normal 14px/1 vant-icon;font-size:inherit;text-rendering:auto}.van-icon__info{color:#fff;left:100%;top:-.5em;font-size:.5em;padding:0 .3em;text-align:center;min-width:1.2em;line-height:1.2;position:absolute;border-radius:.6em;box-sizing:border-box;background-color:#f44;-webkit-transform:translateX(-50%);transform:translateX(-50%);font-family:PingFang SC,Helvetica Neue,Arial,sans-serif}.van-icon::before{display:inline-block}.van-icon-add-o::before{content:"\F000"}.van-icon-add::before{content:"\F001"}.van-icon-add2::before{content:"\F002"}.van-icon-after-sale::before{content:"\F003"}.van-icon-aim::before{content:"\F004"}.van-icon-alipay::before{content:"\F005"}.van-icon-arrow-left::before{content:"\F006"}.van-icon-arrow::before{content:"\F007"}.van-icon-balance-pay::before{content:"\F008"}.van-icon-browsing-history::before{content:"\F009"}.van-icon-card::before{content:"\F00A"}.van-icon-cart::before{content:"\F00B"}.van-icon-cash-back-record::before{content:"\F00C"}.van-icon-cash-on-deliver::before{content:"\F00D"}.van-icon-certificate::before{content:"\F00E"}.van-icon-chat::before{content:"\F00F"}.van-icon-check::before{content:"\F010"}.van-icon-checked::before{content:"\F011"}.van-icon-clear::before{content:"\F012"}.van-icon-clock::before{content:"\F013"}.van-icon-close::before{content:"\F014"}.van-icon-completed::before{content:"\F015"}.van-icon-contact::before{content:"\F016"}.van-icon-coupon::before{content:"\F017"}.van-icon-credit-pay::before{content:"\F018"}.van-icon-debit-pay::before{content:"\F019"}.van-icon-delete::before{content:"\F01A"}.van-icon-description::before{content:"\F01B"}.van-icon-discount::before{content:"\F01C"}.van-icon-ecard-pay::before{content:"\F01D"}.van-icon-edit-data::before{content:"\F01E"}.van-icon-edit::before{content:"\F01F"}.van-icon-exchange-record::before{content:"\F020"}.van-icon-exchange::before{content:"\F021"}.van-icon-fail::before{content:"\F022"}.van-icon-free-postage::before{content:"\F023"}.van-icon-gift-card-pay::before{content:"\F024"}.van-icon-gift-card::before{content:"\F025"}.van-icon-gift::before{content:"\F026"}.van-icon-gold-coin::before{content:"\F027"}.van-icon-goods-collect::before{content:"\F028"}.van-icon-home::before{content:"\F029"}.van-icon-hot-sale::before{content:"\F02A"}.van-icon-hot::before{content:"\F02B"}.van-icon-idcard::before{content:"\F02C"}.van-icon-info-o::before{content:"\F02D"}.van-icon-like-o::before{content:"\F02E"}.van-icon-like::before{content:"\F02F"}.van-icon-location::before{content:"\F030"}.van-icon-logistics::before{content:"\F031"}.van-icon-more-o::before{content:"\F032"}.van-icon-more::before{content:"\F033"}.van-icon-new-arrival::before{content:"\F034"}.van-icon-new::before{content:"\F035"}.van-icon-other-pay::before{content:"\F036"}.van-icon-passed::before{content:"\F037"}.van-icon-password-not-view::before{content:"\F038"}.van-icon-password-view::before{content:"\F039"}.van-icon-pause::before{content:"\F03A"}.van-icon-peer-pay::before{content:"\F03B"}.van-icon-pending-deliver::before{content:"\F03C"}.van-icon-pending-evaluate::before{content:"\F03D"}.van-icon-pending-orders::before{content:"\F03E"}.van-icon-pending-payment::before{content:"\F03F"}.van-icon-phone::before{content:"\F040"}.van-icon-photo::before{content:"\F041"}.van-icon-photograph::before{content:"\F042"}.van-icon-play::before{content:"\F043"}.van-icon-point-gift::before{content:"\F044"}.van-icon-points-mall::before{content:"\F045"}.van-icon-points::before{content:"\F046"}.van-icon-qr-invalid::before{content:"\F047"}.van-icon-qr::before{content:"\F048"}.van-icon-question::before{content:"\F049"}.van-icon-receive-gift::before{content:"\F04A"}.van-icon-records::before{content:"\F04B"}.van-icon-search::before{content:"\F04C"}.van-icon-send-gift::before{content:"\F04D"}.van-icon-setting::before{content:"\F04E"}.van-icon-share::before{content:"\F04F"}.van-icon-shop-collect::before{content:"\F050"}.van-icon-shop::before{content:"\F051"}.van-icon-shopping-cart::before{content:"\F052"}.van-icon-sign::before{content:"\F053"}.van-icon-stop::before{content:"\F054"}.van-icon-success::before{content:"\F055"}.van-icon-tosend::before{content:"\F056"}.van-icon-underway::before{content:"\F057"}.van-icon-upgrade::before{content:"\F058"}.van-icon-value-card::before{content:"\F059"}.van-icon-wap-home::before{content:"\F05A"}.van-icon-wap-nav::before{content:"\F05B"}.van-icon-warn::before{content:"\F05C"}.van-icon-wechat::before{content:"\F05D"}

examples/wxcomponents-template/wxcomponents/vant-weapp/dist/nav-bar/index.js

@@ -0,0 +1,27 @@
+import { create } from '../common/create';
+
+create({
+  classes: ['title-class'],
+
+  props: {
+    title: String,
+    leftText: String,
+    rightText: String,
+    leftArrow: Boolean,
+    fixed: Boolean,
+    zIndex: {
+      type: Number,
+      value: 1
+    }
+  },
+
+  methods: {
+    onClickLeft() {
+      this.$emit('clickLeft');
+    },
+
+    onClickRight() {
+      this.$emit('clickRight');
+    }
+  }
+});

examples/wxcomponents-template/wxcomponents/vant-weapp/dist/nav-bar/index.json

@@ -0,0 +1,6 @@
+{
+  "component": true,
+  "usingComponents": {
+    "van-icon": "../icon/index"
+  }
+}

examples/wxcomponents-template/wxcomponents/vant-weapp/dist/nav-bar/index.wxml

@@ -0,0 +1,24 @@
+<view
+  class="custom-class van-nav-bar van-hairline--bottom {{ fixed ? 'van-nav-bar--fixed' : '' }}"
+  style="z-index: {{ zIndex }}"
+>
+  <view class="van-nav-bar__left" bind:tap="onClickLeft">
+    <block wx:if="{{ leftArrow || leftText }}">
+      <van-icon
+        wx:if="{{ leftArrow }}"
+        name="arrow"
+        custom-class="van-nav-bar__arrow"
+      />
+      <view wx:if="{{ leftText }}" class="van-nav-bar__text">{{ leftText }}</view>
+    </block>
+    <slot wx:else name="left" />
+  </view>
+  <view class="van-nav-bar__title title-class van-ellipsis">
+    <block wx:if="{{ title }}">{{ title }}</block>
+    <slot wx:else name="title" />
+  </view>
+  <view class="van-nav-bar__right" bind:tap="onClickRight">
+    <view wx:if="{{ rightText }}" class="van-nav-bar__text">{{ rightText }}</view>
+    <slot wx:else name="right" />
+  </view>
+</view>

examples/wxcomponents-template/wxcomponents/vant-weapp/dist/nav-bar/index.wxss

@@ -0,0 +1 @@
+.van-nav-bar{height:46px;position:relative;-webkit-user-select:none;user-select:none;text-align:center;line-height:46px;background-color:#fff}.van-nav-bar__arrow{color:#38f;vertical-align:middle;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.van-nav-bar__arrow+.van-nav-bar__text{margin-left:-20px;padding-left:25px}.van-nav-bar--fixed{top:0;left:0;width:100%;position:fixed}.van-nav-bar__title{margin:0 auto;max-width:60%;font-size:16px}.van-nav-bar__left,.van-nav-bar__right{bottom:0;font-size:14px;position:absolute}.van-nav-bar__left{left:15px}.van-nav-bar__right{right:15px}.van-nav-bar__text{color:#38f;margin:0 -15px;padding:0 15px;display:inline-block;vertical-align:middle}.van-nav-bar__text:active{background-color:#e8e8e8}

examples/wxcomponents-template/wxcomponents/wux-weapp/.babelrc

@@ -0,0 +1,3 @@
+{
+    "presets": ["env"]
+}