微信小程序 仿爱回收页面设计-首页设计

最新推荐文章于 2024-06-13 19:58:35 发布
最新推荐文章于 2024-06-13 19:58:35 发布
阅读量428 收藏 8
点赞数 7
文章标签： 微信小程序 小程序
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Lyq2017901206/article/details/135992559
版权

如果你想要在微信小程序中仿照爱回收的页面设计，以下是一些建议和指导：

1. 首页设计：
   - 在首页上展示爱回收的品牌标识和主要信息，以吸引用户的注意。
   - 提供一个搜索栏，让用户可以输入关键词搜索回收物品。
   - 展示一些热门的回收物品或者特价商品，以吸引用户浏览和购买。
   - 提供快捷入口或者分类导航，让用户可以根据自己的需求快速找到适合的回收物品。

2. 估价设计：
   - 在购物车页面展示回收的商品分类，包括商品的品牌图片、名称等。

3. 用户个人中心设计：
   - 提供用户个人中心，展示订单历史、积分记录的商品等信息。
   - 允许用户修改个人资料、收货地址等信息。
   - 提供客服联系方式，方便用户与客服进行沟通和反馈。

本设计使用Vant Weapp UI 组件库

1.首页homeIndex

文件 homeIndex.wxml

<!--pages/home/homeIndex/homeIndex.wxml-->
<van-tabbar active="{{ active }}" active-color="rgb(224, 88, 9)" bind:change="onChange">
    <van-tabbar-item icon="home-o">首页</van-tabbar-item>
    <van-tabbar-item icon="gold-coin-o">
        <view style="margin-bottom: 0.75rem;font-size: 0.95rem;font-weight: 600">
            估价
        </view>
    </van-tabbar-item>
    <van-tabbar-item icon="contact-o">我的</van-tabbar-item>
</van-tabbar>



<view wx:if="{{active==1}}">
    <valuation-center id="valuationcenter"></valuation-center>
</view>
<view wx:if="{{active==2}}">
    <user-center id="usercenter"></user-center>
</view>

<view wx:if="{{active==0}}">
    <view>
        <view class="top">
            <van-sticky>
                <van-row style="height: 2rem;margin-top: 1.5rem;background-color: white">
                    <!-- <van-col span="2">
                    <image style="height: 2rem;width: 2rem;margin-left: 0.5rem;background-color: #56c5a1" class="login-img" src="/pages/image/logo.png"></image>
                </van-col> -->
                    <van-col span="24">
                        <van-search style="height: 1.6rem;" shape="round" bind:clear="onCancelSearch" background="white" value="{{searchValue}}" placeholder="请输入搜索关键词" use-action-slot bind:change="onSearchChange" bind:search="onSearch">
                            <view style="color: black;padding-left: 5px;padding-right: 5px;" slot="action" bind:tap="onSearchClick">搜索</view>
                        </van-search>
                    </van-col>
                    <!-- <van-col span="2">span: 8</van-col> -->
                </van-row>
            </van-sticky>
        </view>

    </view>

    <view class="item-type">
        <van-grid column-num="4" border="{{ false }}">
            <van-grid-item use-slot wx:for="{{ goodsList}}" wx:for-item="list">
                <image class="item-type-image" src="{{list.good_icon}}" />
                <text class="item-type-title">{{list.good_title}}</text>
            </van-grid-item>
        </van-grid>
    </view>

    <view class="nearby-stores">
        <view class="title">门店</view>
        <view>
            <view class="store">
                <van-row>
                    <van-col span="6">
                        <image class="store-image" src="https://img0.baidu.com/it/u=2195324720,1171192494&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" />
                    </van-col>
                    <van-col span="18">
                        <view class="image-right">
                            <view class="store-title">大王回收店</view>
                            <view class="store-address">地址：云南省昆明市盘龙区</view>
                            <view class="business-hours">营业时间：8:00-2400</view>


                        </view>
                    </van-col>
                </van-row>
            </view>

            <view class="store">
                <van-row>
                    <van-col span="6">
                        <image class="store-image" src="https://img0.baidu.com/it/u=2195324720,1171192494&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=667" />
                    </van-col>
                    <van-col span="18">
                        <view class="image-right">
                            <view class="store-title">大王回收店</view>
                            <view class="store-address">地址：云南省昆明市盘龙区</view>
                            <view class="business-hours">营业时间：8:00-24:00</view>
                        </view>
                    </van-col>
                </van-row>
            </view>


        </view>
    </view>

</view>

文件 homeIndex.wxsswenj

Page {
    background-color: #f7f7f7;
}

/* 顶部搜索框 */
.top {
    background-color: white;
    border-bottom-left-radius: 40px;
    /* 左下角圆角 */
    border-bottom-right-radius: 40px;
    /* 右下角圆角 */
}

.item-type{
    background-color: white;
    padding: 0.5rem 0.5rem;
    margin: 0.25rem;
    border-radius: 10rpx;
    height: 100%;
}

.item-type-image{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.item-type-title{
    margin-top: 0.25rem;
    font-size: 0.85rem;
    font-family: "仿宋";
    font-weight: 900;
}

.nearby-stores{
    background-color: white;
    padding: 0.5rem 0.5rem;
    margin: 0.25rem;
    border-radius: 10rpx;
    height: 100%;
}

.nearby-stores .title{
    font-size: 0.95rem;
    font-weight: 900;
    font-family: "微软雅黑";
}

.nearby-stores .store{
    padding: 0.5rem 0rem;
}

.store-image{
    width: 100%;
    height: 4rem;
    border-radius: 20rpx;
}

.image-right{
    margin-left: 0.75rem;
}

.store-title{
    font-size: 0.85rem;
    font-weight: 900;
    font-family: "仿宋";
}

.store-address{
    font-size: 0.75rem;
    margin-top: 0.35rem;
}

.business-hours{
    font-size: 0.75rem;
    margin-top: 0.35rem;
}

 文件 homeIndex.js

// pages/home/homeIndex/homeIndex.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        active: 0,
        goodsList:[
            {
                id:1,
                good_title:"手机",
                good_icon:"https://img2.baidu.com/it/u=2318594456,580534092&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
            }, {
                id:2,
                good_title:"笔记本",
                good_icon:"https://img1.baidu.com/it/u=3926980927,1678879058&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=518"
            },  {
                id:3,
                good_title:"平板",
                good_icon:"https://img.99ppt.com/pic/f09d7de1-1066-46d1-8de3-94168ad9ec49.jpg"
            },  {
                id:4,
                good_title:"智能耳机",
                good_icon:"https://img1.baidu.com/it/u=2316088800,3457899691&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
            },  {
                id:5,
                good_title:"摄影摄像",
                good_icon:"https://img2.baidu.com/it/u=1972770341,27037581&fm=253&fmt=auto&app=138&f=PNG?w=315&h=315"
            },  {
                id:6,
                good_title:"智能手表",
                good_icon:"https://img2.baidu.com/it/u=1910319285,1757449789&fm=253&fmt=auto&app=138&f=JPEG?w=330&h=500"
            }, 
            {
                id:7,
                good_title:"乐器",
                good_icon:"https://img2.baidu.com/it/u=3468014538,2528336133&fm=253&fmt=auto&app=138&f=JPEG?w=350&h=379"
            },  {
                id:8,
                good_title:"腕表",
                good_icon:"https://img1.baidu.com/it/u=1727431678,2367004461&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=958"
            },  {
                id:9,
                good_title:"包袋",
                good_icon:"https://picnew13.photophoto.cn/20181228/fenhongseshoutibaochahua-31308116_1.jpg"
            },  {
                id:10,
                good_title:"金银珠宝",
                good_icon:"https://img2.baidu.com/it/u=2543510446,829878126&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=501"
            },  {
                id:11,
                good_title:"香烟名酒",
                good_icon:"https://img2.baidu.com/it/u=2822975092,1866783435&fm=253&fmt=auto&app=138&f=JPEG?w=538&h=500"
            },  {
                id:12,
                good_title:"全部",
                good_icon:"https://img0.baidu.com/it/u=212003088,440711283&fm=253&fmt=auto&app=138&f=JPEG?w=256&h=256"
            }, 
        ]
    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {},

    onChange(event) {
        // event.detail 的值为当前选中项的索引
        this.setData({
            active: event.detail
        });
        if (event.detail == 0) {
            // this.onCancelSearch()
        }
        if (event.detail == 1) {
            let Mymessage = this.selectComponent('#valuationcenter'); // 页面获取自定义组件实例
            Mymessage.getvaluationInfo();
        }
        if (event.detail == 2) {
            let countDown = this.selectComponent('#usercenter'); // 页面获取自定义组件实例
            countDown.getMyInfo(); // 通过实例调用组件事件
        }

    },


    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

文件 homeIndex.json

{
    "usingComponents": {
        "user-center": "/pages/user/myself/userCenter/userCenter",
        "valuation-center":"/pages/user/myself/valuationCenter/valuationCenter"
    }
}

2.个人中心 userCenter

文件 userCenter.wxml

<view class="user-center">
    <view class="head-portrait ">
        <van-row>
            <van-col span="6">
                <image class="userinfo-avatar" src="{{logoutAvatar}}" mode="cover"></image>
            </van-col>
            <van-col span="16">
                <van-row>
                    <van-col>
                        <text class="userName">
                            {{userInfo.nickname?userInfo.nickname:'请进行登录'}}
                        </text>
                    </van-col>
                    <van-col>
                        <view class="Sign" bindtap="onSignin">
                            <van-icon color="black" name="points" />
                            签到
                        </view>
                    </van-col>
                </van-row>
            </van-col>
            <van-col span="2">
                <view class="Settings">
                    <van-icon size="40rpx" name="setting-o" color="white" />
                </view>
            </van-col>
            <view style="color: #37b38b;">.</view>
            <view class="userPhone">{{userInfo.mobile?userInfo.mobile:'暂无电话'}}</view>
        </van-row>

        <view class="wallet">
            <view class="notecase">
                <view style="margin-top: 0.55rem;">
                    <van-row>
                        <van-col>
                            <van-icon size="1.25rem" name="paid" />
                        </van-col>
                        <van-col> <text style="margin-left: 0.25rem;color: black;font-weight: 800;font-size: 0.90;">回收钱包</text>
                        </van-col>
                    </van-row>
                </view>
                <view style="margin-top: 1.25rem;">
                    <van-row>
                        <van-col span="16">
                            <text style="color: black;font-size: 0.85rem;font-weight: 700;">￥</text>
                            <text style="color: black;font-size: 1.85rem;font-weight: 700;">0.00</text>
                        </van-col>
                        <van-col span="8">
                            <view class="check">
                                查看
                            </view>

                        </van-col>
                    </van-row>
                </view>
            </view>
        </view>
    </view>


    <view class="navigationList">
        <view style="margin-top: 30rpx;">
            <view class='middle'>
                <view class="view_2">
                    <view class="view_tupianwenzi" bindtap="webViewAll" id="1">
                        <image class="image_tupian" src="/pages/image/recall_order.png"></image>
                        <text class="text_1">订单中心</text>
                    </view>
                    <view class="view_tupianwenzi" bindtap="webViewAll" id="2">
                        <image class="image_tupian" src="/pages/image/integral.png"></image>
                        <text class="text_1">积分记录</text>
                    </view>
                    <view class="view_tupianwenzi" bindtap="webViewAll" id="3">
                        <image class="image_tupian" src="/pages/image/volume.png"></image>
                        <text class="text_1">领卷中心</text>
                    </view>
                    <!-- <view class="view_tupianwenzi" bindtap="jianjie" bindtap="webViewAll" id="3">
                    <image class="image_tupian" src="/pages/image/recall_order.png"></image>
                    <text class="text_1">全部订单</text>
                </view> -->
                </view>
            </view>
        </view>
    </view>

    <view>
        <!-- 最后一部分 -->
        <view class='container_4'>
            <van-cell title="个人资料" icon="contact" is-link id="4" bindtap="webViewAll" />
            <van-cell title="地址管理" icon="location" is-link id="7" bindtap="webViewAll" />
            <van-cell title="投诉建议" icon="records" is-link id="5" bindtap="webViewAll" />
            <van-cell title="帮助中心" icon="warning" is-link id="6" bindtap="webViewAll" />
        </view>
    </view>

</view>

文件 userCenter.wxss

<view class="user-center">
    <view class="head-portrait ">
        <van-row>
            <van-col span="6">
                <image class="userinfo-avatar" src="{{logoutAvatar}}" mode="cover"></image>
            </van-col>
            <van-col span="16">
                <van-row>
                    <van-col>
                        <text class="userName">
                            {{userInfo.nickname?userInfo.nickname:'请进行登录'}}
                        </text>
                    </van-col>
                    <van-col>
                        <view class="Sign" bindtap="onSignin">
                            <van-icon color="black" name="points" />
                            签到
                        </view>
                    </van-col>
                </van-row>
            </van-col>
            <van-col span="2">
                <view class="Settings">
                    <van-icon size="40rpx" name="setting-o" color="white" />
                </view>
            </van-col>
            <view style="color: #37b38b;">.</view>
            <view class="userPhone">{{userInfo.mobile?userInfo.mobile:'暂无电话'}}</view>
        </van-row>

        <view class="wallet">
            <view class="notecase">
                <view style="margin-top: 0.55rem;">
                    <van-row>
                        <van-col>
                            <van-icon size="1.25rem" name="paid" />
                        </van-col>
                        <van-col> <text style="margin-left: 0.25rem;color: black;font-weight: 800;font-size: 0.90;">回收钱包</text>
                        </van-col>
                    </van-row>
                </view>
                <view style="margin-top: 1.25rem;">
                    <van-row>
                        <van-col span="16">
                            <text style="color: black;font-size: 0.85rem;font-weight: 700;">￥</text>
                            <text style="color: black;font-size: 1.85rem;font-weight: 700;">0.00</text>
                        </van-col>
                        <van-col span="8">
                            <view class="check">
                                查看
                            </view>

                        </van-col>
                    </van-row>
                </view>
            </view>
        </view>
    </view>


    <view class="navigationList">
        <view style="margin-top: 30rpx;">
            <view class='middle'>
                <view class="view_2">
                    <view class="view_tupianwenzi" bindtap="webViewAll" id="1">
                        <image class="image_tupian" src="/pages/image/recall_order.png"></image>
                        <text class="text_1">订单中心</text>
                    </view>
                    <view class="view_tupianwenzi" bindtap="webViewAll" id="2">
                        <image class="image_tupian" src="/pages/image/integral.png"></image>
                        <text class="text_1">积分记录</text>
                    </view>
                    <view class="view_tupianwenzi" bindtap="webViewAll" id="3">
                        <image class="image_tupian" src="/pages/image/volume.png"></image>
                        <text class="text_1">领卷中心</text>
                    </view>
                    <!-- <view class="view_tupianwenzi" bindtap="jianjie" bindtap="webViewAll" id="3">
                    <image class="image_tupian" src="/pages/image/recall_order.png"></image>
                    <text class="text_1">全部订单</text>
                </view> -->
                </view>
            </view>
        </view>
    </view>

    <view>
        <!-- 最后一部分 -->
        <view class='container_4'>
            <van-cell title="个人资料" icon="contact" is-link id="4" bindtap="webViewAll" />
            <van-cell title="地址管理" icon="location" is-link id="7" bindtap="webViewAll" />
            <van-cell title="投诉建议" icon="records" is-link id="5" bindtap="webViewAll" />
            <van-cell title="帮助中心" icon="warning" is-link id="6" bindtap="webViewAll" />
        </view>
    </view>

</view>

文件 userCenter.js

// pages/user/myself/userCenter/userCenter.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        userInfo: {
            avatar: " https://yiguyun.kaichuan668.com/uploadFolder/ed0677c5-749f-4697-82d9-c1bb9cfb370b.png",
            nickname: "进空间看看"
        },
        loginAvatar: "https://yiguyun.kaichuan668.com/uploadFolder/ed0677c5-749f-4697-82d9-c1bb9cfb370b.png",
        logoutAvatar: " https://yiguyun.kaichuan668.com/uploadFolder/51ab63be-3668-4b12-af92-54a162412a2d.png"

    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {},


    getMyInfo() {
        console.log("个人中心")
    },

    webViewAll(e) {
        const value = e.currentTarget.id
        return
        switch (value) {
            case "3": //加价卷兑换
                wx.navigateTo({
                    url: '...'
                })
                break;
            case "5": //投诉建议
                wx.navigateTo({
                    url: '...'
                })
                break;
            case "6": //帮助中心
                wx.navigateTo({
                    url: '...'
                })
                break;
            case "7": //帮助中心
                wx.navigateTo({
                    url: '...'
                })
                break;
            default:
                wx.navigateTo({
                    url: '...',
                })
                break;
        }
    },


    // 签到
    onSignin() {

    },
    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

3.估价中心  valuationCenter

文件 valuationCenter.wxml

<view class="valuation-center">
    <view class="top">
        <van-sticky>
            <van-row style="height: 2rem;margin-top: 1.5rem;background-color: white">
                <!-- <van-col span="2">
                    <image style="height: 2rem;width: 2rem;margin-left: 0.5rem;background-color: #56c5a1" class="login-img" src="/pages/image/logo.png"></image>
                </van-col> -->
                <van-col span="24">
                    <van-search style="height: 1.6rem;" shape="round" bind:clear="onCancelSearch" background="white" value="{{searchValue}}" placeholder="搜索品牌/型号" use-action-slot bind:change="onSearchChange" bind:search="onSearch">
                        <view style="color: black;padding-left: 5px;padding-right: 5px;" slot="action" bind:tap="onSearchClick">搜索</view>
                    </van-search>
                </van-col>
                <!-- <van-col span="2">span: 8</van-col> -->
            </van-row>
        </van-sticky>
    </view>
    <view style="display: flex;">
        <view>
            <van-sidebar active-key="{{ activeKey }}">
                <view wx:for="{{recycleLaber}}">
                    <van-sidebar-item title="{{item.goods}}" />
                </view>
            </van-sidebar>
        </view>

        <view class="item-type">
            <van-grid column-num="4" border="{{ false }}">
                <van-grid-item use-slot wx:for="{{ brandList}}" bindtap="onValuation" wx:for-item="list">
                    <image class="icon-image" src="{{list.brand_logo}}" />
                    <text class="icon-title">{{list.brandName}}</text>
                </van-grid-item>
            </van-grid>
        </view>

        <view >
        
        </view>
    </view>
</view>

文件 valuationCenter.wxss

Page {
    background-color: #f7f7f7;
}

/* 顶部搜索框 */
.top {
    background-color: white;
    border-bottom-left-radius: 40px;
    /* 左下角圆角 */
    border-bottom-right-radius: 40px;
    /* 右下角圆角 */
}

.item-type{
    background-color: white;
    padding: 0.5rem 0.5rem;
    margin: 0.25rem;
    border-radius: 10rpx;
    height: 100%;
}

.icon-image{
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
}

.icon-title{
    margin-top: 0.25rem;
    font-size: 0.85rem;
    font-family: "仿宋";
    font-weight: 900;
}

文件 valuationCenter.js

// pages/user/myself/valuationCenter/valuationCenter.js
Page({

    /**
     * 页面的初始数据
     */
    data: {
        activeKey:0,
        recycleLaber:[
            {
                id:1,
                goods:"手机",
            },
            {
                id:2,
                goods:"笔记本",
            }, {
                id:3,
                goods:"平板",
            }, {
                id:3,
                goods:"摄影摄像",
            },
        ],

        brandList:[
            {
                id:1,
                brandName:"苹果",
                brand_logo:"https://img1.baidu.com/it/u=3874859559,4027725428&fm=253&fmt=auto&app=138&f=PNG?w=500&h=500"
            }, {
                id:2,
                brandName:"华为",
                brand_logo:"https://img1.baidu.com/it/u=3852675456,2656010470&fm=253&fmt=auto&app=120&f=GIF?w=550&h=400"
            },  {
                id:3,
                brandName:"小米",
                brand_logo:"https://img1.baidu.com/it/u=2101092847,1018411334&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=480"
            },  {
                id:4,
                brandName:"荣耀",
                brand_logo:"https://img.zcool.cn/community/01677161a42d6a11013f01cd8750a7.jpg@1280w_1l_2o_100sh.jpg"
            },  {
                id:5,
                brandName:"oppo",
                brand_logo:"https://img1.baidu.com/it/u=2367995204,2182420605&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=333"
            },  {
                id:6,
                brandName:"vivo",
                brand_logo:"https://p8.itc.cn/q_70/images03/20210705/c918968a64364ac99fdda37d2a868b6b.jpeg"
            }, 
            {
                id:7,
                brandName:"三星",
                brand_logo:"https://n.sinaimg.cn/sinakd20200524ac/160/w1920h1440/20200524/7645-itzixrs8451702.jpg"
            },  {
                id:8,
                brandName:"iQoo",
                brand_logo:"https://www.leixue.com/uploads/2019/02/iQOO.jpg%21760"
            }, 
        ]



    },

    /**
     * 生命周期函数--监听页面加载
     */
    onLoad(options) {

    },

    onValuation(){
        wx.navigateTo({
          url: '/pages/user/goods/goodsValuation/goodsValuation',
        })
    },

    getvaluationInfo(){
        console.log("估价中心")
    },

    /**
     * 生命周期函数--监听页面初次渲染完成
     */
    onReady() {

    },

    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {

    },

    /**
     * 生命周期函数--监听页面隐藏
     */
    onHide() {

    },

    /**
     * 生命周期函数--监听页面卸载
     */
    onUnload() {

    },

    /**
     * 页面相关事件处理函数--监听用户下拉动作
     */
    onPullDownRefresh() {

    },

    /**
     * 页面上拉触底事件的处理函数
     */
    onReachBottom() {

    },

    /**
     * 用户点击右上角分享
     */
    onShareAppMessage() {

    }
})

首页页面效果

Da白兔萘糖
关注
  • 7
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
垃圾回收分类查询平台微信小程序端
08-10
垃圾回收分类查询平台微信小程序端
【微信小程序】自定义组件 recycle-view
05-07
电商小程序往往需要展示很多商品，当一个页面展示很多的商品信息的时候，会造成小程序页面的卡顿以及白屏。原因有如下几点： 1. 商品列表数据很大，首次 setData 的时候耗时高 2. 渲染出来的商品列表 DOM 结构多，...
基于微信小程序的社区垃圾回收管理系统小程序
qq_61827376的博客
06-14 503
通过移动互联网这几年的发展，单独的开发某些APP已经到了日幕西山的地步，原因不在于单个的APP功能丰富与否，而是因为用户生态体系的问题。使用智能手机的用户经过多年的使用习惯，已经越来越不喜欢安装各种的APP，除了正常牛活和工作所必须的APP,不喜欢因为喜欢某些内容而被强制安装APP软件了。最近几年，随着微信生态的布局，通过开发微信小程序接口，让广大用户可以通过微信直接访间小程序,不需要去专门安装那些APP，这一点让很多用户喜爱，基本上只要能转向微信生态的业务，许多企业都已经开始拥抱微信小程序。
微信小程序 简单优惠卷页面设计
Lyq2017901206的博客
02-05 1099
【代码】微信小程序 简单优惠卷页面设计。
【基于微信的物品回收小程序的设计与实现】
shenchengyv的博客
11-01 1459
移动互联网的盛行，使得二手交易平台把主战场转移到移动端上。二手交易市场每年大量的成交额令人怦然心动，阿里甚至把闲鱼从淘宝分割出来成为一个单独的App，这足以证明阿里对这块蛋糕的重视，与此同时，58集团也在二手交易的战场上专心孵化自己的移动端产品–转转。当然，想在二手市场分一杯羹的不止于此，诸如爱回收、胖虎等多个独立垂直领域的二手交易平台也在强势出击，建立自己的品牌。2017年1月9日，基于微信生态而生的小程序正式上线，此前App端的二手交易平台纷纷在这个初生的领域内开始布局。
毕业设计-基于微信小程序的智能垃圾分类回收系统
程序员徐师兄的博客
08-22 423
基于微信小程序的智能垃圾分类回收系统，可作为毕业设计小程序页面及功能作如下设计：1 .用户注册登录。垃圾搜索功能，可以搜索对应的垃圾信息，然后对应的信息下显示垃圾的图文回收展示，以及对应的回收种类，有害，无害，可回收等信息，以及垃圾的一些回收操作说明。小程序端用户垃圾预约上门回收。垃圾回收分类信息管理，对应的可以添加不同的垃圾回收分类信息（包括图片，垃圾介绍，回收说明），进行增删改查。新闻管理功能，对应垃圾分类的一些宣传信息发布，图文展示，在小程序首页展示。
微信小程序系统设计总结
JINGWHALE
03-31 1469
小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。基于微信小程序轻快的特点，小程序拟定了小程序界面设计指南和建议。 设计指南建立在充分尊重用户知情权与操作权的基础之上。旨在微信生态体系内，建立友好、高效、一致的用户体验，同时最大程度适应和支持不同需求，实现用户与小程序服务方的共赢。
基于微信小程序的废品回收系统#毕业设计
z459382737的博客
06-16 1202
随着我国经济迅速发展，人们对手机的需求越来越大，各种手机软件也都在被广泛应用，但是对于手机进行数据信息管理，对于手机的各种软件也是备受用户的喜爱，废品回收类小程序被用户普遍使用，为方便用户能够可以随时进行废品回收类小程序的数据信息管理，特开发了基于废品回收类小程序的管理系统。 废品回收类小程序的设计主要是对系统所要实现的功能进行详细考虑，确定所要实现的功能后进行界面的设计，在这中间还要考虑如何可以更好的将功能及页面进行很好的结合，方便用户可以很容易明了的找到自己所需要的信息，还有系统平台后期的可操作性，通过
微信小程序 — 长列表组件 recycle-view 详细教学
热爱思考、活力满满、开朗爱笑的年轻人
09-22 9583
微信小程序 — 长列表组件 recycle-view 踩坑问题全解写在前面引入长列表组件 recycle-view长列表组件 recycle-view 使用细节问题一、如何增加下拉刷新功能？问题二、长列表中如何更新以及重置数据？ 写在前面 列表太长了，原生的 scroll-view 就遭不住了； 当一个页面展示很多信息的时候，会造成小程序页面的卡顿以及白屏。原因有如下几点： 列表数据很大，首次 setData 的时候耗时高 渲染出来的列表 DOM 结构多，每次 setData 都需要创建新的虚拟树、和旧树
【计算机毕业设计】371基于微信小程序的商城
卓怡学长的博客
05-29 940
如今社会上各行各业，都喜欢用自己行业的专属软件工作，互联网发展到这个时候，人们已经发现离不开了互联网。新技术的产生，往往能解决一些老技术的弊端问题。因为传统微信小程序的商城信息管理难度大，容错率低，管理人员处理数据费工费时，所以专门为解决这个难题开发了一个微信小程序的商城管理系统，可以解决许多问题。 微信小程序的商城管理系统按照操作主体分为管理员和用户。管理员的功能。用户的功能等。该系统采用了Mysql数据库，Java语言，Spring Boot框架等技术进行编程实现。 微信小程序的商城管理系统可以提高
微信小程序毕业设计-校园通知小程序系统(源码+说明+演示录像)
05-17
微信小程序毕业设计-校园通知小程序系统(源码+说明+演示录像) 【项目技术】 微信开发者工具+java+mysql 【实现功能】 包括三类用户：学生、老师、管理员。 学生用户只要实现了通知信息的查看，打开首页，查看网站...
基于微信小程序的校园通知系统的设计与实现（微信小程序完整前后端代码）.zip
09-17
学生用户只要实现了通知信息的查看，打开首页，查看网站介绍、通知信息、轮播图信息公告等，通过点击首页的菜单跳转到对应的功能页面菜单，包括网站首页、事项信息、注册登录、个人中心、后台登录。 学生用户通过...
微信小程序项目之校园通知小程序系统的设计与实现(源码+说明).zip
05-20
微信小程序项目之校园通知小程序系统的设计与实现(源码+说明) 【项目技术】 微信开发者工具+java+mysql 【实现功能】 包括三类用户：学生、老师、管理员。 学生用户只要实现了通知信息的查看，打开首页，查看网站...
微信小程序写一个录音机
xj1216wt的博客
06-11 496
微信小程序写一个录音机
微信小程序
异侠
06-11 745
小程序包含一个描述整体程序的app和多个描述各自页面的page一个小程序主体部由三个文件组成，必须放在根目录app.js主要是小程序的逻辑app.json是小程序公共配置app.wxss是小程序公共样式表一个小程序页面由四个文件组成：js、wxml、json和wxss。其中js（逻辑）和wxml（结构）是必须要有的json页面数据wxss页面样式。
微信小程序—页面滑动，获取可视区域数据
weixin_42284117的博客
06-07 645
微信小程序获取可视区域数据。
微信小程序学习笔记（4）
weixin_72330417的博客
06-08 1457
import 有作用域的概念，比如，在一个 wxml（记为 A） 文件中引用了另一个 wxml（记为B），同时，在 B 中引用了其他的 wxml （记为C）文件，那么，在 A 中，只能引用 B 中的 内容，而不会引用 C 中，使用 import 导入的内容。如果一个项目的flex-shrink属性为0，其他项目都为1，则空间不足时，前者不缩小。在flex布局中，用于包含内容的组件成为容器，容器内部的组件成为项目，容器允许包含嵌套。:定义项目的放大比例，默认为0，即如果存在剩余空间，也不放大。
UniApp或微信小程序中scroll-view组件使用show-scrollbar在真机Android或IOS中隐藏不了滚动条的解决办法
最新发布
番茄Salad
06-13 349
show-scrollbar 属性 不论是使用 变量 还是直接使用 布尔值或者直接使用 css 都是在 ios、Android 上是都没有效果。。真机中还是出现滚动条。
用微信小程序设计废品回收平台
07-16
使用微信小程序来设计废品回收平台是一个很好的选择。以下是一些基本的设计思路和步骤： 1. 小程序注册和登录：实现用户注册和登录功能，可以使用微信提供的用户信息来进行验证和登录。 2. 废品种类展示：创建一个页面用于展示不同种类的废品，包括图片、描述和回收价值等信息。可以使用列表或卡片式的布局来展示。 3. 扫码识别废品：利用小程序的扫码功能，用户可以扫描废品上的二维码或条形码，系统可以识别废品种类，并显示相关信息。 4. 回收点查找：通过小程序调用地理位置API，实现根据用户当前位置查找附近的回收点。可以使用地图展示回收点的位置，并提供导航功能。 5. 预约回收：用户可以选择某个回收点，并预约回收时间。系统可以记录用户的预约信息，并提供相应的提醒功能。 6. 废品回收记录：用户可以查看自己的废品回收记录，包括回收时间、废品种类和回收点等信息。 7. 积分和奖励系统：根据用户的废品回收情况，设计一个积分和奖励系统，激励用户积极参与回收活动。 8. 数据统计和报表：根据用户的回收记录和系统数据，可以生成相应的数据统计和报表，用于监控和分析平台的回收情况。 9. 与回收点合作：建立与回收点的合作关系，使其可以在小程序上发布废品回收信息，并与用户进行互动。 以上是一个基本的设计思路，具体的实现细节还需要根据你的具体需求和技术能力来决定。希望对你有所帮助！

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Da白兔萘糖

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值