mui开发知识积累总结-----puls.runtime

Runtime

Runtime模块管理运行环境，可用于获取当前运行环境信息、与其它程序进行通讯等。通过plus.runtime可获取运行环境管理对象。

属性：

version获取客户端的版本号

innerVersion获取客户端运行时环境的版本号

arguments获取第三方程序调用时传递给程序的参数

appid获取当前应用的APPID

方法：

getProperty获取指定APPID对应的应用信息

install安装应用

quit退出客户端程序

restart重启当前的应用

setBadgeNumber设置程序快捷方式上显示的提示数字

openURL调用第三方程序打开指定的URL

openFile调用第三方程序打开指定的文件

launchApplication调用第三方程序

对象：

WidgetOptionJSON对象，应用安装参数

WidgetInfoJSON对象，应用信好搏纤息

OpenFileOptionJSON对象，打开文件参数

ApplicationInfJSON对象，打开第三方程序参数

回调方法：

InstallSuccessCallback安装应用成功回调函数

InstallErrorCallback安装应用失败回调函数

GetPropertyCallBack获取应用友仿属性成功回调函数

OpenErrorCallback打开本地文件或URL失败回调函数

LaunchErrorCallback调用第三方程序失败回调函数

getProperty

获取指定APPID对应的应用信息

void plus.runtime.getProperty( appid, getPropertyCB )

说明：

获取指定APPID对应的应用信息

参数：

appid (DOMString) 可选 应用的Appid

getPropertyCB (GetPropertyCallBack) 可选 获得应用信息成功回调函数

返回值：

无

平台支持：

Android : 2.2+

支持

iOS : 4.3+

支持

WP : 7.5+

暂不支持

示例：

// 扩展API加载完毕后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false )

// 扩展API加载完毕，现在可以正常调用扩展API

function onPlusReady() {

}

// 获取应用信息

function getAppInfo() {

plus.runtime.getProperty( plus.runtime.appid, function ( wgtinfo ) {

//appid属性

var wgtStr = "appid:"+wgtinfo.appid

//version属性

wgtStr += "

version:"+wgtinfo.version

//name属性

wgtStr += "

name:"+wgtinfo.name

//description属性

wgtStr += "

description:"+wgtinfo.description

//author属性

wgtStr += "

author:"+wgtinfo.author

//email属性

wgtStr += "

email:"+wgtinfo.email

//licence属性

wgtStr += "

license:"+wgtinfo.license

//licensehref属性

wgtStr += "

licensehref:"+wgtinfo.licensehref

//features 属性

wgtStr += "

features:"+wgtinfo.features

console.log( wgtStr )

} )

}

获取应用信息

install

安装应用银和

void plus.runtime.install( wgtFilePath, options, installSuccessCB, installErrorCB)

说明：

安装包格式为wgt应用，其扩展名为'.wgt'，使用这个方法之前，需要提前把安装包从网络处或其他位置放置到运行时环境可以访问的位置。

参数：

wgtFilePath (DOMString) 可选 应用安装文件或基座安装文件（扩展名为'.wgt'）

options (WidgetOption) 可选 应用安装设置的参数

installSuccessCB (InstallSuccessCallback) 可选 正确安装后的回调

installErrorCB (InstallErrorCallback) 可选 安装失败的回调

返回值：

无

平台支持：

Android : 2.2+

支持，支持apk包的安装

iOS : 4.3+

支持，不支持ipa包的安装

WP : 7.5+

暂不支持

quit

退出客户端程序

void plus.runtime.quit()

说明：

退出客户端程序

返回值：

无

平台支持：

Android : 2.2+

支持

iOS : 4.3+

iOS系统不支持此功能，只能通过设备的Home键退出应用。

WP : 7.5+

暂不支持

示例：

// 扩展API加载完毕后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false )

// 扩展API加载完毕，现在可以正常调用扩展API

function onPlusReady() {

plus.key.addEventListener( "backbutton", onKeyBack, false )

}

function onKeyBack() {

plus.runtime.quit()

}

restart

重启当前的应用

void plus.runtime.restart()

说明：

重启当前的应用

返回值：

无

平台支持：

Android : 2.2+

支持

iOS : 4.3+

支持

WP : 7.5+

暂不支持

示例：

// 扩展API加载完毕后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false )

// 扩展API加载完毕，现在可以正常调用扩展API

function onPlusReady() {

}

// 重启当前的应用

function restartApp() {

plus.runtime.restart()

}

重启当前的应用

Restart

setBadgeNumber

设置程序快捷方式上显示的提示数字

void plus.runtime.setBadgeNumber( number )

说明：

设置程序快捷方式上显示的提示数字

参数：

number (DOMString) 可选 在快捷方式上显示的数字，参数为0则表示清除提示数字。

返回值：

无

平台支持：

Android : 2.2+

支持

iOS : 4.3+

支持

WP : 7.5+

暂不支持

示例：

// 扩展API加载完毕后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false )

// 扩展API加载完毕，现在可以正常调用扩展API

function onPlusReady() {

}

// 设置数字

function setBadge() {

plus.runtime.setBadgeNumber(8)

}

// 清除数字

function clearBadge() {

plus.runtime.setBadgeNumber(0)

}

设置程序快捷方式上显示的提示数字

openURL

调用第三方程序打开指定的URL

void plus.runtime.openURL( url, errorCB, identity )

说明：

调用第三方程序打开指定的URL

参数：

url (DOMString) 可选 字符串类型，各平台支持的地址类型存在差异，参考平台URL支持表。

errorCB (OpenErrorCallback) 可选 打开指定URL地址失败时回调，并返回失败信息。

identity (DOMString) 可选 在iOS平台此参数被忽略，在Android平台为程序包名，如果指定的包名不存在，则打开URL地址失败。

返回值：

无

平台支持：

Android : 2.2+

支持

iOS : 4.3+

支持，不支持identity参数

WP : 7.5+

支持，不支持identity参数

openFile

调用第三方程序打开指定的文件

void plus.runtime.openFile( filepath, options, errorCB )

说明：

调用第三方程序打开指定的文件

参数：

filepath (DOMString) 可选 字符串类型，文件路径必须是本地路径，否则会导致打开文件失败。

options (OpenFileOption) 可选 打开文件的参数，参考OpenFileOption对象。

errorCB (OpenErrorCallback) 可选 打开文件 *** 作失败时回调，返回失败信息。

返回值：

无

平台支持：

Android : 2.2+

支持

iOS : 4.3+

支持

WP : 7.5+

支持

示例：

// 扩展API加载完毕后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false )

// 扩展API加载完毕，现在可以正常调用扩展API

function onPlusReady() {

}

// 打开文件 *** 作

function testFile() {

plus.runtime.openFile( "_doc/a.pdf" )

}

调用第三方程序打开文件

launchApplication

调用第三方程序

void plus.runtime.launchApplication( appInf, errorCB )

说明：

调用第三方程序

参数：

appInf (ApplicationInf) 可选 要启动第三方程序的描述信息

errorCB (LaunchErrorCallback) 可选 启动第三方程序失败时回调，并返回失败信息。

返回值：

无

平台支持：

Android : 2.2+

支持

iOS : 4.3+

支持

WP : 7.5+

暂不支持

示例：

// 扩展API加载完毕后调用onPlusReady回调函数

document.addEventListener( "plusready", onPlusReady, false )

// 扩展API加载完毕，现在可以正常调用扩展API

function onPlusReady() {

}

// 调用第三方程序

function launchApp() {

if ( plus.os.name == "Android" ) {

plus.runtime.launchApplication( {pname:"com.android.browser"

,extra:{url:"http://www.html5plus.org"}}, function ( e ) {

alert( "Open system default browser failed: " + e.message )

} )

} else if ( plus.os.name == "iOS" ) {

plus.runtime.launchApplication( {action:"http://www.html5plus.org"}, function ( e ) {

alert( "Open system default browser failed: " + e.message )

} )

}

}

调用第三方程序

version

获取客户端的版本号

plus.runtime.version

说明：

客户端版本号，字符串类型，在编译环境中设置的版本号。

平台支持：

Android : 2.2+

支持

iOS : 4.3+

支持

WP : 7.5+

暂不支持

innerVersion

获取客户端运行时环境的版本号

plus.runtime.innerVersion

说明：

运行时环境版本号，格式为：[主版本号].[次版本号].[修订版本号].[编译代号]。

平台支持：

Android : 2.2+

支持

iOS : 4.3+

支持

WP : 7.5+

暂不支持

arguments

获取第三方程序调用时传递给程序的参数

plus.runtime.arguments

说明：

第三方程序传递过来的参数，字符串格式类型数据。 不是由第三方程序调用启动，则返回空字符串。

平台支持：

Android : 2.2+

支持，把第三方传递过来的参数组合成JSON格式字符串，如“{"name":"XiaoMing","password":"123456"}”

iOS : 4.3+

支持，把第三方传递过来的参数，去掉前缀，如“name=XiaoMing&password=”，建议第三方程序传递JSON格式字符串

WP : 7.5+

暂不支持

appid

获取当前应用的APPID

plus.runtime.appid

说明：

当前应用的APPID，字符串类型。注意，如果是在HBuilder真机运行获取的是固定值“HBuilder”，需要提交App云端打包后运行才能获取真

实的APPID值。

平台支持：

Android : 2.2+

支持

iOS : 4.3+

支持

WP : 7.5+

支持

WidgetOption

JSON对象，应用安装参数

说明：

可通过对象设置安装的应用是否进行appid校验、版本号校验等。

属性：

appid：DOMString，只读属性，默认值 null。当前正在安装的应用的appid，填写该值后应用安装时将进行校验，如安装包内的appid和指定

的不同则终止当前应用的安装

force：Boolean，只读属性，默认值 false。当取值为true，应用安装为强制安装，不再进行版本号的校验，如果为false则进行版本号校验

，如果将要安装应用的版本号不高于现有应用的版本号则终止安装，并返回安装失败

WidgetInfo

JSON对象，应用信息

属性：

appid：DomString，应用的APPID

version：DomString，应用的版本号

name：DomString，应用的名称

description：DomString，应用描述信息

author：DomString，应用描述信息

email：DomString，开发者邮箱地址

license：DomString，应用授权描述信息

licensehref：DomString，应用授权说明链接地址

features：DomString[]，应用许可特性列表

OpenFileOption

JSON对象，打开文件参数

属性：

popover：json，JSON对象，格式如{top:10left:10width:200height:200}，所有值为像素值，左上坐标相对于容器webview的位置。仅

在iPad设备平台有效。

ApplicationInf

JSON对象，打开第三方程序参数

属性：

pname：DOMString，仅Android平台支持，表示程序的包名，其它平台忽略此属性值。

action：DOMString，Android平台上与系统的action值一致；iOS平台为要调用程序的URLScheme格式字符串。

extra：JSON，仅Android平台支持，为JSON格式，用于传递给要调用程序的参数，如extra:{url:"http://www.html5plus.org"}。

InstallSuccessCallback

安装应用成功回调函数

void onSuccess(widgetInfo){

// Code here

}

说明：

安装应用成功回调函数

参数：

widgetInfo (WidgetInfo) 必选 应用信息，参见：WidgetInfo

平台支持：

Android : 2.2+

支持，如安装文件为APK，则不触发此回调函数

iOS : 4.3+

支持

WP : 7.5+

暂不支持

InstallErrorCallback

安装应用失败回调函数

void onError(error){

// Handle the error

}

说明：

安装应用失败回调函数

参数：

error (DOMException) 必选 安装失败的错误信息

平台支持：

Android : 2.2+

支持

iOS : 4.3+

支持

WP : 7.5+

暂不支持

GetPropertyCallBack

获取应用属性成功回调函数

void onGetPropertyCB(widgetInfo){

// Code here

}

说明：

获取应用属性成功回调函数

参数：

widgetInfo (WidgetInfo) 必选 应用信息，参见：WidgetInfo

平台支持：

Android : 2.2+

支持

iOS : 4.3+

支持

WP : 7.5+

暂不支持

OpenErrorCallback

打开本地文件或URL失败回调函数

void onError(error){

// Handle the error

}

说明：

打开本地文件或URL失败回调函数

参数：

error (DOMException) 必选 打开 *** 作失败的错误信息

平台支持：

Android : 2.2+

支持

iOS : 4.3+

支持

WP : 7.5+

暂不支持

LaunchErrorCallback

调用第三方程序失败回调函数

void onError(error){

// Handle the error

}

说明：

调用第三方程序失败回调函数

参数：

error (DOMException) 必选 *** 作失败的错误信息

平台支持：

Android : 2.2+

支持

iOS : 4.3+

支持

WP : 7.5+

暂不支持

您应该是指 location.href或者类似这种方式进入了外部链接的页面吧？根据个人经验，搭让您可以使用父页面打开氏枝前子页面的方式去展示这个外部页面，这样当您想跳出父页面，返回父页面的上一个页面、或者直接退出程序的时候，您就可以直接 *** 作在您本地的父页面就可以了。

或者歼清你可以使用iframe标签<iframe>，在当前页面引用外部页面。效果和 *** 作方式差不多。

如果疑问可以追问，我也是H5开发者。

mui是一个高性能的HTML5开发框架，从UI到效率，都在极力追求原生体验；这个框架自身有一些规则，刚接触的同学不很熟悉，特总结本文；想了解mui更详细的信息，请访问mui官网

DOM结构

关于mui页面的dom，你需要知道如下规则。

固定栏靠前

所谓的固定栏，也就是带有.mui-bar属性的节点，都巧信是基于fixed定位的元素；常见组件包括：顶部导航栏（.mui-bar-nav）、底部工具条(.mui-bar-footer)、底部选项卡（.mui-bar-tab）这些元素使用时需遵循一个规则：放在.mui-content元素之前，即使是底部工具条和底部选项卡，也要放在.mui-content之前，否则固定栏会遮住部分主内容；

### 一切内容都要包裹在mui-content中

除了固定栏之外，其它内容都要包裹在.mui-content中，否则就有可能被固定栏遮罩，原因：固定栏基于Fixed定位，不受流式布局限制，普通内容依然会从top:0的位置开始布局，这样就会被固定栏遮罩，mui为了解决这个问题，定义了如下css代码：

[css] view plain copy.mui-bar-nav ~ .mui-content { padding-top: 44px }  .mui-bar-footer ~ .mui-content {  padding-bottom: 44px }  .mui-bar-tab ~ .mui-content {  padding-bottom: 50px }  你当然可以通过自定义CSS的方式实现如上类似效果，但为了使用简便，建议将除固定栏之外的所有内容，清团全部放在.mui-content中。

始终为button按钮添加type属性

若button按钮没有type属性，浏览器默认按照type=submit逻辑处理，这样若将没有type的button放在form表单中，点击按钮就会执行form表单提交，页面就会刷新，用户体验极差。

窗口管理

页面初始化：必须执行mui.init方法

mui在页面初始化时，初始化了很多参数配置，比如：按键监听、手势监听等，因此mui页面都必须调用一次mui.init()方法；

页面跳转：抛弃href跳转

当浏览器加载一个新页面时，若页面DOM尚未渲染完毕，页面会先显示空白，然后等DOM渲染完毕后，再显示具体内容，这是WEB浏览器技术无法逾越的体验障碍；为解决这个问题，建议使用[mui.openWindow方法](http://dcloudio.github.io/mui/javascript/#openwindow)打开一个新的webview，mui会自动监听新页面的loaded事件，若加载完毕，再自动显示新页面；扩展阅读：

hello mui中的无等待窗体切换是如何实现的

提示HTML5的性能体验系列之一 避免切页白屏

页面关闭：勿重复监听backbutton

mui框架自动封装了页面关闭逻辑，若希望自定义返回逻辑（例如编辑页面的返回，需用户确认放弃草稿后再执行返回逻辑），则需要重写mui.back方法，切勿简单通过addEventListener添加backbutton监听，因为addEventListener只会增加新的执行程序，mui默认封装孝正轮的监听执行逻辑依然会继续执行，因此若仅addEventListener添加用户确认框，则用户即使选择了取消，也会继续关闭窗口。

手势 *** 作

点击：忘记click

快速响应是mobile App实现的重中之重，研究表明，当延迟超过100毫秒，用户就能感受到界面的卡顿，然而手机浏览器的click点击存在300毫秒延迟（至于为何会延迟，及300毫秒的来龙去脉，请自行谷百），mui为了解决这个问题，封装了tap事件，因此在任何点击的时候，请忘记click及onclick *** 作，统统使用如下代码：

[javascript] view plain copy

element.addEventListener('tap',function(){

//点击响应逻辑   })

---