封装就是把实现某 功能 的代码拿出来做为单独的函数, 在不同的地方可以直接使用
封装函数最大好处就是可以避免代码的重复书写, 从而提高效率
如果某功能要经常使用, 则应该考虑将这个功能封装为函数, 否则用一次这个功能就得写一次该功能的代码
小程序中的封装, 也就是js封装
1.单独创建一个js文件, 不用创建其它的wxml, wxss, json文件
2.书写js内容, 这仅仅是一个js文件, 不需要使用Page()注册
/**commons.js文件 */
// 定义的常量
var URL = 'http://127.0.0.1:4444/';
// 定义的函数
var concatUrl = function (url) {
return URL + url;
}
/****************************************************/
// 将下面两个变量暴露出来
// 只有暴露出来的变量外部才能引用
// model.exports一般是放在js文件的最后面, 以防止变量未定义时, 就向外面暴露
module.exports = {
URL : URL, // 前面一个是外部引用时使用的名称, 后一个是本js中变量的名称
geRealtUrl: concatUrl
}
3.在任意js文件中使用封装的函数
/**index.js */
// 在此使用require引入目标js文件, 用变量_js表示
// 因此commons.js文件相当被抽象为了一个对象 : _js
var _js = require("../../commons/utils/commons.js");
Page({
data: {
},
onLoad: function() {
// 使用对象 _js 调用它里面已暴露的变量
var url = _js.geRealtUrl("adrress");
console.log(url);
console.log(_js.URL);
}
})
从这里面可以看出:使用对象_js可以调用commons中已暴露的变量
而不仅仅是函数, 如这里使用_js.URL 得到的是commons.js中的常量
因此可以考虑将常量放入这样的js文件中
例:
在项目中不可避免地要使用登陆功能, 而登陆功能要使用的地方很多
比如要执行收藏,支付等功能之前都是需要用户登陆的
如果在执行这些功能的时候, 检测到用户没有登陆或登陆状态不合适, 需要登陆或重新登陆
则可以直接调用封装好的登陆功能
/**utils.js */
// 登陆功能
var login_util = function () {
wx.login({
success: function(res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'http://127.0.01:4444/login', // 开发者服务器中的请求url
data: {
code: res.code
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
});
}
// 将变量暴露出来
module.exports = {
login_util: login_util
}
这里说明一下: url: 'http://127.0.01:4444/login 测试的时候不要使用https请求
除非做了服务器端已ssl化, 否则会报错: Invalid character found in method name. HTTP method names must be tokens
/**login.js */
var loginUtil = require("../../commons/utils/commons.js");
Page({
data: {
},
login: function() {
loginUtil.login_util(); // 直接使用封装的登陆
}
})
有时候需要检测session_key是否有效, 如果过期了, 就要重新登陆
那么可以直接把检测session_key这个操作给封装了:
/**utils.js */
// 登陆功能
var login_util = function() {
wx.login({
success: function(res) {
if (res.code) {
//发起网络请求
wx.request({
url: 'http://127.0.01:4444/login', // 开发者服务器中的请求url
data: {
code: res.code
},
success : function(res) {
console.log(res.data);
}
})
} else {
console.log('登录失败!' + res.errMsg)
}
}
});
};
// 检测session_key, 如果过期重新登陆
var checkSession_util = function() {
wx.checkSession({
success: function(e) {
console.log("未过期");
},
fail: function() {
login_util();
}
})
}
// 将变量暴露出来
module.exports = {
login_util: login_util,
checkSession_util: checkSession_util
}
这样封装以后, 要直接登陆:调用login_util, 要检测session_key登陆则使用checkSession_util