小程序记录：全局公用组件的引入和使用

背景

甲方需要一个小程序来完成业务中的部分功能。第一次接触下程序并开发。没有具体去了解相关的框架，直接使用小程序原生完成。

功能

小程序自带的加载框样式不符合甲方的UI需求。甲方需要一个白底，黑色图标的弹框（载入中、正确、错误等提示）。

书写

一开始，是在需要使用到的页面中，都在它们对应的JSON 文件中对应的引入。在大概写了5、6个页面之后发现这种方式比较繁琐，并且基本上每个页面都要再单独引入一次。
后来发现可以在APP.JSON 中使用 usingComponents 单独引入。这样就不需要在每个 页面的 json 中都 引入一次。只要在对应使用的 wxml 中写这个组件就可以。

代码：

//app.json
{
	"pages":[... 小程序中的页面],
	"tabBar":{...tabBar相关设置},
	"usingComponents": {
	        "dialogAlert": "/pages/components/dialogAlert/dialogAlert"
	}
}

需要引入的 wxml 中
<dialogAlert id="dialogAlert"></dialogAlert>

dialogAlert 的构成：整个弹窗有几个部分，分别是：背景蒙版，弹框主体，弹框中的图标和显示的文字。
蒙版

	position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 20000;
    background: rgba(0, 0, 0, 0.75);

弹框：
主体为白色，在页面中居中定位。
一个和类型对应的图标：载入中（载入效果可以根据我的加载效果进行适当改变），正确，错误等。需要根据传入的参数决定展示哪个图表。
一段文字，根据实际情况展示给用户看的信息。
这里这个白色主体只有一个最小高度不能写死高度，因为实际中需要展示的信息长短并不能确定。这也是为什么不用微信自带弹框的原因（在我写这个文章的时候，loading 还只允许7个字的提示）。

使用

1. 我在util中定义了调用 dialog 的方法。因为不知道怎么在我的 util 中调用到整体的 app 对象。我先定义了一个 getPage 的方法。

let getPage = function () {
    let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1]
    let component = currentPage.selectComponent('#dialogAlert')
    return component
}

这里返回的 component 目的是在页面栈中取到当前位于最上一级的页面。也就是我实际业务中，调用弹框的页面。

2. 封装不同的弹框类型方便直接调用

//加载
let loadingAlertShow = function (msg) {
    let component = getPage()
    return component.showAlert(msg, 'loading', true);
}
//正确
let successAlertShow = function (msg, autoHide = false) {
    let component = getPage()
    return component.showAlert(msg, 'success', true, autoHide);
}
//错误
let errorAlertShow = function (msg, autoHide = false) {
    let component = getPage()
    return component.showAlert(msg, 'error', true, autoHide);
}
// 主动关闭弹框
let alertHide = function () {
    let component = getPage()
    return component.hideAlert();    
}

这样通过和 1 中的关联就可以调用自己需要的类型的弹框。

3. 调用方法的含义。第一步中已经获取到了component ，也就是当前的页面。component.showAlert() 调用的 showAlert 方法是写在组件 dialogAlert 中的 methods 中的方法。因为我们是全局引入的 dialogAlert 。所以可以通过component.showAlert() 直接调用到。

4. showAlert 方法

 /**
         * 
         * @param {String} str 弹窗显示的 文字
         * @param {String} type 弹窗显示图标/  error 错误  success 成功  loading 等待
         * @param {Boolean} show 控制是否显示弹框
         * @param {Boolean} autoHide 弹框是否自动关闭 默认值 false loading中需要主动触发关闭。正确和错误的情况下，到设定的时间主动关闭
         */

        showAlert(str, type, show, autoHide = false) {
			... 定时器和其他业务逻辑
		}
		// 主动调用关闭
		hideAlert(){
			...清空定时器和其他业务逻辑
		}

以上
就是页面中对弹框的封装。

具体使用

在具体的页面的 .js 文件中，引入 util 。我的项目里面是叫 alert_util 。

const alert = require('../../../../utils/alert_util')
Page({
....
// 如某个点击中 触发某个操作后
handleClick(){
	alert.loadingAlertShow('信息提交中...')
	//就可以达到页面出现弹框的效果
	//再在请求成功后调用
	alert.alertHide()
	//就可以关闭弹框
}
....
})

总结

因为是第一次写，上面肯定有很多不合理的地方，希望大家指正。