微信小程序——封装公共函数的方法

封装函数就是将重复使用多次的函数进行“包装”让其可以通过一个固定的写法，被其他的页面所引用，其主要的作用就是防止代码的冗余的情况发生，在写代码的过程中会出现一个代码片段被多个页面多次引用，从而造成了代码的重复率高的问题，那么就需要用到封装公共函数了........

封装函数不需要wxss、wxml、.json文件只需要一个ts或者js文件即可（这里使用的是ts）

1.单独建立一个ts文件在utils之中

（ts相比于js会存在更多的规范问题，当然这也致使ts更好理解和更加利与维护，但是整体上相差不多在此处。）

2.开始在创建的ts或js文件中写你需要的逻辑代码（这里提醒一点，封装的函数应该要具备通性，不能倾向于某一个页面的使用，根据传入的值的不用可以做到不同的效果，满足多方面需求）

//formObj需要做改变的缓存的名字
//needObjName需要在formObj缓存中加入或改变的对象
//value需要在needObjName中变化或加入的值
function mySetStorage(formObj: string, needObjName: string, value: any) {if (wx.getStorageSync(formObj) == null || wx.getStorageSync(formObj) == undefined || wx.getStorageSync(formObj) == "") {let obj = {}obj[needObjName] = valuewx.setStorageSync(formObj, obj);} else {let arr = wx.getStorageSync(formObj);arr[needObjName] = value;wx.setStorageSync(formObj, arr);}
}
// 将下面的变量暴露出来
// 只有暴露出来的变量外部才能引用
// model.exports一般是放在ts文件的最后面， 以防止变量未定义时， 就向外面暴露
module.exports = {//变量名   ： 将方法赋值到变量上面去使用mySetStorage: mySetStorage
}

此函数的作用是改变缓存里面对象的值的方法（要是没有此对象就添加此对象）

首先拿到其他页面传递的缓存名字，需要在该缓存名中存入的对象以及向此对象中要传递的值。
在本地缓存中先查看是否存在此缓存，若不存在则创建此缓存，并且将对象名和值放进去。
若存在此缓存，则直接将测缓存拿出来，然后将对象名直接拿上去，在ts中使用添加对象的方法时，不管之前也没有此对象名，都会存上，要是之前存在此对象名，则会被直接覆盖成新的值。
此处有一点提醒，由于needObjName是需要拿到的一个string类型的名字，所以在添加时要用【】包括，来确保拿到了传递进来的名字，不能使用.needObjName，这样会致使添加的对象名字就是needObjName，而不是你想添加的名字。

3.在任意的页面之中使用封装的函数

var utils = require('../../../../utils/addCache');
utils.mySetStorage('widget-classSchedule', 'dailySchedule', this.data.classInfo)
utils.mySetStorage('widget-classSchedule', 'time', this.data.time)

此处先使用一个utils来承接住封装的函数，然后通过utils来使用封装函数，此时的utils可以直接理解为封装函数中抛出的部分，我们可以直接通过utils来调用抛出的函数方法

4.总结

总体来说此方法并不难，各位可以直接尝试一下封装属于自己的公共函数，做出属于自己的工具类，期待和各位一起进步呀！

微信小程序——封装公共函数的方法相关推荐

微信小程序判断服务器返回值,让微信小程序内置函数返回promise的方法
Promise API const promisic = function (func) { return function (params = {}) { return new Promise((r ...
微信小程序定义公共方法
微信小程序定义公共方法还是很简单的,一个三步创建,引入,使用 1.创建在page创建文件夹utils,在创建文件utils.js,看下我的在utils.js中定义你的方法,然后导出 2.引入在你 ...
微信小程序调取云函数信息推送失败response out of time limit or subscription is canceled hint的具体解决方法
微信小程序调云函数信息推送失败,提示errcode":45015,"errmsg":"response out of time limit or subsc ...
【微信小程序封装底部弹出框二】
[微信小程序封装底部弹出框二]  <view><button style="margin-top: 300px;" ...
微信小程序封装storage（含错误处理）
这次给你们安利的是微信小程序封装storage,先说下微信官方的 wx.getStorage({key:"",success: function (res) {},fail(err ...
微信小程序之回调函数
微信小程序之回调函数 1.首先什么是回调函数? 在经历一系列研究之后,我总结了一下,就是A函数作为B函数的参数,B函数执行完之后将返回的结果作为A函数的参数,再执行A函数.听起来很难懂,那就举个栗子吧 ...
微信小程序使用云函数进行mysql操作
微信小程序使用云函数进行mysql操作其他操纵数据库方式的一些问题准备工作云函数代码调用云函数时候的代码最后还需要注意的一些小事情: 其他操纵数据库方式的一些问题现在使用小程序,对数据库的 ...
微信小程序封装图片合成水印
微信小程序封装图片合成水印 js /components/Watermark/index.js // components/Watermark/index.js Component({/*** 组件的 ...
微信小程序封装懒加载图片
微信小程序封装懒加载图片 js /components/LazyImage/index.js // components/LazyImage/index.js Component({/*** 组件的属 ...