用小程序·云开发轻松构建二手书商城小程序丨实战

最新推荐文章于 2025-03-18 19:51:30 发布

腾讯云开发CloudBase

最新推荐文章于 2025-03-18 19:51:30 发布

阅读量1.3k

点赞数 1

分类专栏：小程序·云开发 CloudBase 小程序

本文链接：https://blog.youkuaiyun.com/TCB_CloudBase/article/details/101673028

版权

本文介绍如何使用小程序云开发快速搭建一个二手书商城。从登录注册、发布信息、首页展示、详情页功能到启动页设计，全方位解析开发过程中的关键点，包括 vant 组件库的使用、屏幕滚动响应、支付与通知系统的实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

“拱手让书，智慧相传。本文将带大家使用云开发快速开发完整的校园二手书商城“

导语

很多大学有个普遍现象，毕业或者搬校区的时候，成堆成堆的书都被随便处理掉，作为过来人，每每想到都十分痛心可惜，而导致这种情况发生的原因，我认为主要还是归结学校原因，一方面没有提供靠谱便利的平台，另一方面，宣传不到位，基于此开发了这款小程序。下面挑了些开发过程中遇到的典型来讲解实现过程，感兴趣可以一览…

一：登录注册页

目前小程序有了详细的登录规范，参考官方示例，本程序的登录入口做了以下处理：

在需要涉及用户信息的部分，进行Modal提示进入，比如：游客发布、购买等
个人中心，未登录默认显示”点击登录“按钮

好了，先来看看登录页面效果图吧：

登录示例图

手机号获取（相关代码）：

<button class="phone" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
                  <block wx:if="{
    {phone==''}}"> 请点击获取您的手机号</block>
                  <block wx:if="{
    {phone!==''}}"> {
  {phone}}</block>
                  <image wx:if="{
    {phone==''}}" class="right" src="/images/right.png" />
</button>

 //获取用户手机号
      getPhoneNumber: function(e) {
   
            let that = this;
            //判断用户是否授权确认
            if (!e.detail.errMsg || e.detail.errMsg != "getPhoneNumber:ok") {
   
                  wx.showToast({
   
                        title: '获取手机号失败',
                        icon: 'none'
                  })
                  return;
            }
            wx.showLoading({
   
                  title: '获取手机号中...',
            })
            wx.login({
   
                  success(re) {
   
                        wx.cloud.callFunction({
   
                              name: 'regist', // 对应云函数名
                              data: {
   
                                    $url: "phone", //云函数路由参数
                                    encryptedData: e.detail.encryptedData,
                                    iv: e.detail.iv,
                                    code: re.code
                              },
                              success: res => {
   
                                    wx