更新记录
1.0.0（2025-08-23）
顶部：搜索栏 + 分类导航（宠物分类、功能分类、品牌分类）
中部：侧边栏（为您推荐、猫粮专区等）
底部：商品列表（卡片形式展示）
平台兼容性
uni-app(4.07)
| Vue2 |
Vue3 |
Chrome |
Safari |
app-vue |
app-nvue |
Android |
iOS |
鸿蒙 |
| - |
√ |
√ |
√ |
√ |
- |
- |
- |
- |
| 微信小程序 |
支付宝小程序 |
抖音小程序 |
百度小程序 |
快手小程序 |
京东小程序 |
鸿蒙元服务 |
QQ小程序 |
飞书小程序 |
快应用-华为 |
快应用-联盟 |
| √ |
- |
- |
- |
- |
- |
- |
- |
- |
- |
- |
uni-app x(4.07)
| Chrome |
Safari |
Android |
iOS |
鸿蒙 |
微信小程序 |
| √ |
√ |
- |
- |
- |
√ |
# 宠物商城分类插件
开发文档参考：https://hx.dcloud.net.cn
本插件使用步骤：
- 查找插件
进入插件市场：打开 HBuilderX 编辑器，点击菜单栏中的 “插件” -> “插件市场”，或者直接访问uni-app 插件市场官网 。
搜索插件：在插件市场的搜索框中输入关键词，查找本插件，比如搜索 “商城分类” 。
筛选插件：筛选出宠物商城分类插件。
- 安装插件
方式一：在 HBuilderX 中安装
在插件市场找到目标插件后，点击进入插件详情页。
点击 “使用 HBuilderX 导入插件” 按钮（如果是免费插件，直接导入；如果是付费插件，需要先购买 ）。
选择要导入插件的 uni-app 项目，确认导入。导入成功后，插件会被放置在项目的 uni_modules 目录下。
方式二：通过命令行安装（适用于发布到 npm 的插件）
打开命令行工具，进入你的 uni-app 项目根目录。
执行 npm install 插件名称 命令，例如 npm install my-uniapp-plugin 。安装完成后，同样可以在项目的 uni_modules 目录下找到该插件。
- 配置插件（部分插件需要）
有些插件在使用前需要进行配置，比如设置插件的初始化参数、配置接口地址等，常见的配置方式有：
修改项目配置文件：可能需要在 manifest.json 文件的 uni_modules 字段中配置插件相关信息，比如插件的自定义参数。
在页面或全局中设置：部分插件要求在使用的页面或者全局的 main.js 中进行初始化设置，例如：
// 引入插件
vue
import PetMallCategory from 'pet-mall-category';
import {ref, watch, computed } from 'vue'
import PetMallCategory from '@/components/PetMallCategory.vue'
const title = ref('Hello')
const categoryFlag = ref("")
const categoryAll = ref("all")
const tabs = ref([
{ label: '宠物分类', src: '/static/mall/pet-category.png', key: 'pet' },
{ label: '功能分类', src: '/static/mall/function-category.png', key: 'function' },
{ label: '其他分类', src: '/static/mall/brand-category.png', key: 'brand' }
]);
const filters = ref([
{ label: '综合', isextend: false, key: 'comprehensive', src:'' },
{ label: '销量', isextend: false, key: 'sales', src:'' },
{ label: '价格', isextend: true, key: 'price', src:'/static/mall/extend.png' },
{ label: '上新', isextend: false, key: 'new', src:'' }
]);
const currentTab = ref('pet');
const currentFilter = ref('comprehensive');
const searchKeyword = ref('');
const categories = ref([]);
const petFlag = ref("");
// 分类数据
const petCategories = [
{ id: 'all', name: '全部商品' },
{ id: 'cat', name: '猫粮专区' },
{ id: 'dog', name: '狗粮专区' },
{ id: 'others', name: '其他商品' }
];
categories.value = petCategories;
const funCategories = [
{ id: 'all', name: '全部商品' },
{ id: 'main', name: '主粮' },
{ id: 'ls', name: '零食' },
{ id: 'bjp', name: '保健品' },
{ id: 'liuzhi', name: '流质食品' }
];
const brandCategories = [
{ id: 'all', name: '全部商品' },
{ id: 'jinkou', name: '进口' },
{ id: 'guochan', name: '国产' }
];
// 商品数据
const products = ref([
{ id: 1, name: '卫加全价猫粮5斤装', price: 3999, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'cat', image: '/static/mall/cat_food_1.png' },
{ id: 2, name: '纯棉T恤', price: 99, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'cat', image: '/static/mall/cat_food_2.png' },
{ id: 3, name: '沙发抱枕', price: 59, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'dog', image: '/static/mall/cat_food_1.png' },
{ id: 4, name: '编程书籍', price: 129, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'dog', image: '/static/mall/cat_food_2.png' },
{ id: 5, name: '跑步鞋', price: 499, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'dog', image: '/static/mall/cat_food_1.png' },
{ id: 6, name: '无线耳机', price: 799, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'dog', image: '/static/mall/cat_food_2.png' },
{ id: 1, name: '卫加全价猫粮5斤装', price: 3999, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'dog', image: '/static/mall/cat_food_1.png' },
{ id: 2, name: '纯棉T恤', price: 99, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'others', image: '/static/mall/cat_food_2.png' },
{ id: 3, name: '沙发抱枕', price: 59, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'others', image: '/static/mall/cat_food_1.png' },
{ id: 4, name: '编程书籍', price: 129, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'others', image: '/static/mall/cat_food_2.png' },
{ id: 5, name: '跑步鞋', price: 499, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'others', image: '/static/mall/cat_food_1.png' },
{ id: 6, name: '无线耳机', price: 799, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'others', image: '/static/mall/cat_food_2.png' },
]);
const petProducts = ref([
{ id: 1, name: '卫加全价猫粮5斤装', price: 3999, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'cat', image: '/static/mall/cat_food_1.png' },
{ id: 2, name: '纯棉T恤', price: 99, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'cat', image: '/static/mall/cat_food_2.png' },
{ id: 3, name: '沙发抱枕', price: 59, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'dog', image: '/static/mall/cat_food_1.png' },
{ id: 4, name: '编程书籍', price: 129, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'dog', image: '/static/mall/cat_food_2.png' },
{ id: 5, name: '跑步鞋', price: 499, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'dog', image: '/static/mall/cat_food_1.png' },
{ id: 6, name: '无线耳机', price: 799, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'dog', image: '/static/mall/cat_food_2.png' },
{ id: 1, name: '卫加全价猫粮5斤装', price: 3999, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'dog', image: '/static/mall/cat_food_1.png' },
{ id: 2, name: '纯棉T恤', price: 99, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'others', image: '/static/mall/cat_food_2.png' },
{ id: 3, name: '沙发抱枕', price: 59, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'others', image: '/static/mall/cat_food_1.png' },
{ id: 4, name: '编程书籍', price: 129, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'others', image: '/static/mall/cat_food_2.png' },
{ id: 5, name: '跑步鞋', price: 499, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'others', image: '/static/mall/cat_food_1.png' },
{ id: 6, name: '无线耳机', price: 799, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'others', image: '/static/mall/cat_food_2.png' },
]);
const funProducts = ref([
{ id: 1, name: '卫加全价猫粮5斤装', price: 3999, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'main', image: '/static/mall/cat_food_1.png' },
{ id: 2, name: '纯棉T恤', price: 99, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'main', image: '/static/mall/cat_food_2.png' },
{ id: 3, name: '沙发抱枕', price: 59, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'ls', image: '/static/mall/cat_food_1.png' },
{ id: 4, name: '编程书籍', price: 129, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'ls', image: '/static/mall/cat_food_2.png' },
{ id: 5, name: '跑步鞋', price: 499, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'ls', image: '/static/mall/cat_food_1.png' },
{ id: 6, name: '无线耳机', price: 799, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'bjp', image: '/static/mall/cat_food_2.png' },
{ id: 1, name: '卫加全价猫粮5斤装', price: 3999, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'bjp', image: '/static/mall/cat_food_1.png' },
{ id: 2, name: '纯棉T恤', price: 99, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'liuzhi', image: '/static/mall/cat_food_2.png' },
{ id: 3, name: '沙发抱枕', price: 59, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'liuzhi', image: '/static/mall/cat_food_1.png' },
{ id: 4, name: '编程书籍', price: 129, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'liuzhi', image: '/static/mall/cat_food_2.png' },
{ id: 5, name: '跑步鞋', price: 499, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'liuzhi', image: '/static/mall/cat_food_1.png' },
{ id: 6, name: '无线耳机', price: 799, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'liuzhi', image: '/static/mall/cat_food_2.png' },
]);
const brandProducts = ref([
{ id: 1, name: '卫加全价猫粮5斤装', price: 3999, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'jinkou', image: '/static/mall/cat_food_1.png' },
{ id: 2, name: '纯棉T恤', price: 99, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'jinkou', image: '/static/mall/cat_food_2.png' },
{ id: 3, name: '沙发抱枕', price: 59, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'guochan', image: '/static/mall/cat_food_1.png' },
{ id: 4, name: '编程书籍', price: 129, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'guochan', image: '/static/mall/cat_food_2.png' },
{ id: 5, name: '跑步鞋', price: 499, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'guochan', image: '/static/mall/cat_food_1.png' },
{ id: 6, name: '无线耳机', price: 799, desc1: '限时特惠', desc2: '满49元保邮', sales: '200', category: 'guochan', image: '/static/mall/cat_food_2.png' },
]);
watch(()=>categoryFlag,(newVal,oldVal)=>{
currentCategory.value = 'all';
if(newVal=='pet'){
categories.value = petCategories;
currentCategory = 'pet';
petFlag.value = 'pet';
}else if(newVal=='function'){
categories.value = funCategories;
currentCategory = 'function';
petFlag.value = 'function';
}else if(newVal=='brand'){
categories.value = brandCategories;
currentCategory = 'brand';
petFlag.value = 'brand';
}
})
const handleTabChange = (key) => {
currentCategory.value = 'all';
currentTab.value = key;
if(key=='pet'){
categoryFlag.value = 'pet';
petFlag.value = 'pet';
categories.value = petCategories;
}else if(key=='function'){
categoryFlag.value = 'function';
petFlag.value = 'function';
categories.value = funCategories;
}else if(key=='brand'){
categoryFlag.value = 'brand';
petFlag.value = 'brand';
categories.value = brandCategories;
}
};
const switchFilter = (key) => {
currentFilter.value = key;
};
// 当前选中的分类
const currentCategory = ref('all');
// 处理分类切换
const handleCategoryChange = (categoryId) => {
currentCategory.value = categoryId;
};
const cateAppChange = (categoryId) => {
currentCategory.value = categoryId;
};
// 根据分类过滤商品
const filteredProducts = computed(() => {
if (currentCategory.value === 'all') {
if(petFlag.value=='pet'){
return petProducts.value;
}else if(petFlag.value=='function'){
return funProducts.value;
}else if(petFlag.value=='brand'){
return brandProducts.value;
}
return products.value;
}
if(petFlag.value=='pet'){
return petProducts.value.filter(product => product.category === currentCategory.value);
}else if(petFlag.value=='function'){
return funProducts.value.filter(product => product.category === currentCategory.value);
}else if(petFlag.value=='brand'){
return brandProducts.value.filter(product => product.category === currentCategory.value);
}
return products.value.filter(product => product.category === currentCategory.value);
});
使用 JS-SDK 插件：若是工具类的 JS-SDK 插件，比如网络请求封装插件，在页面中引入并调用其方法：
javascript
运行
import { httpRequest } from '@/uni_modules/my-http-sdk-plugin/utils/request.js';
export default {
async onLoad() {
try {
const res = await httpRequest('https://api.example.com/data');
console.log(res);
} catch (error) {
console.error('请求失败', error);
}
}
};
- 测试与调试
功能测试：在不同的端（如 H5、微信小程序、App）上运行项目，检查插件的功能是否正常，比如 UI 组件的样式是否正确显示、交互功能是否正常触发；JS-SDK 插件的方法调用是否返回预期结果等。
调试排错：如果插件使用过程中出现问题，可以利用 HBuilderX 的调试工具进行排错。在插件代码中添加 console.log 输出调试信息，或者使用断点调试功能，定位问题所在，并根据插件的文档或向插件开发者反馈来解决问题。
- 发布项目
当项目开发完成，确认插件在各端都能正常工作后，就可以按照正常的流程发布 uni-app 项目了。无论是发布到小程序平台，还是打包成 App，插件都会随着项目一同发布，前提是插件的使用符合其授权协议。
收藏人数:
购买源码授权版（
试用
使用 HBuilderX 导入示例项目
赞赏（0）
下载 1
赞赏 0
下载 10298490
赞赏 1730
赞赏
京公网安备：11010802035340号