小程序开发笔记#2 封装一个页面栈工具类:框架与模块的导入导出(二)
发布于 2 年前 作者 laijie 2502 次浏览 来自 分享

创建文件

1)在miniprogram目录内直接新建一个文件夹,命名为utils(工具类)
(文件夹的图标会自动带绿色的加号~)

2)在utils文件夹中新建JavaScript文件,命名为navigateUtils.js

初始化类

//navigateUtils.js

//使用NavigateUtils对象封装我们的工具类函数
var NavigateUtils = {}

/**
 * 进入页面(页面栈的Push操作)
 * [@param](/user/param) {String} page 页面地址
 * [@param](/user/param) {Object} data 要传递的数据
 */
NavigateUtils.push = function(page, data, force) {}

/**
 * 返回页面(页面栈的Pop操作)
 * [@param](/user/param) {Number} delta 返回层数
 */
NavigateUtils.pop = function(delta) {}

/**
 * 改变当前页面(先Pop再Push)
 * [@param](/user/param) {String} page 页面地址
 * [@param](/user/param) {Object} data 要传递的数据
 */
NavigateUtils.redirect = function(page, data, force) {}

/**
 * 强制跳转页面(先Clear再Push)
 * [@param](/user/param) {String} page 页面地址
 * [@param](/user/param) {Object} data 要传递的数据
 */
NavigateUtils.reLaunch = function(page, data, force) {}

/**
 * 切换页面(同switchTab)
 * [@param](/user/param) {String} page 页面地址
 * [@param](/user/param) {Object} data 要传递的数据
 */
NavigateUtils.switchTab = function(page, data, force) {}

export default NavigateUtils

类的调用方法:export & import的使用

export导出模块

export语法声明用于导出函数、对象、指定文件(或模块)的原始值。

1)命名式导出

命名式导出可以同时导出多个模块

export {name1,name2,L,nameN};

可以导出函数或者常量

export {fun};
export const foo = Math.sqrt(2);

可以指定导出成员,可以认为导出成员为类中公有成员,未导出的成员为类中私有成员

//以本文为例
export {NavigateUtils}
//等价:
export {NavigateUtils:NavigateUtils}
2)默认导出

默认导出只能导出单一值,可以是一个函数、类或其它类型的值。由于我们写的工具类只是一个封装的函数集,均为公有成员,故采用更加便捷的默认导出方式

export default NavigateUtils;
//等价:
export {NavigateUtils as default};

import导入模块

1)命名式导入
import {foo,fun} from "my-module"
//{}中为导入模块中对应导出值的名字
//from后跟导入模块的文件名(路径)

具有重命名的写法

import {NavigateUtils as Nav} from '../../utils/navigateUtils';

2)默认导入

同样的,在导入时可以使用import指令导出这些默认值。

import NavigateUtils from '../../utils/navigateUtils';
//可以直接进行重命名
import NavU from '../../utils/navigateUtils'

更多有关import和export的具体用法可以看一下这篇!非常清晰
参考:https://www.cnblogs.com/libin-1/p/7127481.html

关于数据的传输

实现更方便的数据传输是我们写这个工具类的主要目的。初步目标为,直接通过传入page(目标页面路径)data(对象)作为方法参数实现页面间切换同时数据传输。

makeParams

说明:将传入的data对象中所有属性拆分为一个字符串res,并契合url要求的数据传输格式

NavigateUtils.makeParams = (data) => {
	var res = "";
	for (var key in data)
		res += key + "=" + data[key] + "&";
	return res;
}

makePageUrl

说明:将页面路径page与makeParams获得的字符串拼接

NavigateUtils.makePageUrl = (page, data) => {
    //若data为空,则表明本次页面切换不需要传递数据
	return data ? page + "?" + NavigateUtils.makeParams(data) : page;
}

由此,我们得到了我们需要的url,下一节挑一个函数写实现吧~
还是小白,如果有错误或更好的想法,欢迎各位大佬一同交流、指出哇~

7 回复

写的很清晰学习到了~同是小白一起加油😀

我超,强,收藏了

步骤和思路都很不错,值得学习!

之前没有用过,等一下试一下

好文,我也想像你一样厉害555

写的很不错,值得学习

总结得很好,小白表示学到了。一起加油!

回到顶部