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

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

概览.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.jsPage({  /**   * 页面的初始数据   */  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: '我的钱包'    })  },// 勾选充值金额，获取类型值存入checkboxValue  checkboxChange: function(e){    let _values = e.detail.value;    if(_values.length == 0){      this.setData({        btnBgc: ""      })    }else{      this.setData({        checkboxValue: _values,        btnBgc: "#b9dd08"      })    }     },// 输入充值金额，存入inputValue  numberChange: function(e){    this.setData({      inputValue: {        num: e.detail.value,        desc: this.data.inputValue.desc      }    })  },// 输入备注，存入inputValue  descChange: 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: {}, // 设置请求的 header      success: (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步设置的id    switch(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多资料，就是搞不定，最后请教大佬实例操作一波，几行子代码替代我几十行代码搞定，最重要的是我的几十行还实现不了，这就很尴尬了吧，咸鱼还是得努力翻身啊！不会的找大神，提点几句自己动手做能解决最好了，实在不行，请教大佬实地地操作一波了，搞定了自己还得好好悟，努力进步就是最好的。