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

779
xhs-mini-demos/entry/api/api.css Normal file
View File

@@ -0,0 +1,779 @@
html,
body {
background-color: #EFF1F2;
font-size: 100px;
}
/* 组件主体 */
.wrap {
padding-bottom: .5rem;
font-size: .16rem;
}
/* API主体 */
.container {
font-size: .16rem;
display: flex;
flex-direction: column;
justify-content: space-between;
min-height: 100%;
}
/* radio样式 */
.radio {
display: block;
margin: 0 .17rem;
padding: .17rem 0;
background-color: #FFF;
}
.block {
display: block;
margin: 0 .17rem;
padding: .17rem 0;
background-color: #FFF;
}
.item-scroll {
display: flex;
margin: 0 .17rem;
justify-content: space-between;
}
/* 卡片区域 */
.card-area {
overflow: hidden;
margin: .17rem .17rem 0 .17rem;
border-radius: 6px;
background: #FFF;
}
/* 展示区 */
.display-area {
display: flex;
flex-direction: column;
height: 2.18rem;
text-align: center;
border-radius: 8px 8px;
background: #FFF;
align-items: center;
justify-content: center;
}
.display-area-image {
width: 100%;
height: 2.2rem;
text-align: center;
border-radius: 8px 8px 0 0;
}
/* 描述文字 */
.description {
height: .46rem;
padding-left: .17rem;
line-height: .46rem;
}
.top-description {
display: flex;
padding: .16rem .17rem;
font-family: PingFangSC-Medium;
justify-content: space-between;
}
.top-description :first-child {
width: 2.93rem;
font-size: .15rem;
}
.top-description :nth-child(2) {
width: 2.45rem;
font-family: PingFangSC-Regular;
font-size: .13rem;
text-align: right;
color: #999;
}
/* 模式标题 */
.mode-title {
display: flex;
font-family: PingFangSC-Medium;
font-size: .16rem;
color: #000;
align-items: center;
justify-content: center;
}
.mode-title-first {
margin-top: .2rem;
}
.mode-title-text {
margin: 0 .12rem;
}
.mode-title-line-left {
width: .23rem;
height: 1px;
border-radius: 3px;
background-image: linear-gradient(90deg, #F5F5F5 0%, #D5D5D5 100%);
}
.mode-title-line-right {
width: .23rem;
height: 1px;
border-radius: 3px;
background-image: linear-gradient(-90deg, #F5F5F5 0%, #D5D5D5 100%);
}
/* 结果文字 */
.result-area {
display: flex;
flex-direction: column;
height: 1.3rem;
align-items: center;
justify-content: center;
}
.result-area-fail {
width: 2.4rem;
margin: 0 auto;
font-size: .24rem;
text-align: center;
color: #F7534F;
}
.result-area-default {
width: 2.4rem;
margin: 0 auto;
font-size: .24rem;
text-align: center;
color: #000;
}
.result-area-succ {
width: 2.4rem;
margin: 0 auto;
font-size: .24rem;
text-align: center;
color: #38F;
}
.result-area-tips {
margin-top: .08rem;
font-size: .14rem;
color: #999;
}
/* 按纽区 */
.button-group {
margin: .3rem 0 .2rem 0;
}
swan-button {
margin: .2rem .23rem;
font-size: .18rem;
line-height: .44rem;
}
.flex-button {
position: fixed;
bottom: 0;
left: 0;
width: 100%;
background-color: #FFF;
}
/* 一个列表项，和border一起使用 */
.list-area {
margin: 0 .17rem;
padding: .14rem 0;
font-family: PingFangSC-Regular;
color: #333;
}
.list-item-key-4 {
display: inline-block;
width: 1rem;
word-wrap: break-word;
}
.list-item-key-6 {
display: inline-block;
width: 1.2rem;
word-wrap: break-word;
}
.list-item-value {
display: inline-block;
width: 2.2rem;
vertical-align: middle;
word-break: break-all;
}
.option-active {
background: #F2F2F2;
}
/* 提示 */
.tip-week {
margin: 0 .14rem .18rem;
font-size: .12rem;
line-height: .2rem;
text-align: center;
color: #999;
}
.tip-strong {
padding: .11rem .23rem;
font-size: .1rem;
/* height: .57rem; */
text-align: center;
color: #EE823A;
border-radius: 8px 8px 0 0 ;
background-color: #FFF9E3;
}
/* ai 列表样式 */
.result-item {
display: flex;
align-items: center;
}
.result-item:not(:last-of-type) {
margin-bottom: .24rem;
}
.result-item-key-4 {
width: .66rem;
color: #333;
}
.result-item-key-6 {
width: .9rem;
color: #333;
}
.result-item-value {
width: 2.5rem;
margin-left: .19rem;
word-break: break-all;
}
.result-item-value-err {
color: #999;
}
/* 底部标识title */
.page-title {
margin: 1rem 0 .3rem 0;
text-align: center;
}
.page-title-line {
width: .83rem;
height: .02rem;
margin: 0 auto;
background-color: #E6E6E6;
}
.page-title-text {
margin-top: .07rem;
color: #CCC;
}
.page-top {
margin-top: .36rem;
text-align: center;
}
.page-top-line {
position: relative;
width: .54rem;
height: .01rem;
margin: 0 auto;
border: 0;
background-color: #979797;
}
.page-top-text {
margin-bottom: .1rem;
color: #999;
}
/* 上下左右边框 */
.border-top {
position: relative;
border: 0;
}
.border-top:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px;
background: #E6E6E6;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
.border-right {
position: relative;
}
.border-right:after {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
width: 1px;
background: #E6E6E6;
-webkit-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.border-bottom {
position: relative;
border: 0;
}
.border-bottom:after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px;
background: #E6E6E6;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
}
.border-left {
position: relative;
border: 0;
}
.border-left:before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 100%;
background: #E6E6E6;
-webkit-transform-origin: left center;
transform-origin: left center;
}
.border-all {
position: relative;
border: 0;
}
.border-all:before {
content: "";
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
box-sizing: border-box;
border: 1px solid #E6E6E6;
font-size: 0;
line-height: 0;
border-radius: 0;
background: 0 0;
-webkit-transform-origin: 0 0;
transform-origin: 0 0;
}
/* 组件样式 */
.title {
padding: .3rem .22rem .18rem .22rem;
font-size: .15rem;
color: #666;
}
swan-button[type="primary"] {
background: #38F;
}
/* 适配各种屏幕 */
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
not all {
.border-top:before,
.border-bottom:after {
-webkit-transform: scaleY(.66666667);
transform: scaleY(.66666667);
}
.border-right:after,
.border-left:before {
-webkit-transform: scaleX(.66666667);
transform: scaleX(.66666667);
}
.border-all:before {
width: 150%;
height: 150%;
-webkit-transform: scale(.66666667);
transform: scale(.66666667);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 2),
not all {
.border-top:before,
.border-bottom:after {
-webkit-transform: scaleY(.5);
transform: scaleY(.5);
}
.border-right:after,
.border-left:before {
-webkit-transform: scaleX(.5);
transform: scaleX(.5);
}
.border-all:before {
width: 200%;
height: 200%;
-webkit-transform: scale(.48);
transform: scale(.48);
}
}
@media only screen and (-webkit-min-device-pixel-ratio: 3),
not all {
.border-top:before,
.border-bottom:after {
-webkit-transform: scaleY(.33333333);
transform: scaleY(.33333333);
}
.border-right:after,
.border-left:before {
-webkit-transform: scaleX(.33333333);
transform: scaleX(.33333333);
}
.border-all:before {
width: 300%;
height: 300%;
-webkit-transform: scale(.3326);
transform: scale(.3326);
}
}
@media screen and (min-width: 320px) {
html {
font-size: 77.2946px;
}
}
@media screen and (min-width: 375px) {
html {
font-size: 90.5797px;
}
}
@media screen and (min-width: 414px) {
html {
font-size: 100px;
}
}
.card-area {
margin: 0;
}
.top-bar view {
z-index: 999;
background-color: #EFF1F2;
}
.fixTopBar {
width: 100%;
position: fixed;
height: 53px;
}
.fixTopBarBlock {
width: 100%;
position: fixed;
top: 0;
}
.fixTopBarText {
font-family: PingFangSC-Medium;
font-size: .18rem;
color: #000;
text-align: center;
line-height: .18rem;
}
.flex {
height: .53rem;
font-size: .16rem;
display: flex;
justify-content: center; /* 水平居中 */
align-items: center; /* 垂直居中 */
}
.group {
font-size: .15rem;
padding-bottom: 20px;
}
.group-hd {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding-top: .58rem;
}
.group-hd-txt {
color: #999;
margin-top: .1rem;
letter-spacing: .05rem;
}
.item-border-bottom:after {
content: "";
position: absolute;
width: 100%;
height: 1px;
left: 0;
bottom: 0;
-webkit-transform-origin: 0 100%;
transform-origin: 0 100%;
background: #e6e6e6;
}
.group-logo {
width: 1.99rem;
}
.group-desc {
text-align: center;
color: #999;
margin-top: .14rem;
line-height: 1.6;
}
.group-bd {
border-top: 7px solid #f5f5f5;
background: #fff;
}
.group-bd:last-child {
border-bottom: .25rem solid #f5f5f5;
}
.item {
padding: .20rem 0;
position: relative;
display: flex;
align-items: center;
}
.border-bottom {
border: 0;
margin: 0 .17rem;
}
.item-logo {
display: inline-block;
width: 24px;
height: 24px;
}
.item-desc {
font-size: 14px;
font-weight: 400;
margin-left: 8px;
color: #000;
}
.item-toggle {
position: absolute;
right: 0;
width: 12px;
height: auto;
}
.item-toggle-extend {
position: absolute;
right: 0;
height: 12px !important;
width: auto;
}
.sub-item {
position: relative;
padding: 16px 0;
padding-left: 32px;
display: flex;
align-items: center;
font-size: 13px;
color: #444;
}
.sub-item:last-child:after {
height: 0;
}
.sub-item-goto {
position: absolute;
right: .23rem;
}
.sub-item-desc-tra {
margin-left: .17rem;
color: #999;
}
.sub-item-desc {
font-size: 14px;
}
.search {
width: 100%;
position: absolute;
padding: 0 16px;
z-index: 1;
bottom: 0;
}
.search-box {
position: relative;
display: flex;
height: 44px;
font-size: .14rem;
color: #ccc;
border-radius: 100px;
background-color: #fff;
align-items: center;
}
.search-box:before {
content: "";
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
width: 200%;
height: 200%;
border: 1px solid #e6e6e6;
border-radius: 100px;
transform: scale(.5);
transform-origin: 0 0;
pointer-events: none;
}
.search-icon {
width: .18rem;
height: .18rem;
margin: 0 .08rem 0 .24rem;
background: url(https://b.bdstatic.com/searchbox/icms/searchbox/img/search.png) no-repeat center;
background-size: contain;
}
.search-icon image {
width: 100%;
height: 100%;
}
.hover {
position: relative;
}
.hover::after {
content: '';
position: absolute;
top: 5px;
bottom: 5px;
left: 0;
right: 0;
background-color: rgba(255, 255, 255, 0.7);
border-radius: 5px;
}
.page {
position: relative;
height: 100vh;
width: 100vw;
}
.head-bg {
position: relative;
}
.head-bg-logo {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
position: absolute;
z-index: 1;
}
.head-bg-logo > view {
font-size: 16px;
font-weight: 400;
line-height: 20px;
color: rgba(255, 255, 255, 0.7);
margin-top: 12px;
}
.head-bg-img {
width: 100%;
}
.card-container {
padding: 16px;
padding-top: 24px;
}
.card-content {
background-color: white;
border-radius: 12px;
}
.card-item {
padding: 18px 0;
position: relative;
display: flex;
align-items: center;
margin: 0 16px;
font-size: 14px;
font-weight: 400;
}
.card-item::after {
content: "";
position: absolute;
bottom: 0;
height: 1px;
background: #efefef;
left: 0;
right: 0;
}
.card-item-last::after {
content: "";
height: 0;
display: none;
}
.card-item-extend {
margin: 0 16px;
}

70
xhs-mini-demos/entry/api/api.js Normal file
View File

@@ -0,0 +1,70 @@
/* global Page, xhs */
const apiItems = require('../../config');
Page({
data: {
/**
* 以下文档中有的但是没有相应展示组件的会标识todo
*/
items: apiItems.api,
fixTop: 0,
statusBarHeight: xhs.getSystemInfoSync().statusBarHeight
},
onLoad(e) {
let t = this;
xhs.createSelectorQuery().select('.group-logo').boundingClientRect(function (rect) {
t.data.fixTop = rect.top;
}).exec();
this.setData({isSetTabBarPage: !!e.data});
},
toggleClick(e) {
// console.log('e', e, e.currentTarget.dataset.id)
// 无子项直接跳转
let apiName = e.currentTarget.dataset.id;
// if (apiName) {
// xhs.navigateTo({
// url: '/component/' + apiName + '/' + apiName
// });
// return;
// }
// 子项展开与收起
const index = e.currentTarget.dataset.index;
const items = this.data.items;
this.setData(`items[${index}].open`, !items[index].open);
},
oneItemClick(e) {
let apiName = e.currentTarget.dataset.id;
let show = e.currentTarget.dataset.show;
if (show === 'no') {
xhs.showToast({
title: '该项能力暂不支持',
icon: 'none'
});
return;
}
if (show === 'not') {
xhs.showToast({
title: '未开放，敬请期待',
icon: 'none'
});
return;
}
xhs.navigateTo({
url: '/api-case/' + apiName + '/' + apiName
});
},
openSearch() {
xhs.navigateTo({
url: '/entry/search/search'
});
}
});

6
xhs-mini-demos/entry/api/api.json Normal file
View File

@@ -0,0 +1,6 @@
{
"navigationBarTitleText": "小红书小程序示例",
"backgroundColor": "#EFF1F2",
"navigationStyle": "custom",
"usingComponents": {}
}

39
xhs-mini-demos/entry/api/api.xhsml Normal file
View File

@@ -0,0 +1,39 @@
<view class="page">
<view class="head-bg">
<view class="head-bg-logo">
<image style="width: 154px;" src="../../image/logo.png" mode="widthFix"/>
<view>官方演示小程序</view>
</view>
<view class="search">
<view class="search-box" bindtap="openSearch">
<view class="search-icon">
<image src="../../image/search_1.5.png"></image>
</view>
<text>搜索组件、能力或指南</text>
</view>
</view>
<image class="head-bg-img" src="../../image/Union.png" mode="widthFix"/>
</view>
<view class="card-container">
<view class="card-content">
<view xhs:for-items="{{items}}" xhs:for-item="item" xhs:key="*item">
<view class="card-item {{item.open ? '' : 'item-close'}} {{index+1 === items.length && !item.open ? 'card-item-last' : ''}}" bindtap="toggleClick" data-index="{{index}}" data-id="{{item.id}}">
<image class="item-logo" src="{{item.icon}}"></image>
<text class="item-desc">{{item.name}}</text>
<image xhs:if="{{item.id}}" class="item-logo item-toggle" src="https://b.bdstatic.com/searchbox/icms/searchbox/img/right_arrow.png"></image>
<image xhs:else class="item-logo item-toggle" src="{{item.open ? '../../image/top.png' : '../../image/bottom.png'}}" mode="widthFix"></image>
</view>
<view xhs:if="{{item.open}}" class="card-item-extend">
<view hover-class="hover" xhs:for-items="{{item.list}}" xhs:for-item="subItem" bindtap="oneItemClick" data-id="{{subItem.id}}" data-show="{{subItem.show}}">
<view class="sub-item">
<text class="sub-item-desc">{{subItem.subName}}</text>
<text class="sub-item-desc-tra">{{subItem.subNameTra}}</text>
<image class="item-logo item-toggle-extend" src="../../image/right.png" mode="heightFix"></image>
</view>
</view>
</view>
</view>
</view>
</view>
</view>