用小程序·云开发轻松构建二手书商城小程序（上）丨实战
导语
今天是“世界读书日”，传承知识，手有余香~本文教你用小程序·云开发轻松制作二手书交易商城小程序，让智慧延续，让温暖传递。
在校园内，学生在毕业或者搬校区时，通常会将大量二手书扔掉或批发出售，十分可惜而且性价比很低。导致这种情况发生的原因，一方面是因为大部分学校内缺少靠谱、便利的交易平台，另一方面，即使校园内存在此类平台也只局限于线下。
基于此，作者开发了这款二手书交易商城小程序，以解决此场景下的二手书再利用效率低的问题。
文章分为上下两部分，本次重点介绍登录注册页、发布信息页与首页的开发流程。
整体功能展示：
一、登录注册页
目前小程序有了详细的登录规范，参考官方示例，本程序的登录入口限制于：
（1）在需要涉及用户信息的部分，进行Modal提示进入，比如：游客发布、购买等
（2）个人中心，未登录默认显示”点击登录“按钮
好了，再来看看登录页面效果图及相应的代码吧：
手机号获取（相关代码）：
<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.hideLoading();
//获取成功，设置手机号码
that.setData({
phone: res.result.data.phoneNumber
})
},
})
},
})
},（1）此处仅展示前端部分核心代码，手机号获取涉及到解密过程，具体的请参考完整demo注册页代码
（2）目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）。
常用联系方式的校检：
if (!(/^\w+((.\w+)|(-\w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(email))) {
wx.showToast({
title: '请输入常用邮箱',
icon: 'none',
duration: 2000
});
return false;
}同理相关正则：
//手机号
/^[1][3,4,5,6,7,8,9][0-9]{9}$/
//QQ号
/^\s*[.0-9]{5,11}\s*$/
//微信号
/^[a-zA-Z]([-_a-zA-Z0-9]{5,19})+$/目前常用手机号，似乎就差10和12字段的没有了。
二、发布信息页
效果图：
发布页：
其中有几点需要注意：
（1）顶部的步骤条，随操作流程一直在变。
（2）步骤改变时，有个横向切换动画。
（3）价格设置，使用了步进器。
以上需要注意的点同出一源——vant组件，用以提高效率，该组件的使用教程可直接看对应官网：https://youzan.github.io/vant-weapp/
textarea部分：
步骤二中备注信息那里使用了层级最高的原生组件textarea，这里有个特别使用注意项：如果下面tabbar是自己写的而非使用的自带原生的tabbar，会出现穿透现象，如下图示例：
我常用的解决办法，通过动态改变textarea的聚焦状况，当点击该区域时，设置聚焦显示真实textarea，当失焦之后，展示为view层，代码如下：
<view class="beibox">
<view wx:if="{{!focus}}" bindtap="focus" >{{beizhu?beizhu:'请输入信息'}}</view>
<textarea wx:if="{{focus}}" focus="{{focus}}" bindblur="loose" bindinput="beiInput" value="{{beizhu}}"></textarea>
</view>data: {
beizhu:'',
focus: false //默认不聚焦
}
//点击聚焦显示textarea隐藏view
focus() {
let that = this;
that.setData({
focus: true
})
},
//失焦隐藏textarea显示view
loose() {
let that = this;
that.setData({
focus: false
})
},三、首页
上面左图是首页的进入是的静态图，右图是下滑之后的动态页面，关于全页面的样式布局方面，使用flex可以轻松搞定，我们重点说这两点：
监控屏幕滚动实现动态响应：
在上图第二张示例图中，随着页面下滑，顶部分类栏也随之置顶，下方也出现了一个返回顶部按钮，实现原理：
监控屏幕下滑高度，当大于我们设定的某个值时，元素进行渲染。
这里我们需要使用页面的一个事件处理函数：onPageScroll
//监测屏幕滚动
onPageScroll: function(e) {
this.setData({
scrollTop: (e.scrollTop) * （wx.getSystemInfoSync().pixelRatio)
})
},（1）函数获取的是页面在垂直方向已滚动的距离（单位px），但我们页面是使用了rpx布局计算，所以后面我们乘以一个像素比（rpx/px）获取对应的rpx值.
（2）在view视图层中通过wx:if或者hidden进行控制显隐，区别在于：wx:if每次隐藏都是销毁了，而hidden只是不呈现，但依旧渲染到页面，具体的使用效果，亲自试试你就会明白的。
下面给个完整的返回顶部示例：
<view class="totop" bindtap="gotop" hidden="{{ scrollTop<500 }}">
<image lazy-load src="/images/top.png" />
</view>data: {
scrollTop: 0 //初始滚动高度为0
},
//监测屏幕滚动
onPageScroll: function(e) {
this.setData({
scrollTop: parseInt((e.scrollTop) * wx.getSystemInfoSync().pixelRatio)
})
},
//返回顶部
gotop() {
wx.pageScrollTo({
scrollTop: 0
})
},本部分文章就先介绍到这里，在下半部分文章中我们将着重介绍二手书交易商城小程序的详情页面、启动页的开发流程。
本文分享自 腾讯云开发CloudBase 微信公众号，前往查看
如有侵权，请联系 cloudcommunity@tencent.com 删除。
本文参与 腾讯云自媒体分享计划 ，欢迎热爱写作的你一起参与！