商务楼宇小程序迭代更新复盘总结
登陆页面
登陆页面有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按钮做一个
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-Zd]+$)(?![A-ZW]+$)(?![a-zd]+$)(?![a-zW]+$)(?![dW]+$)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
先到这，后续有时间再加