小程序js中如何引入组件_IT百科

小程序js中引入组件如一下步骤：

1、准备好外部想要引入的外部文件，命名为util.js，并且填充固定的文件内容（一般是固定的库）。

2、打开util.js，继续填写重要内容将要使用的方法用module.exports给暴露出来。

3、将外部js放在指定的文件夹utils里（utils规定存放js库和数字格式化文件）。

4、在想要用到这个方法的js里面require这个js，然后调用即可。

桌面组件是安卓手机特有的一个功能。

通过给手机桌面添加小组件，可以在桌面上展示内容。

方法：

1.通过长按桌面空白位置（或两个手指捏合）进入桌面编辑模式

2.点击窗口小工具（不同手机有所差异，这边演示的是华为手机）

3.选择想要添加的桌面组件（点击或拖动到桌面）

4.最终显示效果

lhgdialog基本使用方法：

.在需要调用lhgdialog编辑器的网页head标签结束之前添加以下代码：

[html] view plaincopy

lhgdialog提供两种方式d出窗口：

//第一种jQ调用方式

J(function(){

J('#dg').dialog({ id:'test1', html:'lhgdialog' })

})

//如果作为jQ组件来用的话J就得换成$

$(function(){

$('#dg').dialog({ id:'test1', html:'lhgdialog' })

})

//第二种普通函数式调用

function opdg( id )

{

var dg = new J.dialog({ id:id, html:'lhgdialog' })

//如果作为jQ组件来用的话J就得换成$

var dg = new $.dialog({ id:id, html:'lhgdialog' })

dg.ShowDialog()

}

</script>

</head>

<body>

</body>

[html] view plaincopy

//第一种jQ调用方式

J(function(){

J('#dg').dialog({ id:'test1', html:'lhgdialog' })

})

//如果作为jQ组件来用的话J就得换成$

$(function(){

$('#dg').dialog({ id:'test1', html:'lhgdialog' })

})

//第二种普通函数式调用

function opdg( id )

{

var dg = new J.dialog({ id:id, html:'lhgdialog' })

//如果作为jQ组件来用的话J就得换成$

var dg = new $.dialog({ id:id, html:'lhgdialog' })

dg.ShowDialog()

}

</script>

</head>

<body>

</body></span>

[html] view plaincopy

获得父窗体对象方法:

dg = frameElement.lhgDG

var W = dg.curWin//获得父窗体

parent参数示例并且父子窗口都加了遮罩层

//这里调用窗口都用的普通函数方式

function opdg1(){

var testDG = new J.dialog({ id:'test19', page:'content2.html', cover:true })

testDG.ShowDialog()

}

//内容页content2.html里的代码为：

var DG = frameElement.lhgDG

function opChild()

{

var testDG2 = new DG.curWin.J.dialog({ id:'child', cover: true, html:'我是子窗口', width:300, height:200, parent:DG })

testDG2.ShowDialog()

}

//你可以打开content2.html页面查看里面的代码，这里要注意如果想在窗口中d出子窗口,

不要在子窗口的页面中再加载lhgdialog.min.js来调用d出窗口的函数，

一定要用curWin.J.dialog，因为不这样父子窗口间的zIndex值会是2个，它们层叠的次序就乱了。

关闭窗口刷新父页面

J('#btn25').dialog({ id:'test25', page:'content4.html' })

//content4.html页面里的代码为：

var DG = frameElement.lhgDG

DG.addBtn( 'ok', '确定', ok )

function ok()

{

// 这里写你要 *** 作的代码，最后写刷新代码

DG.curWin.location.reload()

}

//当调用窗口的页面被刷新，窗口就会自动关闭，所以不用调用程序的cancel关闭函数

lhgdialog API 说明

一）窗口lhgdialog.min.js文件的url参数(3.4.0新增)

参数形式为：<script type="text/javascript" src="lhgdialog.min.js?t=self&s=chrome"></script>

t：指定d出窗口的页面(替代原来的第22个参数SetTopWindow)

参数值：self，在当前页面d出窗口。此参数只用在框架页面中，如果不写此参数则窗口跨框架d出在框架最顶层页面，如果值为self则不跨框架，而在当前面页d出。

s：窗口使用的皮肤的名称(3.5.0修改)

参数值：默认default，不写此参数则值为default。如果你想在同一页面使用不同皮肤的窗口，就要把你要使用的皮肤的名称都写上，中间用","隔开，例如：lhgdialog.min.js?s=default,chrome，此参数用来动态给窗口换肤，参数的值为skins文件夹下各皮肤文件夹的名，具体使用方法请参阅皮肤制作

url参数不需要设定的就可以不写，不写时就使用默认值。

初始化参数列表

二）初始化参数列表：即为J.dialog({ 这里的参数 })

lockScroll：d出遮罩层时是否消除滚动条(3.5.2新增)

参数值：默认为“false”，如果为true则d出遮罩层时会去掉浏览器右边的滚动条。

autoPos：当浏览器大小改变时窗口的位置是否自动定位(3.4.2新增 3.5.2修改)

参数值：默认为false，不自动定位窗口位置。如果想让窗口自动定位，属性值分为2种，一种值为一个对象，对象中有2个属性，分别为left和top，left和top的值与窗口参数left和top的值是一样的。例如：autoPos:{left:'right',top:'bottom'}。另一种是值为true，这里窗口默认为自动居中。这和第一种值形式的：autoPos:{left:'center',top:'center'}的效果是相同的，只不过为true是一种简写方式。

skin：指定窗口的皮肤(3.5.0新增)

参数值：默认为“default”。

args：传递的参数(3.5.0新增)

参数值：值可为任意类型的数据。

onCancel：自定义窗口关闭函数(3.5.0修改)

参数值：如果加了此参数则可以调用此函数来关闭窗口。3.5.0将此属性改为此函数参数的作用是在关闭窗口前执行这个函数来完成一定动作。

cancelBtnTxt：设置取消按钮的文本(3.4.2新增)

参数值：默认为“取消”。此参数和onCancel配合使用即可改变取消按钮为其它作用的按钮。

autoCloseFn：自动关闭窗口时执行的函数(3.4.2新增)

参数值：当指定了timer属性后，此参数为窗口关闭前执行的函数。

bgcolor：设置遮罩层的颜色(3.4.1新增)

参数值：默认为白色(#fff)。

opacity：设置遮罩层的透明度(3.4.1新增)

参数值：默认为0.5(也就是50%的透明度)，值为小于1的一位小数。

onMinSize：最小化按钮调用的函数(3.4.1新增)

参数值：此属性为一个函数，就是单击最小化按钮调用的函数，主要是为用户提供个接口，这里你可以自己写这个函数。

maxBtn：是否显示最大化按钮(3.4.0新增)

参数值：默认true(显示，如果titleBar参数为false，此参数无效)，false(不显示)。注：如果fixed参数为true，那么此参数就自动为false。

minBtn：是否显示最小化按钮(3.4.0新增)

参数值：默认true(显示，如果titleBar参数为false，此参数无效)，false(不显示)。最小化按钮功能暂无

timer：定时关闭窗口时间，单位为秒(3.4.0新增)

参数值：无，不带单位的数字，单位为秒。

id：窗口的id号

参数值：默认lhgdlgId，自定义对话框ID属性，要保证在页面中是唯一的，不能和页面中任何元素的id相同。

注意：如果页面中只有一个d出窗口此参数可以不写，但页面中如果有1个以上的d出窗口则一定要加此参数。

title：窗口的标题文本

参数值：默认lhgdialogd出窗口，窗口标题的文件字符。

width：窗口的宽度

参数值：默认400，不带单位的数字。

height：窗口的高度

参数值：默认300，不带单位的数字。

titleBar：是否显示标题栏

参数值：默认true(显示)，false(不显示，注意如果不显示一定要选择相应的皮肤，无标题栏的皮肤)。

iconTitle：是否显示标题栏左边小图标

参数值：默认true(显示，如果titleBar参数为false，此参数无效），false(不显示)。

xButton：是否显示窗口右上角的X关闭按钮

参数值：默认true(显示，如果titleBar参数为false，此参数无效），false(不显示)。

btnBar：是否显示按钮栏

参数值：默认true(显示），false(不显示)。

cancelBtn：是否显示取消按钮

参数值：默认true(显示，要显示的同时必须设btnBar参数为true），false(不显示)。

page：窗口内容页的地址

参数值：窗口的内容页为一个单独的页面文件，这个文件的路径是内容页面文件相对于调用窗口插件的路径或也可使用绝对路径，如果此参数的值为不同域的外部链接，那一定要使下面的link参数为真。

link：是否为外部链接

参数值：默认false(不是外部链接），true(是外部链接，这里的外部链接指的是不同域的网址)。

html：窗口的内容为HTML代码

参数值：可以是HTML代码或DOM对象。

fixed：是否开启静止定位

参数值：默认false(不开启），true(开启，静止定位指的就是窗口随屏滚动)。

left：X轴的坐标

参数值：默认center(居中），left(屏幕的左边)，right(屏幕的右边)，如果开启了fixed则原点以浏览器视口为基准。

top：Y轴的坐标

参数值：默认center(居中），top(屏幕的最上边)，right(屏幕的最下面)，如果开启了fixed则原点以浏览器视口为基准。

cover：是否开启锁屏

参数值：默认false(不开启），true(开启，中断用户对话框之外的交互，用于显示非常重要的 *** 作/消息)。

drag：是否允许拖动对话框

参数值：默认true(允许），false(不允许)。

resize：是否允许拖动改变窗口大小

参数值：默认true(允许），false(不允许)。

rang：是否限制窗口挪动范围

参数值：默认false(不限制），true(限制，也就是不允许窗口拖出浏览器的可视区域)。

loadingText：窗口加载时的文本字符

autoSize：是否窗口自适应大小

参数值：默认false(不适应），true(自动适应窗口内容的大小)。

SetTopWindow：指定窗口要在d出时的那个页面的window对象

此参数已被新的url参数t所替代，3.4.0版本删除了此参数。

parent：子窗口的父窗口对象

参数值：此参数只用在d出的窗口中再d出子窗口时指定父窗口对象，注意如果2层d出窗口都有遮罩层则一定要加此参数。

dgOnLoad：窗口加载后执行的函数

参数值：注意此参数值一定要为函数。

onXclick：窗口右上角X关闭按钮拦截函数

参数值：如果加了此参数则窗口右上角X关闭按钮则执行此函数。

其中一些参数的用法请参照示例中的使用方法

API函数接口列表

API接口列表：

setArgs(args) ：设置要传递的数据(3.5.0新增)

参数1：要传递的数据，可以为任意类型的数据。

getArgs() ：获取传递的数据(3.5.0新增)

参数1：无，可以为任意类型的数据。

addBtn(id,txt,fn,pos) ：在窗口的按钮栏增加按钮(3.4.2新增pos参数)

参数1：按钮的id

参数2：按钮上的文本

参数3：按钮绑定的函数

参数4：用来指定新增加按出现在已有按钮的左边(值为'left')还是右边(值为'right')

SetCancelBtn(txt,fn) ：重新设定取消按钮(3.4.2新增)

参数1：按钮的文本。

参数2：按钮重新绑定的函数。

closeTime(second,bFn,aFn) ：定时关闭窗口(3.4.0新增,3.4.2修改，3.5.2修改)

参数1：关闭窗口的时间，单位为秒。

参数2：关闭窗口前执行的函数。

参数3：关闭窗口后执行的函数。(3.5.2新增此参数)

SetPosition(top,left,fix) ：重新指定窗口的位置(3.4.0新增,3.4.2修改) : SetPosition(left,top)

参数1：X轴的坐标(详细见初始化参数里的第17个参数)

参数2：Y轴的坐标(详细见初始化参数里的第18个参数)

参数3：是否是静止定位(详细见初始化参数里的第16个参数，这里要注意如果fixed参数为true时这个参数一定要为true，否则就不要加此参数)

注：原来的第3个参数在3.4.2中已删除，这个参数程序会自动根据你调用窗口时的参数fixed的设置来判断。

maxSize() ：窗口最大化函数接口(3.4.1新增)

参数：无，你可以通调用此函数来控制窗口的最大化和还原。

SetMinBtn(fn) ：重新设定最小化按钮函数(3.4.1新增)

参数1：重新给最小化按钮绑定的函数，你可以通调用此函数重新给最小化按钮绑定函数。

iWin(id) ：获取指定id的窗口内容页的window对象(3.4.1新增)

参数1：指定窗口的id，此函数用来返回指定id的窗口的内容页的window对象，主要用在传值使用中。

iDoc(id) ：获取指定id的窗口内容页的document对象(3.4.1新增)

参数1：指定窗口的id，此函数用来返回指定id的窗口的内容页的document对象，主要用在传值使用中。

iDg(id) ：获取指定id的窗口DOM对象(3.4.1新增)

参数1：指定窗口的id，此函数用来返回指定id的窗口的DOM对象，主要用判断此窗口是否存在。

SetXbtn(fn,noShow) ：重新设置X按钮动作(3.4.0新增)

参数1：重新给X按钮绑定的函数

参数2：是否显示X按钮

SetTitle(txt) ：重新指定标题的文本(3.4.0新增)

参数1：重新指定的标题的文本内容。

ShowDialog() ：显示窗口

无参数，jQ调用方式不需要加此方法。

cancel() ：关闭窗口

无参数。

reDialogSize(width,height) ：重新指定窗口的大小

参数1：窗口的宽度，如：600，不带单位的数字

参数2：窗口的高度，如：500，不带单位的数字

removeBtn(id) ：移除窗口中按钮栏的按钮

参数1：按钮的id

SetIndex() ：设置窗口的层叠次序

无参数

三）API属性接口列表：

dialogId ：窗口的id(3.5.0新增)

获取窗口设置的id值，此id不是窗口真正的id，此id是你在调用窗口时设置的id的值。

parent ：父窗口对象实例(3.5.0新增)

此属性就是取的你设置的parent参数属性的值，即：J.dialog({ parent:dg }) 这里的parent的值。

dg ：窗口的DOM对象

可通过此对象对窗口和窗口内元素进行 *** 作。

lhgDG ：创建的窗口的实例对象

此属性只用在page参数指定的内容页面中，它取的是创建此窗口的实例对象。

topWin ：顶层页面的window对象

此参数在3.4.1版本中删除了，要想得到顶层页面的window对象直接写top就行了。

topDoc ：顶层页面的document对象

此参数在3.4.1版本中删除了，要想得到顶层页面的document对象直接写top.document就行了。

curWin ：窗口调用页面的window对象

也就是加载lhgdialog.min.js的页面的window对象，如果不是在框架中d出它和topWin是相等的。

curDoc ：窗口调用页面的document对象

也就是加载lhgdialog.min.js的页面的document对象，如果不是在框架中d出它和topDoc是相等的。

dgWin ：内容页的window对象

如果参数为page，且link参数不为真，那这个就是内容页的window对象。

dgDoc ：内容的document对象

如果参数为page，且link参数不为真，那这个就是内容页的document对象。

欢迎分享，转载请注明来源：内存溢出

原文地址:https://54852.com/bake/11950039.html

小程序js中如何引入组件

发表评论

评论列表（0条）