评论

小程序轻客洗衣66

小程序开发洗衣

开发了一款小程序,可以实现扫码洗衣

解决问题,方便生活,为大学校园中,企业园区里洗衣服还要办理洗衣卡,洗衣服的时候还得揣着一张洗衣卡,只需要拿着手机扫一扫就能完美解决,畅洗洗衣微信小程序。下来看看该小程序“畅洗”。

一、准备工作


小程序吗,慢慢玩儿,微信给玩家提供了一大推你所需要的各种各种,你只要一个微信号就行。在开发小程序时,对小程序有个大概的认识就行,不求多牛逼,记得我心目中的大佬说过,不要发等你好牛逼了才来做牛逼的事,慢慢做,碰到问题解决问题,你就能牛逼起来,一台PC,同时匹配PC下载好微信小程序的开发者工具,编辑器,有很多种,本人用的VSCode,接下来就开始干了。


二、前期开发工作


打开微信公众平台网页见地址:https://mp.weixin.qq.com/,实名注册一个,扫码登录微信公众平台,点击设置->开发设置拿到属于自己的专属AppID(小程序ID),


复制该AppID(小程序ID)至微信开发者工具,取名、选定文件夹 -> 添加项目,得到的页面又是这样的。

pages文件夹下存放着小程序所有的业务功能实现页面,一般默认有俩,分别为index和logs;


index文件夹就是一个页面,index.wxml是页面的结构文件,类似html。


index.wxss是页面的样式,其实就是css;


index.js是页面的逻辑,数据请求与渲染都是都在这个页面完成。


logs文件夹存放着小程序开发日志,目前暂时用不到。


utils.js可以编写自己的JavaScript插件。


app.js处理全局的一些逻辑,比如定义全局变量存放获取的用户信息,这样每个页面都可以获取用户信息。


app.json 是全局配置文件,比如设置标题栏的背景色等。


app.wxss 存放页面的公共样式,如果多个页面需要用到同一样式,就可以写在这里。


项目按钮显示预览二维码,用于真机调试。必须真机调试测试代码

三、分析业务创建所需页面结构


1、首先分析我们做的小程序有哪些需要用到的业务,创建相应的page,即在app.json文件里添加相应的代码,下图是我的.json页面:

创建了相应的page,同时删除了原有的Index和logs。


2、编写相应的通用样式,在app.wxss文件里编写,我就啥也没写,还注释了里面的代码。


3、经过上述第一步搭建好了页面结构,同事一样,上波图,更直观:


四、页面设计效果

1、首页大图,也是标志性的Logo

样式代码就不贴了,就用图片充满屏幕就行了。

2、主要处理页面,也是坑的我最惨的,一个抽屉栏我就半天出不来自己想要的效果,后找了猛人帮忙,搞定了,在此感谢,见下图:

.js代码如下,轻松愉快的一个自定义函数搞定,不想我之前的绕绕绕,然后我自己都不知道了

3、业务界面,这里面设计的业务不是很多,就一张一张图片贴了。

3.1、点击信息小图标,进入到sms业务界面,图片如下:


3.2、用户信息页,抽屉栏最上方小型logo图标出现,如下图:

3.3、我的钱包页,点击我的钱包就好了,页面跳转后又有如果不选定金额,下面的提交按钮默认是灰色的,这是点击提交按钮出现的用户反馈信息弹窗;同时点击按钮的时候就提交按钮就变色显示,可选择充值金额,效果图如下:


3.4、点我洗衣,主页面下方点我洗衣,效果图如下:


拖动位置点击重新定位回到当前位置,另由于PC端扫码功能更不一样为打开文件形式,上的真机测试截图。貌似有点不伦不类,还请各位看官见谅。。。








最后一次编辑于  04-06  
点赞 1
收藏
评论
登录 后发表内容