基于微信小程序开发的小程序花店项目

发布于 2022-01-18  399 次阅读


愉快的大二上期就这么在混水摸鱼之中度过了,临近假期的小学期更是让人苦不堪言,小学期的项目就是使用wxml以及wxss以及JavaScript来完成小程序 的静态页面设计以及实现。

一开始,我并没有思路去完成什么,只知道需要做一个简单的美观的小程序静态页面就行,可是后面越写越像样的时候就有种必须把它写好写完整的冲动

首先,先附上我的小程序首页

本小程序页面使用的图标全部来自iconfont,图片来自网络。

1,小程序的名字是由app.json中直接配置,以及小程序框框的颜色也是在app.json中进行配置。

2,小程序的主页

① 首先映入眼帘的是一个搜索框,本搜索框由两个组件组成,分别是前面椭圆形的搜索输入框以及后面的搜索按键,input组件可以在wxss中设置其属性,颜色,使其更好看,以及并排排列的搜索图标主要内容就是将其设置为行内块元素,只有这样,input和搜索图标才能在同一行内。具体大小可根据需求自己设定。

②轮播图有swiper组件组成,图片自己设置,高度也可设,其中的轮换的点点也可以设置存在与否以及其颜色。

③各种选项图标,首先使用一个大的盒子,在图标以及名字放在一个行内块元素内,图片绑定点击事件,使用 wx.navigateTo可直接跳转到想链接的界面,不过图标之间的距离位置可以通过margin-top,以及margin-left来对其进行调整。

④最后一个模块是猜你喜欢,同是使用盒子容器存放图片,并设置为行内块,对图片要进行钝角化处理就是微信小程序中的border-radius进行处理使其看起来更加的美观。

⑤最后,最下面是tabbar模块,直接在app.json中配置就行,同样可以设置其点击前后的样式以及跳转到的页面。

首页就很简单的完成了。

其次,是小程序的智能客服,智能小清(其实是腾讯云的智能对话平台的小薇)

这个的后端设置一系列我就不说了,只讲讲这个界面的设置,以及其JavaScript的设置,首先是使用input组件输入文本存储到js中的text字符串中,然后讲text字符串通过wx.request()发送到后端,然后得到反馈,得到的反馈从新存在一个字符串中,然后设置这两个字符串在页面中的位置以及样式,就可以做出这个页面。在没有输入是,使用wx:if 可以是某一块暂时不渲染,当达到某个条件是在对其渲染,这样就能做到在输入是一片空白,输入后会出现对话框。

最后我再这个小程序中添加了一个比较有趣的功能,就是点赞功能。

再每一朵花的右下角都有这么一个小爱心,点击之后就会变成这样

就十分的有趣

实现的方法就再同一个位置 使用wx:if绑定两个图片,绑定点击事件,当点击事件出发后,显示全红的爱心,没触发就显示空心的爱心。点赞功能就是如此简单。

总结:

通过时长为近半月的小学期学习以及最后的项目实战,完全将我从迷茫的浑浑噩噩的日子中拉了出来,能每天都认真的学习,认真的实践,也对前端开发有了一定的了解,再鲜少的尝试之后对其产生了较为浓厚的兴趣,也对微信小程序开发有了深刻的体会,更学会了耐心的调整位置,颜色以及各种奇奇怪怪的bug,还有就是学会了查看开发者文档,以及自己学习,收获颇多。

倘若红尘亦纷飞,何必苦笑做欢颜

完结撒花 完结撒花 完结撒花 完结撒花 完结撒花