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

时间 2019-11-30

标签微信程序实例洗衣开发经验分享繁體版

原文原文链接

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

概览.gif html

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

1、准备工做

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

2、前期开发工做

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

小程序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/微信小程序

3、分析业务建立所需页面结构

一、首先分析咱们作的小程序有哪些须要用到的业务，建立相应的page，即在app.json文件里添加相应的代码，下图是个人.json页面：api

myjson.png 数组

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

mytree.png

4、页面设计效果

一、首页大图，也是标志性的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>

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

抽屉.gif

.js代码以下，轻松愉快的一个自定义函数搞定，不想我以前的绕绕绕，而后我本身都不知道了

Page({
    data: {
        translate: '',
        showPageBottom: false
    },

    
    showMenu: function() {
        this.setData({
            showPageBottom: !this.data.showPageBottom
        })
    },
}

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

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

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

3.一、点击信息小图标，进入到sms业务界面，图片以下：

消息.png

3.二、用户信息页，抽屉栏最上方小型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.三、个人钱包页，点击个人钱包就行了，页面跳转后又有若是不选定金额，下面的提交按钮默认是灰色的，这是点击提交按钮出现的用户反馈信息弹窗；同时点击按钮的时候就提交按钮就变色显示，可选择充值金额，效果图以下：

个人钱包.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: '个人钱包'
    })
  },
// 勾选充值金额，获取类型值存入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.四、优惠券页，效果图以下：

优惠券.gif

3.五、个人洗衣机页，查看当前已绑定的洗衣机，还可申请绑定或是租赁相应的洗衣机，效果图以下：

个人洗衣机.png
3.六、设置页，相关设置均在此，上效果图吧，以下：

设置.png

3.七、推荐给好友，这一页来点不一样的，就写模块待开发

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

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>

5、扩展总结

因为服务器和本人技术问题，这里省得数据使用的是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多资料，就是搞不定，最后请教大佬实例操做一波，几行子代码替代我几十行代码搞定，最重要的是个人几十行还实现不了，这就很尴尬了吧，咸鱼仍是得努力翻身啊！不会的找大神，提点几句本身动手作能解决最好了，实在不行，请教大佬实地地操做一波了，搞定了本身还得好好悟，努力进步就是最好的。