小程序笔记 -- 封装函数

封装就是把实现某功能的代码拿出来做为单独的函数, 在不同的地方可以直接使用

封装函数最大好处就是可以避免代码的重复书写, 从而提高效率

如果某功能要经常使用, 则应该考虑将这个功能封装为函数, 否则用一次这个功能就得写一次该功能的代码

小程序中的封装, 也就是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',   // 开发者服务器中的请求urldata: {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', // 开发者服务器中的请求urldata: {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

小程序笔记 -- 封装函数相关推荐

微信小程序判断服务器返回值,让微信小程序内置函数返回promise的方法
Promise API const promisic = function (func) { return function (params = {}) { return new Promise((r ...
微信小程序使用云函数进行mysql操作
微信小程序使用云函数进行mysql操作其他操纵数据库方式的一些问题准备工作云函数代码调用云函数时候的代码最后还需要注意的一些小事情: 其他操纵数据库方式的一些问题现在使用小程序,对数据库的 ...
wx小程序笔记（2）
wx小程序笔记第三章:常用组件第一节:scroll-view组件 view: scroll-view: 设置横向滚动: 设置竖向滚动: scrolltoupper和scrolltolower事件: ...
python写的小程序怎么封装_Promise实现微信小程序接口封装过程
Promise实现微信小程序接口封装过程发布时间:2020-06-15 13:40:43 来源:亿速云阅读:419 作者:鸽子相信很多开发者都遇到过回调地狱的问题.由于微信小程序的API基本都是 ...
wx小程序笔记（1）
wx小程序笔记第一章:小程序前奏第一节:账号和软件第二章:小程序基础第一节:项目结构第二节:配置第三节:WXML语法数据绑定(js数据) 条件渲染(判断) 列表渲染(循环) wx:key ...
小程序promise封装post请求_微信小程序promise封装get/post请求
微信小程序promise封装get/post请求 2020-07-04 20:42:49 微信小程序promise封装get/post请求叶子兔 2018-10-10 08:55:30 1056 ...
小程序简单封装 request 请求
我在这里做了详细的介绍 : 小程序简单封装 request 请求转载于:https://www.cnblogs.com/biangz/p/9984340.html
微信小程序之回调函数
微信小程序之回调函数 1.首先什么是回调函数? 在经历一系列研究之后,我总结了一下,就是A函数作为B函数的参数,B函数执行完之后将返回的结果作为A函数的参数,再执行A函数.听起来很难懂,那就举个栗子吧 ...
微信小程序如何封装自己的组件？
在现在前端领域,最常见的话语就是组件化.工程化的内容.所有的框架都在朝着这方面发展.作为前端生态中的新兴热人物小程序的出现,同样支持组件化开发. 在我们的日常开发中,可以封装一些常用的组件达到复用效果 ...

小程序笔记 -- 封装函数

小程序笔记 -- 封装函数相关推荐

最新文章

热门文章