用小程序·云开发轻松构建二手书商城小程序
“拱手让书,智慧相传。本文将带大家使用云开发快速开发完整的校园二手书商城“ 导语很多大学有个普遍现象,毕业或者搬校区的时候,成堆成堆的书都被随便处理掉,作为过来人,每每想到都十分痛心可惜,而导致这种情况发生的原因,我认为主要还是归结学校原因,一方面没有提供靠谱便利的平台,另一方面,宣传不到位,基于此开发了这款小程序。下面挑了些开发过程中遇到的典型来讲解实现过程,感兴趣可以一览...... 一:登录注册页目前小程序有了详细的登录规范,参考官方示例,本程序的登录入口做了以下处理:
好了,先来看看登录页面效果图吧:
<button class="phone" open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">
<block wx:if="{{phone==''}}"> 请点击获取您的手机号</block>
<{{phone!==''}}"> {{phone}}</image wx:if=}" 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",136);">//云函数路由参数
encryptedData: e.detail.encryptedData,iv: e.detail.iv,code: re.code
},success: res => {
wx.hideLoading();
//获取成功,设置手机号码
that.setData({
phone: res.result.data.phoneNumber
})
},})
},})
},
if (!(/^w+((.w+)|(-w+))@[A-Za-z0-9]+((.|-)[A-Za-z0-9]+).[A-Za-z0-9]+$/.test(email))) {
wx.showToast({
title: '请输入常用邮箱',icon: 'none'
});
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字段的没有了。 二:发布信息页
发布页有几个小地方值得留意:
刚刚上面之所以说这几个点,因为他们都是同出一源--vant组件 此组件的使用教程可直接看对应官网 https://youzan.github.io/vant... 使用组件开发效率会高很多,避免重复工作,同时可以参考部分组件的写法,还是有很多值得学习的地方的。
步骤二中备注信息那里使用了层级最高的原生组件textarea,这里有个特别使用注意项:如果下面tabbar是自己写的而非使用的自带原生的tabbar,会出现穿透现象,如下图示例: 我常用的解决办法,通过动态改变textarea的聚焦状况,当点击该区域时,设置聚焦显示真实textarea,当失焦之后,展示为view层,代码如下: }</view>
<textarea wx:if={{focus}}" focus=}" bindblur="loose" bindinput="beiInput" value={{beizhu}}"></textarea>
</view>
,focus: false //默认不聚焦
}
//点击聚焦显示textarea隐藏view
focus() {
let that = this;
that.setData({
focus: true
})
},136);">//失焦隐藏textarea显示view
loose() {
let that = false
})
},
三:首页上面左图是首页的进入后的初始样式,右图是下滑之后的动态页面,关于页面的样式布局方面,使用flex可以轻松搞定,我们重点说下面这点:
在上图第二张示例图中,随着页面下滑,顶部分类栏也随之置顶,下方也出现了一个返回顶部按钮,实现原理: 监控屏幕下滑高度,当大于我们设定的某个值时,元素进行渲染 这里我们需要使用页面的一个事件处理函数:onPageScroll 下面给个完整的返回顶部示例 <view class="totop" bindtap="gotop" hidden="{{ scrollTop<500 }}">
<image lazy-load src="/images/top.png" />
</view>
data: {
scrollTop: 0 //初始滚动高度为0
},136);">//监测屏幕滚动
onPageScroll: function(e) {
this.setData({
scrollTop: parseInt((e.scrollTop) * wx.getSystemInfoSync().pixelRatio)
})
},136);">//返回顶部
gotop() {
wx.pageScrollTo({
0
})
},254);'>四:详情页面
不仅仅是支付包括提现,此程序都借助了tenpay这个模块,详细介绍: https://www.npmjs.com/package... 在小程序中的实例使用,可以参考之前社区之前发布的文章: 10行代码实现小程序支付功能!丨实战 当然,之前文章是教大家如何实现支付,关于提现流程也一样,先去看看tenpay的商户付款到余额的说明,再看一下此程序的相关代码,读一遍准能懂。
邮件只需要有一个账户即可,短信通知却是要成本的,当然效果要比邮件好,配置起来的话,难度都一样,我们就以短信为例:
https://cloud.tencent.com/pro... 按照提示操作,设置好短信签名,模板等。
新建sms云函数,代码如下: )
const QcloudSms = "qcloudsms_js")
const envid = 'zf-shcud'; //云开发环境id
const appid = 140000001 // 替换成您申请的云短信 AppID 以及 AppKey
const appkey = "abcdefghijkl123445"
const templateId = 1234 // 替换成您所申请模板 ID
const smsSign = "腾讯云" // 替换成您所申请的签名
cloud.init({
env: envid,})
// 云函数入口函数
exports.main = async (event,context) => new Promise((resolve,reject) => {
/*单发短信示例为完整示例,更多功能请直接替换以下代码*/
var qcloudsms = QcloudSms(appid,appkey);
var ssender = qcloudsms.SmsSingleSender();
var params = ["测试内容"];
// 获取发送短信的手机号码
var mobile = event.mobile
// 获取手机号国家/地区码
var nationcode = event.nationcode
ssender.sendWithParam(nationcode,mobile,templateId,params,smsSign,"",(err,res,resData) => {
/*设置请求回调处理,这里只是演示,您需要自定义相应处理逻辑*/
if (err) {
console.log("err: ",err);
reject({ err })
} else {
resolve({ res: res.req,resData })
}
}
);
})
提一个小点:在有多个云环境时候,如果涉及到查询云数据库等和云环境有直接干系的操作时候,最好在cloud.init({env: envid})这里声明一下环境,否则有小几率报错。 五、启动页设计启动页也算本程序一个亮点,首次进入就是一张美美的图给人一种身心愉悦之感,下面我们就详细说说这个怎么做: 哪些元素?
说这个之前,大家注意一下整个页面是全屏了的,所以这里我们要配置一下页面参数: 在此页面的.json中这么配置: {
"navigationStyle":"custom"
}
这就成功全屏了,接着我们来编写页面样式: .contain {
width: 100%;
height: position: relative;
}
.bg {
position: absolute;
left: 0rpx;
top: z-index: -1;
}
.go {
right: 30rpx;
150rpx;
z-index: 9;
}
.go button {
font-size: 28rpx;
letter-spacing: 4rpx;
border-radius: color: #000;
background: rgba(255,255,0.781);
display: flex;
justify-content: center;
align-items: center;
text-align: center;
160rpx;
60rpx;
}
样式快速搞定,再来说说js部分。
countDown: function() {
this;
let total = 3;//倒计时总数3秒
this.interval = setInterval(function() {
total > 0 && (total--,that.setData({
count: total
})),0 === total && (that.setData({
count: total
}),wx.switchTab({
url: "/pages/index/index"
}),clearInterval(that.interval));
},0);">1e3);
},
总结纸上得来终觉浅,绝知此事要躬行,以上总结的是开发此程序中我认为遇到的典型问题,实践过程中肯定会有更多有意思的问题的出现,“面向百度”编程是一个方面,但我更建议“面向官方文档”,很多问题其实官方文档中都有很详细的说明和代码示例,如果阅读文档颇感费力,我建议你该静下心来,先熟悉下html,css,javascript相关内容,到时候再回过头来看你会发现“原来如此”。 源码地址https://github.com/TencentCloudBase/Good-practice-tutorial-recommended (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |