微信小程序开发日志——面向对象的JS编程
微信小程序开发日志——面向对象的JS编程
前言
不知道有多少小伙伴和之前的我一样，微信小程序的js部分都是用面向过程的方式写的，最后的结果就是代码非常长，其实刚刚写完还好，自己也都清楚哪些部分是做什么的，但是当自己回过头来看时，就发现看的有点吃力了，而且代码非常长，看完所有的代码非常吃力，还有一个就是面向过程的代码中，以访问后台数据为例，我们通常要经常调用wx.request，这个API的复用率是非常高的，同时url每次都得重新写，如果哪天我们更改了url那么岂不是都得要重新改，所以如果全是面向过程的思想写的代码，那么效率是非常低的。
如我之前写的代码：
const app = getApp()
var tt = require('../../utils/util.js');
Page({
/**
* 页面的初始数据
*/
data: {
ordername:"",
time: "",
click:"",
orderimg:[],
orderdetail:"",
orderprice:"",
orderperson:"",
ordernumber:"",
orderwechat:"",
orderid:"",
chatlist:"",
content:"留下点什么吧....",
replyuserid:null,
iv:0,
inputcontent:null,
userimg: "",
username: "",
iscollected:null,
orderlostposition:"",
orderlosttime: "",
sortthings: "",
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
wx.showLoading({
title: '加载中',
mask: 'true'
})
wx.setStorageSync('orderid', options.id)
console.log(options)
var _this=this
var orderimg = _this.data.orderimg
orderimg.push(options.orderimg0)
orderimg.push(options.orderimg1)
orderimg.push(options.orderimg2)
console.log(orderimg)
wx.removeStorage({
key: 'replyuserid',
})
/*wx.setStorage({
key: 'orderid',
data: options.id
})*/
_this.setData({
ordername : options.ordername,
time: options.time,
click: options.click,
/* orderimg0: options. orderimg0,
orderimg1: options.orderimg1,
orderimg2: options.orderimg2,*/
orderdetail: options. orderdetail,
orderprice: options. orderprice,
orderperson: options. orderperson,
ordernumber: options. ordernumber,
orderwechat: options. orderwechat,
orderid: options.id,
orderimg: orderimg,
username: options.username,
userimg: options.userimg,
orderlostposition: options.orderlostposition,
orderlosttime: options.orderlosttime,
sortthings: options.sortthings,
})
wx.request({
url: app.globalData.url+'/est/orderclick.php', // 仅为示例，并非真实的接口地址
data: {
orderid: options.id
},
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded" // 默认值
},
success(res) {
}
})
wx.request({
url: app.globalData.url +'/est/findcollected.php', // 仅为示例，并非真实的接口地址
data: {
orderid: wx.getStorageSync('orderid'),
userid: wx.getStorageSync('userid'),
collectedstatus: 0
},
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded" // 默认值
},
success(res) {
console.log(res.data.collectedstatus)
if (res.data.collectedstatus==1){
_this.setData({
iscollected:true
})
}
else{
_this.setData({
iscollected:false
})
}
}
})
wx.hideLoading()
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
var _this=this
var iv = _this.data.iv
console.log("111")
wx.getStorage({
key: 'userid',
success(res) {
console.log(res.data)
wx.request({
url: app.globalData.url +'/est/userstatus.php', // 仅为示例，并非真实的接口地址
data: {
userid: wx.getStorageSync('userid')
},
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded" // 默认值
},
success(res) {
console.log(res.data)
_this.setData({
iv: res.data.iv
})
iv = res.data.iv
console.log(iv)
wx.hideLoading()
wx.showToast({ title: '加载成功！', duration: 1000 })
},
fail(){
wx.hideLoading()
wx.showToast({ title: '加载失败！', duration:1000 })
}
})
},
fail(res){
console.log(iv)
}
})
var _this = this
wx.request({
url: app.globalData.url +'/est/chatlist.php', // 仅为示例，并非真实的接口地址
data: {
orderid: wx.getStorageSync('orderid')
},
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded" // 默认值
},
success(res) {
console.log(res.data)
_this.setData({
chatlist: res.data
})
}
})
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function () {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function () {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function () {
},
/**
* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh: function () {
},
/**
* 页面上拉触底事件的处理函数
*/
onReachBottom: function () {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function () {
},
formSubmit:function(e){
wx.showLoading({
title: '加载中',
mask: 'true'
})
var _this = this
var useid = wx.getStorageSync('userid')
console.log(useid)
if (e.detail.value.inputchat!=0){
if (useid.length==0){
wx.showToast({
title: '请先登陆！',
duration: 2000,
icon: 'loading'
})
setTimeout(function () {
wx.showModal({
title: '提示',
content: '是否跳转至授权登陆界面？',
success(res) {
if (res.confirm) {
wx.navigateTo({
url: '../user/user/log'
})
} else if (res.cancel) {
}
}
})
}, 1000)
}
else
{
console.log("留言内容")
console.log(e.detail.value.inputchat)
var time = tt.formatTime(new Date())
console.log("时间")
console.log(time)
var userid = wx.getStorageSync('userid')
console.log("测试输出userid")
console.log(userid)
var userinfo = wx.getStorageSync('userInfo')
console.log("userinfo.avatarUrl")
console.log(userinfo.avatarUrl)
var orderid = _this.data.orderid
console.log("orderid")
console.log(orderid)
wx.request({
url: app.globalData.url +'/est/pubchat.php', // 仅为示例，并非真实的接口地址
data: {
userimg: userinfo.avatarUrl,
userid: wx.getStorageSync('userid'),
time: time,
content: e.detail.value.inputchat,
orderid: orderid,
username: userinfo.nickName,
replyuserid: wx.getStorageSync('replyuserid'),
replyopenid: wx.getStorageSync('userid'),
},
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded" // 默认值
},
success(res) {
console.log(res.data)
if (res.data.status == 1) {
wx.showToast({ title: '留言成功！', duration: 500 })
setTimeout(function () {
wx.navigateBack({})
}, 1000)
} else {
wx.showToast({
title: '留言失败，请重试！',
duration: 2000,
icon: 'loading'
})
}
}
})
}
}
else{
wx.showToast({
title: '留言不能为空！',
duration: 500,
icon:'loading'
})
}
},
choicereply:function(e){
var _this=this
console.log(e.currentTarget.dataset.bean.username)
_this.setData({
content: "回复@"+e.currentTarget.dataset.bean.username
})
wx.setStorage({
key: 'replyuserid',
data: e.currentTarget.dataset.bean.username
})
},
imgyu: function (e){
console.log(e)
var that = this,
//获取当前图片的下表
index = e.currentTarget.dataset.index,
//数据源
orderimg= this.data.orderimg;
wx.previewImage({
//当前显示下表
current: orderimg[index],
//数据源
urls: orderimg
})
},
sc:function(e){
var useid = wx.getStorageSync('userid')
if (useid.length == 0) {
wx.showToast({
title: '请先登陆！',
duration: 2000,
icon: 'loading'
})
setTimeout(function () {
wx.showModal({
title: '提示',
content: '是否跳转至授权登陆界面？',
success(res) {
if (res.confirm) {
wx.navigateTo({
url: '../user/user/log'
})
} else if (res.cancel) {
}
}
})
}, 1000)
}
else {
console.log(e)
let iscollected = !this.data.iscollected
this.setData({
iscollected
})
if (iscollected){
wx.request({
url: app.globalData.url +'/est/changecollected.php', // 仅为示例，并非真实的接口地址
data: {
orderid: wx.getStorageSync('orderid'),
userid: wx.getStorageSync('userid'),
collectedstatus:1,
sctime:tt.formatTime(new Date())
},
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded" // 默认值
},
success(res) {
console.log(res.data)
}
})
}else{
wx.request({
url: app.globalData.url +'/est/changecollected.php', // 仅为示例，并非真实的接口地址
data: {
orderid: wx.getStorageSync('orderid'),
userid: wx.getStorageSync('userid'),
collectedstatus: 0,
sctime:tt.formatTime(new Date())
},
method: "POST",
header: {
"Content-Type": "application/x-www-form-urlencoded" // 默认值
},
success(res) {
console.log(res.data)
}
})
}
this.onShow();
console.log(iscollected)
//提示用户
wx.showToast({
title: iscollected ? '收藏成功' : '取消收藏',
icon: 'success',
duration:1000,
})
}
}
})
所以我们在这里模仿后端，用面向对象的编程思想来实现模块化的编码，实现代码的复用和模块分离，提高开发效率。
以request为例，微信小程序实现模型分类
首先我们先进行逻辑层的划分：
控制器层index.js：代码简单，非常容易读懂，基本上都是对业务逻辑层的调用。
业务逻辑层home-model.js：业务逻辑实现层，业务逻辑通过类方法来封装，继承于模型基类，使用基类的一些公用方法。
基类层Base.js：读取配置层，实现各种公用方法，供逻辑层调用
配置层Config.js：实现URL等等的配置
以下为代码详解（由底层向上）：
类的定义（以配置层Config.js为例）
class Config{
constructor(){
}
}
Config.restUrl = 'http://www.csn.com/tp5/public/index.php/api/v1/'
export{Config}
Config.restUrl 可以理解为定义静态变量
class Config{
constructor(){
}
}
export{Config}
以上为类定义的基本结构，注意要用export来设置“接口”
类的引用（以Base.js为例）
import{Config} from '../utils/config.js';
class Base {
constructor(){
this.baseRequestUrl=Config.restUrl;
}
request(params){
var url=this.baseRequestUrl+params.url;
if(!params.type){
params.type='GET';
}
wx.request({
url: url,
header:{
'content-type':'application/json',
'token':wx.getStorageSync('token')
},
success:function(res){
params.sCallback && params.sCallback(res.data);
}
})
}
}
export{Base}
我们使用
import{Config} from '../utils/config.js';
来引入类，同时在构造函数中定义变量this.baseRequestUrl=Config.restUrl;
在Base类中，我们定义request业务层公用方法，同时获得从业务层的参数params，在此方法中统一调用wx.request的API
类的继承（以业务逻辑层home-model.js为例）
import{Base} from '../../utils/Base.js'
class Home extends Base{
constructor(){
super();
}
getBannerData(id,callback){
var params={
url: 'banner?id='+id,
sCallback:function(res){
callback&&callback(res)
}
}
this.request(params)
}
}
export{Home};
注意，我们要在构造函数中用super（）；来引入父类
其次在此层中，我们根据业务逻辑定义方法，在方法中定义params，然后将params传入request方法中，也就是基类的方法，这样就可以向服务器请求数据。不再需要重复编写WX.request的API
类的实例化（以控制层index.js为例）
import { Home } from 'home-model.js';
var home=new Home();
Page({
/**
* 页面的初始数据
*/
data: {
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
this._onloadData();
},
_onloadData:function(){
var id=1;
var data = home.getBannerData(id,res=>{
console.log(res)
});
},
})
此层是我们很熟悉的index.js文件，在此文件中，我们只需要引入业务逻辑层文件，然后实例化对象，就可以在index.js中调用业务逻辑层的getBannerData方法，所以此层的代码非常简洁明了。
回调函数
微信小程序的是异步执行的，所以我们得使用回调函数，具体请看
微信小程序的异步和回调函数
这里补充一点
callback&&callback(res)
这条代码的意思是只有当callBack存在的时候，再执行callBack
总结
通过代码的分层，我们实现了代码功能的模块化，在控制器层的代码非常清楚明了，就是简单的几个方法调用，我们以后再看代码的时候，尽管忘记了细节，但是也能看懂大致的流程，而业务逻辑层更加专注业务方法的实现，
基类提供了各种公用的API，节省了API调用的重复，而配置层，则大大的减少了域名或或环境更改造成的影响。