时间戳

首页 > 技术文章 > 商务楼宇小程序迭代更新复盘总结

商务楼宇小程序迭代更新复盘总结

wszzj 2021-02-02 18:36 原文

商务楼宇小程序迭代更新复盘总结

登陆页面

登陆页面有4个端口：公众端，监管端，物业采集端，党建采集端

  • 需求：点击任意一端都进入到登录页面输入正确账号进入到相关页面

    思路：点击对应的端口进入到登录界面时带一个type参数，为了确定是那个端口的，点击登录按钮调用接口 在成功的函数里根据type调转到对应的页面。

  • 实现：每个端口上面对应后台参数要求都绑定有type参数，为了点击进入登录页面时确保登录成功时跳转对应的界面（登录界面共用一套，登录方法也共用一套）

示例代码：

wxml

<view class="menu-item" bindtap="menuClicked" data-type="4">
      <image class="icon" src="./image/icon-home.png"></image>
      <text>公众端</text>
    </view>
    <view class="menu-item" bindtap="menuClicked" data-type="5">
      <image class="icon" src="./image/icon-building.png"></image>
      <text>监管端</text>
</view>

js 包括动态设置登录状态当前页面的标题

// 选择进入哪个端
  menuClicked:function(e){
    var type = e.currentTarget.dataset.type;
    wx.setStorageSync("atype", type);
    this.setData({
      atype: type
    });
    // 物业采集端
    if (type === '1') {
      this.setData({
        isShowHome:false,
        hregister:false,
        isShowSignButtton: false, // 隐藏注册1按钮
        isShowsgin: false, // 隐藏注册2按钮
      });
      wx.setNavigationBarTitle({ title: '物业采集平台' })  //动态设置当前页面标题
      return false
    }

新的需求：

  1. 对公众端单独进行注册功能的实现
  2. 四个端前台增加登陆次数过多限制登陆功能的增加
  3. 注册时密码复杂度校验

思路：因为四个端口的登录页面是公用的一个，需求是只有公众端有注册页面，可以对注册1按钮做一个wx:if判断，如果带的参数是公众端，则显示，此时这个注册1按钮只是一个切换按钮，并无调用接口的功能，点击时切换到真正的注册2按钮上，此时页面只有一个注册2按钮，登录1按钮消失，点击注册2时调用接口成功后返回起初的登录1，注册1状态，这一操作因为涉及到登录1按钮状态的改变，为了避免影响到其他端口的正常显示，这里也将登录1和其他页面的登录2做区分，

登录错误次数过多限制登陆，

思路：点击登陆1/登陆2 调用接口在失败函数中做判断，进行一个计数，数量满足时，将登陆按钮替换为另一个登陆（errlogin）这个按钮点击时将会有一个弹框提示，提示错误次数过多，请30分钟后重试等然后做一个延迟函数，30分钟后将登陆的状态进行改变即可

实现：

 /**锁定登录按钮提示 */
  errLogin (){
    wx.showToast({
      icon:'none',
      duration:2000,
      title: '错误次数太多，已被锁定,请30分钟后重试',
    })
  },

// 失败回调
  onFailed: function (msg) { //onFailed回调
    wx.hideLoading();
    if (msg) {
      wx.showToast({
        title: msg,
        icon: "none"
      })
      // 判断输错次数
      // 获取data 中的值
         this.setData({
           num:(this.data.num)+1
         })
      // 如果输错次数达到5
      if(this.data.num===5){
        this.setData({
          login:false,
          login2: true,
          isShowSignButtton2: true
        })
        // // 倒计时   暂时不用
        // this.setData({
        //   timer:setInterval(() => {
        //     this.setData({
        //       count:(this.data.count)-1
        //     })
        //   }, 1000)
        // })
        // // 清除定时器
        // setTimeout(() => {
        //   if(this.data.count===0){
        //     clearInterval(this.data.timer)
        //   }
        // }, 6000);

        setTimeout(()=>{
          this.setData({
            num:0,
            login:true,
            isShowSignButtton: true,
            login2: false,
            isShowSignButtton2: false,
            isShowsgin: false
          })
        // },1000*60*30)
        },1000)
      }
    }else{
      wx.showToast({
        title:'用户名或密码有误，请仔细检查或者联系系统管理员',
        icon: "none"
      })
    }
  },

 reg = /^(?![A-Za-z]+$)(?![A-Z\d]+$)(?![A-Z\W]+$)(?![a-z\d]+$)(?![a-z\W]+$)(?![\d\W]+$)\S{8,}$/
//密码至少8位，包括数字、大小写字母和特殊字符三种及以上

公众端页面

啊哦，好像不能写啊，内容保密哦，

那就写一下公共的进行梳理吧

关于路径

单独写一个apis.js文件，然后引用，你懂的，前期内容清晰，后期维护方便，强烈建议加注释，后期会感谢当时的自己的

示例：

// 信息查询-->楼宇查询
var jgdQueryBuilding = '/app/jgdQueryBuilding.xhtml'
// 信息查询--->企业查询
var jgdQueryEntIn = '/app/jgdQueryEntIn.xhtml'
// 企业认领状态
var doEditin = '/app/doEditin.xhtml'
//导出模块
module.exports = {
  doEditin,
  jgdQueryEntIn,
  jgdQueryBuilding,
}

在js文件中记得引用哦

//引
var apis = require("../../../utils/apis.js");
//用
var urlgzfw = app.baseurlgzfw + apis.xiaoDoAdd;

关于接口

单独封装一个network.js文件

示例：

/**
 * 供外部post请求调用
 */
function post(url, params, onStart, onSuccess, onFailed) {
  request(url, params, "POST", onStart, onSuccess, onFailed);
}

/**
 * 供外部get请求调用
 */
function get(url, params, onStart, onSuccess, onFailed) {
  request(url, params, "GET", onStart, onSuccess, onFailed);
}

/**
 * function: 封装网络请求
 * @url URL地址
 * @params 请求参数
 * @method 请求方式：GET/POST
 * @onStart 开始请求,初始加载loading等处理
 * @onSuccess 成功回调
 * @onFailed  失败回调
 */
function request(url, params, method, onStart, onSuccess, onFailed) {
  onStart(); //request start
  wx.request({
    url: url,
    data: dealParams(params),
    method: method,
    header: { 'content-type': 'application/json' },
    success: function (res) {
      console.log(res);
      if (res.data == '') {
        wx.showToast({
          title: "未查询到相关信息，请联系系统管理员",
          icon:"none",
          duration: 2000
        })
        return
      }
      if (res.data) {
        console.log(res.data);
        console.log(res.data.fCode);
        /** start 根据需求 接口的返回状态码进行处理 */
        if (res.data.fCode == '01' || res.data.fCode == '05' || res.data.fCode == '04') {
          onSuccess(res.data); //request success
        }
        else if(res.data.fCode == '00'){    //    新接口  错误登陆返回的拦截信息
          onFailed(res.data.fMsg); //request failed
        } else if(res.data.moduleName !==''){    //    新接口  其他页面判断返回的信息
            onSuccess(res.data)
        }else{                                  //老接口  错误数据返回的信息
          onFailed(res.data.fMsg); //request failed
        }
        /** end 处理结束*/
      }
    },

    fail: function (error) {
      onFailed(""); //failure for other reasons
    }
  })
}

/**
 * function: 根据需求处理请求参数：添加固定参数配置等
 * @params 请求参数
 */
function dealParams(params) {
  return params;
}

module.exports = {
  postRequest: post,
  getRequest: get,
}

这个文件中在成功回调时做的判断有点多，因为写后台接口的不是一个人，后期又增加了新的后台路径，然后就有点乱，可能是后台的写法标准不一样？？咱也不知道，反正给哈都能写，没得怕的，哈哈

其中有个问题，看文档的时候每个字都看进去了。但是写的时候真的是不栽跟头记不住啊。就是跳转页面的，wx.navigateTo和 wx.switchTab,谨记啊，这个项目里每个端口进去都又是一个完整的小系统，系统里的首页都是有tabBar的，所以跳转到这个页面的时候要用 wx.switchTab，别页面跳转不过去一遍一遍的检查路径的问题了，真的是求求我自己了

wx.navigateTo

保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。

在小程序插件中使用时，只能在当前插件的页面中调用

提到这个就想到了wx.navigateBack

wx.navigateBack(Object object)

关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。

在小程序插件中使用时，只能在当前插件的页面中调用

返回上一页不传参

// 注意：调用 navigateTo 跳转时，调用该方法的页面会被加入堆栈，而 redirectTo 方法则不会。见下方示例代码

// 此处是A页面
wx.navigateTo({
  url: 'B?id=1'
})

// 此处是B页面
wx.navigateTo({
  url: 'C?id=1'
})

// 在C页面内 navigateBack，将返回A页面
wx.navigateBack({
  delta: 2
})

返回上一页传参

  let pages = getCurrentPages(); // 当前页，
  let prevPage = pages[pages.length - 2]; // 上一页
  prevPage.setData({
    subPageResult: "我是结果",
  })

  wx.navigateBack({ //返回
    delta: 1
  })

我常用的就这几个

需要跳转的应用内非 tabBar 的页面的路径 (代码包路径), 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 'path?key=value&key2=value2

先到这，后续有时间再加

推荐阅读