good/xhs-examples
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

init

Browse Source
This commit is contained in:
熊潇
2025-09-14 00:21:54 +08:00
commit d40b3bbd62
766 changed files with 36275 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
xhs-mini-demos/component-case/add-contact/add-contact.css Normal file
View File

@@ -0,0 +1,3 @@
input {
width: 100%;
}

25
xhs-mini-demos/component-case/add-contact/add-contact.js Normal file
View File

@@ -0,0 +1,25 @@
Page({
onShareAppMessage() {
return {
title: '新增联系人',
path: 'packageAPI/pages/add-contact/add-contact',
};
},
submit(e) {
const formData = e.detail.value;
xhs.addPhoneContact({
...formData,
success() {
xhs.showToast({
title: '联系人创建成功',
});
},
fail() {
xhs.showToast({
title: '联系人创建失败',
});
},
});
},
});

3
xhs-mini-demos/component-case/add-contact/add-contact.json Normal file
View File

@@ -0,0 +1,3 @@
{
"navigationBarTitleText": "新增联系人"
}

36
xhs-mini-demos/component-case/add-contact/add-contact.xhsml Normal file
View File

@@ -0,0 +1,36 @@
<view class="container">
<template is="head" data="{{title: 'addPhoneContact'}}"/>
<view class="page-body">
<form bindsubmit="submit">
<view class="page-section">
<view class="weui-cells__title">姓氏</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" name="lastName" />
</view>
</view>
</view>
<view class="page-section">
<view class="weui-cells__title">名字</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" name="firstName" />
</view>
</view>
</view>
<view class="page-section">
<view class="weui-cells__title">手机号</view>
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<input class="weui-input" name="mobilePhoneNumber" />
</view>
</view>
</view>
<view class="btn-area">
<button type="primary" formType="submit">创建联系人</button>
<button type="default" formType="reset">重置</button>
</view>
</form>
</view>
</view>

0
xhs-mini-demos/component-case/audio/audio.css Normal file
View File

29
xhs-mini-demos/component-case/audio/audio.js Normal file
View File

@@ -0,0 +1,29 @@
Page({
onShareAppMessage() {
return {
title: 'Audio',
path: 'packageAPI/pages/audio/audio',
};
},
onReady(e) {
// 使用 xhs.createAudioContext 获取 audio 上下文 context
this.audioCtx = xhs.createAudioContext('myAudio');
this.audioCtx.setSrc('https://dldir1.qq.com/music/release/upload/t_mm_file_publish/2339610.m4a');
this.audioCtx.play();
},
data: {
src: '',
},
audioPlay() {
this.audioCtx.play();
},
audioPause() {
this.audioCtx.pause();
},
audio14() {
this.audioCtx.seek(14);
},
audioStart() {
this.audioCtx.seek(0);
},
});

7
xhs-mini-demos/component-case/audio/audio.json Normal file
View File

@@ -0,0 +1,7 @@
{
"navigationBarTitleText": "音频",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
}
}

12
xhs-mini-demos/component-case/audio/audio.xhsml Normal file
View File

@@ -0,0 +1,12 @@
<view class="container">
<showbox title="默认">
<box>
<audio src="{{src}}" id="myAudio" ></audio>
<button type="primary" bindtap="audioPlay">播放</button>
<button type="primary" bindtap="audioPause">暂停</button>
<button type="primary" bindtap="audio14">设置当前播放时间为14秒</button>
<button type="primary" bindtap="audioStart">回到开头</button>
</box>
</showbox>
</view>

35
xhs-mini-demos/component-case/background-audio/background-audio.css Normal file
View File

@@ -0,0 +1,35 @@
image {
width: 75px;
height: 75px;
}
.page-body-wrapper {
margin-top: 0;
}
.page-body-info {
padding-bottom: 25px;
}
.time-big {
font-size: 30px;
margin: 10px;
}
.slider {
width: 90%;
}
.play-time {
font-size: 14px;
width: 350px;
padding: 10px 0;
display: flex;
justify-content: space-between;
box-sizing: border-box;
}
.page-body-buttons {
display: flex;
justify-content: space-around;
margin-top: 50px;
}
.page-body-button {
width: 225px;
text-align: center;
}

119
xhs-mini-demos/component-case/background-audio/background-audio.js Normal file
View File

@@ -0,0 +1,119 @@
const app = getApp();
const util = require('../../util/util.js');
const backgroundAudioManager = xhs.getBackgroundAudioManager();
let updateInterval;
Page({
onShareAppMessage() {
return {
title: '背景音乐',
path: 'packageAPI/pages/background-audio/background-audio',
};
},
onShow() {
if (!backgroundAudioManager.paused && backgroundAudioManager.paused !== undefined) {
this._enableInterval();
this.setData({
playing: true,
});
}
},
onLoad() {
const that = this;
// 监听播放事件
backgroundAudioManager.onPlay(() => {
// 刷新播放时间
this._enableInterval();
this.setData({
pause: false,
});
});
// 监听暂停事件
backgroundAudioManager.onPause(() => {
clearInterval(updateInterval);
that.setData({
playing: false,
pause: true,
});
});
backgroundAudioManager.onEnded(() => {
clearInterval(updateInterval);
that.setData({
playing: false,
playTime: 0,
formatedPlayTime: util.formatTime(0),
});
});
backgroundAudioManager.onStop(() => {
clearInterval(updateInterval);
that.setData({
playing: false,
playTime: 0,
formatedPlayTime: util.formatTime(0),
});
});
},
data: {
playing: false, // 播放状态
pause: false,
playTime: 0, // 播放时长
formatedPlayTime: '00:00:00', // 格式化后的播放时长
},
play() {
backgroundAudioManager.title = '此时此刻';
backgroundAudioManager.epname = '此时此刻';
backgroundAudioManager.singer = '许巍';
backgroundAudioManager.coverImgUrl = 'http://y.gtimg.cn/music/photo_new/T002R300x300M000003rsKF44GyaSk.jpg?max_age=2592000';
const that = this;
if (that.data.pause) {
backgroundAudioManager.play();
this.setData({
playing: true,
});
} else {
that.setData({
playing: true,
}, () => {
// 设置src后会自动播放
backgroundAudioManager.src = 'https://dldir1.qq.com/music/release/upload/t_mm_file_publish/2339610.m4a';
});
}
},
seek(e) {
backgroundAudioManager.seek(e.detail.value);
},
pause() {
clearInterval(updateInterval);
backgroundAudioManager.pause();
},
stop() {
clearInterval(updateInterval);
backgroundAudioManager.stop();
},
_enableInterval() {
const that = this;
function update() {
console.log(backgroundAudioManager.currentTime);
that.setData({
playTime: backgroundAudioManager.currentTime + 1,
formatedPlayTime: util.formatTime(backgroundAudioManager.currentTime + 1),
});
}
updateInterval = setInterval(update, 1000);
},
onUnload() {
clearInterval(updateInterval);
},
});

3
xhs-mini-demos/component-case/background-audio/background-audio.json Normal file
View File

@@ -0,0 +1,3 @@
{
"navigationBarTitleText": "背景音频"
}

32
xhs-mini-demos/component-case/background-audio/background-audio.xhsml Normal file
View File

@@ -0,0 +1,32 @@
<view class="container">
<template is="head" data="{{title: 'backgroundAudio'}}"/>
<view class="page-section">
<view class="page-body-info">
<text class="time-big">{{formatedPlayTime}}</text>
<slider class="slider" min="0" max="269" step="1" value="{{playTime}}" bindchange="seek"></slider>
<view class="play-time">
<text>00:00</text>
<text>04:29</text>
</view>
</view>
<view class="page-body-text tc">注意：离开当前页面后背景音乐将保持播放，但退出小程序将停止</view>
<view class="page-body-buttons">
<block xhs:if="{{playing === true}}">
<view class="page-body-button" bindtap="stop">
<image src="/image/stop.png"></image>
</view>
<view class="page-body-button" bindtap="pause">
<image src="/image/pause.png"></image>
</view>
</block>
<block xhs:if="{{playing === false}}">
<view class="page-body-button"></view>
<view class="page-body-button" bindtap="play">
<image src="/image/play.png"></image>
</view>
</block>
<view class="page-body-button"></view>
</view>
</view>
</view>

0
xhs-mini-demos/component-case/bluetooth/bluetooth.css Normal file
View File

9
xhs-mini-demos/component-case/bluetooth/bluetooth.js Normal file
View File

@@ -0,0 +1,9 @@
Page({
openBluetoothAdapter() {
xhs.openBluetoothAdapter?.({
complete: res => {
console.log('【openBluetoothAdapter】：', res);
},
});
},
});

5
xhs-mini-demos/component-case/bluetooth/bluetooth.json Normal file
View File

@@ -0,0 +1,5 @@
{
"usingComponents": {},
"navigationBarTitleText": "音频"
}

3
xhs-mini-demos/component-case/bluetooth/bluetooth.xhsml Normal file
View File

@@ -0,0 +1,3 @@
<view>
<button type="primary" bindtap="openBluetoothAdapter">openBluetoothAdapter</button>
</view>

55
xhs-mini-demos/component-case/button/button.css Normal file
View File

@@ -0,0 +1,55 @@
.radio-group-container {
display: flex;
flex: 1;
justify-content: space-around;
}
.button_bg_red {
background-color: red;
}
.button_group {
display: flex;
flex-direction: column;
}
.button_group button {
margin: 10px 0;
}
.mini_button_group {
display: flex;
justify-content: space-around;
}
.button_disabled {
height: 40px;
border-radius: 1000px;
background-color: rgba(255, 36, 66, 0.2);
font-size: 16px;
font-weight: 500;
color: white;
line-height: 40px;
}
._ui-button-transparent {
background-color: white;
border: 1px solid #ff2442;
color: rgba(255, 36, 66, 1);
}
._ui-button-transparent-disabled {
background-color: white;
border: 1px solid rgba(51, 51, 51, 0.1);
}
._ui-button-gray {
background-color: rgba(51, 51, 51, 0.05);
color: black;
}
._ui-button-transparent-gray {
background-color: white;
border: 1px solid rgba(51, 51, 51, 0.2);
color: black;
}

142
xhs-mini-demos/component-case/button/button.js Normal file
View File

@@ -0,0 +1,142 @@
const __templateJs = require("./templates.js");
const __mergePageOptions = require("../../util/mergePageOptions.js");
const types = ['default', 'primary', 'warn'];
const pageObject = {
data: {
size: 'default',
type: 'default',
plain: false,
disabled: false,
loading: false,
formType: '',
hoverClass: 'button-hover',
hoverStopPropagation: false,
hoverStartTime: 20,
hoverStayTime: 70
},
onShareAppMessage() {
return {
title: 'button',
path: 'page/component/pages/button/button'
};
},
onLoad() {
console.log('onLoad 2');
setTimeout(() => {
this.removeSkeleton?.();
}, 1000);
},
onShow() {
console.log('onShow 2');
xhs.request({
url: 'https://spider-tracker.xiaohongshu.com/api/data/onShow/button',
method: 'POST'
});
},
onReady() {
console.log('onReady 2');
},
onHide() {
console.log('onHide 2');
xhs.request({
url: 'https://spider-tracker.xiaohongshu.com/api/data/onHide/button',
method: 'POST'
});
},
onUnload() {
console.log('onUnload 2');
xhs.request({
url: 'https://spider-tracker.xiaohongshu.com/api/data/onUnload/button',
method: 'POST'
});
},
onTabItemTap(item) {
console.log('====component:', item);
},
setDisabled() {
this.setData({
disabled: !this.data.disabled
});
},
setPlain() {
this.setData({
plain: !this.data.plain
});
},
setLoading() {
this.setData({
loading: !this.data.loading
});
},
handleContact(e) {
console.log(e.detail);
},
handleGetPhoneNumber(e) {
console.log('handleGetPhoneNumber: ', e.detail);
},
handleGetUserInfo(e) {
console.log('handleGetUserInfo', e.detail);
},
handleOpenSetting(e) {
console.log(e.detail.authSetting);
},
changeSize({
detail
}) {
this.setData({
size: detail.value
});
},
changeType({
detail
}) {
this.setData({
type: detail.value
});
},
changePlain() {
this.setData({
plain: !this.data.plain
});
},
changeDisabled() {
this.setData({
disabled: !this.data.disabled
});
},
changeLoading() {
this.setData({
loading: !this.data.loading
});
},
changeHoverStopPropagation() {
this.setData({
hoverStopPropagation: !this.data.hoverStopPropagation
});
},
changeHoverStartTime({
detail
}) {
this.setData({
hoverStartTime: detail.value
});
},
changeHoverStayTime({
detail
}) {
this.setData({
hoverStayTime: detail.value
});
}
};
for (let i = 0; i < types.length; ++i) {
(function (type) {
pageObject[type] = function () {
const key = `${type}Size`;
const changedData = {};
changedData[key] = this.data[key] === 'default' ? 'mini' : 'default';
this.setData(changedData);
};
})(types[i]);
}
Page(__mergePageOptions(pageObject, __templateJs));

14
xhs-mini-demos/component-case/button/button.json Normal file
View File

@@ -0,0 +1,14 @@
{
"navigationBarTitleText": "按钮",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
},
"skeleton": {
"path": "./button.skeleton.xhsml",
"options": {
"background": "#eee",
"animation": "shine"
}
}
}

590
xhs-mini-demos/component-case/button/button.skeleton.css Normal file
View File

@@ -0,0 +1,590 @@
.skeleton-text-block-mark,
.skeleton-text-block-mark * {
background-origin: content-box;
background-clip: content-box;
background-repeat: repeat-y;
background-color: transparent !important;
color: transparent !important;
}
.sk-pseudo::before,
.sk-pseudo::after {
background: none rgb(238, 238, 238) !important;
color: transparent !important;
border-color: transparent !important;
border-radius: 0px !important;
}
.sk-button {
box-shadow: none !important;
}
.sk-transparent::before,
.sk-transparent::after {
opacity: 0 !important;
}
.sk-animation-shine-2 {
background: linear-gradient(
90deg,
rgba(0, 0, 0, 0.06) 20%,
rgba(0, 0, 0, 0.15) 37%,
rgba(0, 0, 0, 0.06) 63%
)
0% 0% / 400% 100%;
animation-name: sk-shine-2;
animation-duration: 1.4s;
animation-timing-function: ease;
animation-iteration-count: infinite;
}
@keyframes sk-shine-2 {
0% {
background-position: 100% 50%;
}
100% {
background-position: 0px 50%;
}
}
html {
width: 100%;
height: 100%;
}
body {
margin: 0px;
width: 100%;
height: 100%;
scroll-behavior: smooth;
overflow-x: hidden;
}
* {
text-size-adjust: none;
}
view {
display: block;
}
video {
display: inline-block;
width: 100%;
height: 100%;
}
.xgplayer div.gradient {
background-image: none;
}
.xgplayer-mobile xg-controls.xgplayer-controls {
background-image: linear-gradient(
transparent,
rgba(0, 0, 0, 0.25),
rgba(0, 0, 0, 0.5),
rgba(0, 0, 0, 0.75)
);
}
.xgplayer .flex-controls xg-inner-controls.xg-inner-controls {
bottom: 4px;
}
.xhs-ios-native-input {
overflow: scroll;
position: absolute;
inset: 0px;
}
input {
position: relative;
cursor: auto;
display: block;
height: 22px;
text-overflow: clip;
overflow: hidden;
white-space: nowrap;
margin: 0px;
}
input .web-input {
position: relative;
min-height: 22px;
text-overflow: inherit;
border: none;
font-size: inherit;
font-weight: inherit;
color: inherit;
padding: 0px;
margin: 0px;
outline: none;
text-align: inherit;
-webkit-tap-highlight-color: transparent;
}
input .web-input div {
position: absolute;
inset: 0px;
margin: auto;
min-height: 22px;
white-space: pre;
text-align: inherit;
overflow: hidden;
vertical-align: middle;
}
input input {
position: relative;
border: none;
height: inherit;
width: 100%;
font-size: inherit;
font-weight: inherit;
color: inherit;
background: transparent;
display: inherit;
padding: 0px;
margin: 0px;
outline: none;
vertical-align: middle;
text-align: inherit;
overflow: inherit;
white-space: inherit;
text-overflow: inherit;
-webkit-tap-highlight-color: transparent;
z-index: 1;
}
.xhs-inner-input-placeholder {
color: rgb(153, 153, 153);
}
map {
display: block;
position: relative;
}
map .tmap-scale-text {
display: var(--map-showScale, block);
}
map .tmap-scale-line {
display: var(--map-showScale, block);
}
map .rotate-circle {
display: var(--map-showCompass, block);
}
map img {
display: inline;
}
map .logo-text {
display: none;
}
map a[target='_blank'] {
display: none;
}
map .tmap-zoom-control {
display: none;
}
map > * {
z-index: 1099;
position: absolute !important;
}
::-webkit-scrollbar {
width: 1px;
}
::-webkit-scrollbar-track {
background: rgb(241, 241, 241);
}
::-webkit-scrollbar-thumb {
background: rgb(136, 136, 136);
}
._ma2 {
margin: 4px;
}
._mx2 {
margin: 0px 4px;
}
._my2 {
margin: 4px 0px;
}
._mt2 {
margin-top: 4px;
}
._mb2 {
margin-bottom: 4px;
}
._ml2 {
margin-left: 4px;
}
._mr2 {
margin-right: 4px;
}
._pa2 {
padding: 4px;
}
._px2 {
padding: 0px 4px;
}
._py2 {
padding: 4px 0px;
}
._pt2 {
padding-top: 4px;
}
._pb2 {
padding-bottom: 4px;
}
._pl2 {
padding-left: 4px;
}
._pr2 {
padding-right: 4px;
}
._ma4 {
margin: 8px;
}
._mx4 {
margin: 0px 8px;
}
._my4 {
margin: 8px 0px;
}
._mt4 {
margin-top: 8px;
}
._mb4 {
margin-bottom: 8px;
}
._ml4 {
margin-left: 8px;
}
._mr4 {
margin-right: 8px;
}
._pa4 {
padding: 8px;
}
._px4 {
padding: 0px 8px;
}
._py4 {
padding: 8px 0px;
}
._pt4 {
padding-top: 8px;
}
._pb4 {
padding-bottom: 8px;
}
._pl4 {
padding-left: 8px;
}
._pr4 {
padding-right: 8px;
}
._ma6 {
margin: 12px;
}
._mx6 {
margin: 0px 12px;
}
._my6 {
margin: 12px 0px;
}
._mt6 {
margin-top: 12px;
}
._mb6 {
margin-bottom: 12px;
}
._ml6 {
margin-left: 12px;
}
._mr6 {
margin-right: 12px;
}
._pa6 {
padding: 12px;
}
._px6 {
padding: 0px 12px;
}
._py6 {
padding: 12px 0px;
}
._pt6 {
padding-top: 12px;
}
._pb6 {
padding-bottom: 12px;
}
._pl6 {
padding-left: 12px;
}
._pr6 {
padding-right: 12px;
}
._ma8 {
margin: 16px;
}
._mx8 {
margin: 0px 16px;
}
._my8 {
margin: 16px 0px;
}
._mt8 {
margin-top: 16px;
}
._mb8 {
margin-bottom: 16px;
}
._ml8 {
margin-left: 16px;
}
._mr8 {
margin-right: 16px;
}
._pa8 {
padding: 16px;
}
._px8 {
padding: 0px 16px;
}
._py8 {
padding: 16px 0px;
}
._pt8 {
padding-top: 16px;
}
._pb8 {
padding-bottom: 16px;
}
._pl8 {
padding-left: 16px;
}
._pr8 {
padding-right: 16px;
}
._ma10 {
margin: 20px;
}
._mx10 {
margin: 0px 20px;
}
._my10 {
margin: 20px 0px;
}
._mt10 {
margin-top: 20px;
}
._mb10 {
margin-bottom: 20px;
}
._ml10 {
margin-left: 20px;
}
._mr10 {
margin-right: 20px;
}
._pa10 {
padding: 20px;
}
._px10 {
padding: 0px 20px;
}
._py10 {
padding: 20px 0px;
}
._pt10 {
padding-top: 20px;
}
._pb10 {
padding-bottom: 20px;
}
._pl10 {
padding-left: 20px;
}
._pr10 {
padding-right: 20px;
}
._ui-input {
background-color: rgba(51, 51, 51, 0.024);
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: rgb(255, 255, 255);
}
._ui-button-hover {
background-color: rgba(255, 36, 66, 0.7);
color: rgb(255, 255, 255);
}
._ui-button-hover::after {
border: none;
}
picker {
border: 1px solid rgb(238, 238, 238);
border-radius: 5px;
}
button {
height: 40px;
border-radius: 1000px;
font-size: 16px;
font-weight: 500;
line-height: 40px;
}
.button-hover::after,
button::after {
border: none;
}
textarea {
padding: 0px;
}
.xhs-inner-switch-control-switch::after {
background-color: rgb(0, 255, 255);
}
picker {
border: none;
}
checkbox *,
radio * {
display: flex;
}
slider > div > div > div > div:nth-child(2) {
width: 16px !important;
height: 16px !important;
margin-top: -8px !important;
margin-left: -8px !important;
}
:root {
--xhs-theme-color: red;
}
._cred {
color: var(--xhs-theme-color);
}
._bcred {
background-color: var(--xhs-theme-color);
color: rgb(255, 255, 255);
}
._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 1 0%;
}
._text_wrap {
word-break: break-all;
}
._end_split {
position: relative;
border: 0px;
}
._end_split::after {
content: '';
position: absolute;
bottom: 0px;
height: 1px;
background: rgb(235, 235, 235);
left: 0px;
right: 0px;
}
._ui-space > * {
margin-bottom: 20px;
}
._ui-space > :last-child {
margin-bottom: 0px;
}
* {
box-sizing: border-box;
margin: 0px;
padding: 0px;
}
body,
html {
height: 100%;
font-family: -apple-system-font, 'Helvetica Neue', Helvetica, sans-serif;
font-size: 100px;
color: rgb(51, 51, 51);
}
.container {
font-size: 0.14rem;
overflow: hidden;
}
.radio-group-container {
display: flex;
flex: 1 1 0%;
justify-content: space-around;
}
.button_bg_red {
background-color: red;
}
.button_group {
display: flex;
flex-direction: column;
}
.button_group xhs-button {
margin: 10px 0px;
}
.mini_button_group {
display: flex;
justify-content: space-around;
}
.button_disabled {
height: 40px;
border-radius: 1000px;
background-color: rgba(255, 36, 66, 0.2);
font-size: 16px;
font-weight: 500;
color: rgb(255, 255, 255);
line-height: 40px;
}
._ui-button-transparent {
background-color: rgb(255, 255, 255);
border: 1px solid rgb(255, 36, 66);
color: rgb(255, 36, 66);
}
._ui-button-transparent-disabled {
background-color: rgb(255, 255, 255);
border: 1px solid rgba(51, 51, 51, 0.1);
}
._ui-button-gray {
background-color: rgba(51, 51, 51, 0.05);
color: rgb(0, 0, 0);
}
._ui-button-transparent-gray {
background-color: rgb(255, 255, 255);
border: 1px solid rgba(51, 51, 51, 0.2);
color: rgb(0, 0, 0);
}
.xhs-demo-card {
margin: 10px;
background-color: rgb(255, 255, 255);
border-radius: 12px;
overflow: hidden;
}
.xhs-demo-card-title {
margin: 0px 16px;
padding: 15px 0px;
font-size: 14px;
font-weight: 500;
line-height: 18px;
}
.xhs-demo-card-content {
background-color: rgb(255, 255, 255);
}
.xhs-demo-card-spiver {
position: relative;
border: 0px;
}
.xhs-demo-card-spiver::after {
content: '';
position: absolute;
bottom: 0px;
left: 0px;
width: 100%;
height: 1px;
background: rgb(239, 239, 239);
transform-origin: 0px 100%;
}

241
xhs-mini-demos/component-case/button/button.skeleton.xhsml Normal file
View File

@@ -0,0 +1,241 @@
<view class="container" style="border-color: rgb(238, 238, 238);">
<showbox style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card" style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card-title xhs-demo-card-spiver" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark sk-animation-shine-2" style="display: inline-block; position: relative; background-position-x: 0%;">一级按钮</view>
</view>
<view class="xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box class="box" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view style="border-color: rgb(238, 238, 238);">
<button class="_ui-button sk-button sk-animation-shine-2" hover-class="_ui-button-hover xhs_0__ui-button-hover" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;"/>
<button class="button_disabled _mt8 sk-button sk-animation-shine-2" disabled="" style="--button-bg-color: #F7F7F7; --button-color: rgba(0, 0, 0, 0.3); --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;"/>
</view>
<view class="_mt8" style="border-color: rgb(238, 238, 238);">
<button class="_ui-button _px10 sk-button sk-animation-shine-2" size="mini" hover-class="_ui-button-hover xhs_0__ui-button-hover" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 13px; --button-display: inline-block; --button-line-height: 2.3; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 104px; height: 40px;"/>
<button class="button_disabled _px10 _ml8 sk-button sk-animation-shine-2" disabled="" size="mini" style="--button-bg-color: #F7F7F7; --button-color: rgba(0, 0, 0, 0.3); --button-font-size: 13px; --button-display: inline-block; --button-line-height: 2.3; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 104px; height: 40px;"/>
</view>
</view>
</box>
</view>
</view>
</showbox>
<showbox style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card" style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card-title xhs-demo-card-spiver" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark sk-animation-shine-2" style="display: inline-block; position: relative; background-position-x: 0%;">二级按钮</view>
</view>
<view class="xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box class="box" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view style="border-color: rgb(238, 238, 238);">
<button class="_ui-button-transparent sk-button sk-animation-shine-2" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;"/>
<button class="_ui-button-transparent-disabled _mt8 sk-button sk-animation-shine-2" disabled="" style="--button-bg-color: #F7F7F7; --button-color: rgba(0, 0, 0, 0.3); --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;"/>
</view>
<view class="_mt8" style="border-color: rgb(238, 238, 238);">
<button class="_ui-button-transparent _px10 sk-button sk-animation-shine-2" size="mini" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 13px; --button-display: inline-block; --button-line-height: 2.3; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 106px; height: 40px;"/>
<button class="_ui-button-transparent-disabled _px10 _ml8 sk-button sk-animation-shine-2" disabled="" size="mini" style="--button-bg-color: #F7F7F7; --button-color: rgba(0, 0, 0, 0.3); --button-font-size: 13px; --button-display: inline-block; --button-line-height: 2.3; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 106px; height: 40px;"/>
</view>
</view>
</box>
</view>
</view>
</showbox>
<showbox style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card" style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card-title xhs-demo-card-spiver" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark sk-animation-shine-2" style="display: inline-block; position: relative; background-position-x: 0%;">三级按钮</view>
</view>
<view class="xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box class="box" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view style="border-color: rgb(238, 238, 238);">
<button class="_ui-button-gray sk-button sk-animation-shine-2" hover-class="none xhs_0_none" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;"/>
<button class="_mt8 sk-button sk-animation-shine-2" disabled="" style="--button-bg-color: #F7F7F7; --button-color: rgba(0, 0, 0, 0.3); --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;"/>
</view>
<view class="_mt8" style="border-color: rgb(238, 238, 238);">
<button class="_ui-button-gray _px10 sk-button sk-animation-shine-2" size="mini" hover-class="none xhs_0_none" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 13px; --button-display: inline-block; --button-line-height: 2.3; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 104px; height: 40px;"/>
<button class="_px10 _ml8 sk-button sk-animation-shine-2" disabled="" size="mini" style="--button-bg-color: #F7F7F7; --button-color: rgba(0, 0, 0, 0.3); --button-font-size: 13px; --button-display: inline-block; --button-line-height: 2.3; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 104px; height: 40px;"/>
</view>
</view>
</box>
</view>
</view>
</showbox>
<showbox style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card" style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card-title xhs-demo-card-spiver" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark sk-animation-shine-2" style="display: inline-block; position: relative; background-position-x: 0%;">四级按钮</view>
</view>
<view class="xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box class="box" style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view style="border-color: rgb(238, 238, 238);">
<button class="_ui-button-transparent-gray sk-button sk-animation-shine-2" hover-class="none xhs_0_none" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;"/>
<button class="_ui-button-transparent-disabled _mt8 sk-button sk-animation-shine-2" disabled="" style="--button-bg-color: #F7F7F7; --button-color: rgba(0, 0, 0, 0.3); --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;"/>
</view>
<view class="_mt8" style="border-color: rgb(238, 238, 238);">
<button class="_ui-button-transparent-gray _px10 sk-button sk-animation-shine-2" size="mini" hover-class="none xhs_0_none" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 13px; --button-display: inline-block; --button-line-height: 2.3; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 106px; height: 40px;"/>
<button class="_ui-button-transparent-disabled _px10 _ml8 sk-button sk-animation-shine-2" disabled="" size="mini" style="--button-bg-color: #F7F7F7; --button-color: rgba(0, 0, 0, 0.3); --button-font-size: 13px; --button-display: inline-block; --button-line-height: 2.3; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 106px; height: 40px;"/>
</view>
</view>
</box>
</view>
</view>
</showbox>
<showbox style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card" style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card-title xhs-demo-card-spiver" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark sk-animation-shine-2" style="display: inline-block; position: relative; background-position-x: 0%;">加载状态</view>
</view>
<view class="xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<button class="_ui-button sk-button sk-animation-shine-2" hover-class="_ui-button-hover xhs_0__ui-button-hover" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;"/>
</view>
</box>
</view>
</view>
</showbox>
</view>
<view class="container" style="border-color: rgb(238, 238, 238);">
<showbox style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card" style="border-color: rgb(238, 238, 238);">
<view class="xhs-demo-card-title xhs-demo-card-spiver" style="border-color: rgb(238, 238, 238);">
<view class="skeleton-text-block-mark sk-animation-shine-2" style="display: inline-block; position: relative; background-position-x: 0%;">button演示</view>
</view>
<view class="xhs-demo-card-content" style="border-color: rgb(238, 238, 238);">
<box style="border-color: rgb(238, 238, 238);">
<view style="padding: 16px; border-color: rgb(238, 238, 238);">
<view class="_ui-space" style="border-color: rgb(238, 238, 238);">
<view style="border-color: rgb(238, 238, 238);">
<button size="default" type="default" contact-id="" hover-class="button-hover xhs_0_button-hover" hover-start-time="20" hover-stay-time="70" class="sk-button sk-animation-shine-2" style="--button-bg-color: #F8F8F8; --button-color: #000000; --button-font-size: 18px; --button-display: block; --button-line-height: 2.55555556; --button-active-bg-color: #dedede; --button-active-color: rgba(0, 0, 0, 0.6); --button-border: 1px solid rgba(0, 0, 0, 0.2); --button-active-border-color: 1px solid rgba(0, 0, 0, 0.2); border-color: transparent; background-color: rgb(238, 238, 238); color: transparent; width: 378px; height: 40px;"/>
</view>
<view class="_dflex" style="border-color: rgb(238, 238, 238);">
<view class="_dflex _ai_center" style="flex: 4 1 0%; border-color: rgb(238, 238, 238);">
<text class="sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">size</text>
</view>
<view class="_ui-input" style="flex: 6 1 0%; border-color: rgb(238, 238, 238);">
<picker range="default,mini" value="0" class="sk-animation-shine-2 skeleton-text-block-mark" style="border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">default</picker>
</view>
</view>
<view class="_dflex" style="border-color: rgb(238, 238, 238);">
<view class="_dflex _ai_center" style="flex: 4 1 0%; border-color: rgb(238, 238, 238);">
<text class="sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">type</text>
</view>
<view class="_ui-input" style="flex: 6 1 0%; border-color: rgb(238, 238, 238);">
<picker range="primary,default,warn" value="1" class="sk-animation-shine-2 skeleton-text-block-mark" style="border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">default</picker>
</view>
</view>
<view class="_dflex _jc_space-between" style="border-color: rgb(238, 238, 238);">
<view class="_dflex _ai_center" style="border-color: rgb(238, 238, 238);">
<text class="sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">是否开启plain</text>
</view>
<view class="sk-animation-shine-2" style="width: 57px; height: 32px; background-color: rgba(0, 0, 0, 0); display: block;"/>
</view>
<view class="_dflex _jc_space-between" style="border-color: rgb(238, 238, 238);">
<view class="_dflex _ai_center" style="border-color: rgb(238, 238, 238);">
<text class="sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">是否开启disabled</text>
</view>
<view class="sk-animation-shine-2" style="width: 57px; height: 32px; background-color: rgba(0, 0, 0, 0); display: block;"/>
</view>
<view class="_dflex _jc_space-between" style="border-color: rgb(238, 238, 238);">
<view class="_dflex _ai_center" style="border-color: rgb(238, 238, 238);">
<text class="sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">是否开启loading</text>
</view>
<view class="sk-animation-shine-2" style="width: 57px; height: 32px; background-color: rgba(0, 0, 0, 0); display: block;"/>
</view>
<view class="_dflex" style="border-color: rgb(238, 238, 238);">
<view class="_dflex _ai_center" style="flex: 4 1 0%; border-color: rgb(238, 238, 238);">
<text class="sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">formType</text>
</view>
<view class="_ui-input" style="flex: 6 1 0%; border-color: rgb(238, 238, 238);">
<picker range="submit,reset" value="-1" class="sk-animation-shine-2 skeleton-text-block-mark" style="border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">请选择</picker>
</view>
</view>
<view class="_dflex" style="border-color: rgb(238, 238, 238);">
<view class="_dflex _ai_center" style="flex: 4 1 0%; border-color: rgb(238, 238, 238);">
<text class="sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">openType</text>
</view>
<view class="_ui-input" style="flex: 6 1 0%; border-color: rgb(238, 238, 238);">
<picker range="share,getPhoneNumber,getUserInfo,openSetting,contact" value="-1" class="sk-animation-shine-2 skeleton-text-block-mark" style="border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">请选择</picker>
</view>
</view>
<view class="_dflex" style="border-color: rgb(238, 238, 238);">
<view class="_dflex _ai_center" style="flex: 4 1 0%; border-color: rgb(238, 238, 238);">
<text class="sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">contactType</text>
</view>
<view class="_ui-input" style="flex: 6 1 0%; border-color: rgb(238, 238, 238);">
<picker range="seller,goods,order" value="-1" class="sk-animation-shine-2 skeleton-text-block-mark" style="border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">请选择</picker>
</view>
</view>
<view class="_dflex" style="border-color: rgb(238, 238, 238);">
<view class="_dflex _ai_center" style="flex: 4 1 0%; border-color: rgb(238, 238, 238);">
<text class="sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">contactId</text>
</view>
<view class="_ui-input" style="flex: 6 1 0%; border-color: rgb(238, 238, 238);">
<view class="sk-animation-shine-2" style="width: 207.602px; height: 22px; background-color: rgba(0, 0, 0, 0);"/>
</view>
</view>
<view class="_dflex" style="border-color: rgb(238, 238, 238);">
<view class="_dflex _ai_center" style="flex: 4 1 0%; border-color: rgb(238, 238, 238);">
<text class="sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">hoverClass</text>
</view>
<view class="_ui-input" style="flex: 6 1 0%; border-color: rgb(238, 238, 238);">
<view class="sk-animation-shine-2" style="width: 207.602px; height: 22px; background-color: rgba(0, 0, 0, 0);"/>
</view>
</view>
<view class="_dflex _jc_space-between" style="border-color: rgb(238, 238, 238);">
<view class="_dflex _ai_center" style="border-color: rgb(238, 238, 238);">
<text class="sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">是否开启hoverStopPropagation</text>
</view>
<view class="sk-animation-shine-2" style="width: 57px; height: 32px; background-color: rgba(0, 0, 0, 0); display: block;"/>
</view>
<view class="_dflex" style="border-color: rgb(238, 238, 238);">
<view class="_dflex _ai_center" style="flex: 4 1 0%; border-color: rgb(238, 238, 238);">
<text class="sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">hoverStartTime</text>
</view>
<view class="_ui-input" style="flex: 6 1 0%; border-color: rgb(238, 238, 238);">
<view class="sk-animation-shine-2" style="width: 207.602px; height: 22px; background-color: rgba(0, 0, 0, 0);"/>
</view>
</view>
<view class="_dflex" style="border-color: rgb(238, 238, 238);">
<view class="_dflex _ai_center" style="flex: 4 1 0%; border-color: rgb(238, 238, 238);">
<text class="sk-animation-shine-2 skeleton-text-block-mark" style="--text-display: inline; --text-selectable: none; border-color: rgb(238, 238, 238); position: relative; background-position-x: 0%;">hoverStayTime</text>
</view>
<view class="_ui-input" style="flex: 6 1 0%; border-color: rgb(238, 238, 238);">
<view class="sk-animation-shine-2" style="width: 207.602px; height: 22px; background-color: rgba(0, 0, 0, 0);"/>
</view>
</view>
</view>
</view>
</box>
</view>
</view>
</showbox>
</view>

106
xhs-mini-demos/component-case/button/button.xhsml Normal file
View File

@@ -0,0 +1,106 @@
<view class="container">
<showbox title="一级按钮">
<box class="box">
<view>
<button class="_ui-button" hover-class="_ui-button-hover">
一级按钮 Normal
</button>
<button class="button_disabled _mt8" disabled>
一级按钮 Disabled
</button>
</view>
<view class="_mt8">
<button class="_ui-button _px10" size="mini" hover-class="_ui-button-hover">
一级按钮
</button>
<button class="button_disabled _px10 _ml8" disabled size="mini">
一级按钮
</button>
</view>
</box>
</showbox>
<showbox title="二级按钮">
<box class="box">
<view>
<button class="_ui-button-transparent">
二级按钮 Normal
</button>
<button class="_ui-button-transparent-disabled _mt8" disabled>
二级按钮 Disabled
</button>
</view>
<view class="_mt8">
<button class="_ui-button-transparent _px10" size="mini">
二级按钮
</button>
<button class="_ui-button-transparent-disabled _px10 _ml8" disabled size="mini">
二级按钮
</button>
</view>
</box>
</showbox>
<showbox title="三级按钮">
<box class="box">
<view>
<button class="_ui-button-gray" hover-class="none">
三级按钮 Normal
</button>
<button class=" _mt8" disabled>
三级按钮 Disabled
</button>
</view>
<view class="_mt8">
<button class="_ui-button-gray _px10" size="mini" hover-class="none">
三级按钮
</button>
<button class="_px10 _ml8" disabled size="mini">
三级按钮
</button>
</view>
</box>
</showbox>
<showbox title="四级按钮">
<box class="box">
<view>
<button class="_ui-button-transparent-gray" hover-class="none">
四级按钮 Normal
</button>
<button class="_ui-button-transparent-disabled _mt8" disabled>
四级按钮 Disabled
</button>
</view>
<view class="_mt8">
<button class="_ui-button-transparent-gray _px10" size="mini" hover-class="none">
四级按钮
</button>
<button class="_ui-button-transparent-disabled _px10 _ml8" disabled size="mini">
四级按钮
</button>
</view>
</box>
</showbox>
<showbox title="加载状态">
<box>
<button loading="{{loading}}" class="_ui-button" hover-class="_ui-button-hover" bindtap="changeLoading">
点击切换按钮loading状态
</button>
</box>
</showbox>
</view>
<include src="templates.xhsml" />

99
xhs-mini-demos/component-case/button/templates.js Normal file
View File

@@ -0,0 +1,99 @@
/** 以下内容为自动生成，请勿手动修改 */
module.exports = {
data: {
page_data_0: 0,
page_data_1: ["default", "mini"],
page_data_2: 1,
page_data_3: ["primary", "default", "warn"],
page_data_4: false,
page_data_5: false,
page_data_6: false,
page_data_7: -1,
page_data_8: ["submit", "reset"],
page_data_9: -1,
page_data_10: [
"share",
"getPhoneNumber",
"getUserInfo",
"openSetting",
"contact",
],
page_data_11: -1,
page_data_12: ["seller", "goods", "order"],
page_data_13: ``,
page_data_14: `button-hover`,
page_data_15: false,
page_data_16: `20`,
page_data_17: `70`,
},
page_fun_0(e) {
this.setData("page_data_0", e.detail.value);
},
page_fun_1(e) {
this.setData("page_data_2", e.detail.value);
},
page_fun_2(e) {
this.setData("page_data_4", e.detail.value);
},
page_fun_3(e) {
this.setData("page_data_5", e.detail.value);
},
page_fun_4(e) {
this.setData("page_data_6", e.detail.value);
},
page_fun_5(e) {
this.setData("page_data_7", e.detail.value);
},
page_fun_6(e) {
this.setData("page_data_9", e.detail.value);
},
page_fun_7(e) {
this.setData("page_data_11", e.detail.value);
},
page_fun_8(e) {
this.setData("page_data_13", e.detail.value);
},
page_fun_9(e) {
this.setData("page_data_14", e.detail.value);
},
page_fun_10(e) {
this.setData("page_data_15", e.detail.value);
},
page_fun_11(e) {
this.setData("page_data_16", e.detail.value);
},
page_fun_12(e) {
this.setData("page_data_17", e.detail.value);
},
};

204
xhs-mini-demos/component-case/button/templates.xhsml Normal file
View File

@@ -0,0 +1,204 @@
<!-- 以下内容为自动生成，请勿手动修改 -->
<view class="container">
<showbox title="button演示">
<box>
<view class="_ui-space">
<view>
<button
size="{{page_data_1[page_data_0]}}"
type="{{page_data_3[page_data_2]}}"
plain="{{page_data_4}}"
disabled="{{page_data_5}}"
loading="{{page_data_6}}"
form-type="{{page_data_8[page_data_7]}}"
open-type="{{page_data_10[page_data_9]}}"
contact-type="{{page_data_12[page_data_11]}}"
contact-id="{{page_data_13}}"
hover-class="{{page_data_14}}"
hover-stop-propagation="{{page_data_15}}"
hover-start-time="{{page_data_16}}"
hover-stay-time="{{page_data_17}}"
>
我是一个按钮
</button>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>size</text></view
>
<view style="flex: 6" class="_ui-input">
<picker
value="{{page_data_0}}"
range="{{page_data_1}}"
bindchange="page_fun_0"
>
{{page_data_1[page_data_0] ?? '请选择'}}
</picker>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>type</text></view
>
<view style="flex: 6" class="_ui-input">
<picker
value="{{page_data_2}}"
range="{{page_data_3}}"
bindchange="page_fun_1"
>
{{page_data_3[page_data_2] ?? '请选择'}}
</picker>
</view>
</view>
<view class="_dflex _jc_space-between">
<view class="_dflex _ai_center">
<text>是否开启plain</text>
</view>
<switch
checked="{{page_data_4}}"
color="rgba(255, 36, 66, 1)"
bindchange="page_fun_2"
/>
</view>
<view class="_dflex _jc_space-between">
<view class="_dflex _ai_center">
<text>是否开启disabled</text>
</view>
<switch
checked="{{page_data_5}}"
color="rgba(255, 36, 66, 1)"
bindchange="page_fun_3"
/>
</view>
<view class="_dflex _jc_space-between">
<view class="_dflex _ai_center">
<text>是否开启loading</text>
</view>
<switch
checked="{{page_data_6}}"
color="rgba(255, 36, 66, 1)"
bindchange="page_fun_4"
/>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>formType</text></view
>
<view style="flex: 6" class="_ui-input">
<picker
value="{{page_data_7}}"
range="{{page_data_8}}"
bindchange="page_fun_5"
>
{{page_data_8[page_data_7] ?? '请选择'}}
</picker>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>openType</text></view
>
<view style="flex: 6" class="_ui-input">
<picker
value="{{page_data_9}}"
range="{{page_data_10}}"
bindchange="page_fun_6"
>
{{page_data_10[page_data_9] ?? '请选择'}}
</picker>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>contactType</text></view
>
<view style="flex: 6" class="_ui-input">
<picker
value="{{page_data_11}}"
range="{{page_data_12}}"
bindchange="page_fun_7"
>
{{page_data_12[page_data_11] ?? '请选择'}}
</picker>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>contactId</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_13}}"
placeholder="contactId"
type="text"
bindinput="page_fun_8"
/>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>hoverClass</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_14}}"
placeholder="hoverClass"
type="text"
bindinput="page_fun_9"
/>
</view>
</view>
<view class="_dflex _jc_space-between">
<view class="_dflex _ai_center">
<text>是否开启hoverStopPropagation</text>
</view>
<switch
checked="{{page_data_15}}"
color="rgba(255, 36, 66, 1)"
bindchange="page_fun_10"
/>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>hoverStartTime</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_16}}"
placeholder="hoverStartTime"
type="text"
bindinput="page_fun_11"
/>
</view>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>hoverStayTime</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_17}}"
placeholder="hoverStayTime"
type="text"
bindinput="page_fun_12"
/>
</view>
</view>
</view>
</box>
</showbox>
</view>

16
xhs-mini-demos/component-case/camera-case/camera-case.css Normal file
View File

@@ -0,0 +1,16 @@
.preview-tips {
margin: 20rpx 0;
font-size: 16px;
}
.video {
margin: 50px auto;
width: 100%;
height: 300px;
}
.btn-area {
margin-left: 10px;
margin-right: 10px;
margin-bottom: 10px;
}

106
xhs-mini-demos/component-case/camera-case/camera-case.js Normal file
View File

@@ -0,0 +1,106 @@
Page({
data: {
videoSrc: '',
src: '',
mode: 'normal',
zoom: 1,
devicePosition: 'back',
flash: 'auto',
flashArr: ['auto', 'on', 'off', 'torch'],
frameSize: 'medium',
frameSizeArr: ['small', 'medium', 'large'],
},
onLoad() {
this.ctx = xhs.createCameraContext();
},
takePhoto() {
this.ctx.takePhoto({
quality: 'high',
success: (res) => {
console.log("%c Line:21 takePhoto 🌮 takePhoto res", "color:#3f7cff", res);
this.setData({
src: res.tempImagePath
});
}
});
},
startRecord() {
this.ctx.startRecord({
success: (res) => {
console.log('startRecord');
}
});
},
changeFlash(e) {
this.setData({
flash: this.data.flashArr[e.detail.value]
});
},
changeFrameSize(e) {
this.setData({
frameSize: this.data.frameSizeArr[e.detail.value]
});
},
changeMode() {
this.setData({
mode: this.data.mode === 'normal' ? 'scanCode' : 'normal'
});
},
changeDevicePosition() {
this.setData({
devicePosition: this.data.devicePosition === 'back' ? 'front' : 'back'
});
},
stopRecord() {
this.ctx.stopRecord({
success: (res) => {
this.setData({
src: res.tempThumbPath,
videoSrc: res.tempVideoPath
});
}
});
},
setZoom() {
this.ctx.setZoom({
zoom: 2,
success(res) {
console.log('setZoom 成功', res);
this.setData({
zoom: res.zoom
});
},
fail(error) {
console.log('setZoom 失败', error);
}
});
},
error(e) {
xhs.showToast({
title: 'binderror',
content: JSON.stringify(e)
});
console.log('相机组件触发了 binderror', e.detail);
},
stop(e) {
xhs.showToast({
title: 'bindstop',
content: JSON.stringify(e)
});
console.log('相机组件触发了 bindstop', e.detail);
},
initdone(e) {
xhs.showToast({
title: 'initdone',
content: JSON.stringify(e)
});
console.log('相机组件触发了 bindinitdone', e.detail);
},
scancode(e) {
xhs.showToast({
title: 'scancode',
content: JSON.stringify(e)
});
console.log('相机组件触发了 bindscancode', e.detail);
}
});

3
xhs-mini-demos/component-case/camera-case/camera-case.json Normal file
View File

@@ -0,0 +1,3 @@
{
"navigationBarTitleText": "camera-case"
}

44
xhs-mini-demos/component-case/camera-case/camera-case.xhsml Normal file
View File

@@ -0,0 +1,44 @@
<view class="page-body">
<view class="page-body-wrapper">
<camera xhs:if="{{mode ==='normal'}}" device-position="{{devicePosition}}" flash="{{flash}}" binderror="error"
bindscancode="scancode" bindstop="stop" bindinitdone="initdone" style="width: 100%; height: 300px;"></camera>
<camera xhs:if="{{mode==='scanCode'}}" device-position="{{devicePosition}}" flash="{{flash}}" binderror="error"
bindscancode="scancode" bindstop="stop" bindinitdone="initdone" style="width: 100%; height: 300px;"></camera>
<view class="btn-area">
<picker value="{{flash}}" bindchange="changeFlash" range="{{flashArr}}">
<view class="preview-tips">点击切换闪光灯模式，当前为{{flash}}</view>
</picker>
</view>
<view class="btn-area">
<picker value="{{frameSize}}" bindchange="changeFrameSize" range="{{frameSizeArr}}">
<view class="preview-tips">点击切换相机帧数据尺寸，当前为{{frameSize}}</view>
</picker>
</view>
<view class="btn-area">
<button type="primary" bindtap="changeMode">
切换模式为{{mode === 'normal' ? 'scanCode' : 'normal'}}
</button>
</view>
<view class="btn-area">
<button type="primary" bindtap="changeDevicePosition">
切换镜头朝向为{{devicePosition === 'back' ? 'front' : 'back'}}
</button>
</view>
<view class="btn-area">
<button type="primary" bindtap="takePhoto">拍照</button>
</view>
<view class="btn-area">
<button type="primary" bindtap="setZoom">设置缩放级别为 2</button>
</view>
<!-- 录像本期未实现 -->
<!-- <view class="btn-area">
<button type="primary" bindtap="startRecord">开始录像</button>
</view>
<view class="btn-area">
<button type="primary" bindtap="stopRecord">结束录像</button>
</view> -->
<view class="preview-tips">预览</view>
<image xhs:if="{{src}}" mode="widthFix" src="{{src}}"></image>
<video xhs:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
</view>
</view>

19
xhs-mini-demos/component-case/camera-scan-code/camera-scan-code.css Normal file
View File

@@ -0,0 +1,19 @@
camera {
height: 250px;
}
.btn-area {
margin-top: 0;
}
form {
margin-top: 15px;
}
.weui-cell__bd {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 0;
min-height: 30px;
}

31
xhs-mini-demos/component-case/camera-scan-code/camera-scan-code.js Normal file
View File

@@ -0,0 +1,31 @@
Page({
onShareAppMessage() {
return {
title: 'camera',
path: 'page/component/pages/camera-scan-code/camera-scan-code',
};
},
data: {
result: {},
},
onReady() {
xhs.showModal({
title: '提示',
content: '将摄像头对准一维码即可扫描',
showCancel: false,
});
},
scanCode(e) {
console.log('scanCode:', e);
this.setData({
result: e.detail,
});
},
navigateBack() {
xhs.navigateBack();
},
error(e) {
console.log(e.detail);
},
});

3
xhs-mini-demos/component-case/camera-scan-code/camera-scan-code.json Normal file
View File

@@ -0,0 +1,3 @@
{
"navigationBarTitleText": "camera"
}

40
xhs-mini-demos/component-case/camera-scan-code/camera-scan-code.xhsml Normal file
View File

@@ -0,0 +1,40 @@
<view class="container">
<view class="page-body">
<view class="page-body-wrapper">
<camera
mode="scanCode"
flash="off"
bindscancode="scanCode"
binderror="error"
>
</camera>
<view class="btn-area">
<button type="primary" bindtap="navigateBack">
返回正常模式
</button>
</view>
<form>
<view class="page-section">
<view class="weui-cells weui-cells_after-title">
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">类型</view>
</view>
<view class="weui-cell__bd">
{{ result.type }}
</view>
</view>
<view class="weui-cell weui-cell_input">
<view class="weui-cell__hd">
<view class="weui-label">结果</view>
</view>
<view class="weui-cell__bd">
{{ result.result }}
</view>
</view>
</view>
</view>
</form>
</view>
</view>
</view>

40
xhs-mini-demos/component-case/camera/camera.css Normal file
View File

@@ -0,0 +1,40 @@
/* @import '../../../common/lib/weui.css'; */
camera {
height: 250px;
}
.preview-tips {
margin: 10px 0;
}
.photo,
.video {
margin-top: 25px;
width: 100%;
}
.btn-area {
margin-top: 0;
}
.first-btn {
margin-top: 15px;
}
form {
margin-top: 15px;
}
.weui-cell__bd {
display: flex;
justify-content: flex-start;
align-items: center;
padding: 10px 0;
min-height: 30px;
}
.info-container {
margin: 12px;
text-align: center;
}

224
xhs-mini-demos/component-case/camera/camera.js Normal file
View File

@@ -0,0 +1,224 @@
const vs = `
attribute vec3 aPos;
attribute vec2 aVertexTextureCoord;
varying highp vec2 vTextureCoord;
void main(void){
gl_Position = vec4(aPos, 1);
vTextureCoord = aVertexTextureCoord;
}
`;
const fs = `
varying highp vec2 vTextureCoord;
uniform sampler2D uSampler;
void main(void) {
gl_FragColor = texture2D(uSampler, vTextureCoord);
}
`;
const vertex = [
-1, -1, 0.0,
1, -1, 0.0,
1, 1, 0.0,
-1, 1, 0.0,
];
const vertexIndice = [
0, 1, 2,
0, 2, 3,
];
const texCoords = [
0.0, 0.0,
1.0, 0.0,
1.0, 1.0,
0.0, 1.0,
];
function createShader(gl, src, type) {
const shader = gl.createShader(type);
gl.shaderSource(shader, src);
gl.compileShader(shader);
if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
console.error(`Error compiling shader: ${gl.getShaderInfoLog(shader)}`);
}
return shader;
}
const buffers = {};
function createRenderer(canvas, width, height) {
const gl = canvas.getContext('webgl');
if (!gl) {
console.error('Unable to get webgl context.');
return;
}
const info = xhs.getSystemInfoSync();
gl.canvas.width = info.pixelRatio * width;
gl.canvas.height = info.pixelRatio * height;
gl.viewport(0, 0, gl.drawingBufferWidth, gl.drawingBufferHeight);
const vertexShader = createShader(gl, vs, gl.VERTEX_SHADER);
const fragmentShader = createShader(gl, fs, gl.FRAGMENT_SHADER);
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
console.error('Unable to initialize the shader program.');
return;
}
gl.useProgram(program);
const texture = gl.createTexture();
gl.activeTexture(gl.TEXTURE0);
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
gl.bindTexture(gl.TEXTURE_2D, null);
buffers.vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertex), gl.STATIC_DRAW);
buffers.vertexIndiceBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffers.vertexIndiceBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(vertexIndice), gl.STATIC_DRAW);
const aVertexPosition = gl.getAttribLocation(program, 'aPos');
gl.vertexAttribPointer(aVertexPosition, 3, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(aVertexPosition);
buffers.trianglesTexCoordBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, buffers.trianglesTexCoordBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texCoords), gl.STATIC_DRAW);
const vertexTexCoordAttribute = gl.getAttribLocation(program, 'aVertexTextureCoord');
gl.enableVertexAttribArray(vertexTexCoordAttribute);
gl.vertexAttribPointer(vertexTexCoordAttribute, 2, gl.FLOAT, false, 0, 0);
const samplerUniform = gl.getUniformLocation(program, 'uSampler');
gl.uniform1i(samplerUniform, 0);
return (arrayBuffer, width, height) => {
gl.bindTexture(gl.TEXTURE_2D, texture);
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.UNSIGNED_BYTE, arrayBuffer);
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);
};
}
Page({
onShareAppMessage() {
return {
title: 'camera',
path: 'page/component/pages/camera/camera',
};
},
data: {
src: '',
videoSrc: '',
position: 'back',
mode: 'scanCode',
result: {},
frameWidth: 0,
frameHeight: 0,
width: 288,
height: 358,
showCanvas: false,
},
onReady() {
this.ctx = xhs.createCameraContext();
// const selector = xhs.createSelectorQuery();
// selector.select('#webgl')
// .node(this.init)
// .exec()
},
init(res) {
if (this.listener) {
this.listener.stop();
}
const canvas = res.node;
const render = createRenderer(canvas, this.data.width, this.data.height);
// if (!render || typeof render !== 'function') return
this.listener = this.ctx.onCameraFrame(frame => {
render(new Uint8Array(frame.data), frame.width, frame.height);
const {
frameWidth,
frameHeight,
} = this.data;
if (frameWidth === frame.width && frameHeight == frame.height) return;
this.setData({
frameWidth: frame.width,
frameHeight: frame.height,
});
});
this.listener.start();
},
takePhoto() {
this.ctx.takePhoto({
quality: 'high',
success: res => {
this.setData({
src: res.tempImagePath,
});
},
});
},
startRecord() {
this.ctx.startRecord({
success: () => {
console.log('startRecord');
},
});
},
stopRecord() {
this.ctx.stopRecord({
success: res => {
this.setData({
src: res.tempThumbPath,
videoSrc: res.tempVideoPath,
});
},
});
},
togglePosition() {
this.setData({
position: this.data.position === 'front'
? 'back' : 'front',
});
},
error(e) {
console.log(e.detail);
},
handleShowCanvas() {
const that = this;
this.setData({
showCanvas: !this.data.showCanvas,
}, () => {
if (this.data.showCanvas) {
const selector = xhs.createSelectorQuery();
selector.select('#webgl')
.node(this.init)
.exec();
}
});
},
});

3
xhs-mini-demos/component-case/camera/camera.json Normal file
View File

@@ -0,0 +1,3 @@
{
"navigationBarTitleText": "camera"
}

42
xhs-mini-demos/component-case/camera/camera.xhsml Normal file
View File

@@ -0,0 +1,42 @@
<view class="container">
<view class="page-body">
<view class="page-body-wrapper">
<view style="margin-bottom: 10px"> camera 组件 </view>
<camera
flash="off"
device-position="{{position}}"
binderror="error"
>
</camera>
<view xhs:if="{{showCanvas}}" class="info-container">
<view style="margin: 10px 0">使用实时数据帧在 canvas 组件的展示</view>
<view>
帧高度：{{ frameHeight }} 帧宽度：{{ frameWidth }}
</view>
</view>
<view class="btn-area first-btn">
<button bindtap="handleShowCanvas" type="primary">{{showCanvas ? "关闭实时帧数据模式": "开启实时帧数据模式"}}</button>
</view>
<view class="btn-area">
<button type="primary" bindtap="togglePosition">切换摄像头</button>
</view>
<view class="btn-area">
<button type="primary" bindtap="takePhoto">拍照</button>
</view>
<view class="btn-area">
<button type="primary" bindtap="startRecord">开始录像</button>
</view>
<view class="btn-area">
<button type="primary" bindtap="stopRecord">结束录像</button>
</view>
<view class="btn-area">
<navigator url="/page/component/pages/camera-scan-code/camera-scan-code" hover-class="none">
<button type="primary">扫描一维码</button>
</navigator>
</view>
<view class="preview-tips">点击录像或拍照即可在下方预览效果</view>
<image xhs:if="{{src}}" mode="widthFix" class="photo" src="{{src}}"></image>
<video xhs:if="{{videoSrc}}" class="video" src="{{videoSrc}}"></video>
</view>
</view>
</view>

4
xhs-mini-demos/component-case/capture-screen/capture-screen.css Normal file
View File

@@ -0,0 +1,4 @@
.page-body-text {
font-size: 20px;
font-family: -apple-system-font, Helvetica Neue,Helvetica,sans-serif;
}

19
xhs-mini-demos/component-case/capture-screen/capture-screen.js Normal file
View File

@@ -0,0 +1,19 @@
Page({
onShareAppMessage() {
return {
title: '用户截屏事件',
path: 'packageAPI/pages/capture-screen/capture-screen',
};
},
data: {
captured: false,
},
onLoad() {
xhs.onUserCaptureScreen(() => {
this.setData({
captured: true,
});
});
},
});

3
xhs-mini-demos/component-case/capture-screen/capture-screen.json Normal file
View File

@@ -0,0 +1,3 @@
{
"navigationBarTitleText": "用户截屏事件"
}

10
xhs-mini-demos/component-case/capture-screen/capture-screen.xhsml Normal file
View File

@@ -0,0 +1,10 @@
<view class="container">
<template is="head" data="{{title: 'onUserCaptureScreen'}}"/>
<view class="page-body">
<view class="page-body-info">
<view class="page-body-title">请进行屏幕截屏</view>
<text class="page-body-text">截屏事件{{ captured ? "已" : "未" }}触发</text>
</view>
</view>
</view>

32
xhs-mini-demos/component-case/checkbox/checkbox.css Normal file
View File

@@ -0,0 +1,32 @@
._dflex > * {
font-size: 14px;
}
.checkbox {
margin-right: 10px;
}
.select-base {
display: flex;
}
.select-base > view {
display: flex;
margin-right: 10px;
align-items: center;
}
.select-suppose {
display: flex;
justify-content: space-between;
align-items: center;
}
.select-base-large radio {
transform: scale(1.15);
}
.select-base-small radio {
transform: scale(0.8);
}

132
xhs-mini-demos/component-case/checkbox/checkbox.js Normal file
View File

@@ -0,0 +1,132 @@
const __templateJs = require("./templates.js");
const __mergePageOptions = require("../../util/mergePageOptions.js");
Page(__mergePageOptions({
onShareAppMessage() {
return {
title: 'checkbox',
path: 'page/component/pages/checkbox/checkbox'
};
},
data: {
items: [{
value: 'USA',
name: '美国'
}, {
value: 'CHN',
name: '中国',
checked: 'true'
}, {
value: 'BRA',
name: '巴西'
}, {
value: 'JPN',
name: '日本'
}, {
value: 'ENG',
name: '英国'
}, {
value: 'FRA',
name: '法国'
}],
curValue: '',
checked: true,
disabled: false,
color: 'red',
radio1Checked: false,
radio2Checked: true,
r1: true,
r2: true,
r3: true,
isAgree: false
},
changeAgree(e) {
xhs.showToast({
icon: 'none',
title: '您第一次点击同意'
});
console.log('changeAgree', e);
// this.setData({
// isAgree: !this.data.isAgree
// })
},
continue() {
if (this.data.isAgree) {
xhs.showToast({
icon: 'none',
title: '您已同意'
});
} else {
xhs.showToast({
icon: 'none',
title: '您还没有点击同意'
});
}
},
changeisAgree() {
this.setData({
isAgree: !this.data.isAgree
});
},
checkboxChange(e) {
const items = this.data.items;
const values = e.detail.value;
for (let i = 0, lenI = items.length; i < lenI; ++i) {
items[i].checked = false;
for (let j = 0, lenJ = values.length; j < lenJ; ++j) {
if (items[i].value === values[j]) {
items[i].checked = true;
break;
}
}
}
// 这里 this.setData({items}) 没有反应
console.log(this.data.items);
this.setData({
curValue: e.detail.value.join(',')
});
},
changeChecked() {
this.setData({
checked: !this.data.checked
});
},
changeDisabled() {
this.setData({
disabled: !this.data.disabled
});
},
changeColor({
detail
}) {
this.setData({
color: detail.value
});
},
handleRadio1Checked() {
this.setData({
radio1Checked: !this.data.radio1Checked
});
},
handleRadio2Checked() {
this.setData({
radio2Checked: !this.data.radio2Checked
});
},
handelR1() {
this.setData({
r1: !this.data.r1
});
},
handelR2() {
this.setData({
r2: !this.data.r2
});
},
handelR3() {
this.setData({
r3: !this.data.r3
});
}
}, __templateJs));

7
xhs-mini-demos/component-case/checkbox/checkbox.json Normal file
View File

@@ -0,0 +1,7 @@
{
"navigationBarTitleText": "单项/多项选择器",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
}
}

93
xhs-mini-demos/component-case/checkbox/checkbox.xhsml Normal file
View File

@@ -0,0 +1,93 @@
<view class="container">
<showbox title="基础样式">
<box>
<view class="_ui-space">
<view class="_dflex _jc_space-between _ai_center">
<text>大</text>
<view class="select-base select-base-large">
<view>
<radio value="1" checked="{{radio1Checked}}" style="--dd04dc74: flex;" bindtap="handleRadio1Checked" color="#FF2442" /> 未选中
</view>
<view>
<radio checked="{{radio2Checked}}" style="--dd04dc74: flex;" color="#FF2442" bindtap="handleRadio2Checked"/> 选中
</view>
<view>
<radio style="--dd04dc74: flex;" disabled color="#FF2442" /> 禁用
</view>
</view>
</view>
<view class="_dflex _jc_space-between _ai_center">
<text>中</text>
<view class="select-base">
<view>
<radio value="1" checked="{{radio1Checked}}" style="--dd04dc74: flex;" bindtap="handleRadio1Checked" color="#FF2442" /> 未选中
</view>
<view>
<radio checked="{{radio2Checked}}" style="--dd04dc74: flex;" color="#FF2442" bindtap="handleRadio2Checked"/> 选中
</view>
<view>
<radio style="--dd04dc74: flex;" disabled color="#FF2442" /> 禁用
</view>
</view>
</view>
<view class="_dflex _jc_space-between _ai_center">
<text>小</text>
<view class="select-base select-base-small">
<view>
<radio value="1" checked="{{radio1Checked}}" style="--dd04dc74: flex;" bindtap="handleRadio1Checked" color="#FF2442" /> 未选中
</view>
<view>
<radio checked="{{radio2Checked}}" style="--dd04dc74: flex;" color="#FF2442" bindtap="handleRadio2Checked"/> 选中
</view>
<view>
<radio style="--dd04dc74: flex;" disabled color="#FF2442" /> 禁用
</view>
</view>
</view>
</view>
</box>
</showbox>
<showbox title="推荐展示样式">
<box>
<view class="_ui-space">
<view class="select-suppose">
<text>标题描述</text>
<view>
<radio-group>
<radio value="1" style="--dd04dc74: flex;" checked color="#FF2442" /> 单选
<radio value="2" class="xhs-a-radio" style="--dd04dc74: flex;" color="#FF2442" /> 单选
</radio-group>
</view>
</view>
<view class="select-suppose">
<view class="_dflex _fd_column">
<text style="font-size: 14px;line-height: 18px;">标题描述</text>
<text style="font-size: 12px; color: #33333366;line-height: 20px;">可添加二级描述文本</text>
</view>
<view>
<radio checked="{{r1}}" style="--dd04dc74: flex;" color="#FF2442" bindtap="handelR1"/> 复选
<radio checked="{{r2}}" style="--dd04dc74: flex;" color="#FF2442" bindtap="handelR2"/> 复选
<radio checked="{{r3}}" style="--dd04dc74: flex;" color="#FF2442" bindtap="handelR3"/> 复选
</view>
</view>
</view>
</box>
</showbox>
<showbox title="点击同意按钮再继续">
<box>
<radio-group bindchange="changeAgree">
<radio value="isagree" style="--dd04dc74: flex;" color="#FF2442" checked="{{isAgree}}" bindtap="changeisAgree"/> 您需要同意再继续
</radio-group>
<button bindtap="continue">点击同意再继续</button>
</box>
</showbox>
</view>
<include src="templates.xhsml" />

53
xhs-mini-demos/component-case/checkbox/templates.js Normal file
View File

@@ -0,0 +1,53 @@
/** 以下内容为自动生成，请勿手动修改 */
module.exports = {
data: {
page_data_0: ``,
page_data_1: false,
page_data_2: false,
page_data_3: `#09BB07`,
page_data_4: ``,
page_data_5: false,
page_data_6: false,
page_data_7: `#09BB07`,
},
page_fun_0(e) {
this.setData("page_data_0", e.detail.value);
},
page_fun_1(e) {
this.setData("page_data_1", e.detail.value);
},
page_fun_2(e) {
this.setData("page_data_2", e.detail.value);
},
page_fun_3(e) {
this.setData("page_data_3", e.detail.value);
},
page_fun_4(e) {
this.setData("page_data_4", e.detail.value);
},
page_fun_5(e) {
this.setData("page_data_5", e.detail.value);
},
page_fun_6(e) {
this.setData("page_data_6", e.detail.value);
},
page_fun_7(e) {
this.setData("page_data_7", e.detail.value);
},
};

163
xhs-mini-demos/component-case/checkbox/templates.xhsml Normal file
View File

@@ -0,0 +1,163 @@
<!-- 以下内容为自动生成，请勿手动修改 -->
<view class="container">
<showbox title="radio演示">
<box>
<view class="_ui-space">
<view>
<radio
value="{{page_data_0}}"
checked="{{page_data_1}}"
disabled="{{page_data_2}}"
color="{{page_data_3}}"
>
</radio>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>value</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_0}}"
placeholder="value"
type="text"
bindinput="page_fun_0"
/>
</view>
</view>
<view class="_dflex _jc_space-between">
<view class="_dflex _ai_center">
<text>是否开启checked</text>
</view>
<switch
checked="{{page_data_1}}"
color="rgba(255, 36, 66, 1)"
bindchange="page_fun_1"
/>
</view>
<view class="_dflex _jc_space-between">
<view class="_dflex _ai_center">
<text>是否开启disabled</text>
</view>
<switch
checked="{{page_data_2}}"
color="rgba(255, 36, 66, 1)"
bindchange="page_fun_2"
/>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>color</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_3}}"
placeholder="color"
type="text"
bindinput="page_fun_3"
/>
</view>
</view>
</view>
</box>
</showbox>
<showbox title="radio-group演示">
<box>
<view class="_ui-space">
<view>
<radio-group>
<radio value="1"></radio>
<radio value="2"></radio>
<radio value="3"></radio>
</radio-group>
</view>
</view>
</box>
</showbox>
<showbox title="checkbox演示">
<box>
<view class="_ui-space">
<view>
<checkbox
value="{{page_data_4}}"
disabled="{{page_data_5}}"
checked="{{page_data_6}}"
color="{{page_data_7}}"
>
</checkbox>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>value</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_4}}"
placeholder="value"
type="text"
bindinput="page_fun_4"
/>
</view>
</view>
<view class="_dflex _jc_space-between">
<view class="_dflex _ai_center">
<text>是否开启disabled</text>
</view>
<switch
checked="{{page_data_5}}"
color="rgba(255, 36, 66, 1)"
bindchange="page_fun_5"
/>
</view>
<view class="_dflex _jc_space-between">
<view class="_dflex _ai_center">
<text>是否开启checked</text>
</view>
<switch
checked="{{page_data_6}}"
color="rgba(255, 36, 66, 1)"
bindchange="page_fun_6"
/>
</view>
<view class="_dflex">
<view style="flex: 4" class="_dflex _ai_center"
><text>color</text></view
>
<view style="flex: 6" class="_ui-input">
<input
value="{{page_data_7}}"
placeholder="color"
type="text"
bindinput="page_fun_7"
/>
</view>
</view>
</view>
</box>
</showbox>
<showbox title="checkbox-group演示">
<box>
<view class="_ui-space">
<view>
<checkbox-group>
<checkbox value="1"></checkbox>
<checkbox value="2"></checkbox>
<checkbox value="3"></checkbox>
</checkbox-group>
</view>
</view>
</box>
</showbox>
</view>

6
xhs-mini-demos/component-case/component-communication/component-communication.css Normal file
View File

@@ -0,0 +1,6 @@
.page-continer {
background-color: red;
margin: 10px;
height: 650px;
color: white;
}

9
xhs-mini-demos/component-case/component-communication/component-communication.js Normal file
View File

@@ -0,0 +1,9 @@
Page({
data: {},
onClearClick() {
const com1 = this.selectComponent('#com1');
console.log('com1', com1.onClear);
com1.onClear();
},
});

9
xhs-mini-demos/component-case/component-communication/component-communication.json Normal file
View File

@@ -0,0 +1,9 @@
{
"navigationBarTitleText": "组件间通信与事件",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index",
"com1": "./components/com1/com1",
"com2": "./components/com2/com2"
}
}

11
xhs-mini-demos/component-case/component-communication/component-communication.xhsml Normal file
View File

@@ -0,0 +1,11 @@
<view class="container">
<view class="page-continer">
这是页面
<com1 id="com1" />
<view class="_px10">
<button hover-class="_ui-button-hover" bindtap="onClearClick">
通过selectComponent clear
</button>
</view>
</view>
</view>

6
xhs-mini-demos/component-case/component-communication/components/com1/com1.css Normal file
View File

@@ -0,0 +1,6 @@
.com1-container {
background-color: blue;
margin: 20px;
height: 500px;
color: white;
}

40
xhs-mini-demos/component-case/component-communication/components/com1/com1.js Normal file
View File

@@ -0,0 +1,40 @@
Component({
options: {
styleIsolation: 'shared'
},
properties: {
},
data: {
childDataMessage: '',
// 这里是一些组件内部数据
childMessage: '',
someData: {}
},
methods: {
handleClick() {
const com2 = this.selectComponent('#com2');
console.log('com2', com2);
},
handleEventMessage() {
this.setData('childDataMessage', '修改了传给子组件的data');
},
onChildMessage(e) {
this.setData('childMessage', `收到子组件的事件detail：${e.detail.data}`);
},
onClear() {
console.log('onClear', this);
this.setData('childMessage', '');
this.setData('childDataMessage', '');
},
handleSelectMessage() {
const com2 = this.selectComponent('#com2');
com2.onTap();
}
},
});

8
xhs-mini-demos/component-case/component-communication/components/com1/com1.json Normal file
View File

@@ -0,0 +1,8 @@
{
"component": true,
"usingComponents": {
"com2": "../com2/com2"
},
"styleIsolation": "apply-shared"
}

9
xhs-mini-demos/component-case/component-communication/components/com1/com1.xhsml Normal file
View File

@@ -0,0 +1,9 @@
<view class="com1-container" bindtap="handleClick">
<view style="text-align: center;">这是父组件</view>
<view style="text-align: center;">{{childMessage}}</view>
<com2 id="com2" bindmyevent="onChildMessage" message="{{childDataMessage}}"/>
<view class="_ui-space _px10">
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="handleEventMessage">通过data变更修改子组件</button>
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="handleSelectMessage">通过selectComponent触发子组件事件</button>
</view>
</view>

6
xhs-mini-demos/component-case/component-communication/components/com2/com2.css Normal file
View File

@@ -0,0 +1,6 @@
.com2-container {
background-color: yellow;
margin: 20px;
height: 250px;
color: black;
}

26
xhs-mini-demos/component-case/component-communication/components/com2/com2.js Normal file
View File

@@ -0,0 +1,26 @@
Component({
properties: {
message: {
type: String
}
},
data: {
// 这里是一些组件内部数据
someData: {}
},
methods: {
onTap() {
this.triggerEvent('myevent', {
data: '自定义组件内触发triggerEvent'
});
},
onClear() {
console.log('onClear com2', this);
this.triggerEvent('myevent', {
data: ''
});
}
}
});

5
xhs-mini-demos/component-case/component-communication/components/com2/com2.json Normal file
View File

@@ -0,0 +1,5 @@
{
"component": true,
"styleIsolation": "apply-shared"
}

7
xhs-mini-demos/component-case/component-communication/components/com2/com2.xhsml Normal file
View File

@@ -0,0 +1,7 @@
<view class="com2-container">
<view style="text-align: center;">这是子组件</view>
<view style="text-align: center;">{{message}}</view>
<view class="_ui-space _px10 _pt10">
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="onTap">通过事件给父组件发消息</button>
</view>
</view>

28
xhs-mini-demos/component-case/cover-view/cover-view.css Normal file
View File

@@ -0,0 +1,28 @@
.cover-view {
position: absolute;
top: calc(50% - 75px);
left: calc(50% - 150px);
/* opacity: .7; */
}
.flex-wrp{
display:flex;
}
.flex-item{
width: 100px;
height: 150px;
font-size: 13px;
}
.demo-text-1 {
background: rgba(26, 173, 25, 0.7);
}
.demo-text-2 {
background: rgba(39, 130, 215, 0.7);
}
.demo-text-3 {
background: rgba(255, 255, 255, 0.7);
}

13
xhs-mini-demos/component-case/cover-view/cover-view.js Normal file
View File

@@ -0,0 +1,13 @@
Page({
onShareAppMessage() {
return {
title: 'cover-view',
path: 'page/component/pages/cover-view/cover-view',
};
},
data: {
latitude: 23.099994,
longitude: 113.324520,
},
});

3
xhs-mini-demos/component-case/cover-view/cover-view.json Normal file
View File

@@ -0,0 +1,3 @@
{
"navigationBarTitleText": "cover-view"
}

21
xhs-mini-demos/component-case/cover-view/cover-view.xhsml Normal file
View File

@@ -0,0 +1,21 @@
<view class="container">
<view class="page-body">
<view class="page-section page-section-gap">
<map
style="width: 100%; height: 300px;"
latitude="{{latitude}}"
longitude="{{longitude}}"
>
<cover-view class="cover-view">
<cover-view class="container">
<cover-view class="flex-wrp" style="flex-direction:row;">
<cover-view class="flex-item demo-text-1"></cover-view>
<cover-view class="flex-item demo-text-2"></cover-view>
<cover-view class="flex-item demo-text-3"></cover-view>
</cover-view>
</cover-view>
</cover-view>
</map>
</view>
</view>
</view>

0
xhs-mini-demos/component-case/custom-service/custom-service.css Normal file
View File

8
xhs-mini-demos/component-case/custom-service/custom-service.js Normal file
View File

@@ -0,0 +1,8 @@
Page({
onShareAppMessage() {
return {
title: '联系客服',
path: 'packageAPI/pages/custom-service/custom-service',
};
},
});

3
xhs-mini-demos/component-case/custom-service/custom-service.json Normal file
View File

@@ -0,0 +1,3 @@
{
"navigationBarTitleText": "客服消息"
}

7
xhs-mini-demos/component-case/custom-service/custom-service.xhsml Normal file
View File

@@ -0,0 +1,7 @@
<view class="container">
<view class="page-body">
<view class="btn-area">
<button type="primary">联系客服</button>
</view>
</view>
</view>

240
xhs-mini-demos/component-case/editor/assets/iconfont.css Normal file
View File

File diff suppressed because one or more lines are too long

54
xhs-mini-demos/component-case/editor/editor.css Normal file
View File

@@ -0,0 +1,54 @@
@import './assets/iconfont.css';
page > view {
max-width: 100%;
}
.container {
position: absolute;
top: 0;
left: 0;
width: 100%;
}
.ql-container {
box-sizing: border-box;
width: 100%;
height: 100%;
font-size: 16px;
line-height: 1.5;
overflow: auto;
border: 1px solid #ececec;
}
.ql-active {
color: #22c704;
}
.iconfont {
display: flex;
width: 30px;
height: 30px;
cursor: pointer;
font-size: 20px;
justify-content: center;
align-items: center;
}
.toolbar {
box-sizing: border-box;
padding: 0 10px;
height: 50px;
width: 100%;
position: fixed;
left: 0;
right: 100%;
top: 0;
display: flex;
align-items: center;
justify-content: space-between;
border: 1px solid #ececec;
border-left: none;
border-right: none;
background-color: white;
}

226
xhs-mini-demos/component-case/editor/editor.js Normal file
View File

@@ -0,0 +1,226 @@
const contents = {
html: `
<p>支持插入图片</p>
<br>
<p>
<img src="https://b.bdstatic.com/searchbox/icms/searchbox/img/editor-image-demo.png" data-custom="id=abcd&amp;role=god" alt="image-alt" class="imageCls" width="100%">
</p>
<hr>
<p>支持以下字符样式</p>
<p>
<b>bold粗体</b>
<em>italic斜体</em>
<u>underline下划线</u>
</p>
<p>
<sub>sub下标</sub>
<sup>super上标</sup>
</p>
<hr>
<p>支持以下列表样式</p>
<ol>
<li>有序列表</li>
<li>有序列表</li>
</ol>
<ul>
<li>无序列表</li>
</ul>
<ul>
<li>无序列表</li>
</ul>
<ul data-checked="true">
<li>选框列表</li>
</ul>
<ul data-checked="false">
<li>选框列表</li>
</ul>
<hr>
<p>支持以下字符大小</p>
<h1>H1 一级标题</h1>
<h2>H2 二级标题</h2>
<h3>H3 三级标题</h3>
<h4>H4 四级标题</h4>
<h5>H5 五级标题</h5>
<h6>H6 六级标题</h6>
<hr>
<p>支持以下对齐方式</p>
<p style="text-align:center">center中间对齐</p>
<p style="text-align:right">right 右对齐</p>
<p style="text-align:justify">justify 自动对齐</p>
<hr>
<span style="color:#00bc89;background-color:#333">color 支持设置字体及背景颜色</span>`,
};
Page({
onShareAppMessage() {
return {
title: 'editor',
path: 'page/component/pages/editor/editor',
};
},
data: {
formats: {},
readOnly: false,
placeholder: '开始输入...',
editorHeight: 300,
keyboardHeight: 0,
isIOS: false,
safeHeight: 0,
toolBarHeight: 50,
},
readOnlyChange() {
this.setData({
readOnly: !this.data.readOnly,
});
},
onLoad() {
const { platform, safeArea, model, screenHeight } = xhs.getSystemInfoSync();
let safeHeight;
if (safeArea) {
safeHeight = screenHeight - safeArea.bottom;
} else {
safeHeight = 32;
}
this._safeHeight = safeHeight;
const isIOS = platform === 'ios';
this.setData({ isIOS, safeHeight, toolBarHeight: isIOS ? safeHeight + 50 : 50 });
const that = this;
this.updatePosition(0);
let keyboardHeight = 0;
xhs.onKeyboardHeightChange?.(res => {
if (res.height === keyboardHeight) {
return;
}
const duration = res.height > 0 ? res.duration * 1000 : 0;
keyboardHeight = res.height;
setTimeout(() => {
xhs.pageScrollTo({
scrollTop: 0,
success() {
that.updatePosition(keyboardHeight);
that.editorCtx.scrollIntoView();
},
});
}, duration);
});
},
updatePosition(keyboardHeight) {
const toolbarHeight = 50;
const { windowHeight, platform } = xhs.getSystemInfoSync();
const editorHeight =
keyboardHeight > 0 ? windowHeight - keyboardHeight - toolbarHeight : windowHeight;
if (keyboardHeight === 0) {
this.setData({
editorHeight,
keyboardHeight,
toolBarHeight: this.data.isIOS ? 50 + this._safeHeight : 50,
safeHeight: this._safeHeight,
});
} else {
this.setData({
editorHeight,
keyboardHeight,
toolBarHeight: 50,
safeHeight: 0,
});
}
},
calNavigationBarAndStatusBar() {
const systemInfo = xhs.getSystemInfoSync();
const { statusBarHeight, platform } = systemInfo;
const isIOS = platform === 'ios';
const navigationBarHeight = isIOS ? 44 : 48;
return statusBarHeight + navigationBarHeight;
},
onEditorReady() {
const that = this;
that.editorCtx = xhs.createEditorContext?.('editor');
this.clear();
this.setContents();
this.removeFormat();
this.insertDivider();
setTimeout(() => {
this.editorCtx.getContents({
success: res => {
console.log('getContents success', res);
},
});
}, 1000);
},
blur() {
this.editorCtx.blur();
},
format(e) {
const { name, value } = e.target.dataset;
if (!name) return;
console.log('format', name, value);
this.editorCtx.format(name, value);
},
onStatusChange(e) {
const formats = e.detail;
console.log('onStatusChange', e);
this.setData({ formats });
},
insertDivider() {
this.editorCtx.insertDivider({
success() {
console.log('insert divider success');
},
});
},
clear() {
this.editorCtx.clear({
success(res) {
console.log('clear success', res);
},
});
},
removeFormat() {
this.editorCtx.removeFormat({
success: res => {
console.log('removeFormat success', res);
},
});
},
setContents() {
this.editorCtx.setContents({
...contents,
success: res => {
console.log('setContents success', res);
},
});
},
insertDate() {
const date = new Date();
const formatDate = `${date.getFullYear()}/${date.getMonth() + 1}/${date.getDate()}`;
this.editorCtx.insertText({
text: formatDate,
});
},
insertImage() {
const that = this;
xhs.chooseImage({
count: 1,
success(res) {
that.editorCtx.insertImage({
src: res.tempFilePaths[0],
data: {
id: 'abcd',
role: 'god',
},
width: '80%',
success() {
console.log('insert image success');
},
});
},
});
},
bindfocus(e) {
console.log('bindfocus', e);
},
bindblur(e) {
console.log('bindblur', e);
},
});

8
xhs-mini-demos/component-case/editor/editor.json Normal file
View File

@@ -0,0 +1,8 @@
{
"navigationBarTitleText": "富文本编辑器",
"disableScroll": true,
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
}
}

21
xhs-mini-demos/component-case/editor/editor.xhsml Normal file
View File

@@ -0,0 +1,21 @@
<view class="container" style="height:{{editorHeight}}px;">
<editor id="editor" class="ql-container" placeholder="{{placeholder}}" bindstatuschange="onStatusChange" bindready="onEditorReady"
bindblur="bindblur"
bindfocus="bindfocus"
show-img-size
show-img-resize
show-img-toolbar>
</editor>
</view>
<view class="toolbar" catchtouchend="format" hidden="{{false}}" style="height: {{toolBarHeight}}px;">
<i class="iconfont icon-charutupian" catchtouchend="insertImage"></i>
<i class="iconfont icon-format-header-2 {{formats.header === 2 ? 'ql-active' : ''}}" data-name="header" data-value="{{2}}"></i>
<i class="iconfont icon-format-header-3 {{formats.header === 3 ? 'ql-active' : ''}}" data-name="header" data-value="{{3}}"></i>
<i class="iconfont icon-zitijiacu {{formats.bold ? 'ql-active' : ''}}" data-name="bold"></i>
<i class="iconfont icon-zitixieti {{formats.italic ? 'ql-active' : ''}}" data-name="italic"></i>
<i class="iconfont icon-zitixiahuaxian {{formats.underline ? 'ql-active' : ''}}" data-name="underline"></i>
<i class="iconfont icon--checklist" data-name="list" data-value="check"></i>
<i class="iconfont icon-youxupailie {{formats.list === 'ordered' ? 'ql-active' : ''}}" data-name="list" data-value="ordered"></i>
<i class="iconfont icon-wuxupailie {{formats.list === 'bullet' ? 'ql-active' : ''}}" data-name="list" data-value="bullet"></i>
</view>

127
xhs-mini-demos/component-case/error-catch/error-catch.css Normal file
View File

@@ -0,0 +1,127 @@
.container {
padding-bottom: 20px;
}
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.center {
justify-content: center;
align-items: center;
}
.mb-10 {
margin-bottom: 10px;
}
.mt-10 {
margin-top: 10px;
}
.text-container {
width: 100%;
white-space: pre-line;
margin-bottom: 10px;
}
.box text {
display: block;
padding-top: 10px;
padding-bottom: 10px;
}
.box1 {
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
border-radius: 5px;
text-align: center;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
margin: 0 auto;
border-radius: 5px;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
border-radius: 5px;
}
.transitionbox {
width: 200px;
height: 200px;
background-color: grey;
margin: 0 auto;
transition: all 0.3s ease;
border-radius: 5px;
}
.transitionbox:hover {
width: 300px;
/* height: 300px; */
background-color: grey;
margin: 0 auto;
}
@keyframes fadeOutIn {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animationbox {
width: 200px;
height: 200px;
background-color: khaki;
margin: 0 auto;
border-radius: 5px;
}
.animation {
animation: fadeOutIn 2s ease;
animation-iteration-count: 2;
}
.wrapper {
height: 300px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
.info-panel {
display: flex;
flex-flow: column;
align-items: center;
}
.info-panel > text {
display: block;
margin-bottom: 10px;
}
.info-panel > button {
margin-bottom: 10px;
width: 100%;
}

23
xhs-mini-demos/component-case/error-catch/error-catch.js Normal file
View File

@@ -0,0 +1,23 @@
Page({
data: {
},
handlePromise(){
return new Promise((_, rej) => {
rej(new Error('promise错误'));
});
},
handleTimer(){
setTimeout(() => {
throw new Error('setTimeout错误');
}, 1000);
},
handleStringError(){
return new Promise((_, rej) => {
rej('promise string错误');
});
},
handleSyncError() {
throw new Error('同步错误');
}
});

8
xhs-mini-demos/component-case/error-catch/error-catch.json Normal file
View File

@@ -0,0 +1,8 @@
{
"navigationBarTitleText": "error捕获测试",
"disableScroll": true,
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
}
}

50
xhs-mini-demos/component-case/error-catch/error-catch.xhsml Normal file
View File

@@ -0,0 +1,50 @@
<view class="container">
<showbox title="异步错误捕获测试">
<box>
仅安卓开启2.0架构以及chopper engine引擎时支持
<button
class="_ui-button"
hover-class="_ui-button-hover"
bind:tap="handlePromise"
>
promise捕获
</button>
</box>
</showbox>
<showbox title="异步错误捕获测试">
<box>
<button
class="_ui-button"
hover-class="_ui-button-hover"
bind:tap="handleTimer"
>
定时器捕获
</button>
</box>
</showbox>
<showbox title="异步错误捕获测试">
<box>
<button
class="_ui-button"
hover-class="_ui-button-hover"
bind:tap="handleStringError"
>
字符类型业务错误捕获
</button>
</box>
</showbox>
<showbox title="同步错误测试">
<box>
<button
class="_ui-button"
hover-class="_ui-button-hover"
bind:tap="handleSyncError"
>
同步错误测试
</button>
</box>
</showbox>
</view>

9
xhs-mini-demos/component-case/eval/eval.css Normal file
View File

@@ -0,0 +1,9 @@
.input {
margin: 15px auto;
width: 80%;
/* border-bottom: 1px solid black; */
}
.text {
margin: 15px auto;
width: 80%;
}

21
xhs-mini-demos/component-case/eval/eval.js Normal file
View File

@@ -0,0 +1,21 @@
Page({
data: {
value: '',
},
onShareAppMessage() {
return {
title: 'eval',
path: 'packageAPI/pages/eval/eval',
};
},
handle() {
const self = this;
self.setData({ value: '' });
if (!globalThis.eval) {
self.setData({ value: '不支持' });
} else {
self.setData({ value: '支持' });
}
},
});

4
xhs-mini-demos/component-case/eval/eval.json Normal file
View File

@@ -0,0 +1,4 @@
{
"usingComponents": {},
"navigationBarTitleText": "eval"
}

11
xhs-mini-demos/component-case/eval/eval.xhsml Normal file
View File

@@ -0,0 +1,11 @@
<view class="container">
<template is="head" data="{{title: 'eval'}}" />
<view class="page-body">
<view class="page-section">
<text>
{{value}}
</text>
<button bindtap="handle">执行eval</button>
</view>
</view>
</view>

49
xhs-mini-demos/component-case/event-message-queue/event-message-queue.css Normal file
View File

@@ -0,0 +1,49 @@
.container {
display: flex;
justify-content: center;
height: 100vh;
}
.message-container {
width: 100%;
background-color: rgba(255, 255, 255, .5);
overflow: auto;
padding: 10px;
border-radius: 10px;
transition: box-shadow 0.3s;
}
.message-item {
display: flex;
height: 40px;
box-sizing: border-box;
justify-content: space-between;
align-items: center;
padding: 10px 0;
font-weight: 600;
}
.message-item > image {
width: 16px;
height: 16px;
}
.message-item > text {
padding: 0 10px;
}
.test-success {
box-shadow: inset 0 0 10px 10px rgba(0, 255, 0, 0.5);
}
.test-not-move-all-success {
box-shadow: inset 0 0 10px 10px rgba(0, 0, 255, 0.5);
}
.test-error {
box-shadow: inset 0 0 10px 10px rgba(255, 0, 0, 0.5);
}
.message-move-area {
height: 400px;
overflow: auto;
}

177
xhs-mini-demos/component-case/event-message-queue/event-message-queue.js Normal file
View File

@@ -0,0 +1,177 @@
/**
* @author zhouyangejie
* @summary 消息队列测试
*/
const TOUCH_MOVE_COUNT = 10;
let moveCount = 0;
let eventCount = 0;
Page({
data: {
// status success fail ready
testList: [
{
eventName: 'touchStart',
status: 'ready'
},
...new Array(TOUCH_MOVE_COUNT).fill(
{
eventName: 'touchMove',
status: 'ready'
}
),
{
eventName: 'touchEnd',
status: 'ready'
},
],
// success not-move-all-success error
status: '',
info: {
'test-success': '测试成功',
'test-not-move-all-success': '测试成功（toucheMove事件不足）',
'test-error': '测试失败'
},
isMoving: false,
messageList: [],
scrollTop: 360,
isTestOver: false,
},
setStatus(index, status) {
const curTestEvent = this.data.testList[index];
if (curTestEvent) {
this.setData(`testList[${index}].status`, status);
}
if (status === 'fail') {
this.setData('isTestOver', true);
this.setData('status', 'test-error');
}
},
noticeEvent() {
if (this.data.isTestOver) {
return;
}
const curEventIndex = eventCount - 1;
const curMessageEventName = this.data.messageList[curEventIndex];
const curTestEvent = this.data.testList[curEventIndex];
const curTestEventName = curTestEvent.eventName;
if (curTestEventName === 'touchStart') {
this.setStatus(curEventIndex, curMessageEventName === 'touchStart' ? 'success': 'fail');
} else if (curTestEventName === 'touchMove') {
if (curMessageEventName === 'touchEnd') {
this.setStatus(this.data.testList.length - 1, 'success');
} else {
this.setStatus(curEventIndex, curMessageEventName === 'touchMove' ? 'success' : 'fail');
}
} else if (curTestEventName === 'touchEnd') {
if (curMessageEventName === 'touchMove') {
this.data.testList.splice(curEventIndex, 0, {
eventName: 'touchMove',
status: 'success'
});
this.setData('testList', this.data.testList.slice());
} else {
this.setStatus(curEventIndex, curMessageEventName === 'touchEnd' ? 'success' : 'fail');
}
}
},
onTouchStart(e) {
this.setData('isMoving', true);
this.pushMessage('touchStart');
},
onTouchMove(e) {
moveCount++;
this.pushMessage('touchMove');
if (!this.data.isTestOver) {
this.autoScroll();
}
},
onTouchEnd(e) {
this.setData('isMoving', false);
this.pushMessage('touchEnd');
this.handleResult();
this.setData('isTestOver', true);
},
handleReset() {
eventCount = 0;
moveCount = 0;
this.setData({
isTestOver: false,
messageList: [],
isMoving: false,
status: '',
scrollTop: 0,
testList: [
{
eventName: 'touchStart',
status: 'ready'
},
...new Array(TOUCH_MOVE_COUNT).fill(
{
eventName: 'touchMove',
status: 'ready'
}
),
{
eventName: 'touchEnd',
status: 'ready'
},
]
});
},
handleResult() {
if (this.data.isTestOver) {
return;
}
const messageList = this.data.messageList;
if (
messageList[0] === 'touchStart' &&
messageList[messageList.length - 1] === 'touchEnd'
) {
if (moveCount < TOUCH_MOVE_COUNT) {
this.setData('status', 'test-not-move-all-success');
} else {
this.setData('status', 'test-success');
}
} else {
this.setData('status', 'test-error');
}
},
pushMessage(eventName) {
console.log('dev:', eventName);
eventCount++;
this.setData('messageList', [...this.data.messageList, eventName]);
this.noticeEvent();
},
//滚动条至最底部
autoScroll() {
const scrollTop = moveCount * 40;
this.setData({scrollTop});
}
});

7
xhs-mini-demos/component-case/event-message-queue/event-message-queue.json Normal file
View File

@@ -0,0 +1,7 @@
{
"navigationBarTitleText": "事件消息",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
}
}

34
xhs-mini-demos/component-case/event-message-queue/event-message-queue.xhsml Normal file
View File

@@ -0,0 +1,34 @@
<view class="container" bindtouchstart="onTouchStart" bindtouchmove="onTouchMove" bindtouchend="onTouchEnd">
<view class="message-container {{status}}">
<view>
<button bindtap="handleReset" class="_ui-button _mt6" hover-class="_ui-button-hover" disabled="{{isMoving}}">
{{isMoving && !isTestOver ? '正在滑动中...' : '重置'}}
</button>
<view style="text-align: center; font-weight: bold; color: grey;" class="_py10">
{{info[status] || '请用手指触摸屏幕向下滑动进行测试'}}
</view>
</view>
<view class="message-item" style="color: red;">
<text>=== {{testList[0].eventName}} ===</text>
<image xhs:if="{{testList[0].status === 'ready'}}" src="../../image/no_test.png"></image>
<image xhs:if="{{testList[0].status === 'success'}}" src="../../image/test_success.png"></image>
<image xhs:if="{{testList[0].status === 'fail'}}" src="../../image/test_error.png"></image>
</view>
<scroll-view scroll-y scroll-top="{{scrollTop}}" class="message-move-area">
<template xhs:for="{{testList}}">
<view class="message-item" xhs:if="{{index !== 0 && index !== testList.length-1}}">
<text>=== {{item.eventName}} {{index > 10 ? index : ''}}===</text>
<image xhs:if="{{item.status === 'ready'}}" src="../../image/no_test.png"></image>
<image xhs:if="{{item.status === 'success'}}" src="../../image/test_success.png"></image>
<image xhs:if="{{item.status === 'fail'}}" src="../../image/test_error.png"></image>
</view>
</template>
</scroll-view>
<view class="message-item" style="color: red;">
<text>=== {{testList[testList.length-1].eventName}} ===</text>
<image xhs:if="{{testList[testList.length-1].status === 'ready'}}" src="../../image/no_test.png"></image>
<image xhs:if="{{testList[testList.length-1].status === 'success'}}" src="../../image/test_success.png"></image>
<image xhs:if="{{testList[testList.length-1].status === 'fail'}}" src="../../image/test_error.png"></image>
</view>
</view>
</view>

13
xhs-mini-demos/component-case/event-transition/event-transition.css Normal file
View File

@@ -0,0 +1,13 @@
.width-transition {
width: 100px;
height: 50px;
background: blue;
transition: width 2s;
-moz-transition: width 2s; /* Firefox 4 */
-webkit-transition: width 2s; /* Safari and Chrome */
-o-transition: width 2s;
}
.width-transition:hover {
width: 300px;
}

15
xhs-mini-demos/component-case/event-transition/event-transition.js Normal file
View File

@@ -0,0 +1,15 @@
Page({
onShareAppMessage() {
return {
title: 'view',
path: 'page/component/pages/event-transition/event-transition',
};
},
onTransitionStart() {
console.log('1111111 onTransitionStart');
},
onTransitionEnd() {
console.log('222222 onTransitionEnd');
},
});

3
xhs-mini-demos/component-case/event-transition/event-transition.json Normal file
View File

@@ -0,0 +1,3 @@
{
"navigationBarTitleText": "event-transition"
}

65
xhs-mini-demos/component-case/event-transition/event-transition.xhsml Normal file
View File

@@ -0,0 +1,65 @@
<view class="container">
<view class="page-body">
<view
class="width-transition"
bindtransitionstart="onTransitionStart"
bindtransitionend="onTransitionEnd"
>
view
</view>
<view class="btn-area">
<button
class="width-transition"
bindtransitionstart="onTransitionStart"
bindtransitionend="onTransitionEnd"
>
button
</button>
</view>
<view>
icon
<icon
type="success"
class="width-transition"
bindtransitionstart="onTransitionStart"
bindtransitionend="onTransitionEnd"
>
</icon>
</view>
<view>
image
<image
src="https://res.wx.qq.com/wxdoc/dist/assets/img/0.4cb08bb4.jpg"
class="width-transition"
bindtransitionstart="onTransitionStart"
bindtransitionend="onTransitionEnd"
>
</image>
</view>
<view>
<text
class="width-transition"
bindtransitionstart="onTransitionStart"
bindtransitionend="onTransitionEnd"
>
text
</text>
</view>
<view>
<label
class="width-transition"
bindtransitionstart="onTransitionStart"
bindtransitionend="onTransitionEnd"
>
label
</label>
</view>
</view>
</view>

127
xhs-mini-demos/component-case/event/event.css Normal file
View File

@@ -0,0 +1,127 @@
.container {
padding-bottom: 20px;
}
.flex {
display: flex;
}
.flex-wrap {
flex-wrap: wrap;
}
.center {
justify-content: center;
align-items: center;
}
.mb-10 {
margin-bottom: 10px;
}
.mt-10 {
margin-top: 10px;
}
.text-container {
width: 100%;
white-space: pre-line;
margin-bottom: 10px;
}
.box text {
display: block;
padding-top: 10px;
padding-bottom: 10px;
}
.box1 {
width: 300px;
height: 300px;
background-color: red;
margin: 0 auto;
border-radius: 5px;
text-align: center;
}
.box2 {
width: 200px;
height: 200px;
background-color: orange;
margin: 0 auto;
border-radius: 5px;
}
.box3 {
width: 100px;
height: 100px;
background-color: yellow;
margin: 0 auto;
border-radius: 5px;
}
.transitionbox {
width: 200px;
height: 200px;
background-color: grey;
margin: 0 auto;
transition: all 0.3s ease;
border-radius: 5px;
}
.transitionbox:hover {
width: 300px;
/* height: 300px; */
background-color: grey;
margin: 0 auto;
}
@keyframes fadeOutIn {
0% {
opacity: 1;
}
50% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.animationbox {
width: 200px;
height: 200px;
background-color: khaki;
margin: 0 auto;
border-radius: 5px;
}
.animation {
animation: fadeOutIn 2s ease;
animation-iteration-count: 2;
}
.wrapper {
height: 300px;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5px;
}
.info-panel {
display: flex;
flex-flow: column;
align-items: center;
}
.info-panel > text {
display: block;
margin-bottom: 10px;
}
.info-panel > button {
margin-bottom: 10px;
width: 100%;
}

192
xhs-mini-demos/component-case/event/event.js Normal file
View File

@@ -0,0 +1,192 @@
Page({
data: {
// 手势事件测试
tapCount: 0,
longTapCount: 0,
longPressCount: 0,
touchStartCount: 0,
touchMoveCount: 0,
touchEndCount: 0,
touchCancelCount: 0,
// 动态事件测试
tapVariable: {
a: 'handleTapA',
},
// 冒泡事件测试
eventList1: [],
eventList2: [],
eventList3: [],
// 动画事件测试
animationClass: 'animationbox',
},
handleTapCount() {
this.setData({
tapCount: this.data.tapCount + 1
});
},
handleLongTapCount() {
this.setData({
longTapCount: this.data.longTapCount + 1
});
},
handleLongPressCount() {
this.setData({
longPressCount: this.data.longPressCount + 1
});
},
handleTouchStartCount() {
this.setData({
touchStartCount: this.data.touchStartCount + 1
});
},
handleTouchMoveCount() {
this.setData({
touchMoveCount: this.data.touchMoveCount + 1
});
},
handleTouchEndCount() {
this.setData({
touchEndCount: this.data.touchEndCount + 1
});
},
switchTap() {
this.setData({
'tapVariable.a': this.data.tapVariable.a === 'handleTapA' ? 'handleTapB' : 'handleTapA'
});
},
handleTapA() {
xhs.showToast({
title: 'handleTapA'
});
},
handleTapB() {
xhs.showToast({
title: 'handleTapB'
});
},
handleAnimation() {
if (this.data.animationClass === 'animationbox') {
this.setData({
animationClass: 'animationbox animation'
});
} else {
this.setData({
animationClass: 'animationbox'
});
}
},
handleAnimationStart(event) {
console.log('handleAnimationStart', event);
xhs.showToast({
title: 'animation start'
});
},
handleAnimationIteration(event) {
console.log('handleAnimationIteration', event);
xhs.showToast({
title: 'animation iteration'
});
},
handleAnimationEnd(event) {
console.log('handleAnimationEnd', event);
xhs.showToast({
title: 'animation end'
});
this.handleAnimation();
},
handleTransitionEnd(event) {
console.log('handleTransitionEnd', event);
xhs.showToast({
title: 'transition end'
});
},
handleLongTap() {
console.log('handleLongTap');
},
handleBoxTap(event) {
console.log('handleBoxTap', event.target.dataset.id);
},
handleEvent(event) {
console.log('handleEvent', event);
},
handleBoxTap1(event) {
const eventList1 = this.data.eventList1;
eventList1.push(event.currentTarget.dataset.id);
this.setData({
eventList1,
});
},
clearTap1() {
this.setData({
eventList1: [],
});
},
handleBoxTap2(event) {
const eventList2 = this.data.eventList2;
eventList2.push(event.currentTarget.dataset.id);
this.setData({
eventList2
});
},
clearTap2() {
this.setData({
eventList2: [],
});
},
handleBoxTap3(event) {
const eventList3 = this.data.eventList3;
eventList3.push(event.currentTarget.dataset.id);
this.setData({
eventList3,
});
},
clearTap3() {
this.setData({
eventList3: [],
});
},
handleAnimationAPIStart() {
var animation = xhs.createAnimation({
duration: 1000,
timingFunction: 'ease',
});
this.animation = animation;
animation.scale(2, 2).rotate(45).step();
this.setData({
animationData: animation.export()
});
setTimeout(function () {
animation.translate(30).step();
this.setData({
animationData: animation.export()
});
}.bind(this), 1000);
},
rotateAndScale: function () {
// 旋转同时放大
this.animation.rotate(45).scale(2, 2).step();
this.setData({
animationData: this.animation.export()
});
},
rotateThenScale: function () {
// 先旋转后放大
this.animation.rotate(45).step();
this.animation.scale(2, 2).step();
this.setData({
animationData: this.animation.export()
});
},
rotateAndScaleThenTranslate: function () {
// 先旋转同时放大，然后平移
this.animation.rotate(45).scale(2, 2).step();
this.animation.translate(100, 100).step({ duration: 1000 });
this.setData({
animationData: this.animation.export()
});
}
});

7
xhs-mini-demos/component-case/event/event.json Normal file
View File

@@ -0,0 +1,7 @@
{
"navigationBarTitleText": "手势和动画事件",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
}
}

187
xhs-mini-demos/component-case/event/event.xhsml Normal file
View File

@@ -0,0 +1,187 @@
<view class="container">
<showbox title="手势事件测试">
<box>
<view class="info-panel">
<text>tap count: {{ tapCount }}</text>
<text>longtap count: {{ longTapCount }}</text>
<text>longpress count: {{ longPressCount }}</text>
<text>touchstart count: {{ touchStartCount }}</text>
<text>touchmove count: {{ touchMoveCount }}</text>
<text>touchend count: {{ touchEndCount }}</text>
<text>touchcancel count: {{ touchCancelCount }}</text>
</view>
<button
class="_ui-button"
hover-class="_ui-button-hover"
bind:tap="handleTapCount"
bind:longtap="handleLongTapCount"
bind:longpress="handleLongPressCount"
bind:touchstart="handleTouchStartCount"
bind:touchmove="handleTouchMoveCount"
bind:touchend="handleTouchEndCount"
>
用我测试手势 👀
</button>
</box>
</showbox>
<showbox title="绑定动态事件回调函数">
<box>
<view class="info-panel">
<button bindtap="switchTap">点我切换绑定的tap函数</button>
<button
class="_ui-button"
hover-class="_ui-button-hover"
bindtap="{{ tapVariable.a }}"
>
{{ tapVariable.a }}
</button>
</view>
</box>
</showbox>
<showbox title="手势事件冒泡">
<box>
<view class="text-container">
{{ eventList1.join(', ') }}
</view>
<view
class="box box1"
bind:tap="handleBoxTap1"
data-id="box1"
id="box111"
>
<text>box1, bindtap</text>
<view
class="box box2"
bind:tap="handleBoxTap1"
data-id="box2"
>
<text>box2, bindtap</text>
<view
class="box box3"
bind:tap="handleBoxTap1"
data-id="box3"
>
<text>box3, bindtap</text>
</view>
</view>
</view>
</box>
<box>
<button bindtap="clearTap1">清空</button>
</box>
</showbox>
<showbox title="事件捕获capture">
<box>
<view class="text-container">
{{ eventList2.join(', ') }}
</view>
<view
class="box box1"
capture-bind:tap="handleBoxTap2"
data-id="box1"
>
<text>capture-bind:tap</text>
<view
class="box box2"
capture-bind:tap="handleBoxTap2"
data-id="box2"
>
<text>capture-bind:tap</text>
<view
class="box box3"
capture-bind:tap="handleBoxTap2"
data-id="box3"
>
<text>capture-bind:tap</text>
</view>
</view>
</view>
</box>
<box>
<button bindtap="clearTap2">清空</button>
</box>
</showbox>
<showbox title="事件冒泡和阻止冒泡的组合">
<box>
<view class="text-container">
{{ eventList3.join(', ') }}
</view>
<view
class="box box1"
bind:tap="handleBoxTap3"
data-id="box1"
>
<text>bindtap</text>
<view
class="box box2"
catch:tap="handleBoxTap3"
data-id="box2"
>
<text>catchtap</text>
<view
class="box box3"
bind:tap="handleBoxTap3"
data-id="box3"
>
<text>bindtap</text>
</view>
</view>
</view>
</box>
<box>
<button bindtap="clearTap3">清空</button>
</box>
</showbox>
<showbox title="css animation">
<box>
<view
bindanimationstart="handleAnimationStart"
bindanimationiteration="handleAnimationIteration"
bindanimationend="handleAnimationEnd"
class="{{ animationClass }}"
>
</view>
<button
class="_ui-button mt-10"
bindtap="handleAnimation"
>
开始动画
</button>
</box>
</showbox>
<showbox title="css transition">
<box>
<view
bindtransitionend="handleTransitionEnd"
data-type="transitionend"
class="transitionbox"
></view>
</box>
</showbox>
<showbox title="animation API">
<box>
<view class="wrapper">
<view
bindanimationend="handleAnimationEnd"
bindanimationstart="handleAnimationStart"
animation="{{ animationData }}"
bindtransitionend="handleTransitionEnd"
style="background: red; height: 100rpx; width: 100rpx"
></view>
</view>
<button
class="mt-10"
bindtap="handleAnimationAPIStart"
>
开始动画
</button>
</box>
</showbox>
<showbox
title="自定义组件动画事件测试"
bindtransitionend="handleTransitionEnd"
class="transitionbox"
>
</showbox>
</view>

13
xhs-mini-demos/component-case/form/form.css Normal file
View File

@@ -0,0 +1,13 @@
label {
display: inline-block;
min-width: 235px;
margin-right: 10px;
}
form {
width: 100%;
}
.picker-text {
margin-left: 10px;
position: relative;
}

50
xhs-mini-demos/component-case/form/form.js Normal file
View File

@@ -0,0 +1,50 @@
Page({
onShareAppMessage() {
return {
title: 'form',
path: 'page/component/pages/form/form',
};
},
data: {
pickerHidden: true,
chosen: 'YYYY-MM-DD',
switch: true,
},
pickerConfirm(e) {
this.setData({
pickerHidden: true,
});
this.setData({
chosen: e.detail.value,
});
},
pickerCancel() {
this.setData({
pickerHidden: true,
});
},
pickerShow() {
this.setData({
pickerHidden: false,
});
},
formSubmit(e) {
xhs.showModal({
title: '提交成功',
content: '携带的数据为：' + JSON.stringify(e.detail.value)
});
},
formReset(e) {
console.log('form发生了reset事件，携带数据为：', e.detail.value);
this.setData({
chosen: 'YYYY-MM-DD',
switch: true,
});
},
});

7
xhs-mini-demos/component-case/form/form.json Normal file
View File

@@ -0,0 +1,7 @@
{
"navigationBarTitleText": "表单",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
}
}

63
xhs-mini-demos/component-case/form/form.xhsml Normal file
View File

@@ -0,0 +1,63 @@
<view class="container">
<showbox title="表单基础使用">
<box>
<form bindsubmit="formSubmit" bindreset="formReset">
<view class="_ui-space">
<view class="_dflex _my8">
<view class="_dflex _ai_center">姓名：</view>
<view class="_flex_1 _ui-input">
<input name="name1" placeholder="请输入姓名" />
</view>
</view>
<view class="_dflex _my8">
<view class="_dflex _ai_center">年龄：</view>
<view class="_flex_1 _ui-input">
<input name="age" placeholder="请输入年龄" type="number"/>
</view>
</view>
<view class="_dflex _my8">
<view class="_dflex _ai_center">性别：</view>
<radio-group name="radio" class="_dflex _flex_1">
<label style="min-width: auto;"><radio value="radio1" checked color="red" />男</label>
<label style="min-width: auto;"><radio value="radio2" color="red" />女</label>
</radio-group>
</view>
<view class="_dflex _my8">
<view class="_dflex _ai_center">是否已婚：</view>
<switch name="switch" checked="{{switch}}" color="red"/>
</view>
<view class="_dflex _my8">
<view class="_dflex _ai_center">兴趣爱好：</view>
<checkbox-group name="checkbox">
<label style="min-width: auto;"><checkbox value="game" checked color="red" />游戏</label>
<label style="min-width: auto;"><checkbox value="study" checked color="red" />学习</label>
</checkbox-group>
</view>
<view class="_dflex _my8">
<view class="_dflex _ai_center">出生日期：</view>
<picker name="picker" mode="date" fields="day" value="2016-09-01" start="2015-09-01" end="2017-09-01" bindChange="pickerConfirm">
<view class="_ui-input">
点击选择日期: {{chosen}}
</view>
</picker>
</view>
<view class="_ui-space">
<button class="_ui-button" hover-class="_ui-button-hover" formType="submit">提交</button>
</view>
<view class="_ui-space">
<button class="_ui-button" hover-class="_ui-button-hover" formType="reset">重置</button>
</view>
</view>
</form>
</box>
</showbox>
</view>

39
xhs-mini-demos/component-case/group-chat-card/group-chat-card.css Normal file
View File

@@ -0,0 +1,39 @@
.flex {
display: flex;
}
.items-center {
align-items: center;
}
.justify-center {
justify-content: center;
}
.justify-between {
justify-content: space-between;
}
.mr-20 {
margin-right: 20px;
}
.mb-8 {
margin-bottom: 8px;
}
.mb-20 {
margin-bottom: 20px;
}
.safe-area {
padding-bottom: 150px;
}
.w-full {
width: 100%;
}
.word-break {
word-break: keep-all;
}

33
xhs-mini-demos/component-case/group-chat-card/group-chat-card.js Normal file
View File

@@ -0,0 +1,33 @@
const arr = ['card', 'cell'];
Page({
data: {
groupChatList: "Ev+FMMlMReM/fvLBkHwJyvVowUAzEgFlK7HoFR/NoQQ=,q2UWig7ActbQ5Ew96a+Zf3x3UxjdISWczC+tHJYm66U=,sy3YiB1GGlXLTP9KLCLwFtmxWtY3Hno1yfVzYksmLiQ=,bO8PmXJQ/g9ivaRKLJ37m4Rdb9Lh1nRCwtwaQD2VgQ8=,lt62Epn4+F59BGPXHxcoa8DkkT04zvrA9peKXWL+Njg=",
groupChatStr: "Ev+FMMlMReM/fvLBkHwJyvVowUAzEgFlK7HoFR/NoQQ=,q2UWig7ActbQ5Ew96a+Zf3x3UxjdISWczC+tHJYm66U=,sy3YiB1GGlXLTP9KLCLwFtmxWtY3Hno1yfVzYksmLiQ=,bO8PmXJQ/g9ivaRKLJ37m4Rdb9Lh1nRCwtwaQD2VgQ8=,lt62Epn4+F59BGPXHxcoa8DkkT04zvrA9peKXWL+Njg=",
type: "card",
typeIndex: 0,
arr: arr,
},
bindInputGroupChatList: function (e) {
this.setData({
groupChatList: e.detail.value,
});
},
bindPickerChange(e) {
this.setData({
typeIndex: e.detail.value,
type: arr[e.detail.value],
});
},
bindBlur() {
this.setData({
groupChatStr: this.data.groupChatList
});
},
handleBindJoinGroup(e) {
console.log('handleBindJoinGroup', e);
},
handleBindError(e) {
console.log('handleBindError', e);
}
});

7
xhs-mini-demos/component-case/group-chat-card/group-chat-card.json Normal file
View File

@@ -0,0 +1,7 @@
{
"navigationBarTitleText": "群聊组件",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index"
}
}

45
xhs-mini-demos/component-case/group-chat-card/group-chat-card.xhsml Normal file
View File

@@ -0,0 +1,45 @@
<view class="container">
<showbox title="群聊组件 - 参数设置">
<view style="padding: 10px; background-color: #eee;">
<group-chat-card
groupIds="{{groupChatStr}}"
bindjoingroup="handleBindJoinGroup"
binderror="handleBindError"
type="{{arr[typeIndex]}}"
>
</group-chat-card>
</view>
</showbox>
<showbox title="参数设置区域，修改群组件配置">
<box class="box">
<view class="mb-8">
群聊id，支持传多个，用英文逗号分割，失焦后生效
</view>
<view class="_ui-input">
<textarea
type="{{type}}"
placeholder="群聊id，支持传多个，用英文逗号分割"
value="{{groupChatList}}"
maxlength="-1"
auto-height
bindinput="bindInputGroupChatList"
bindblur="bindBlur"
></textarea>
</view>
</box>
<box class="box">
<view class="mb-8">
群聊 type，支持传 card / cell
</view>
<view class="_ui-input">
<picker
bindchange="bindPickerChange"
value="{{typeIndex}}"
range="{{arr}}"
>
<view>当前选择: {{arr[typeIndex]}}</view>
</picker>
</view>
</box>
</showbox>
</view>

23
xhs-mini-demos/component-case/ibeacon/ibeacon.css Normal file
View File

@@ -0,0 +1,23 @@
.page-body-info {
margin-top: 25px;
padding: 15px 30px;
width: auto;
}
.devices_summary {
padding: 5px;
font-size: 15px;
}
.device_list {
height: 150px;
border-radius: 3px;
flex: 1;
}
.device_item {
border-bottom: 1px solid var(--weui-FG-3);
padding: 5px;
color: var(--weui-FG-HALF);
}
.device_item_hover {
background-color: rgba(0, 0, 0, 0.1);
}

Some files were not shown because too many files have changed in this diff Show More