微信小程序实例--洗衣小程序开发经验分享

解决问题，方便生活，为大学校园中，企业园区里洗衣服还要办理洗衣卡，洗衣服的时候还得揣着一张洗衣卡，只需要拿着手机扫一扫就能完美解决，轻客洗衣微信小程序。下来看看该小程序“轻客”，本人写了几个自己觉得主要的功能，还有部分功能待编写中，欢迎各位看官批评，同时跪求各位看官收藏点赞，不胜感激，上效果图：

概览.gif

注：PC端无法实现扫码，弹出打开文件框

一、准备工作

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

二、前期开发工作

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

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

Hello World.png
单击左上角编辑，出现如下界面：

tree.png
pages文件夹下存放着小程序所有的业务功能实现页面，一般默认有俩，分别为index和logs；
index文件夹就是一个页面，index.wxml是页面的结构文件，类似html。
index.wxss是页面的样式，其实就是css；
index.js是页面的逻辑，数据请求与渲染都是都在这个页面完成。
logs文件夹存放着小程序开发日志，目前暂时用不到。
utils.js可以编写自己的JavaScript插件。
app.js处理全局的一些逻辑，比如定义全局变量存放获取的用户信息，这样每个页面都可以获取用户信息。
app.json 是全局配置文件，比如设置标题栏的背景色等。
app.wxss 存放页面的公共样式，如果多个页面需要用到同一样式，就可以写在这里。
项目按钮显示预览二维码，用于真机调试。必须真机调试测试代码
更加详细的文档参见：
mp.weixin.qq.com/debug/wxado…
还有微信ui库的地址： weui.io/

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

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

myjson.png

创建了相应的page，同时删除了原有的Index和logs。
2、编写相应的通用样式，在app.wxss文件里编写，我就啥也没写，还注释了里面的代码。
3、经过上述第一步搭建好了页面结构，同事一样，上波图，更直观：

mytree.png

四、页面设计效果

1、首页大图，也是标志性的Logo（logo文件夹）

logo.gif

该页面跳转设计了点击跳转和定时跳转两种跳转方式，点击跳转可能.gif文件展示的不是很好 logo.js代码：

 bindLogoTap: function() {wx.navigateTo({url: '../iconInformation/iconInformation'})},/*** 生命周期函数--监听页面加载*/onLoad: function (options) {// 设置初始计时秒数let time = 2;// 开始定时器this.timer = setInterval(() => {this.setData({time: -- time});// 读完秒后携带洗衣机编号跳转到计费页if(time < 0){clearInterval(this.timer)wx.navigateTo({url: '../iconInformation/iconInformation'})}},1000)},

logo.wxml代码：

<view class="logo"><image bindtap="bindLogoTap" class="logo_page" src="/images/logo.jpg" mode="widthFix"></image>
</view>

样式代码就不贴了，就用图片充满屏幕就行了。 2、主要处理页面，也是坑的我最惨的，一个抽屉栏我就半天出不来自己想要的效果，后找了猛人帮忙，搞定了，在此感谢，见下图：

抽屉.gif

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

Page({data: {translate: '',showPageBottom: false},showMenu: function() {this.setData({showPageBottom: !this.data.showPageBottom})},
}

.wxml代码如下，图片绑定事件

<view class="page-bottom {{showPageBottom?'active':''}}">

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

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

消息.png

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

用户信息.gif
部分js代码如下，单选按钮默认选中“男”

data: {items: [{name: 'men', value: '男', checked: 'true'},{name: 'women', value: '女'},]},radioChange: function(e) {console.log('radio发生change事件，携带value值为：', e.detail.value)},

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

我的钱包.gif

部分js代码如下：

// pages/wallet/wallet.js
Page({/*** 页面的初始数据*/data: {// 充值数额类型数组checkboxValue: [],// 提交按钮的背景色，未勾选类型时无颜色btnBgc: "",// 复选框的value，此处预定义，然后循环渲染到页面itemsValue: [{checked: false,value: "充值¥10轻币",color: "#b9dd08"},{checked: false,value: "充值¥20轻币",color: "#b9dd08"},{checked: false,value: "充值¥50轻币",color: "#b9dd08"},{checked: false,value: "充值¥60轻币",color: "#b9dd08"},{checked: false,value: "充值¥80轻币",color: "#b9dd08"},{checked: false,value: "充值¥100轻币",color: "#b9dd08"}]},/*** 生命周期函数--监听页面加载*/// 页面加载onLoad:function(options){wx.setNavigationBarTitle({title: '我的钱包'})},
// 勾选充值金额，获取类型值存入checkboxValuecheckboxChange: function(e){let _values = e.detail.value;if(_values.length == 0){this.setData({btnBgc: ""})}else{this.setData({checkboxValue: _values,btnBgc: "#b9dd08"})}   },
// 输入充值金额，存入inputValuenumberChange: function(e){this.setData({inputValue: {num: e.detail.value,desc: this.data.inputValue.desc}})},
// 输入备注，存入inputValuedescChange: function(e){this.setData({inputValue: {num: this.data.inputValue.num,desc: e.detail.value}})},
// 提交到服务器formSubmit: function(e){if(this.data.checkboxValue.length> 0){wx.request({url: 'https://www.easy-mock.com/mock/59098d007a878d73716e966f/ofodata/msg',data: {},method: 'get', success: function(res){wx.showToast({title: res.data.data.msg,icon: 'success',duration: 2000})}})}else{wx.showModal({title: "请填写反馈信息",content: '你宝贵的意见是我们改进的方向',confirmText: "如实填写",cancelText: "忽略",success: (res) => {if(res.confirm){// 继续填}else{console.log("back")wx.navigateBack({delta: 1 // 回退前 delta(默认为1) 页面})}}})}   }
})

3.4、优惠券页，效果图如下：

优惠券.gif

3.5、我的洗衣机页，查看当前已绑定的洗衣机，还可申请绑定或是租赁相应的洗衣机，效果图如下：

我的洗衣机.png
3.6、设置页，相关设置均在此，上效果图吧，如下：

设置.png

3.7、推荐给好友，这一页来点不同的，就写模块待开发

推荐给好友.gif
3.8、点我洗衣，主页面下方点我洗衣，效果图如下：

logo.png

点我洗衣.gif

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

//myoption.js
//获取应用实例
var app = getApp()
Page({data: {scale: 18,latitude: 22.650529,longitude: 113.925354},
// 页面加载onLoad: function (options) {// 1.获取定时器，用于判断是否在洗衣this.timer = options.timer;// 2.获取并设置当前位置经纬度定位wx.getLocation({type: "gcj02",success: (res) => {this.setData({longitude: res.longitude,latitude: res.latitude})}});// 3.设置地图控件的位置及大小，通过设备宽高定位wx.getSystemInfo({success: (res) => {this.setData({controls: [{id: 1,iconPath: '/images/location.png',position: {left: 20,top: res.windowHeight - 80,width: 50,height: 50},clickable: true},{id: 2,iconPath: '/images/use.png',position: {left: res.windowWidth/2 - 45,top: res.windowHeight - 100,width: 90,height: 90},clickable: true},{id: 3,iconPath: '/images/warn.png',position: {left: res.windowWidth - 70,top: res.windowHeight - 80,width: 50,height: 50},clickable: true},{id: 4,iconPath: '/images/marker.png',position: {left: res.windowWidth/2 - 11,top: res.windowHeight/2 - 45,width: 22,height: 45},clickable: true},{id: 5,iconPath: '/images/avatar.png',position: {left: res.windowWidth - 68,top: res.windowHeight - 155,width: 45,height: 45},clickable: true}]})}});// 4.请求服务器，显示附近的洗衣机，用marker标记wx.request({url: 'http://easy-mock.com/mock/596d6dbea1d30433d835cab0/query/list',data: {},method: 'GET', // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT// header: {}, // 设置请求的 headersuccess: (res) => {this.setData({markers: res.data.data})},fail: function(res) {// fail},complete: function(res) {// complete}})},
// 页面显示onShow: function(){// 1.创建地图上下文，移动当前位置到地图中心this.mapCtx = wx.createMapContext("QingKeMap");this.movetoPosition()},
// 地图控件点击事件bindcontroltap: function(e){// 判断点击的是哪个控件 e.controlId代表控件的id，在页面加载时的第3步设置的idswitch(e.controlId){// 点击定位控件case 1: this.movetoPosition();break;// 点击立即洗衣，判断当前是否正在计时case 2: if(this.timer === "" || this.timer === undefined){// 没有在计费就扫码wx.scanCode({success: (res) => {// 正在获取密码通知wx.showLoading({title: '洗衣准备',mask: true})// 请求服务器获取密码和洗衣机wx.request({url: 'http://easy-mock.com/project/596d6dbea1d30433d835cab0/query',data: {},method: 'GET', success: function(res){// 请求密码成功隐藏等待框wx.hideLoading();// 携带密码和洗衣机编号跳转到密码页wx.redirectTo({url: '../scanresult/index?password=' + res.data.data.password + '&number=' + res.data.data.number,success: function(res){wx.showToast({title: '获取密码成功',duration: 1000})}})           }})}})// 当前已经在计费就回退到计费页}else{wx.navigateBack({delta: 1})}  break;default: break;}},
// 地图视野改变事件bindregionchange: function(e){// 拖动地图，获取附件洗衣机位置if(e.type == "begin"){wx.request({url: 'http://easy-mock.com/mock/596d6dbea1d30433d835cab0/query/list',data: {},method: 'GET', success: (res) => {this.setData({_markers: res.data.data})}})// 停止拖动，显示单车位置}else if(e.type == "end"){this.setData({markers: this.data._markers})}},
// 地图标记点击事件，连接用户位置和点击的单车位置bindmarkertap: function(e){console.log(e);let _markers = this.data.markers;let markerId = e.markerId;let currMaker = _markers[markerId];this.setData({polyline: [{points: [{longitude: this.data.longitude,latitude: this.data.latitude}, {longitude: currMaker.longitude,latitude: currMaker.latitude}],color:"#FF0000DD",width: 1,dottedLine: true}],scale: 18})},
// 定位函数，移动位置到地图中心movetoPosition: function(){this.mapCtx.moveToLocation();}
})

wxml文件

<view class="container"><map id="QingKeMap" latitude="{{latitude}}" longitude="{{longitude}}" scale="{{scale}}" bindregionchange="bindregionchange" polyline="{{polyline}}" markers="{{markers}}" controls="{{controls}}" bindmarkertap="bindmarkertap"  bindcontroltap="bindcontroltap" show-location/>
</view>

五、扩展总结

由于服务器和本人技术问题，这里免得数据使用的是easy-mock伪造数据；easy-mock可以作为前端开发的伪后端，自己构造数据来测试前端代码。方便又快捷。
同时使用了一些微信小程序的官方API，如：
扫码API: wx.scanCode({})
向服务器发送请求：wx.request({})
显示加载框： wx.showLoading()
隐藏加载框： wx.hideLoading()
显示提示框： wx.showToast()
隐藏提示框： wx.hideToast()
关闭当前页面，跳转到指定页面： wx.redirectTo({})
保留当前页面，跳转到指定页面： wx.navigateTo({})
回退到指定页面： wx.naivgateBack({})
一些详细用法和更多其他的API请查看微信小程序API文档
小结：轻客洗衣下程序也弄得七七八八了，剩下还有一些功能待接下来继续完成，本人开发过程中遇到过很多的坎，有一个个人觉得最重要的效果显示（抽屉栏菜单）好久都没有做出自己的想要的效果，查了N多资料，就是搞不定，最后请教大佬实例操作一波，几行子代码替代我几十行代码搞定，最重要的是我的几十行还实现不了，这就很尴尬了吧，咸鱼还是得努力翻身啊！不会的找大神，提点几句自己动手做能解决最好了，实在不行，请教大佬实地地操作一波了，搞定了自己还得好好悟，努力进步就是最好的。