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

1
xhs-mini-demos/api-case/image/image.css Normal file
View File

@@ -0,0 +1 @@

98
xhs-mini-demos/api-case/image/image.js Normal file
View File

@@ -0,0 +1,98 @@
const __templateJs = require("./templates.js");
const __mergePageOptions = require("../../util/mergePageOptions.js");
const sourceType = [['camera'], ['album'], ['camera', 'album']];
const sizeType = [['compressed'], ['original'], ['compressed', 'original']];
Page(__mergePageOptions({
onShareAppMessage() {
return {
title: '图片',
path: 'packageAPI/pages/image/image'
};
},
data: {
imageList: [],
sourceTypeIndex: 2,
sourceType: ['拍照', '相册', '拍照或相册'],
sizeTypeIndex: 2,
sizeType: ['压缩', '原图', '压缩或原图'],
countIndex: 8,
count: [1, 2, 3, 4, 5, 6, 7, 8, 9],
saveImageToPhotosAlbumLink: '/image/green_tri.png',
imageInfo: ''
},
sourceTypeChange(e) {
this.setData({
sourceTypeIndex: e.detail.value
});
},
sizeTypeChange(e) {
this.setData({
sizeTypeIndex: e.detail.value
});
},
countChange(e) {
this.setData({
countIndex: e.detail.value
});
},
chooseImage() {
const that = this;
xhs.chooseImage({
sourceType: sourceType[this.data.sourceTypeIndex],
sizeType: sizeType[this.data.sizeTypeIndex],
count: this.data.count[this.data.countIndex],
success: res => {
that.setData({
imageList: [...this.data.imageList, ...res.tempFilePaths].slice(-9)
});
console.log(res);
},
fail: res => {}
});
},
previewImage(e) {
const current = e.target.dataset.src;
xhs.previewImage({
current,
urls: this.data.imageList,
success: res => {},
fail: res => {}
});
},
previewImageStatic() {
this.resetApiData();
xhs.previewImage({
current: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/yinyue@2x-c18adacacb.png',
urls: ['https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/yinyue@2x-c18adacacb.png', 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/baike@2x-1fe3db7fa6.png', 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/zhidao@2x-e9b427ecc4.png'],
success: res => {},
fail: res => {}
});
},
handleSaveImageToPhotosAlbumLink(e) {
this.setData({
saveImageToPhotosAlbumLink: e.detail.value
});
},
saveImageToPhotosAlbum() {
xhs.saveImageToPhotosAlbum({
filePath: this.data.saveImageToPhotosAlbumLink,
success: res => {
console.log(res);
},
fail: res => {
console.log(res);
}
});
},
getImageInfo() {
xhs.getImageInfo({
src: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/topnav/yinyue@2x-c18adacacb.png',
success: res => {
this.setData({
imageInfo: JSON.stringify(res)
});
},
fail: res => {}
});
}
}, __templateJs));

8
xhs-mini-demos/api-case/image/image.json Normal file
View File

@@ -0,0 +1,8 @@
{
"navigationBarTitleText": "图片",
"usingComponents": {
"showbox": "../../common/component/showbox/index",
"box": "../../common/component/container/index",
"api-status": "../../common/component/api-status/index"
}
}

65
xhs-mini-demos/api-case/image/image.xhsml Normal file
View File

@@ -0,0 +1,65 @@
<view class="container">
<form>
<showbox title="选择图片">
<box>
<view class="_ui-space">
<view class="_ui-input">
<picker range="{{sourceType}}" bindchange="sourceTypeChange" value="{{sourceTypeIndex}}" mode="selector">
<view>图片来源: {{sourceType[sourceTypeIndex]}}</view>
</picker>
</view>
<view class="_ui-input">
<picker range="{{sizeType}}" bindchange="sizeTypeChange" value="{{sizeTypeIndex}}" mode="selector">
<view>图片质量: {{sizeType[sizeTypeIndex]}}</view>
</picker>
</view>
<view class="_ui-input">
<picker range="{{count}}" bindchange="countChange" value="{{countIndex}}" mode="selector">
<view>数量限制: {{count[countIndex]}}</view>
</picker>
</view>
<view>
<view class="weui-uploader__title">点击可预览选好的图片({{imageList.length}}/{{count[countIndex]}})</view>
<view class="weui-uploader__files">
<block xhs:for="{{imageList}}" xhs:for-item="image">
<view class="weui-uploader__file">
<image class="weui-uploader__img" src="{{image}}" data-src="{{image}}" bindtap="previewImage"></image>
</view>
</block>
</view>
</view>
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="chooseImage">选择图片</button>
</view>
</box>
</showbox>
<showbox title="图片预览">
<box>
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="previewImage">图片预览</button>
</box>
</showbox>
<showbox title="保存文件到本地">
<box>
<view class="_ui-input _mb8">
<input placeholder="保存图片地址" value="{{saveImageToPhotosAlbumLink}}" bindinput="handleSaveImageToPhotosAlbumLink" />
</view>
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="saveImageToPhotosAlbum">保存图片</button>
</box>
</showbox>
<showbox title="获取图片信息(网络图片)">
<box>
<view class="_text_wrap">
{{imageInfo}}
</view>
<button class="_ui-button" hover-class="_ui-button-hover" bindtap="getImageInfo">点击获取</button>
</box>
</showbox>
</form>
</view>
<include src="templates.xhsml" />

217
xhs-mini-demos/api-case/image/templates.js Normal file
View File

@@ -0,0 +1,217 @@
/** 以下内容为自动生成，请勿手动修改 */
module.exports = {
data: {
page_data_0: "",
page_data_1: "",
page_data_2: "",
page_data_3: false,
page_data_4: false,
page_data_5: false,
page_data_6: "",
page_data_7: "",
page_data_8: "",
page_data_9: "",
page_data_10: false,
page_data_11: false,
page_data_12: false,
page_data_13: "",
page_data_14: "",
page_data_15: false,
page_data_16: false,
page_data_17: false,
page_data_18: "",
page_data_19: "",
page_data_20: false,
page_data_21: false,
page_data_22: false,
page_data_23: "",
},
page_fun_1(e) {
this.setData("page_data_0", e.detail.value);
},
page_fun_2(e) {
this.setData("page_data_1", e.detail.value);
},
page_fun_3(e) {
this.setData("page_data_2", e.detail.value);
},
page_fun_0() {
this.setData({
page_data_3: false,
page_data_4: false,
page_data_5: false,
});
xhs.chooseImage({
success: (res) => {
console.log("success", res);
this.setData({
page_data_3: true,
page_data_6: JSON.stringify(res),
});
},
fail: (res) => {
console.log("fail", res);
this.setData({
page_data_4: true,
page_data_6: JSON.stringify(res),
});
},
complete: (res) => {
console.log("complete", res);
this.setData({
page_data_5: true,
});
},
count: this.data.page_data_0,
sizeType: this.data.page_data_1,
sourceType: this.data.page_data_2,
});
},
page_fun_5(e) {
this.setData("page_data_7", e.detail.value);
},
page_fun_6(e) {
this.setData("page_data_8", e.detail.value);
},
page_fun_7(e) {
this.setData("page_data_9", e.detail.value);
},
page_fun_4() {
this.setData({
page_data_10: false,
page_data_11: false,
page_data_12: false,
});
xhs.previewImage({
success: (res) => {
console.log("success", res);
this.setData({
page_data_10: true,
page_data_13: JSON.stringify(res),
});
},
fail: (res) => {
console.log("fail", res);
this.setData({
page_data_11: true,
page_data_13: JSON.stringify(res),
});
},
complete: (res) => {
console.log("complete", res);
this.setData({
page_data_12: true,
});
},
urls: this.data.page_data_7,
showmenu: this.data.page_data_8,
current: this.data.page_data_9,
});
},
page_fun_9(e) {
this.setData("page_data_14", e.detail.value);
},
page_fun_8() {
this.setData({
page_data_15: false,
page_data_16: false,
page_data_17: false,
});
xhs.saveImageToPhotosAlbum({
success: (res) => {
console.log("success", res);
this.setData({
page_data_15: true,
page_data_18: JSON.stringify(res),
});
},
fail: (res) => {
console.log("fail", res);
this.setData({
page_data_16: true,
page_data_18: JSON.stringify(res),
});
},
complete: (res) => {
console.log("complete", res);
this.setData({
page_data_17: true,
});
},
filePath: this.data.page_data_14,
});
},
page_fun_11(e) {
this.setData("page_data_19", e.detail.value);
},
page_fun_10() {
this.setData({
page_data_20: false,
page_data_21: false,
page_data_22: false,
});
xhs.getImageInfo({
success: (res) => {
console.log("success", res);
this.setData({
page_data_20: true,
page_data_23: JSON.stringify(res),
});
},
fail: (res) => {
console.log("fail", res);
this.setData({
page_data_21: true,
page_data_23: JSON.stringify(res),
});
},
complete: (res) => {
console.log("complete", res);
this.setData({
page_data_22: true,
});
},
src: this.data.page_data_19,
});
},
};

120
xhs-mini-demos/api-case/image/templates.xhsml Normal file
View File

@@ -0,0 +1,120 @@
<!-- 以下内容为自动生成，请勿手动修改 -->
<view class="container">
<showbox title="chooseImage演示">
<box>
<api-status
success="{{page_data_3}}"
complete="{{page_data_5}}"
fail="{{page_data_4}}"
text="{{page_data_6}}"
>
</api-status>
<view class="_ui-space _mt8">
<view class="_ui-input">
<input placeholder="count" type="text" bindinput="page_fun_1" />
</view>
<view class="_ui-input">
<input placeholder="sizeType" type="text" bindinput="page_fun_2" />
</view>
<view class="_ui-input">
<input placeholder="sourceType" type="text" bindinput="page_fun_3" />
</view>
<button
class="_ui-button"
hover-class="_ui-button-hover"
bindtap="page_fun_0"
>
触发
</button>
</view>
</box>
</showbox>
<showbox title="previewImage演示">
<box>
<api-status
success="{{page_data_10}}"
complete="{{page_data_12}}"
fail="{{page_data_11}}"
text="{{page_data_13}}"
>
</api-status>
<view class="_ui-space _mt8">
<view class="_ui-input">
<input placeholder="urls" type="text" bindinput="page_fun_5" />
</view>
<view class="_dflex _jc_space-between">
<text class="_dflex _ai_center _px8">是否开启showmenu</text>
<switch color="rgba(255, 36, 66, 1)" bindchange="page_fun_6" />
</view>
<view class="_ui-input">
<input placeholder="current" type="text" bindinput="page_fun_7" />
</view>
<button
class="_ui-button"
hover-class="_ui-button-hover"
bindtap="page_fun_4"
>
触发
</button>
</view>
</box>
</showbox>
<showbox title="saveImageToPhotosAlbum演示">
<box>
<api-status
success="{{page_data_15}}"
complete="{{page_data_17}}"
fail="{{page_data_16}}"
text="{{page_data_18}}"
>
</api-status>
<view class="_ui-space _mt8">
<view class="_ui-input">
<input placeholder="filePath" type="text" bindinput="page_fun_9" />
</view>
<button
class="_ui-button"
hover-class="_ui-button-hover"
bindtap="page_fun_8"
>
触发
</button>
</view>
</box>
</showbox>
<showbox title="getImageInfo演示">
<box>
<api-status
success="{{page_data_20}}"
complete="{{page_data_22}}"
fail="{{page_data_21}}"
text="{{page_data_23}}"
>
</api-status>
<view class="_ui-space _mt8">
<view class="_ui-input">
<input placeholder="src" type="text" bindinput="page_fun_11" />
</view>
<button
class="_ui-button"
hover-class="_ui-button-hover"
bindtap="page_fun_10"
>
触发
</button>
</view>
</box>
</showbox>
</view>