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

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

一、准备工作

小程序吗，慢慢玩儿，微信给玩家提供了一大推你所需要的各种各种，你只要一个微信号就行。在开发小程序时，对小程序有个大概的认识就行，不求多牛逼，记得我心目中的大佬说过，不要发等你好牛逼了才来做牛逼的事，慢慢做，碰到问题解决问题，你就能牛逼起来，一台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端扫码功能更不一样为打开文件形式，上的真机测试截图。貌似有点不伦不类，还请各位看官见谅。。。