HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

manifest.json文档说明

manifest 5+App开发

此文档不再维护,请参考新文档地址:https://uniapp.dcloud.io/tutorial/app-manifest

概述

manifest.json文件是5+移动App的配置文件,用于指定应用的显示名称、图标、入口页面等信息。用户可通过HBuilder|HBuilderX的可视化界面视图进行配置,也可在源码视图中根据以下规范直接修改。
manifest.json文件根据w3c的webapp规范制定,plus节点下内容为HTML5 Plus扩展规范,其下包括iOS和Android子节点,内容来源分别为iOS和Android原生打包所要求的参数,用于对5+移动App打包为ipa或apk安装包进行配置。
uni-app项目的manifest.json规范参考:https://uniapp.dcloud.io/collocation/manifest

manifest.json

以下是完整的manifest.json配置文件,在HBuilder|HBuilderX中切换到“源码视图”按以下规范进行手动配置。

{  
    "id": "H512345",               //必填  
    "name": "应用名称",             //必填  
    "version": {  
        "name": "1.0",             //必填,推荐使用.分割,如1.0  
        "code": "10"               //必填,纯数字  
    },  
    "launch_path": "入口页面",      //必填  
    "description": "应用描述信息",  //可选  
    "icons": {                     //可选,以分辨率为索引键名  
        "72": "图标路径"  
    },  
    "developer": {  //选填,开发者信息  
        "name": "开发者名称",  
        "email": "开发者邮箱地址",   
        "url": "开发者网站"  
    },  
    "screenOrientation": [ //应用支持的屏幕方向  
        "portrait-primary",   //竖屏  
        "portrait-secondary", //竖屏(反向),上下颠倒  
        "landscape-primary",  //横屏,Home键在右侧  
        "landscape-secondary" //横屏(反向),Home键在左侧  
    ],  
    "permissions": {  //5+模块,uni-app项目对应节点为"app-plus" -> "modules"  
        "Accelerometer": {  
            "description": "加速度传感器"  
        }  
    },  
    "plus": {   // 5+扩展配置, uni-app项目对应节点为"app-plus"  
        "allowsInlineMediaPlayback":"true|false",  //可选,是否允许video标签非全屏播放 (仅iOS生效)  
        "mediaPlaybackRequiresUserAction":"true|false", //可选,可通过此属性配置h5中的音频是否自动播放,注意当设置为false时开启自动播放,默认为true(仅iOS生效 HX3.0.1 + 版本支持)  
        "appWhitelist": [    //可选,应用白名单列表(Android平台为apk下载地址,iOS平台为appstore地址)  
        ],  
        "arguments": "",    //可选,预设应用的启动参数  
        "cache": {          //可选,缓存配置  
        },  
        "cers": {           //可选,异常错误反馈配置  
        },  
        "channel": "",       //可选,渠道信息  
        "confusion": {       //可选,原生js文件混淆配置  
        },  
        "distribute": {      //必选,云端打包配置  
        },  
        "error": {          //可选,错误页面配置  
        },  
        "locales": {         //可选,国际化配置  
        }  
        "nativePlugins": {    //可选,原生插件相关配置  
        },  
        "popGesture": "none|close|hide",    //可选,侧滑返回功能配置  
        "kernel": {          //可选,Webview渲染内核配置  
        },  
        "runmode": "normal|liberate",      //可选,运行模式  
        "safearea": {        //可选,安全区域配置  
        },  
        "schemeWhitelist":[  //可选,Scheme白名单列表https://ask.dcloud.net.cn/article/94  
        ],  
        "splashscreen": {    //可选,splash界面配置  
        },  
        "ssl": {             //可选,SSL配置  
        },  
        "softinput": {       //可选,软键盘配置  
        },  
        "statusbar": {       //可选,系统状态栏配置  
        },  
        "useragent": {       //可选,UA配置  
        },  
        "launchwebview": {   //可选,应用首页配置  
        },  
        "secondwebview": {   //可选,应用双首页配置  
        },  
        "uni-app": {        //可选,uni-app应用的配置  
        },  
        "compatible": {      //可选,编译器兼容性配置  
        },  
        "wap2app": {         //可选,wap2app相关配置  
        },  
    }  
}

id

应用标识(AppID),在可视化“基础配置”项中。
更多信息参考DCloud AppID使用说明

name

应用名称,打包为apk/ipa安装到手机上显示的名称。

version

应用版本信息,包括版本名称和版本号。

launch_path

应用入口页面(首页)地址,相对于应用资源根目录(默认为根目录的index.html)。也可以是网络地址(需以http/https开头)。

description

应用描述信息。

icons

应用的图片配置(暂未使用)。

developer

开发者信息,可选内容。

  • name
    开发者名称
  • email
    开发者邮箱地址
  • url
    开发者网站地址

<a id="screenOrientation" />

screenOrientation

应用支持的屏幕方向,字符串数组类型,配置需要支持的方向,可取值:

  • portrait-primary
    竖屏
  • portrait-secondary
    竖屏(反向),山下颠倒
  • landscape-primary
    横屏,Home键在右侧
  • landscape-secondary
    横屏(反向),Home键在左侧

permissions

要使用的模块配置,不要手动修改,应该在HBuilderX中manifest.json的可视化界面“(App)模块权限配置”项的“打包模块配置”下勾选
HBuilderX可视化操作
支持以下模块:

模块标识 模块名称
Bluetooth 低功耗蓝牙
Contacts 通讯录
Fingerprint 指纹识别
iBeacon iBeacon
LivePusher 直播推流
Maps 地图
Messaging 短彩信、邮件
OAuth 登录鉴权
Payment 支付
Push 消息推送
Speech 语言识别
Statistic 统计
SQLite 数据库
VideoPlayer 视频播放

plus

5+扩展配置,uni-app项目对应为"app-plus"节点

allowsInlineMediaPlayback

是否允许html页面中video标签非全屏播放,仅iOS平台有效
Boolean类型,值为true表示允许,false表示不允许,默认值为不允许。
html页面的video标签必须添加webkit-playsinline属性才支持非全屏播放,如下示例:

<video controls="controls" src="http://.../x.mp4" webkit-playsinline>

此配置与VideoPlayer(视频播放)控件功能无关

mediaPlaybackRequiresUserAction (HX3.0.1 + 版本支持)

可通过此属性配置h5中的音频是否自动播放,注意当设置为false时开启自动播放,默认为true(仅iOS生效)

appWhitelist

应用中可直接安装原生应用的白名单地址(url)。

  • Android平台
    url地址如果是下载apk的链接,不在此白名单列表中的url下载apk将会被拦截(弹出toast提示“当前环境不支持下载未许可的apk文件”)
  • iOS平台
    url地址如果是跳转到appstore,不在此白名单列表中的url跳转将会被拦截(弹出toast提示“当前环境不支持下载未许可的应用”)
    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "appWhitelist":[  
            "http://www.dcloud.io/streamapp/streamapp.apk",  
            "itms://itunes.apple.com/cn/app/liu-ying-yong/id793135951"  
        ],  
        // ...  
    }

    以上白名单机制仅在流应用环境中限制,发布为独立App时忽略此配置

arguments

应用启动时的5+默认参数
String类型,可选。
在5+中可通过plus.runtime.arguments获取,如果外部调用应用时传入了参数,则覆盖此默认参数。

cache

应用的缓存配置信息,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "cache":{  
            "mode": ""  
        },  
        // ...  
    }

mode
Webview窗口默认使用的缓存模式,可取值:

  • "default"
    根据cache-control决定是否使用缓存数据,如果存在缓存并且没有过期则使用本地缓存资源,否则从网络获取;
  • "cacheElseNetwork"
    只要存在缓存(即使过期)数据则使用,否则从网络获取;
  • "noCache"
    不使用缓存数据,全部从网络获取;
  • "cacheOnly"
    仅使用缓存数据,不从网络获取(注:如果没有缓存数据则会导致加载失败)。

默认为"default"。

cers

应用的异常崩溃与错误报告系统配置信息,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "cers":{  
            "crash": ""  
        },  
        // ...  
    }

crash
是否提交程序异常崩溃信息。
Boolean类型,true表示提交,false表示不提交,默认值为true。

channel

渠道标记,字符串类型。

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "channel": "google",  
        // ...  
    }

注意:不要直接修改此配置,参考渠道包打包配置教程

confusion

应用的JS文件原生混淆配置

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "confusion": {  
            "description": "JS原生混淆",  
            "resources": {  
                "js/common.js": {   
                },   
                "js/immersed.js": {   
                }   
            }   
        },  
        // ...  
    }
  • description
    原生混淆配置描述信息
  • resources
    要混淆的JS文件列表,JSON对象,以要混淆的js文件路径(相对路径)为键名,值为空JSON对象即可

注意:confusion节点是在plus节点之下,uni-app项目由于需要编译暂不支持原生混淆
iOS平台使用WKWebview不支持原生混淆,HBuilderX2.2.5(alpha)版本开始调整默认使用WKWebview,使用WKWebview时云端打包将忽略原生混淆配置(即不混淆)

error

定义窗口加载错误时的处理逻辑,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "error":{  
            "url": "本地错误页面地址"  
        },  
        // ...  
    }
  • url
    窗口加载错误时(如本地页面不存在,或者无法访问的网络地址)跳转的页面地址,仅支持本地页面地址。设置为“none”则关闭跳转到错误页面功能,此时页面显示Webview默认的错误页面内容。默认使用5+ Runtime内置的错误页。

locales

云端打包国际化配置,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "locales":{  
            "zh": {//中文(简体)  
                "name": "应用名称",  
                "android": {  
                    "strings": {  //Android平台自定义字符串  
                    }  
                },  
                "ios": {  
                    "privacyDescription": {  //iOS平台隐私访问描述信息  
                    },  
                    "infoPlist": {  //iOS平台自定义InfoPlist.strings  
                    }  
                }  
            },  
            "zh-TW": {//中文繁体(台湾)  
            },  
            "zh-HK": {//中文繁体(香港)  
            },  
            "en": {  
            }  
        },  
        // ...  
    }

详细说明参考云端打包配置国际化

nativePlugins

uni原生插件配置,JSON对象数组

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "nativePlugins": [  
            {  
                "%PluginID%": {  
                }  
            }  
        ],  
        // ...  
    }

注意:不要直接修改此配置,推荐在HBuilderX的可视化界面中操作
使用云端uni原生插件参考:https://ask.dcloud.net.cn/article/35412
使用本地uni原生插件参考:https://ask.dcloud.net.cn/article/35844

popGesture

应用中Webview窗口侧滑返回功能的默认效果,字符串类型

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "popGesture": "none",  
        // ...  
    }

可取以下值:

  • "none"
    默认Webview窗口无侧滑返回功能,侧滑时无任何响应
  • "close"
    默认webview窗口侧滑返回关闭,用户侧滑后窗口自动关闭,关闭窗口的逻辑与调用 close()方法一致。
  • "hide"
    默认webview窗口侧滑返回隐藏,即用户侧滑后窗口自动隐藏,隐藏窗口的逻辑与调用其hide()方法一致。

默认值为"none"。manifest.json中配置的为默认项, 在应用中可以通过WebviewStyles的popGesture属性动态修改。
注意:Android平台仅在流应用环境下支持侧滑返回。

kernel

Webview窗口使用的内核,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "kernel": {  
            "ios": "WKWebview",  
            "recovery": "restart|reload|none"  
        },  
        // ...  
    }
ios

iOS平台Webview窗口默认使用的内核,可取值:

  • "WKWebview"
    iOS8.0及以上系统默认使用WKWebview内核
  • "UIWebview"
    使用UIWebview内核

默认值为UIWebview。
HBuilderX2.2.5(alpha)版本开始调整默认为WKWebview

recovery

Webview内核崩溃后的恢复处理逻辑,仅iOS平台非uni-app项目使用WKWebview内核时生效,uni-app项目可自动恢复(推荐转换为uni-app项目)。
当WKWebview崩溃后,Webview页面的JS上下文将丢失,也无法渲染DOM内容(白屏)
可配置以下值:

  • "restart"
    重启应用,关闭所有页面重新打开应用首页,可通过(plus.runtime.isRecovery)来判断应用是否恢复重启
  • "reload"
    重新加载当前WKWebview(崩溃的WKWebview)页面,页面中JS上下文中所有数据丢失,在当前Webview中可通过plus.webview.isRecovery判断是否恢复重新加载,在其它Webview中可监听recovery事件来判断
  • "none"
    不做任何操作

创建Webview窗口时可设置kernelRecovery属性单独设置某个窗口的恢复处理逻辑

<a id="runmode" />

runmode

应用的运行模式,字符串类型

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "runmode": "liberate"  
        // ...  
    }

可取值:

  • "normal"
    正常运行(不释放资源)模式,直接使用应用的资源,无法直接使用File API(plus.io.*)访问应用资源。
  • "liberate"
    释放资源运行模式,应用在第一次启动时将解压应用私有目录。该模式的缺点:第一次启动更慢,耗费时间先解压。该模式有用的场景:此模式下File API才可正常访问_www应用资源,以及在某些Android rom访问本地页面时url地址中包含?带参数,但不推荐使用这种跨页传参方式,推荐使用其他方式跨页传参http://ask.dcloud.net.cn/article/288
    注意:wap2app 应用固定为 liberate,不支持自定义。

safearea

iOS刘海屏设备(iPhoneX)的安全区域配置

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "safearea": {  
            "background":"#CCCCCC",  
            "backgroundDark":"#2f0508",    
            "bottom":{  
                "offset":"auto"  
            },  
            "left": {  
                "offset":"auto"  
            },  
            "right: {  
                "offset":"auto"  
            }  
        },  
        // ...  
    }
background

安全区域外的背景颜色,默认值为"#FFFFFF"

backgroundDark HX 3.1.18+ 支持

暗黑模式下安全区域外的背景颜色,默认值"无", 更多关于暗黑模式的适配请参考 iOS适配暗黑模式

bottom

底部安全区域配置,包括以下属性

  • offset
    底部安全区域偏移,"none"表示不空出安全区域,"auto"自动计算空出安全区域,默认值为"none"
    left

    左侧安全区域配置(横屏显示时有效),包含的属性与bottom一致。

    right

    右侧安全区域配置(横屏显示时有效),包含的属性与bottom一致。

schemeWhitelist

配置应用中URL Scheme白名单(非http、https、file),字符串数组

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "schemeWhitelist": [  
            "streamapp"  
        ],  
        // ...  
    }

仅允许白名单中的scheme跳转,不在白名单中URL Scheme链接将会被拦截(拦截后不做任何处理)。
默认白名单为:
'sms', 'tel', 'mailto', 'callto', 'weixin', 'alipay', 'alipays', 'alipayqr', 'weibo', 'mqq', 'mqqapi', 'qqmap', 'baidumap', 'amap', 'iosamap', 'streamapp'
iOS默认白名单还包括"itms"等跳转appstore。

<a id="splashscreen" />

splashscreen

程序启动界面配置信息,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "splashscreen": {  
            "autoclose": "false",  
            "event": "loaded",  
            "target": "default",  
            "waiting": "true",  
            "delay": "500",  
            "ads": {  
                "background": "#FFFFFF",  
                "image": "logo.png"  
            },  
            "androidTranslucent": false  
        },  
        // ...  
    }

包括以下字段:

  • autoclose
    是否自动关闭程序启动界面,布尔类型。
    默认为true,即自动关闭程序启动界面,否则需要在应用中显式调用plus.navigator.closeSplashscreen方法来关闭。
  • event
    触发自动关闭splash界面的事件类型,字符串类型,可取值:
    "titleUpdate"表示当首页Webview的titleUpdate事件触发时自动关闭splash界面;
    "rendering"表示当首页Webview的rendering事件触发时自动关闭splash界面;
    "loaded":表示当首页Webview的loaded事件触发时自动关闭splash界面。
    默认值为loaded。
  • target
    设置双首页模式下,定义目标webview触发event类型自动关闭splash界面,可取值:
    "default"根据首页Webview的event事件关闭splash;
    "second":根据第二个首页Webview的event事件关闭splash。
    默认值为"default"。
  • waiting
    是否在程序启动界面显示等待雪花,布尔类型。
    默认为false,即不显示等待雪花。
  • delay
    启动界面在应用的首页面加载完毕后延迟关闭的时间,单位为毫秒,数字类型。
    默认不延迟,即首页面加载完毕后立即关闭。
  • ads
    开屏广告配置信息,JSON格式对象
    包括以下属性:
    background:设置背景颜色
    image:设置底部图片地址,相对应用资源目录路径,不支持网络地址,建议分辨率720x256(要求png格式,背景透明,留出边距,在不同分辨率手机上会自动等比例缩放处理)
  • androidTranslucent
    使用“自定义启动图”启动界面时是否显示透明过渡界面,设置为true首次点击桌面图标后可能需要等待0.5秒左右(低端手机可能时间会更长)进入启动界面,设置为false则会在点击桌面图标后立即进入启动界面(在部分设备顶部系统状态栏可能会半透明显示)。
    注意:仅在“自定义启动图”时生效,默认值为false。

ssl

应用ssl相关设置

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "ssl": {  
            "untrustedca": "accept|refuse|warning"  
        },  
        // ...  
    }

包括以下字段:

  • untrustedca
    配置应用中https请求时,如果服务器返回非受信证书的处理逻辑,字符串类型,可取值:
    "accept" - 接受此非受信证书,继续访问;
    "refuse" - 拒绝此非 受信证书,停止访问;
    "warning" - 弹出警告提示框提醒用户,由用户确定是否继续访问。
    默认值为"accept"。

softinput

软键盘相关配置,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "softinput": {  
            "navBar": "auto|none",  
            "auxiliary": true|false,  
            "mode": "adjustResize|adjustPan"  
        },  
        // ...  
    }

包括以下字段:

  • navBar
    软键盘上导航条的显示模式,字符串类型(仅iOS平台支持):
    "auto" - 表示系统默认值(即显示导航条);
    "none" - 表示不显示。
    默认值为"auto"。
  • auxiliary
    是否开启辅助输入功能,Boolean类型
    true表示开启,false表示关闭,默认值为true(HBuilderX3.1.3+版本调整默认值为false)。
  • mode
    弹出系统软键盘模式,字符串类型,可取值:
    "adjustResize" - 表示弹出软键盘时自动调整窗口大小;
    "adjustPan" - 表示弹出软键盘时自动移动滚动窗口使得输入框可见(Android平台可能会出现软键盘盖住输入框的情况)。
    默认值为"ajustResize"。

iOS平台可通过WebviewStyles的softinputMode属性对单个窗口进行控制

statusbar

应用启动后的系统状态栏样式,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "statusbar": {  
            "immersed": "none|suggestedDevice|supportedDevice",  
            "style": "dark|light",  
            "background": "#RRGGBB"  
        },  
        // ...  
    }

包括以下字段:

  • immersed
    定义应用是否使用沉浸式状态栏样式,String类型,可取值:
    "none" - 非沉浸式状态栏样式;
    "suggestedDevice" - 沉浸式状态栏,仅在支持设置状态栏前景色样式的设备上生效(Android5.0的小米&魅族、Android6.0及以上,iOS在所有设备上生效);
    "supportedDevice" - 沉浸式状态栏,在所有支持沉浸式状态栏设备上生效(与之前的true一致,Android4.4及以上)。
    默认值为"none"。
  • style
    系统状态栏样式(前景颜色),字符串类型,可取以下值:
    "dark" - 深色前景色样式(即状态栏前景文字为黑色),此时background建议设置为浅颜色;
    "light" - 浅色前景色样式(即状态栏前景文字为白色),此时background建设设置为深颜色。
    可通过plus.navigator.setStatusBarStyle()动态调整。注:Android5.0(小米&魅族)和Android6.0及以上系统支持,iOS7.0及以上系统支持
  • background
    系统状态栏背景颜色,字符串类型,#RRGGBB格式,颜色值格式为"#RRGGBB",如"#FF0000"为红色。
    默认使用系统样式,通常iOS平台默认为light样式;Android平台默认为dark(各ROM厂商存在差异)。
    可通过plus.navigator.setStatusBarBackground()动态调整。
    注:仅在immersed属性值设置为none时有效。

useragent(useragent_android/useragent_ios)

应用中http请求的userAgent信息,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "useragent": {  
            "value": "要设置的默认userAgent值",  
            "concatenate": "true|false"  
        },  
        "useragent_android": {  
            "value": "android平台要设置的默认userAgent值",  
            "concatenate": "true|false"  
        },  
        "useragent_ios": {  
            "value": "ios平台要设置的默认userAgent值",  
            "concatenate": "true|false"  
        },  
        // ...  
    }

包括以下字段:

  • value
    自定义userAgent值,字符串类型
  • concatenate
    是否将value值作为追加值连接到系统默认userAgent值之后,布尔类型:
    "true" - 表示追加模式,若value不以空格字符开头,则在其前面自动添加空格字符;
    "false" - 表示覆盖模式,即value值作为完整userAgent使用。
    默认为false,即覆盖默认userAgent值。

useragent_android和useragent_ios分别配置对Android和iOS平台生效。
注:为了保证运行环境的一致性,建议concatenate设置为true。

launchwebview

应用首页Webview的配置信息,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "launchwebview": {  
            "plusrequire": "ahead|normal|later|none",  
            "injection": "true|false",  
            "overrideresource": [{  
                "match":"区配拦截的资源url地址",  
                "redirect":"拦截资源的重现向地址",  
                "mime":"拦截资源的数据类型",  
                "encoding":"拦截资源的数据编码",  
                "header":"拦截资源的http头数据"  
            }],  
            "overrideurl": {  
                "mode": "allow|reject,拦截模式",  
                "match": "匹配拦截规则",  
                "exclude": "none|redirect,排除拦截理规则"  
            },  
            "replacewebapi": {  
                "geolocation": "none|alldevice|auto, 重写标准定位API"  
            },  
            "geolocation": "none|replace|auto, 重写标准定位API",  
            "subNViews": [{  
                "id": "原生子View控件的标识",  
                "styles": "JSON对象,原生子View控件样式",  
                "tags": "JSON数组对象,原生子View控件上绘制的元素"  
            }],  
            "titleNView": {  
                "backgroundColor": "#RRGGBB, 标题栏背景颜色",  
                "titleText": "标题栏标题文字内容",  
                "titleColor": "#RRGGBB, 标题栏标题文字颜色",  
                "titleSize": "17px,标题字体大小,默认大小为17px",  
                "autoBackButton": "true|false,是否显示标题栏上返回键",  
                "backButton": "JSON对象,标题栏上返回键样式",  
                "buttons": [{  
                    "color": "按钮上的文字颜色",  
                    "colorPressed": "按钮按下状态的文字颜色",  
                    "float": "按钮在标题栏上的显示位置",  
                    "fontWeight": "按钮上文字的粗细",  
                    "fontSize": "按钮上文字的大小",  
                    "fontSrc": "按钮上文字使用的字体文件路径",  
                    "text": "按钮上显示的文字"  
                }],  
                "splitLine": "JSON对象,标题栏底部分割线样式"  
            },  
            "statusbar": {  
                "background": "#RRGGBB格式字符串,沉浸式状态栏样式下系统状态栏背景颜色"  
            },  
            "top": "0px|10%,Webview的顶部偏移量",  
            "height": "0px|10%,Webview窗口高度",  
            "bottom": "0px|10%, Webview的底部偏移量,仅在未同时设置top和height属性时生效",  
            "backButtonAutoControl": "none|hide|close,运行环境自动处理返回键的控制逻辑",  
            "additionalHttpHeaders": "JSON数据,额外添加HTTP请求头数据"  
        },  
        // ...  
    }

包括以下字段:

overrideresource

配置应用首页的拦截资源请求处理逻辑,可包含多条配置项,json支持以下属性:

  • match
    区配拦截的资源url地址,支持正则表达式,与WebviewOverrideResourceOptions的match属性功能一致;
  • redirect
    拦截资源的重现向地址,仅支持本地资源地址,如"_www"、"_doc"、"_downloads"、"_documents"等开头的路径,与WebviewOverrideResourceOptions的redirect属性功能一致;
  • mime
    拦截资源的数据类型,RFC2045/RFC2046/RFC2047/RFC2048/RFC2049规范中定义的数据类型,与WebviewOverrideResourceOptions的mime属性功能一致;
  • encoding
    拦截资源的数据编码,默认值"UTF-8",与WebviewOverrideResourceOptions的encoding属性功能一致;
  • header
    拦截资源的http头数据,JSON格式数据,与WebviewOverrideResourceOptions的encoding属性功能一致;

**注:以上配置项与Webview的overrideResourceRequest方法作用一致,配置项可参考规范

overrideurl

配置应用首页的拦截链接请求处理逻辑,支持以下属性:

  • mode
    拦截模式,可取值:
    "allow" - 表示满足match属性定义的条件时不拦截url继续加载,不满足match属性定义的条件时拦截url跳转并触发callback回调;
    "reject" - 表示满足match属性定义的提交时拦截url跳转并触发callback回调,不满足match属性定义的条件时不拦截url继续加载;
    默认值为"reject"。
  • match
    匹配拦截规则,支持正则表达式,默认值为对所有URL地址生效(相当于正则表达式“.*”)。
    如果mode值为"allow"则允许区配的URL请求跳转,mode值为"reject"则拦截区配的URL请求。
  • exclude
    排除拦截理规则,可取值:
    "none" - 表示不排除任何URL请求(即拦截处理所有URL请求);
    "redirect" - 表示排除拦截处理301/302跳转的请求(谨慎使用,非a标签的href触发的URL请求可能会误判断为302跳转);
    默认值为"none"。
titleNView

配置应用首页的标题栏,配置此属性则首页显示标题栏,支持以下属性:

  • backgroundcolor
    标题栏背景颜色,字符串类型,格式为“#RRGGBB”,默认值为灰黑色(#1B1A1F)
  • titletext
    标题栏标题文字内容,默认值为当前加载页面的标题
  • titlecolor
    标题栏标题文字颜色,字符串类型,格式为“#RRGGBB”,默认值为白色(#FFFFFF)

secondwebview

应用双首页模式配置,添加此字段则表明应用采用双首页模式运行,应用启动除了创建默认入口页外还创建第二个Webview,此字段配置第二个Webview的配置信息,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "secondwebview": {  
            "launch_path": "加载页面地址",  
            "id": "Webview窗口标识",  
            "mode": "front|child|behind|parent,Webview显示模式",  
            "top": "0px|10%,Webview的顶部偏移量",  
            "height": "0px|10%,Webview窗口高度",  
            "bottom": "0px|10%, Webview的底部偏移量",  
            "plusrequire": "ahead|normal|later|none,控制JS注入时机",  
            "injection": "true|false,是否提前注入js",  
            "overrideresource": [{  
                "match":"区配拦截的资源url地址",  
                "redirect":"拦截资源的重现向地址",  
                "mime":"拦截资源的数据类型",  
                "encoding":"拦截资源的数据编码",  
                "header":"拦截资源的http头数据"  
            }],  
            "overrideurl": {  
                "mode": "allow|reject,拦截模式",  
                "match": "匹配拦截规则",  
                "exclude": "none|redirect,排除拦截理规则"  
            },  
            "replacewebapi": {  
                "geolocation": "none|alldevice|auto, 重写标准定位API"  
            },  
            "geolocation": "none|replace|auto, 重写标准定位API",  
            "subNViews": [{  
                "id": "原生子View控件的标识",  
                "styles": "JSON对象,原生子View控件样式",  
                "tags": "JSON数组对象,原生子View控件上绘制的元素"  
            }],  
            "titleNView": {  
                "backgroundColor": "#RRGGBB, 标题栏背景颜色",  
                "titleText": "标题栏标题文字内容",  
                "titleColor": "#RRGGBB, 标题栏标题文字颜色",  
                "titleSize": "17px,标题字体大小,默认大小为17px",  
                "autoBackButton": "true|false,是否显示标题栏上返回键",  
                "backButton": "JSON对象,标题栏上返回键样式",  
                "buttons": [{  
                    "color": "按钮上的文字颜色",  
                    "colorPressed": "按钮按下状态的文字颜色",  
                    "float": "按钮在标题栏上的显示位置",  
                    "fontWeight": "按钮上文字的粗细",  
                    "fontSize": "按钮上文字的大小",  
                    "fontSrc": "按钮上文字使用的字体文件路径",  
                    "text": "按钮上显示的文字"  
                }],  
                "splitLine": "JSON对象,标题栏底部分割线样式"  
            },  
            "statusbar": {  
                "background": "#RRGGBB格式字符串,沉浸式状态栏样式下系统状态栏背景颜色"  
            },  
            "backButtonAutoControl": "none|hide|close,运行环境自动处理返回键的控制逻辑",  
            "additionalHttpHeaders": "JSON数据,额外添加HTTP请求头数据"  
        },  
        // ...  
    }

包括以下字段:

launch_path

第二个Webview窗口加载的页面地址,支持网络地址和本地地址

id

第二个Webview窗口标识,默认值为%APPID%__second

mode

第二个Webview窗口显示模式,可取值:

  • child
    表示作为launchwebview的子窗口
  • front
    表示与launchwebview平级并在其前显示
  • behind
    表示与launchwebview平级并在其后显示
    默认值为"front"。
top

第二个Webview窗口的顶部偏移量
可取值像素值或百分比,如"0px"、"10%"。

height"

第二个Webview窗口的高度
可取值像素值或百分比,如"0px"、"50%"。

bottom

第二个Webview窗口的底部偏移量
可取值像素值或百分比,如"0px"、"10%"。

其它属性与launchwebview下一致

uni-app

仅uni-app项目生效
uni-app应用的配置,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "uni-app": {  
            "nvue": {  
                "flex-direction": "row|row-reverse|column|column-reverse"  
            }  
        },  
        // ...  
    }

包括以下字段:

nvue

nvue页面的flex-direction默认值,字符串类型,可取值:
"row"、"row-reverse"、"column"、"column-reverse"
默认值为"row"。

compatible

仅uni-app项目生效
uni-app应用兼容性配置,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "compatible": {  
            "ignoreVersion": true,  
            "runtimeVersion": "兼容的uni-app运行环境版本号,多个版本使用,分割",  
            "compilerVersion": "兼容的编译器版本号"  
        },  
        // ...  
    }

当uni-app运行环境与编译环境不一致时,会弹出可能存在兼容性问题的提示框。
详细描述参考:https://ask.dcloud.net.cn/article/35627

wap2app

wap2app应用配置,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "wap2app": {  
            "launchError": "tip|none"  
        },  
        // ...  
    }

包括以下字段:

launchError

应用首页加载错误处理逻辑,"tip"表示弹出提示框(无法连接服务器,请检查网络设置),"none"表示不处理(跳转到错误页面),默认值为"tip"。

plus->distribute

云端打包配置项,uni-app项目对应为"app-plus" -> "distribute"节点

"plus": {  
    "distribute": {  
        "debug": "true|false,是否开启调试功能",  
        "syncDebug": "true|false, 是否为真机运行基座",  
        "apple": {  
            "appid": "",            //iOS包名(Bundle ID)  
            "mobileprovision": "",  //iOS打包使用的profile文件  
            "password": "",         //iOS打包使用的证书密码  
            "p12": "",              //iOS打包使用的证书  
            "devices": "iphone|ipad|universal", //iOS支持的设备类型  
            "urlschemewhitelist": [     //iOS平台应用访问白名单  
                ""  
            ],  
            "UIBackgroundModes": ["audio","location"],//iOS应用后台运行模式  
            "urltypes": [       //iOS平台url scheme配置  
            ],  
            "frameworks": [     //iOS平台依赖的系统库  
                "CoreLocation.framework"  
            ],  
            "deploymentTarget": "9.0",  //iOS支持的最低版本  
            "privacyDescription": {     //iOS隐私描述  
            }  
            "idfa":"true|false",        //是否使用广告标识符,默认值为true  
            "capabilities": {           //应用的能力配置(Capabilities)  
            },  
            "CFBundleName": "HBuilder",  
            "validArchitectures":[          //支持的cpu指令  
                "arm64"  
            ]  
        },  
        "google":{  
            "packagename":"",   //Android包名  
            "keystore":"",      //Android签名证书  
            "password":"",      //Android签名证书密码  
            "aliasname":"",     //Android签名证书别名  
            "locale": "default",    //应用的语言,默认值为default(系统语言),如en_US表示使用英语(美国)  
            "schemes":[         //Android平台url scheme配置  
            ],  
            "theme":"程序使用的主题",  
            "abiFilters":[      //支持的CPU类型  
                "armeabi", "armeabi-v7a", "x86"  
            ],  
            "custompermissions":"true|false",  
            "permissions":[     //Android平台使用的权限  
                ""  
            ],  
            "permissionPhoneState": {  //Android平台读取设备信息权限配置  
                     "request": "always|once|none",    //申请权限策略  
                     "prompt": ""                      //用户拒绝时弹出提示框上的内容  
            },  
            "permissionExternalStorage": {  //Android平台读写存储权限配置  
                     "prompt": ""                      //用户拒绝时弹出提示框上的内容  
            },  
            "minSdkVersion":"apk支持的最低版本",   //Android平台最低版本  
            "targetSdkVersion":"apk的目标版本",  //Android平台目标版本  
            "forceDarkAllowed":"true", //是否允许强制支持暗黑模式,默认值为false, HBuilderX3.1.4+支持  
            "resizeableActivity":"false", //是否支持分屏时调整activity大小,默认不设置此值,HBuilderX3.1.10+支持  
            "packagingOptions": [  //配置gradle编译参数packagingOptions  
                 "doNotStrip '*/armeabi-v7a/*.so'"  
            ]  
        },  
        "icons":{           //应用图标配置  
        },  
        "splashscreen":{    //应用启动图片配置  
        },  
        "plugins":{  // 第三方sdk配置  
        }  
    }  
}

apple

iOS平台打包配置,uni-app项目对应为"app-plus" -> "distribute" -> "ios"节点

其中appid、mobileprovision、password、p12、devices为iOS打包基础配置,点击HBuilderX菜单的"发行" -> "原生App-云打包"打开的“App云端打包”中配置:

urlschemewhitelist

设置应用访问白名单,更多详情参考https://ask.dcloud.net.cn

UIBackgroundModes

应用后台运行模式配置,如后台播放音乐、后台定位等
后台音乐播放
后台获取位置信息
更多后台能力参考苹果官方文档

urltypes

iOS平台URL Schemes配置,更多详情参考https://ask.dcloud.net.cn/article/64

<a id="frameworks"/>

frameworks

设置应用要引用的系统库(framework),字符串数组。
在使用native.js时使用,通知App云端打包在编译应用时引用对于的系统framework库,以便native.js能成功调用其中的API。
如要调用苹果游戏相关API,则需要引用"GameKit.framework"。

            "frameworks": [     //iOS平台依赖的系统库  
                "GameKit.framework"  
            ],

<a id="deploymentTarget"></a>

deploymentTarget

设置应用支持的最低版本,可取值:

  • iOS8:
    '8.0', '8.1', '8.2', '8.3', '8.4'
  • iOS9:
    '9.0', '9.1', '9.2', '9.3'
  • iOS10:
    '10.0', '10.1', '10.2', '10.3'
  • iOS11:
    '11.0', '11.1', '11.2', '11.3', '11.4'
  • iOS12:
    '12.0', '12.1', '12.2', '12.3', '12.4'
  • iOS13:
    '13.0', '13.1'
privacyDescription

iOS平台隐私描述,请在HBuilderX的manifest.json可视化界面“(App)模块权限配置”中进行配置。

idfa

iOS平台应用是否使用IDFA(广告标识),更多详情参考https://ask.dcloud.net.cn/article/36107

capabilities

iOS平台打包时Capabilities配置,json类型数据,配置应用的capabilities数据(根据XCode规范分别配置到entitlements和plist文件中)

        "capabilities": {  
            "entitlements": {   // 合并到工程entitlements文件的数据(json格式)  
            },  
            "plists": {         // 合并到工程Info.plist文件的数据(json格式)  
            }  
        },

更多详情参考https://ask.dcloud.net.cn/article/36393

CFBundleName

iOS平台云打包后生成应用的 bundle name 值。
默认值为"HBuilder",建议设置为英文,不要使用中文。
示例如下:

        "CFBundleName": "HelloWorld",
validArchitectures

iOS平台编译时支持的CPU指令。
默认值为['arm64', 'arm64e', 'armv7', 'armv7s', 'x86_64'],如果使用了三方插件则会取插件配置validArchitectures的交集。

google

Android平台打包配置,uni-app项目对应为"app-plus" -> "distribute" -> "android"节点

其中packagename、keystore、password、aliasname为Android打包基础配置,点击HBuilderX菜单的"发行" -> "原生App-云打包"打开的“App云端打包”中设置:

schemes

Android平台URL Schemes配置,更多详情参考https://ask.dcloud.net.cn/article/409

theme

Android平台应用要使用的系统主题名称
更多详情参考Android配置应用主题皮肤

abiFilters

Android平台配置支持的CPU类型,更多详情参考https://ask.dcloud.net.cn/article/36195

permissions

Android平台使用到的权限,请在HBuilderX的manifest.json可视化界面“(App)模块权限配置”中的“Android打包权限配置”中勾选。

<a id="permissionExternalStorage"/>

permissionExternalStorage

HBuilderX2.5.0+版本支持
Android平台应用启动时申请读写手机存储权限配置
支持以下字段

  • prompt
    当用户拒绝授权读写手机存储权限时弹出提示框上显示的内容。

更多详情参考https://ask.dcloud.net.cn/article/36549

<a id="permissionPhoneState"/>

permissionPhoneState

HBuilderX2.3.8+版本支持
Android平台应用启动时申请读取设备信息权限配置
支持以下字段

  • request
    申请权限策略,可配置以下值:
    "always" - 一直申请读取设备信息权限,用户必须授权允许,否则一直弹出提示框,直到用户允许;
    "once" - 申请一次读取设备信息权限,不管用户是否允许
    "none" - 不申请读取设备信息权限
  • prompt
    配置request值为"always"时有效,当用户拒绝授权读取设备信息权限时弹出提示框上显示的内容。

更多详情参考https://ask.dcloud.net.cn/article/36549

minSdkVersion & targetSdkVersion

minSdkVersion为应用兼容的最低Android版本(API等级)
targetSdkVersion为应用适配的Android版本(API等级)
更多详情参考https://ask.dcloud.net.cn/article/193

<a id="packagingOptions"/>

packagingOptions

配置应用的gradle配置项packagingOptions,参数值为字符串数组,每一项会单独配置到gradle文件的packagingOptions下,如下示例:

        "packagingOptions": [  
          "doNotStrip '*/armeabi-v7a/*.so'",  
          "merge '**/LICENSE.txt'"  
        ]

注意,默认已包含以下配置:

    pickFirst 'lib/*/libstlport_shared.so'  
    pickFirst 'lib/*/libc++_shared.so'

icons

应用图标配置,json格式数据,分别包含Android和iOS平台的配置项:

        "icons":{  
            "ios":{  
                "appstore":"必选, 1024x1024, 提交app sotre使用的图标",  
                "iphone":{  
                    "normal": "可选,57x57,iPhone3/3GS程序图标,低于iOS7不再支持",  
                    "retina": "可选,114x114,iPhone4程序图标,低于iOS7不再支持",  
                    "app@2x[retina7]": "可选,120x120,iOS7+程序图标(iPhone4S/5/6/7/8)",  
                    "app@3x[retina8]": "可选,180x180,iOS7+程序图标(iPhone6plus/7plus/8plus/X)",  
                    "spotlight-normal": "可选,29x29,iPhone3/3GS Spotlight搜索程序图标,低于iOS7不再支持",  
                    "spotlight-retina": "可选,58x58,iOS5/6 Spotlight搜索程序图标(iPhone4S),低于iOS7不再支持",  
                    "spotlight@2x[spotlight-retina7]": "可选,80x80,iOS7+ Spotlight搜索图标(iPhone5/6/7/8)",  
                    "spotlight@3x[spotlight-retina8]": "可选,120x120,iOS7+ Spotlight搜索图标(iPhone6plus/7plus/8plus/X)  
                    "settings-normal": "可选,29x29,iPhone4设置页面程序图标,低于iOS7不再支持",  
                    "settings@2x[settings-retina]": "可选,58x58,iOS5+ Settings设置图标(iPhone5/6/7/8)",  
                    "settings@3x[settings-retina8]": "可选,87x87,iOS5+ Settings设置图标(iPhone6plus/7plus/8plus/X)",  
                    "notification@2x": "可选,40x40,iOS7+ 通知栏图标(iPhone5/6/7/8)",  
                    "notification@3x": "可选,60x60,iOS7+ 通知栏图标(iPhone6plus/7plus/8plus/X)"  
                },  
                "ipad":{  
                    "normal": "可选,72x72,iPad普通屏幕程序图标,低于iOS7不再支持",  
                    "retina": "可选,144x144,iPad高分屏程序图标,低于iOS7不再支持",  
                    "app[normal7]": "可选,76x76,iOS7+程序图标",  
                    "app@2x[retina7]": "可选,152x152,iOS7+程序图标(高分屏)",  
                    "proapp@2x": "可选,167x167,iOS9+程序图标(iPad Pro)",  
                    "spotlight-normal": "可选,50x50,iPad Spotlight搜索程序图标,低于iOS7不再支持",  
                    "spotlight-retina": "可选,100x100,iPad高分屏Spotlight搜索程序图标,低于iOS7不再支持",  
                    "spotlight[spotlight-normal7]": "可选,40x40,iOS7+ Spotlight搜索图标",  
                    "spotlight@2x[spotlight-retina7]": "可选,80x80,iOS7+ Spotlight搜索图标(高分屏)",  
                    "settings[settings-normal]": "可选,29x29,iOS5+ 设置图标",  
                    "settings@2x[settings-retina]": "可选,58x58,iOS5+ 设置图标(高分屏)",  
                    "notification": "可选,20x20,iOS7+ 通知栏图标",  
                    "notification@2x": "可选,40x40,iOS7+ 通知栏图标(高分屏)"  
                }  
            },  
            "android":{  
                "ldpi": "可选,48x48",     //已废弃  
                "mdpi": "可选,48x48",     //已废弃  
                "hdpi": "可选,72x72",  
                "xhdpi": "可选,96x96",  
                "xxhdpi": "可选,144x144",  
                "xxxhdpi": "可选,192x192"  
            }  
        },

云端打包时要求所有图标路径都相对于应用下".manifest"目录。
提交云端打包时需做路径转换,请在HBuilderX的manifest.json可视化界面“(App)图标配置”中操作设置
图片配置注意事项参考https://ask.dcloud.net.cn/article/35979

splashscreen

应用启动图配置,json格式数据,分别包含Android和iOS平台的配置项:

        "splashscreen":{  
            "ios":{  
                "iphone":{  
                    "default": "可选,320x480,iPhone3(G/GS)启动图片",       // portrait480h,兼容老设备,将废弃  
                     "retina35": "可选,640x960,3.5英寸设备(iPhone4/4S)启动图片,支持iPhone4/4S时必选",    // portrait480h@2x  
                     "retina40": "可选,640x1136,4.0英寸设备(iPhone5/5S)启动图片,支持iPhone5/5S显示时必选",    // portrait-568h@2x  
                     "retina40l":"可选,1136x640,4.0英寸设备(iPhone5/5S)横屏启动图片,支持iPhone5/5S横屏显示时必选",    // landscape-568h@2x  
                     "retina47": "可选,750x1334,4.7英寸设备(iPhone6/7/8)启动图片,支持iPhone6/7/8时必选",    // portrait-667h@2x  
                     "retina47l": "可选,1334x750,4.7英寸设备(iPhone6/7/8)横屏启动图片,支持iPhone6/7/8横屏显示时必选",    // landscape-667h@2x  
                     "retina55": "可选,1242x2208,5.5英寸设备(iPhone6/7/8Plus)启动图片,支持iPhone6/7/8Plus时必选",    // portrait-736h@3x  
                     "retina55l": "可选,2208x1242,5.5英寸设备(iPhone6/7/8Plus)横屏启动图片,支持iPhone6/7/8Plus横屏显示时必选",    // landscape-736h@3x  
                     "iphonex": "可选,1125x2436,5.8英寸设备(iPhoneX/XS)启动图片,支持iPhoneX/XS时必选",    // portrait-812h@3x  
                     "iphonexl": "可选,2436x1125,5.8英寸设备(iPhoneX/XS)横屏启动图片,支持iPhoneX/XS横屏显示时必选",    // landscape-812h@3x  
                     "portrait-896h@2x": "可选,828x1792,6.1英寸设备(iPhoneXR)启动图片,支持iPhone XR(iOS12+)时必选",   
                     "landscape-896h@2x": "可选,1792x828,6.1英寸设备(iPhoneXR)iPhoneXR横屏启动图片,支持iPhone XR(iOS12+)横屏显示时必选",   
                     "portrait-896h@3x": "可选,1242x2688,6.5英寸设备(iPhoneXS Max)启动图片,支持iPhone XS Max(iOS12+)时必选",  
                     "landscape-896h@3x": "可选,2688x1242,6.5英寸设备(iPhoneXS Max)横屏启动图片,支持iPhone XS Max(iOS12+)横屏显示时必选"  
                },  
                "ipad":{  
                     "portrait": "可选,768x1004,iPad竖屏无状态栏启动图片(兼容iOS5/6),仅支持iOS5/6的iPad时必选",      //兼容老设备iOS5/6,将废弃  
                     "portrait-retina": "可选,1536x2008,iPad高分屏竖屏无状态栏启动图片(兼容iOS5/6),仅支持iOS5/6的iPad时必选",        //兼容老设备iOS5/6,将废弃  
                     "landscape": "可选,1024x748,iPad横屏无状态栏启动图片(兼容iOS5/6),仅支持iOS5/6的iPad时必选",        //兼容老设备iOS5/6,将废弃  
                     "landscape-retina": "可选,2048x1496,iPad高分屏横屏启动图片(兼容iOS5/6),仅支持iOS5/6的iPad时必选",        //兼容老设备iOS5/6,将废弃  
                     "portrait7": "可选,768x1024,9.7/7.9英寸iPad/mini竖屏启动图片 ,支持iPad/mini(iOS7+)时必选",    // portrait-1024h  
                     "landscape7": "可选,1024x768,9.7/7.9英寸iPad/mini横屏启动图片,支持iPad/mini(iOS7+)横屏显示时必选",     // landscape-1024h  
                     "portrait-retina7": "可选,1536x2048,9.7/7.9英寸iPad/mini高分屏竖屏图片,支持iPad/mini(iOS7+)时必选",    // portrait-1024h@2x  
                     "landscape-retina7": "可选,2048x1536,9.7/7.9英寸iPad/mini高分屏横屏启动图片,支持iPad/mini(iOS7+)横屏显示时必选",    // landscape-1024h@2x  
                     "portrait-1112h@2x":"可选,1668x2224,10.5英寸iPad Pro竖屏启动图片,支持10.5英寸iPad Pro(iOS8+)时必选",  
                     "landscape-1112h@2x":"可选,2224x1668,10.5英寸iPad Pro横屏启动图片,支持10.5英寸iPad Pro(iOS8+)横屏显示时必选",  
                     "portrait-1194h@2x":"可选,1668x2388,11英寸iPad Pro竖屏启动图片,支持11英寸iPad Pro(iOS10+)时必选",  
                     "landscape-1194h@2x":"可选,2388x1668,11英寸iPad Pro横屏启动图片,支持11英寸iPad Pro(iOS10+)横屏显示时必选",  
                     "portrait-1366h@2x":"可选,2048x2732,12.9英寸iPad Pro竖屏启动图片,支持12.9英寸iPad Pro(iOS10+)时必选",  
                     "landscape-1366h@2x":"可选,2732x2048,12.9英寸iPad Pro横屏启动图片,支持12.9英寸iPad Pro(iOS10+)横屏显示时必选"  
                }  
            },  
            "android":{  
               "ldpi": "必选,320x442,低密度屏幕启动图片",  
               "mdpi": "必选,240x282,中密度屏幕启动图片",  
               "hdpi": "必选,480x762,高密度屏幕启动图片",  
               "xhdpi": "必选,720x1242,720P高密度屏幕启动图片",  
               "xxhdpi": "必选,1080x1882,1080P高密度屏幕启动图片"  
            }  
        },

云端打包时要求所有图标路径都相对于应用下".manifest"目录。
提交云端打包时需做路径转换,请在HBuilderX的manifest.json可视化界面“(App)启动图配置”中操作设置

plugins

第三方SDK配置,json格式数据
键名为模块名称,如下为“个推”配置数据:

        "plugins":{  // 第三方sdk配置  
            "push": {     // 模块名称  
                "igexin":{    // 个推SDK参数配置  
                    "appid": "pPyZWvH3Fa6PXba10aJ009",   // 个推的appid  
                    "appkey": "b7dOGlNPHR7pqwUxDhpTi4",  // 个推的appkey  
                    "appsecret": "IxVYAT9qws8dlNElaTMvg1",  // 个推的appsecret  
                    "icons": {   // 推送图片配置  
                        "push": {   // push图标,规格与应用图片一致,不配置则默认使用push图标  
                            "ldpi": "可选,48x48",  
                            "mdpi": "可选,48x48",  
                            "hdpi": "可选,72x72",  
                            "xhdpi": "可选,96x96",  
                            "xxhdpi": "可选,144x144",  
                            "xxxhdpi": "可选,192x192"  
                        },  
                        "small": {   //  小图标,png格式图片,仅使用alpha图层  
                            "ldpi": "可选,18*18",  
                            "mdpi": "可选,24*24",  
                            "hdpi": "可选,36*36",  
                            "xhdpi": "可选,48*48",  
                            "xxhdpi": "可选,72*72"  
                        },  
                        "description": "推送图标"  
                    }  
                }  
            }  
        }

请在HBuilderX的manifest.json可视化界面“(App)SDK配置”中操作设置

继续阅读 »

此文档不再维护,请参考新文档地址:https://uniapp.dcloud.io/tutorial/app-manifest

概述

manifest.json文件是5+移动App的配置文件,用于指定应用的显示名称、图标、入口页面等信息。用户可通过HBuilder|HBuilderX的可视化界面视图进行配置,也可在源码视图中根据以下规范直接修改。
manifest.json文件根据w3c的webapp规范制定,plus节点下内容为HTML5 Plus扩展规范,其下包括iOS和Android子节点,内容来源分别为iOS和Android原生打包所要求的参数,用于对5+移动App打包为ipa或apk安装包进行配置。
uni-app项目的manifest.json规范参考:https://uniapp.dcloud.io/collocation/manifest

manifest.json

以下是完整的manifest.json配置文件,在HBuilder|HBuilderX中切换到“源码视图”按以下规范进行手动配置。

{  
    "id": "H512345",               //必填  
    "name": "应用名称",             //必填  
    "version": {  
        "name": "1.0",             //必填,推荐使用.分割,如1.0  
        "code": "10"               //必填,纯数字  
    },  
    "launch_path": "入口页面",      //必填  
    "description": "应用描述信息",  //可选  
    "icons": {                     //可选,以分辨率为索引键名  
        "72": "图标路径"  
    },  
    "developer": {  //选填,开发者信息  
        "name": "开发者名称",  
        "email": "开发者邮箱地址",   
        "url": "开发者网站"  
    },  
    "screenOrientation": [ //应用支持的屏幕方向  
        "portrait-primary",   //竖屏  
        "portrait-secondary", //竖屏(反向),上下颠倒  
        "landscape-primary",  //横屏,Home键在右侧  
        "landscape-secondary" //横屏(反向),Home键在左侧  
    ],  
    "permissions": {  //5+模块,uni-app项目对应节点为"app-plus" -> "modules"  
        "Accelerometer": {  
            "description": "加速度传感器"  
        }  
    },  
    "plus": {   // 5+扩展配置, uni-app项目对应节点为"app-plus"  
        "allowsInlineMediaPlayback":"true|false",  //可选,是否允许video标签非全屏播放 (仅iOS生效)  
        "mediaPlaybackRequiresUserAction":"true|false", //可选,可通过此属性配置h5中的音频是否自动播放,注意当设置为false时开启自动播放,默认为true(仅iOS生效 HX3.0.1 + 版本支持)  
        "appWhitelist": [    //可选,应用白名单列表(Android平台为apk下载地址,iOS平台为appstore地址)  
        ],  
        "arguments": "",    //可选,预设应用的启动参数  
        "cache": {          //可选,缓存配置  
        },  
        "cers": {           //可选,异常错误反馈配置  
        },  
        "channel": "",       //可选,渠道信息  
        "confusion": {       //可选,原生js文件混淆配置  
        },  
        "distribute": {      //必选,云端打包配置  
        },  
        "error": {          //可选,错误页面配置  
        },  
        "locales": {         //可选,国际化配置  
        }  
        "nativePlugins": {    //可选,原生插件相关配置  
        },  
        "popGesture": "none|close|hide",    //可选,侧滑返回功能配置  
        "kernel": {          //可选,Webview渲染内核配置  
        },  
        "runmode": "normal|liberate",      //可选,运行模式  
        "safearea": {        //可选,安全区域配置  
        },  
        "schemeWhitelist":[  //可选,Scheme白名单列表https://ask.dcloud.net.cn/article/94  
        ],  
        "splashscreen": {    //可选,splash界面配置  
        },  
        "ssl": {             //可选,SSL配置  
        },  
        "softinput": {       //可选,软键盘配置  
        },  
        "statusbar": {       //可选,系统状态栏配置  
        },  
        "useragent": {       //可选,UA配置  
        },  
        "launchwebview": {   //可选,应用首页配置  
        },  
        "secondwebview": {   //可选,应用双首页配置  
        },  
        "uni-app": {        //可选,uni-app应用的配置  
        },  
        "compatible": {      //可选,编译器兼容性配置  
        },  
        "wap2app": {         //可选,wap2app相关配置  
        },  
    }  
}

id

应用标识(AppID),在可视化“基础配置”项中。
更多信息参考DCloud AppID使用说明

name

应用名称,打包为apk/ipa安装到手机上显示的名称。

version

应用版本信息,包括版本名称和版本号。

launch_path

应用入口页面(首页)地址,相对于应用资源根目录(默认为根目录的index.html)。也可以是网络地址(需以http/https开头)。

description

应用描述信息。

icons

应用的图片配置(暂未使用)。

developer

开发者信息,可选内容。

  • name
    开发者名称
  • email
    开发者邮箱地址
  • url
    开发者网站地址

<a id="screenOrientation" />

screenOrientation

应用支持的屏幕方向,字符串数组类型,配置需要支持的方向,可取值:

  • portrait-primary
    竖屏
  • portrait-secondary
    竖屏(反向),山下颠倒
  • landscape-primary
    横屏,Home键在右侧
  • landscape-secondary
    横屏(反向),Home键在左侧

permissions

要使用的模块配置,不要手动修改,应该在HBuilderX中manifest.json的可视化界面“(App)模块权限配置”项的“打包模块配置”下勾选
HBuilderX可视化操作
支持以下模块:

模块标识 模块名称
Bluetooth 低功耗蓝牙
Contacts 通讯录
Fingerprint 指纹识别
iBeacon iBeacon
LivePusher 直播推流
Maps 地图
Messaging 短彩信、邮件
OAuth 登录鉴权
Payment 支付
Push 消息推送
Speech 语言识别
Statistic 统计
SQLite 数据库
VideoPlayer 视频播放

plus

5+扩展配置,uni-app项目对应为"app-plus"节点

allowsInlineMediaPlayback

是否允许html页面中video标签非全屏播放,仅iOS平台有效
Boolean类型,值为true表示允许,false表示不允许,默认值为不允许。
html页面的video标签必须添加webkit-playsinline属性才支持非全屏播放,如下示例:

<video controls="controls" src="http://.../x.mp4" webkit-playsinline>

此配置与VideoPlayer(视频播放)控件功能无关

mediaPlaybackRequiresUserAction (HX3.0.1 + 版本支持)

可通过此属性配置h5中的音频是否自动播放,注意当设置为false时开启自动播放,默认为true(仅iOS生效)

appWhitelist

应用中可直接安装原生应用的白名单地址(url)。

  • Android平台
    url地址如果是下载apk的链接,不在此白名单列表中的url下载apk将会被拦截(弹出toast提示“当前环境不支持下载未许可的apk文件”)
  • iOS平台
    url地址如果是跳转到appstore,不在此白名单列表中的url跳转将会被拦截(弹出toast提示“当前环境不支持下载未许可的应用”)
    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "appWhitelist":[  
            "http://www.dcloud.io/streamapp/streamapp.apk",  
            "itms://itunes.apple.com/cn/app/liu-ying-yong/id793135951"  
        ],  
        // ...  
    }

    以上白名单机制仅在流应用环境中限制,发布为独立App时忽略此配置

arguments

应用启动时的5+默认参数
String类型,可选。
在5+中可通过plus.runtime.arguments获取,如果外部调用应用时传入了参数,则覆盖此默认参数。

cache

应用的缓存配置信息,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "cache":{  
            "mode": ""  
        },  
        // ...  
    }

mode
Webview窗口默认使用的缓存模式,可取值:

  • "default"
    根据cache-control决定是否使用缓存数据,如果存在缓存并且没有过期则使用本地缓存资源,否则从网络获取;
  • "cacheElseNetwork"
    只要存在缓存(即使过期)数据则使用,否则从网络获取;
  • "noCache"
    不使用缓存数据,全部从网络获取;
  • "cacheOnly"
    仅使用缓存数据,不从网络获取(注:如果没有缓存数据则会导致加载失败)。

默认为"default"。

cers

应用的异常崩溃与错误报告系统配置信息,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "cers":{  
            "crash": ""  
        },  
        // ...  
    }

crash
是否提交程序异常崩溃信息。
Boolean类型,true表示提交,false表示不提交,默认值为true。

channel

渠道标记,字符串类型。

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "channel": "google",  
        // ...  
    }

注意:不要直接修改此配置,参考渠道包打包配置教程

confusion

应用的JS文件原生混淆配置

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "confusion": {  
            "description": "JS原生混淆",  
            "resources": {  
                "js/common.js": {   
                },   
                "js/immersed.js": {   
                }   
            }   
        },  
        // ...  
    }
  • description
    原生混淆配置描述信息
  • resources
    要混淆的JS文件列表,JSON对象,以要混淆的js文件路径(相对路径)为键名,值为空JSON对象即可

注意:confusion节点是在plus节点之下,uni-app项目由于需要编译暂不支持原生混淆
iOS平台使用WKWebview不支持原生混淆,HBuilderX2.2.5(alpha)版本开始调整默认使用WKWebview,使用WKWebview时云端打包将忽略原生混淆配置(即不混淆)

error

定义窗口加载错误时的处理逻辑,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "error":{  
            "url": "本地错误页面地址"  
        },  
        // ...  
    }
  • url
    窗口加载错误时(如本地页面不存在,或者无法访问的网络地址)跳转的页面地址,仅支持本地页面地址。设置为“none”则关闭跳转到错误页面功能,此时页面显示Webview默认的错误页面内容。默认使用5+ Runtime内置的错误页。

locales

云端打包国际化配置,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "locales":{  
            "zh": {//中文(简体)  
                "name": "应用名称",  
                "android": {  
                    "strings": {  //Android平台自定义字符串  
                    }  
                },  
                "ios": {  
                    "privacyDescription": {  //iOS平台隐私访问描述信息  
                    },  
                    "infoPlist": {  //iOS平台自定义InfoPlist.strings  
                    }  
                }  
            },  
            "zh-TW": {//中文繁体(台湾)  
            },  
            "zh-HK": {//中文繁体(香港)  
            },  
            "en": {  
            }  
        },  
        // ...  
    }

详细说明参考云端打包配置国际化

nativePlugins

uni原生插件配置,JSON对象数组

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "nativePlugins": [  
            {  
                "%PluginID%": {  
                }  
            }  
        ],  
        // ...  
    }

注意:不要直接修改此配置,推荐在HBuilderX的可视化界面中操作
使用云端uni原生插件参考:https://ask.dcloud.net.cn/article/35412
使用本地uni原生插件参考:https://ask.dcloud.net.cn/article/35844

popGesture

应用中Webview窗口侧滑返回功能的默认效果,字符串类型

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "popGesture": "none",  
        // ...  
    }

可取以下值:

  • "none"
    默认Webview窗口无侧滑返回功能,侧滑时无任何响应
  • "close"
    默认webview窗口侧滑返回关闭,用户侧滑后窗口自动关闭,关闭窗口的逻辑与调用 close()方法一致。
  • "hide"
    默认webview窗口侧滑返回隐藏,即用户侧滑后窗口自动隐藏,隐藏窗口的逻辑与调用其hide()方法一致。

默认值为"none"。manifest.json中配置的为默认项, 在应用中可以通过WebviewStyles的popGesture属性动态修改。
注意:Android平台仅在流应用环境下支持侧滑返回。

kernel

Webview窗口使用的内核,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "kernel": {  
            "ios": "WKWebview",  
            "recovery": "restart|reload|none"  
        },  
        // ...  
    }
ios

iOS平台Webview窗口默认使用的内核,可取值:

  • "WKWebview"
    iOS8.0及以上系统默认使用WKWebview内核
  • "UIWebview"
    使用UIWebview内核

默认值为UIWebview。
HBuilderX2.2.5(alpha)版本开始调整默认为WKWebview

recovery

Webview内核崩溃后的恢复处理逻辑,仅iOS平台非uni-app项目使用WKWebview内核时生效,uni-app项目可自动恢复(推荐转换为uni-app项目)。
当WKWebview崩溃后,Webview页面的JS上下文将丢失,也无法渲染DOM内容(白屏)
可配置以下值:

  • "restart"
    重启应用,关闭所有页面重新打开应用首页,可通过(plus.runtime.isRecovery)来判断应用是否恢复重启
  • "reload"
    重新加载当前WKWebview(崩溃的WKWebview)页面,页面中JS上下文中所有数据丢失,在当前Webview中可通过plus.webview.isRecovery判断是否恢复重新加载,在其它Webview中可监听recovery事件来判断
  • "none"
    不做任何操作

创建Webview窗口时可设置kernelRecovery属性单独设置某个窗口的恢复处理逻辑

<a id="runmode" />

runmode

应用的运行模式,字符串类型

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "runmode": "liberate"  
        // ...  
    }

可取值:

  • "normal"
    正常运行(不释放资源)模式,直接使用应用的资源,无法直接使用File API(plus.io.*)访问应用资源。
  • "liberate"
    释放资源运行模式,应用在第一次启动时将解压应用私有目录。该模式的缺点:第一次启动更慢,耗费时间先解压。该模式有用的场景:此模式下File API才可正常访问_www应用资源,以及在某些Android rom访问本地页面时url地址中包含?带参数,但不推荐使用这种跨页传参方式,推荐使用其他方式跨页传参http://ask.dcloud.net.cn/article/288
    注意:wap2app 应用固定为 liberate,不支持自定义。

safearea

iOS刘海屏设备(iPhoneX)的安全区域配置

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "safearea": {  
            "background":"#CCCCCC",  
            "backgroundDark":"#2f0508",    
            "bottom":{  
                "offset":"auto"  
            },  
            "left": {  
                "offset":"auto"  
            },  
            "right: {  
                "offset":"auto"  
            }  
        },  
        // ...  
    }
background

安全区域外的背景颜色,默认值为"#FFFFFF"

backgroundDark HX 3.1.18+ 支持

暗黑模式下安全区域外的背景颜色,默认值"无", 更多关于暗黑模式的适配请参考 iOS适配暗黑模式

bottom

底部安全区域配置,包括以下属性

  • offset
    底部安全区域偏移,"none"表示不空出安全区域,"auto"自动计算空出安全区域,默认值为"none"
    left

    左侧安全区域配置(横屏显示时有效),包含的属性与bottom一致。

    right

    右侧安全区域配置(横屏显示时有效),包含的属性与bottom一致。

schemeWhitelist

配置应用中URL Scheme白名单(非http、https、file),字符串数组

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "schemeWhitelist": [  
            "streamapp"  
        ],  
        // ...  
    }

仅允许白名单中的scheme跳转,不在白名单中URL Scheme链接将会被拦截(拦截后不做任何处理)。
默认白名单为:
'sms', 'tel', 'mailto', 'callto', 'weixin', 'alipay', 'alipays', 'alipayqr', 'weibo', 'mqq', 'mqqapi', 'qqmap', 'baidumap', 'amap', 'iosamap', 'streamapp'
iOS默认白名单还包括"itms"等跳转appstore。

<a id="splashscreen" />

splashscreen

程序启动界面配置信息,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "splashscreen": {  
            "autoclose": "false",  
            "event": "loaded",  
            "target": "default",  
            "waiting": "true",  
            "delay": "500",  
            "ads": {  
                "background": "#FFFFFF",  
                "image": "logo.png"  
            },  
            "androidTranslucent": false  
        },  
        // ...  
    }

包括以下字段:

  • autoclose
    是否自动关闭程序启动界面,布尔类型。
    默认为true,即自动关闭程序启动界面,否则需要在应用中显式调用plus.navigator.closeSplashscreen方法来关闭。
  • event
    触发自动关闭splash界面的事件类型,字符串类型,可取值:
    "titleUpdate"表示当首页Webview的titleUpdate事件触发时自动关闭splash界面;
    "rendering"表示当首页Webview的rendering事件触发时自动关闭splash界面;
    "loaded":表示当首页Webview的loaded事件触发时自动关闭splash界面。
    默认值为loaded。
  • target
    设置双首页模式下,定义目标webview触发event类型自动关闭splash界面,可取值:
    "default"根据首页Webview的event事件关闭splash;
    "second":根据第二个首页Webview的event事件关闭splash。
    默认值为"default"。
  • waiting
    是否在程序启动界面显示等待雪花,布尔类型。
    默认为false,即不显示等待雪花。
  • delay
    启动界面在应用的首页面加载完毕后延迟关闭的时间,单位为毫秒,数字类型。
    默认不延迟,即首页面加载完毕后立即关闭。
  • ads
    开屏广告配置信息,JSON格式对象
    包括以下属性:
    background:设置背景颜色
    image:设置底部图片地址,相对应用资源目录路径,不支持网络地址,建议分辨率720x256(要求png格式,背景透明,留出边距,在不同分辨率手机上会自动等比例缩放处理)
  • androidTranslucent
    使用“自定义启动图”启动界面时是否显示透明过渡界面,设置为true首次点击桌面图标后可能需要等待0.5秒左右(低端手机可能时间会更长)进入启动界面,设置为false则会在点击桌面图标后立即进入启动界面(在部分设备顶部系统状态栏可能会半透明显示)。
    注意:仅在“自定义启动图”时生效,默认值为false。

ssl

应用ssl相关设置

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "ssl": {  
            "untrustedca": "accept|refuse|warning"  
        },  
        // ...  
    }

包括以下字段:

  • untrustedca
    配置应用中https请求时,如果服务器返回非受信证书的处理逻辑,字符串类型,可取值:
    "accept" - 接受此非受信证书,继续访问;
    "refuse" - 拒绝此非 受信证书,停止访问;
    "warning" - 弹出警告提示框提醒用户,由用户确定是否继续访问。
    默认值为"accept"。

softinput

软键盘相关配置,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "softinput": {  
            "navBar": "auto|none",  
            "auxiliary": true|false,  
            "mode": "adjustResize|adjustPan"  
        },  
        // ...  
    }

包括以下字段:

  • navBar
    软键盘上导航条的显示模式,字符串类型(仅iOS平台支持):
    "auto" - 表示系统默认值(即显示导航条);
    "none" - 表示不显示。
    默认值为"auto"。
  • auxiliary
    是否开启辅助输入功能,Boolean类型
    true表示开启,false表示关闭,默认值为true(HBuilderX3.1.3+版本调整默认值为false)。
  • mode
    弹出系统软键盘模式,字符串类型,可取值:
    "adjustResize" - 表示弹出软键盘时自动调整窗口大小;
    "adjustPan" - 表示弹出软键盘时自动移动滚动窗口使得输入框可见(Android平台可能会出现软键盘盖住输入框的情况)。
    默认值为"ajustResize"。

iOS平台可通过WebviewStyles的softinputMode属性对单个窗口进行控制

statusbar

应用启动后的系统状态栏样式,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "statusbar": {  
            "immersed": "none|suggestedDevice|supportedDevice",  
            "style": "dark|light",  
            "background": "#RRGGBB"  
        },  
        // ...  
    }

包括以下字段:

  • immersed
    定义应用是否使用沉浸式状态栏样式,String类型,可取值:
    "none" - 非沉浸式状态栏样式;
    "suggestedDevice" - 沉浸式状态栏,仅在支持设置状态栏前景色样式的设备上生效(Android5.0的小米&魅族、Android6.0及以上,iOS在所有设备上生效);
    "supportedDevice" - 沉浸式状态栏,在所有支持沉浸式状态栏设备上生效(与之前的true一致,Android4.4及以上)。
    默认值为"none"。
  • style
    系统状态栏样式(前景颜色),字符串类型,可取以下值:
    "dark" - 深色前景色样式(即状态栏前景文字为黑色),此时background建议设置为浅颜色;
    "light" - 浅色前景色样式(即状态栏前景文字为白色),此时background建设设置为深颜色。
    可通过plus.navigator.setStatusBarStyle()动态调整。注:Android5.0(小米&魅族)和Android6.0及以上系统支持,iOS7.0及以上系统支持
  • background
    系统状态栏背景颜色,字符串类型,#RRGGBB格式,颜色值格式为"#RRGGBB",如"#FF0000"为红色。
    默认使用系统样式,通常iOS平台默认为light样式;Android平台默认为dark(各ROM厂商存在差异)。
    可通过plus.navigator.setStatusBarBackground()动态调整。
    注:仅在immersed属性值设置为none时有效。

useragent(useragent_android/useragent_ios)

应用中http请求的userAgent信息,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "useragent": {  
            "value": "要设置的默认userAgent值",  
            "concatenate": "true|false"  
        },  
        "useragent_android": {  
            "value": "android平台要设置的默认userAgent值",  
            "concatenate": "true|false"  
        },  
        "useragent_ios": {  
            "value": "ios平台要设置的默认userAgent值",  
            "concatenate": "true|false"  
        },  
        // ...  
    }

包括以下字段:

  • value
    自定义userAgent值,字符串类型
  • concatenate
    是否将value值作为追加值连接到系统默认userAgent值之后,布尔类型:
    "true" - 表示追加模式,若value不以空格字符开头,则在其前面自动添加空格字符;
    "false" - 表示覆盖模式,即value值作为完整userAgent使用。
    默认为false,即覆盖默认userAgent值。

useragent_android和useragent_ios分别配置对Android和iOS平台生效。
注:为了保证运行环境的一致性,建议concatenate设置为true。

launchwebview

应用首页Webview的配置信息,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "launchwebview": {  
            "plusrequire": "ahead|normal|later|none",  
            "injection": "true|false",  
            "overrideresource": [{  
                "match":"区配拦截的资源url地址",  
                "redirect":"拦截资源的重现向地址",  
                "mime":"拦截资源的数据类型",  
                "encoding":"拦截资源的数据编码",  
                "header":"拦截资源的http头数据"  
            }],  
            "overrideurl": {  
                "mode": "allow|reject,拦截模式",  
                "match": "匹配拦截规则",  
                "exclude": "none|redirect,排除拦截理规则"  
            },  
            "replacewebapi": {  
                "geolocation": "none|alldevice|auto, 重写标准定位API"  
            },  
            "geolocation": "none|replace|auto, 重写标准定位API",  
            "subNViews": [{  
                "id": "原生子View控件的标识",  
                "styles": "JSON对象,原生子View控件样式",  
                "tags": "JSON数组对象,原生子View控件上绘制的元素"  
            }],  
            "titleNView": {  
                "backgroundColor": "#RRGGBB, 标题栏背景颜色",  
                "titleText": "标题栏标题文字内容",  
                "titleColor": "#RRGGBB, 标题栏标题文字颜色",  
                "titleSize": "17px,标题字体大小,默认大小为17px",  
                "autoBackButton": "true|false,是否显示标题栏上返回键",  
                "backButton": "JSON对象,标题栏上返回键样式",  
                "buttons": [{  
                    "color": "按钮上的文字颜色",  
                    "colorPressed": "按钮按下状态的文字颜色",  
                    "float": "按钮在标题栏上的显示位置",  
                    "fontWeight": "按钮上文字的粗细",  
                    "fontSize": "按钮上文字的大小",  
                    "fontSrc": "按钮上文字使用的字体文件路径",  
                    "text": "按钮上显示的文字"  
                }],  
                "splitLine": "JSON对象,标题栏底部分割线样式"  
            },  
            "statusbar": {  
                "background": "#RRGGBB格式字符串,沉浸式状态栏样式下系统状态栏背景颜色"  
            },  
            "top": "0px|10%,Webview的顶部偏移量",  
            "height": "0px|10%,Webview窗口高度",  
            "bottom": "0px|10%, Webview的底部偏移量,仅在未同时设置top和height属性时生效",  
            "backButtonAutoControl": "none|hide|close,运行环境自动处理返回键的控制逻辑",  
            "additionalHttpHeaders": "JSON数据,额外添加HTTP请求头数据"  
        },  
        // ...  
    }

包括以下字段:

overrideresource

配置应用首页的拦截资源请求处理逻辑,可包含多条配置项,json支持以下属性:

  • match
    区配拦截的资源url地址,支持正则表达式,与WebviewOverrideResourceOptions的match属性功能一致;
  • redirect
    拦截资源的重现向地址,仅支持本地资源地址,如"_www"、"_doc"、"_downloads"、"_documents"等开头的路径,与WebviewOverrideResourceOptions的redirect属性功能一致;
  • mime
    拦截资源的数据类型,RFC2045/RFC2046/RFC2047/RFC2048/RFC2049规范中定义的数据类型,与WebviewOverrideResourceOptions的mime属性功能一致;
  • encoding
    拦截资源的数据编码,默认值"UTF-8",与WebviewOverrideResourceOptions的encoding属性功能一致;
  • header
    拦截资源的http头数据,JSON格式数据,与WebviewOverrideResourceOptions的encoding属性功能一致;

**注:以上配置项与Webview的overrideResourceRequest方法作用一致,配置项可参考规范

overrideurl

配置应用首页的拦截链接请求处理逻辑,支持以下属性:

  • mode
    拦截模式,可取值:
    "allow" - 表示满足match属性定义的条件时不拦截url继续加载,不满足match属性定义的条件时拦截url跳转并触发callback回调;
    "reject" - 表示满足match属性定义的提交时拦截url跳转并触发callback回调,不满足match属性定义的条件时不拦截url继续加载;
    默认值为"reject"。
  • match
    匹配拦截规则,支持正则表达式,默认值为对所有URL地址生效(相当于正则表达式“.*”)。
    如果mode值为"allow"则允许区配的URL请求跳转,mode值为"reject"则拦截区配的URL请求。
  • exclude
    排除拦截理规则,可取值:
    "none" - 表示不排除任何URL请求(即拦截处理所有URL请求);
    "redirect" - 表示排除拦截处理301/302跳转的请求(谨慎使用,非a标签的href触发的URL请求可能会误判断为302跳转);
    默认值为"none"。
titleNView

配置应用首页的标题栏,配置此属性则首页显示标题栏,支持以下属性:

  • backgroundcolor
    标题栏背景颜色,字符串类型,格式为“#RRGGBB”,默认值为灰黑色(#1B1A1F)
  • titletext
    标题栏标题文字内容,默认值为当前加载页面的标题
  • titlecolor
    标题栏标题文字颜色,字符串类型,格式为“#RRGGBB”,默认值为白色(#FFFFFF)

secondwebview

应用双首页模式配置,添加此字段则表明应用采用双首页模式运行,应用启动除了创建默认入口页外还创建第二个Webview,此字段配置第二个Webview的配置信息,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "secondwebview": {  
            "launch_path": "加载页面地址",  
            "id": "Webview窗口标识",  
            "mode": "front|child|behind|parent,Webview显示模式",  
            "top": "0px|10%,Webview的顶部偏移量",  
            "height": "0px|10%,Webview窗口高度",  
            "bottom": "0px|10%, Webview的底部偏移量",  
            "plusrequire": "ahead|normal|later|none,控制JS注入时机",  
            "injection": "true|false,是否提前注入js",  
            "overrideresource": [{  
                "match":"区配拦截的资源url地址",  
                "redirect":"拦截资源的重现向地址",  
                "mime":"拦截资源的数据类型",  
                "encoding":"拦截资源的数据编码",  
                "header":"拦截资源的http头数据"  
            }],  
            "overrideurl": {  
                "mode": "allow|reject,拦截模式",  
                "match": "匹配拦截规则",  
                "exclude": "none|redirect,排除拦截理规则"  
            },  
            "replacewebapi": {  
                "geolocation": "none|alldevice|auto, 重写标准定位API"  
            },  
            "geolocation": "none|replace|auto, 重写标准定位API",  
            "subNViews": [{  
                "id": "原生子View控件的标识",  
                "styles": "JSON对象,原生子View控件样式",  
                "tags": "JSON数组对象,原生子View控件上绘制的元素"  
            }],  
            "titleNView": {  
                "backgroundColor": "#RRGGBB, 标题栏背景颜色",  
                "titleText": "标题栏标题文字内容",  
                "titleColor": "#RRGGBB, 标题栏标题文字颜色",  
                "titleSize": "17px,标题字体大小,默认大小为17px",  
                "autoBackButton": "true|false,是否显示标题栏上返回键",  
                "backButton": "JSON对象,标题栏上返回键样式",  
                "buttons": [{  
                    "color": "按钮上的文字颜色",  
                    "colorPressed": "按钮按下状态的文字颜色",  
                    "float": "按钮在标题栏上的显示位置",  
                    "fontWeight": "按钮上文字的粗细",  
                    "fontSize": "按钮上文字的大小",  
                    "fontSrc": "按钮上文字使用的字体文件路径",  
                    "text": "按钮上显示的文字"  
                }],  
                "splitLine": "JSON对象,标题栏底部分割线样式"  
            },  
            "statusbar": {  
                "background": "#RRGGBB格式字符串,沉浸式状态栏样式下系统状态栏背景颜色"  
            },  
            "backButtonAutoControl": "none|hide|close,运行环境自动处理返回键的控制逻辑",  
            "additionalHttpHeaders": "JSON数据,额外添加HTTP请求头数据"  
        },  
        // ...  
    }

包括以下字段:

launch_path

第二个Webview窗口加载的页面地址,支持网络地址和本地地址

id

第二个Webview窗口标识,默认值为%APPID%__second

mode

第二个Webview窗口显示模式,可取值:

  • child
    表示作为launchwebview的子窗口
  • front
    表示与launchwebview平级并在其前显示
  • behind
    表示与launchwebview平级并在其后显示
    默认值为"front"。
top

第二个Webview窗口的顶部偏移量
可取值像素值或百分比,如"0px"、"10%"。

height"

第二个Webview窗口的高度
可取值像素值或百分比,如"0px"、"50%"。

bottom

第二个Webview窗口的底部偏移量
可取值像素值或百分比,如"0px"、"10%"。

其它属性与launchwebview下一致

uni-app

仅uni-app项目生效
uni-app应用的配置,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "uni-app": {  
            "nvue": {  
                "flex-direction": "row|row-reverse|column|column-reverse"  
            }  
        },  
        // ...  
    }

包括以下字段:

nvue

nvue页面的flex-direction默认值,字符串类型,可取值:
"row"、"row-reverse"、"column"、"column-reverse"
默认值为"row"。

compatible

仅uni-app项目生效
uni-app应用兼容性配置,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "compatible": {  
            "ignoreVersion": true,  
            "runtimeVersion": "兼容的uni-app运行环境版本号,多个版本使用,分割",  
            "compilerVersion": "兼容的编译器版本号"  
        },  
        // ...  
    }

当uni-app运行环境与编译环境不一致时,会弹出可能存在兼容性问题的提示框。
详细描述参考:https://ask.dcloud.net.cn/article/35627

wap2app

wap2app应用配置,JSON格式对象

    "plus": {  //uni-app项目对应节点名称为"app-plus"  
        "wap2app": {  
            "launchError": "tip|none"  
        },  
        // ...  
    }

包括以下字段:

launchError

应用首页加载错误处理逻辑,"tip"表示弹出提示框(无法连接服务器,请检查网络设置),"none"表示不处理(跳转到错误页面),默认值为"tip"。

plus->distribute

云端打包配置项,uni-app项目对应为"app-plus" -> "distribute"节点

"plus": {  
    "distribute": {  
        "debug": "true|false,是否开启调试功能",  
        "syncDebug": "true|false, 是否为真机运行基座",  
        "apple": {  
            "appid": "",            //iOS包名(Bundle ID)  
            "mobileprovision": "",  //iOS打包使用的profile文件  
            "password": "",         //iOS打包使用的证书密码  
            "p12": "",              //iOS打包使用的证书  
            "devices": "iphone|ipad|universal", //iOS支持的设备类型  
            "urlschemewhitelist": [     //iOS平台应用访问白名单  
                ""  
            ],  
            "UIBackgroundModes": ["audio","location"],//iOS应用后台运行模式  
            "urltypes": [       //iOS平台url scheme配置  
            ],  
            "frameworks": [     //iOS平台依赖的系统库  
                "CoreLocation.framework"  
            ],  
            "deploymentTarget": "9.0",  //iOS支持的最低版本  
            "privacyDescription": {     //iOS隐私描述  
            }  
            "idfa":"true|false",        //是否使用广告标识符,默认值为true  
            "capabilities": {           //应用的能力配置(Capabilities)  
            },  
            "CFBundleName": "HBuilder",  
            "validArchitectures":[          //支持的cpu指令  
                "arm64"  
            ]  
        },  
        "google":{  
            "packagename":"",   //Android包名  
            "keystore":"",      //Android签名证书  
            "password":"",      //Android签名证书密码  
            "aliasname":"",     //Android签名证书别名  
            "locale": "default",    //应用的语言,默认值为default(系统语言),如en_US表示使用英语(美国)  
            "schemes":[         //Android平台url scheme配置  
            ],  
            "theme":"程序使用的主题",  
            "abiFilters":[      //支持的CPU类型  
                "armeabi", "armeabi-v7a", "x86"  
            ],  
            "custompermissions":"true|false",  
            "permissions":[     //Android平台使用的权限  
                ""  
            ],  
            "permissionPhoneState": {  //Android平台读取设备信息权限配置  
                     "request": "always|once|none",    //申请权限策略  
                     "prompt": ""                      //用户拒绝时弹出提示框上的内容  
            },  
            "permissionExternalStorage": {  //Android平台读写存储权限配置  
                     "prompt": ""                      //用户拒绝时弹出提示框上的内容  
            },  
            "minSdkVersion":"apk支持的最低版本",   //Android平台最低版本  
            "targetSdkVersion":"apk的目标版本",  //Android平台目标版本  
            "forceDarkAllowed":"true", //是否允许强制支持暗黑模式,默认值为false, HBuilderX3.1.4+支持  
            "resizeableActivity":"false", //是否支持分屏时调整activity大小,默认不设置此值,HBuilderX3.1.10+支持  
            "packagingOptions": [  //配置gradle编译参数packagingOptions  
                 "doNotStrip '*/armeabi-v7a/*.so'"  
            ]  
        },  
        "icons":{           //应用图标配置  
        },  
        "splashscreen":{    //应用启动图片配置  
        },  
        "plugins":{  // 第三方sdk配置  
        }  
    }  
}

apple

iOS平台打包配置,uni-app项目对应为"app-plus" -> "distribute" -> "ios"节点

其中appid、mobileprovision、password、p12、devices为iOS打包基础配置,点击HBuilderX菜单的"发行" -> "原生App-云打包"打开的“App云端打包”中配置:

urlschemewhitelist

设置应用访问白名单,更多详情参考https://ask.dcloud.net.cn

UIBackgroundModes

应用后台运行模式配置,如后台播放音乐、后台定位等
后台音乐播放
后台获取位置信息
更多后台能力参考苹果官方文档

urltypes

iOS平台URL Schemes配置,更多详情参考https://ask.dcloud.net.cn/article/64

<a id="frameworks"/>

frameworks

设置应用要引用的系统库(framework),字符串数组。
在使用native.js时使用,通知App云端打包在编译应用时引用对于的系统framework库,以便native.js能成功调用其中的API。
如要调用苹果游戏相关API,则需要引用"GameKit.framework"。

            "frameworks": [     //iOS平台依赖的系统库  
                "GameKit.framework"  
            ],

<a id="deploymentTarget"></a>

deploymentTarget

设置应用支持的最低版本,可取值:

  • iOS8:
    '8.0', '8.1', '8.2', '8.3', '8.4'
  • iOS9:
    '9.0', '9.1', '9.2', '9.3'
  • iOS10:
    '10.0', '10.1', '10.2', '10.3'
  • iOS11:
    '11.0', '11.1', '11.2', '11.3', '11.4'
  • iOS12:
    '12.0', '12.1', '12.2', '12.3', '12.4'
  • iOS13:
    '13.0', '13.1'
privacyDescription

iOS平台隐私描述,请在HBuilderX的manifest.json可视化界面“(App)模块权限配置”中进行配置。

idfa

iOS平台应用是否使用IDFA(广告标识),更多详情参考https://ask.dcloud.net.cn/article/36107

capabilities

iOS平台打包时Capabilities配置,json类型数据,配置应用的capabilities数据(根据XCode规范分别配置到entitlements和plist文件中)

        "capabilities": {  
            "entitlements": {   // 合并到工程entitlements文件的数据(json格式)  
            },  
            "plists": {         // 合并到工程Info.plist文件的数据(json格式)  
            }  
        },

更多详情参考https://ask.dcloud.net.cn/article/36393

CFBundleName

iOS平台云打包后生成应用的 bundle name 值。
默认值为"HBuilder",建议设置为英文,不要使用中文。
示例如下:

        "CFBundleName": "HelloWorld",
validArchitectures

iOS平台编译时支持的CPU指令。
默认值为['arm64', 'arm64e', 'armv7', 'armv7s', 'x86_64'],如果使用了三方插件则会取插件配置validArchitectures的交集。

google

Android平台打包配置,uni-app项目对应为"app-plus" -> "distribute" -> "android"节点

其中packagename、keystore、password、aliasname为Android打包基础配置,点击HBuilderX菜单的"发行" -> "原生App-云打包"打开的“App云端打包”中设置:

schemes

Android平台URL Schemes配置,更多详情参考https://ask.dcloud.net.cn/article/409

theme

Android平台应用要使用的系统主题名称
更多详情参考Android配置应用主题皮肤

abiFilters

Android平台配置支持的CPU类型,更多详情参考https://ask.dcloud.net.cn/article/36195

permissions

Android平台使用到的权限,请在HBuilderX的manifest.json可视化界面“(App)模块权限配置”中的“Android打包权限配置”中勾选。

<a id="permissionExternalStorage"/>

permissionExternalStorage

HBuilderX2.5.0+版本支持
Android平台应用启动时申请读写手机存储权限配置
支持以下字段

  • prompt
    当用户拒绝授权读写手机存储权限时弹出提示框上显示的内容。

更多详情参考https://ask.dcloud.net.cn/article/36549

<a id="permissionPhoneState"/>

permissionPhoneState

HBuilderX2.3.8+版本支持
Android平台应用启动时申请读取设备信息权限配置
支持以下字段

  • request
    申请权限策略,可配置以下值:
    "always" - 一直申请读取设备信息权限,用户必须授权允许,否则一直弹出提示框,直到用户允许;
    "once" - 申请一次读取设备信息权限,不管用户是否允许
    "none" - 不申请读取设备信息权限
  • prompt
    配置request值为"always"时有效,当用户拒绝授权读取设备信息权限时弹出提示框上显示的内容。

更多详情参考https://ask.dcloud.net.cn/article/36549

minSdkVersion & targetSdkVersion

minSdkVersion为应用兼容的最低Android版本(API等级)
targetSdkVersion为应用适配的Android版本(API等级)
更多详情参考https://ask.dcloud.net.cn/article/193

<a id="packagingOptions"/>

packagingOptions

配置应用的gradle配置项packagingOptions,参数值为字符串数组,每一项会单独配置到gradle文件的packagingOptions下,如下示例:

        "packagingOptions": [  
          "doNotStrip '*/armeabi-v7a/*.so'",  
          "merge '**/LICENSE.txt'"  
        ]

注意,默认已包含以下配置:

    pickFirst 'lib/*/libstlport_shared.so'  
    pickFirst 'lib/*/libc++_shared.so'

icons

应用图标配置,json格式数据,分别包含Android和iOS平台的配置项:

        "icons":{  
            "ios":{  
                "appstore":"必选, 1024x1024, 提交app sotre使用的图标",  
                "iphone":{  
                    "normal": "可选,57x57,iPhone3/3GS程序图标,低于iOS7不再支持",  
                    "retina": "可选,114x114,iPhone4程序图标,低于iOS7不再支持",  
                    "app@2x[retina7]": "可选,120x120,iOS7+程序图标(iPhone4S/5/6/7/8)",  
                    "app@3x[retina8]": "可选,180x180,iOS7+程序图标(iPhone6plus/7plus/8plus/X)",  
                    "spotlight-normal": "可选,29x29,iPhone3/3GS Spotlight搜索程序图标,低于iOS7不再支持",  
                    "spotlight-retina": "可选,58x58,iOS5/6 Spotlight搜索程序图标(iPhone4S),低于iOS7不再支持",  
                    "spotlight@2x[spotlight-retina7]": "可选,80x80,iOS7+ Spotlight搜索图标(iPhone5/6/7/8)",  
                    "spotlight@3x[spotlight-retina8]": "可选,120x120,iOS7+ Spotlight搜索图标(iPhone6plus/7plus/8plus/X)  
                    "settings-normal": "可选,29x29,iPhone4设置页面程序图标,低于iOS7不再支持",  
                    "settings@2x[settings-retina]": "可选,58x58,iOS5+ Settings设置图标(iPhone5/6/7/8)",  
                    "settings@3x[settings-retina8]": "可选,87x87,iOS5+ Settings设置图标(iPhone6plus/7plus/8plus/X)",  
                    "notification@2x": "可选,40x40,iOS7+ 通知栏图标(iPhone5/6/7/8)",  
                    "notification@3x": "可选,60x60,iOS7+ 通知栏图标(iPhone6plus/7plus/8plus/X)"  
                },  
                "ipad":{  
                    "normal": "可选,72x72,iPad普通屏幕程序图标,低于iOS7不再支持",  
                    "retina": "可选,144x144,iPad高分屏程序图标,低于iOS7不再支持",  
                    "app[normal7]": "可选,76x76,iOS7+程序图标",  
                    "app@2x[retina7]": "可选,152x152,iOS7+程序图标(高分屏)",  
                    "proapp@2x": "可选,167x167,iOS9+程序图标(iPad Pro)",  
                    "spotlight-normal": "可选,50x50,iPad Spotlight搜索程序图标,低于iOS7不再支持",  
                    "spotlight-retina": "可选,100x100,iPad高分屏Spotlight搜索程序图标,低于iOS7不再支持",  
                    "spotlight[spotlight-normal7]": "可选,40x40,iOS7+ Spotlight搜索图标",  
                    "spotlight@2x[spotlight-retina7]": "可选,80x80,iOS7+ Spotlight搜索图标(高分屏)",  
                    "settings[settings-normal]": "可选,29x29,iOS5+ 设置图标",  
                    "settings@2x[settings-retina]": "可选,58x58,iOS5+ 设置图标(高分屏)",  
                    "notification": "可选,20x20,iOS7+ 通知栏图标",  
                    "notification@2x": "可选,40x40,iOS7+ 通知栏图标(高分屏)"  
                }  
            },  
            "android":{  
                "ldpi": "可选,48x48",     //已废弃  
                "mdpi": "可选,48x48",     //已废弃  
                "hdpi": "可选,72x72",  
                "xhdpi": "可选,96x96",  
                "xxhdpi": "可选,144x144",  
                "xxxhdpi": "可选,192x192"  
            }  
        },

云端打包时要求所有图标路径都相对于应用下".manifest"目录。
提交云端打包时需做路径转换,请在HBuilderX的manifest.json可视化界面“(App)图标配置”中操作设置
图片配置注意事项参考https://ask.dcloud.net.cn/article/35979

splashscreen

应用启动图配置,json格式数据,分别包含Android和iOS平台的配置项:

        "splashscreen":{  
            "ios":{  
                "iphone":{  
                    "default": "可选,320x480,iPhone3(G/GS)启动图片",       // portrait480h,兼容老设备,将废弃  
                     "retina35": "可选,640x960,3.5英寸设备(iPhone4/4S)启动图片,支持iPhone4/4S时必选",    // portrait480h@2x  
                     "retina40": "可选,640x1136,4.0英寸设备(iPhone5/5S)启动图片,支持iPhone5/5S显示时必选",    // portrait-568h@2x  
                     "retina40l":"可选,1136x640,4.0英寸设备(iPhone5/5S)横屏启动图片,支持iPhone5/5S横屏显示时必选",    // landscape-568h@2x  
                     "retina47": "可选,750x1334,4.7英寸设备(iPhone6/7/8)启动图片,支持iPhone6/7/8时必选",    // portrait-667h@2x  
                     "retina47l": "可选,1334x750,4.7英寸设备(iPhone6/7/8)横屏启动图片,支持iPhone6/7/8横屏显示时必选",    // landscape-667h@2x  
                     "retina55": "可选,1242x2208,5.5英寸设备(iPhone6/7/8Plus)启动图片,支持iPhone6/7/8Plus时必选",    // portrait-736h@3x  
                     "retina55l": "可选,2208x1242,5.5英寸设备(iPhone6/7/8Plus)横屏启动图片,支持iPhone6/7/8Plus横屏显示时必选",    // landscape-736h@3x  
                     "iphonex": "可选,1125x2436,5.8英寸设备(iPhoneX/XS)启动图片,支持iPhoneX/XS时必选",    // portrait-812h@3x  
                     "iphonexl": "可选,2436x1125,5.8英寸设备(iPhoneX/XS)横屏启动图片,支持iPhoneX/XS横屏显示时必选",    // landscape-812h@3x  
                     "portrait-896h@2x": "可选,828x1792,6.1英寸设备(iPhoneXR)启动图片,支持iPhone XR(iOS12+)时必选",   
                     "landscape-896h@2x": "可选,1792x828,6.1英寸设备(iPhoneXR)iPhoneXR横屏启动图片,支持iPhone XR(iOS12+)横屏显示时必选",   
                     "portrait-896h@3x": "可选,1242x2688,6.5英寸设备(iPhoneXS Max)启动图片,支持iPhone XS Max(iOS12+)时必选",  
                     "landscape-896h@3x": "可选,2688x1242,6.5英寸设备(iPhoneXS Max)横屏启动图片,支持iPhone XS Max(iOS12+)横屏显示时必选"  
                },  
                "ipad":{  
                     "portrait": "可选,768x1004,iPad竖屏无状态栏启动图片(兼容iOS5/6),仅支持iOS5/6的iPad时必选",      //兼容老设备iOS5/6,将废弃  
                     "portrait-retina": "可选,1536x2008,iPad高分屏竖屏无状态栏启动图片(兼容iOS5/6),仅支持iOS5/6的iPad时必选",        //兼容老设备iOS5/6,将废弃  
                     "landscape": "可选,1024x748,iPad横屏无状态栏启动图片(兼容iOS5/6),仅支持iOS5/6的iPad时必选",        //兼容老设备iOS5/6,将废弃  
                     "landscape-retina": "可选,2048x1496,iPad高分屏横屏启动图片(兼容iOS5/6),仅支持iOS5/6的iPad时必选",        //兼容老设备iOS5/6,将废弃  
                     "portrait7": "可选,768x1024,9.7/7.9英寸iPad/mini竖屏启动图片 ,支持iPad/mini(iOS7+)时必选",    // portrait-1024h  
                     "landscape7": "可选,1024x768,9.7/7.9英寸iPad/mini横屏启动图片,支持iPad/mini(iOS7+)横屏显示时必选",     // landscape-1024h  
                     "portrait-retina7": "可选,1536x2048,9.7/7.9英寸iPad/mini高分屏竖屏图片,支持iPad/mini(iOS7+)时必选",    // portrait-1024h@2x  
                     "landscape-retina7": "可选,2048x1536,9.7/7.9英寸iPad/mini高分屏横屏启动图片,支持iPad/mini(iOS7+)横屏显示时必选",    // landscape-1024h@2x  
                     "portrait-1112h@2x":"可选,1668x2224,10.5英寸iPad Pro竖屏启动图片,支持10.5英寸iPad Pro(iOS8+)时必选",  
                     "landscape-1112h@2x":"可选,2224x1668,10.5英寸iPad Pro横屏启动图片,支持10.5英寸iPad Pro(iOS8+)横屏显示时必选",  
                     "portrait-1194h@2x":"可选,1668x2388,11英寸iPad Pro竖屏启动图片,支持11英寸iPad Pro(iOS10+)时必选",  
                     "landscape-1194h@2x":"可选,2388x1668,11英寸iPad Pro横屏启动图片,支持11英寸iPad Pro(iOS10+)横屏显示时必选",  
                     "portrait-1366h@2x":"可选,2048x2732,12.9英寸iPad Pro竖屏启动图片,支持12.9英寸iPad Pro(iOS10+)时必选",  
                     "landscape-1366h@2x":"可选,2732x2048,12.9英寸iPad Pro横屏启动图片,支持12.9英寸iPad Pro(iOS10+)横屏显示时必选"  
                }  
            },  
            "android":{  
               "ldpi": "必选,320x442,低密度屏幕启动图片",  
               "mdpi": "必选,240x282,中密度屏幕启动图片",  
               "hdpi": "必选,480x762,高密度屏幕启动图片",  
               "xhdpi": "必选,720x1242,720P高密度屏幕启动图片",  
               "xxhdpi": "必选,1080x1882,1080P高密度屏幕启动图片"  
            }  
        },

云端打包时要求所有图标路径都相对于应用下".manifest"目录。
提交云端打包时需做路径转换,请在HBuilderX的manifest.json可视化界面“(App)启动图配置”中操作设置

plugins

第三方SDK配置,json格式数据
键名为模块名称,如下为“个推”配置数据:

        "plugins":{  // 第三方sdk配置  
            "push": {     // 模块名称  
                "igexin":{    // 个推SDK参数配置  
                    "appid": "pPyZWvH3Fa6PXba10aJ009",   // 个推的appid  
                    "appkey": "b7dOGlNPHR7pqwUxDhpTi4",  // 个推的appkey  
                    "appsecret": "IxVYAT9qws8dlNElaTMvg1",  // 个推的appsecret  
                    "icons": {   // 推送图片配置  
                        "push": {   // push图标,规格与应用图片一致,不配置则默认使用push图标  
                            "ldpi": "可选,48x48",  
                            "mdpi": "可选,48x48",  
                            "hdpi": "可选,72x72",  
                            "xhdpi": "可选,96x96",  
                            "xxhdpi": "可选,144x144",  
                            "xxxhdpi": "可选,192x192"  
                        },  
                        "small": {   //  小图标,png格式图片,仅使用alpha图层  
                            "ldpi": "可选,18*18",  
                            "mdpi": "可选,24*24",  
                            "hdpi": "可选,36*36",  
                            "xhdpi": "可选,48*48",  
                            "xxhdpi": "可选,72*72"  
                        },  
                        "description": "推送图标"  
                    }  
                }  
            }  
        }

请在HBuilderX的manifest.json可视化界面“(App)SDK配置”中操作设置

收起阅读 »

DCloud产品综述

DCloud

DCloud有众多产品和服务。

本文意在清晰的告知开发者,这些产品的区别和关系。

HBuilderX

HBuilder,H是HTML的缩写,Builder是建设者。
它是为前端开发者服务的通用IDE,或者称为编辑器。与vscode、sublime、webstorm类似。
它可以开发普通web项目,也可以开发DCloud出品的uni-app项目、5+App项目、wap2app项目。
目前有900万开发者在使用HBuilder。
老版的HBuilder是红色logo,已于2018年停止更新。绿色logo的HBuilderX是新版替代品。
除了服务前端技术栈,它也可以通过插件支持php等其他语言。
相比于竞品,它的优势有:

  • 运行速度快(c++内核)
  • 对markdown、vue支持更为优秀
  • 还能开发App、小程序,尤其对DCloud的uni-app、5+App等手机端产品有良好的支持

HBuilderX下载
HBuilderX文档系统:包括使用文档、技巧、cli工具、插件开发API手册等。https://hx.dcloud.net.cn/

<a id="uni-app"/>

uni-app

uni-app,uni念you ni,是统一、聚合的意思。虽然名字里有app,但实际是泛指前端应用。
uni-app是为js开发者提供的一个全端开发框架,可以开发一次编译为web、App、小程序(微信/阿里/百度/字节跳动/QQ)、快应用。
它支持使用各种ide开发,比如vscode、webstorm,但与HBuilderX结合使用更完美。详情
uni-app是当前国内主流开发框架,手机端月活超过12亿,案例众多:详情
uni-app是vuejs的语法+小程序的API,它有独立的js引擎,原生能力的扩展基于独立js引擎,而不是基于webview的扩展方案。
在App端,uni-app支持视图层使用原生渲染(此时类似react native),也支持使用webview渲染(此时类似小程序引擎),开发者可以自行选择。

uni-app官网

<a id="unimpsdk"/>

uni小程序sdk

uni小程序sdk,英文uniMpSDK,是为原生App开发者提供的sdk。
原生App集成uni小程序sdk可以获得众多好处:

  1. 快速打造自己的小程序生态
  2. 将App里的部分栏目实现小程序化,方便解耦、快速迭代升级

uni小程序sdk官网

<a id="unicloud"/>

uniCloud

uniCloud是与uni-app配套的后台服务器开发解决方案。它们之间设计了协作体系,搭配使用可以获得更高的开发效率。
它基于js开发服务器代码,它基于serverLess方案,免服务器的配置、安全、增容等运维工作。并且价格也比传统服务器低很多。
uniCloud与微信小程序云开发、支付宝小程序云开发类似。
但不同于这些云开发,uniCloud同时兼容阿里云serverLess和腾讯云serverLess,更重要的是与uni-app搭配实现手机端全端兼容(App、H5、所有小程序),而不是仅限于某家固定的小程序。
uniCloud可以让一个js工程师,完成全套业务,无需再为服务器开发雇佣php、java等工程师。大幅提升效率、降低成本。
uniCloud可通过云函数URL化实现普通http通信接口,非uni-app开发的应用也可以通过这种方式连接uniCloud。

uniCloud文档

uniCloud web控制台

<a id="plus"/>

5+App

5+,是html5plus的缩写,即基于html5的增强扩展。
它是一个跨iOS、Android的混合开发App解决方案,与cordova类似。
它基于webview渲染,封装了大量原生能力给js API。
5+App是DCloud早期产品,新产品uni-app推出后,从功能、性能、生态全部超越5+App。
但5+App不要求使用vue,使用普通HTML即可开发。
一般商业级项目建议使用uni-app开发。

html5plus规范文档

对比5+App和uni-app的详细区别:https://ask.dcloud.net.cn/article/37228

<a id="mui"/>

mui

mui,是mobile ui的全称,它是为5+App而配套推出的开源ui框架。
5+App可以使用很多基于html的ui库,mui是DCloud官方推出的一个库,在性能、与5+App的结合上,拥有更好的优势。
mui已停止更新。有更改需求的开发者可自行修改开源代码:https://github.com/dcloudio/mui

<a id="wap2app"/>

wap2app

wap2app,wap是手机网站的意思,它是一个快速将手机H5站点转换为跨平台App的方案。
它是基于5+App的一套前端框架,利用5+App引擎增强了远端网页的功能和性能,以接近App的效果。
它不适用于对用户体验要求很高的业务,只是为已存在的H5站点提供一个快速生成App的方案。
正规业务仍然建议使用uni-app,开发一次,手机网页和App同时生成,并且体验更好。

wap2app文档

DCloud的其他网络服务

  • 开发者web控制台:dev.dcloud.net.cn
    开发者的实名认证、应用管理和转让、App开发团队协作设置、uniPush等大多数功能在这里。
  • uni-AD:uniad.dcloud.net.cn/
    DCloud的广告联盟,帮助开发者变现。支持App、各家小程序。其中App端支持uni-app,也支持5+App、wap2app。
  • 插件市场:https://ext.dcloud.net.cn/
    DCloud插件市场有数千款插件,各种优秀轮子拿来即用。
    包括uni-app的前端插件、uniCloud的云端插件、HBuilderX的ide插件都在这里。该市场对5+App和wap2app不适用。
  • uni统计:tongji.dcloud.net.cn/
    uni-app配套的统计平台,一套报表看全平台数据。

后记:
uni系列产品命名,均意指统一、聚合的意思。并非uni开头的产品仅支持uni-app。比如uni-push是聚合推送,但5+App和uni-app都可以使用。

继续阅读 »

DCloud有众多产品和服务。

本文意在清晰的告知开发者,这些产品的区别和关系。

HBuilderX

HBuilder,H是HTML的缩写,Builder是建设者。
它是为前端开发者服务的通用IDE,或者称为编辑器。与vscode、sublime、webstorm类似。
它可以开发普通web项目,也可以开发DCloud出品的uni-app项目、5+App项目、wap2app项目。
目前有900万开发者在使用HBuilder。
老版的HBuilder是红色logo,已于2018年停止更新。绿色logo的HBuilderX是新版替代品。
除了服务前端技术栈,它也可以通过插件支持php等其他语言。
相比于竞品,它的优势有:

  • 运行速度快(c++内核)
  • 对markdown、vue支持更为优秀
  • 还能开发App、小程序,尤其对DCloud的uni-app、5+App等手机端产品有良好的支持

HBuilderX下载
HBuilderX文档系统:包括使用文档、技巧、cli工具、插件开发API手册等。https://hx.dcloud.net.cn/

<a id="uni-app"/>

uni-app

uni-app,uni念you ni,是统一、聚合的意思。虽然名字里有app,但实际是泛指前端应用。
uni-app是为js开发者提供的一个全端开发框架,可以开发一次编译为web、App、小程序(微信/阿里/百度/字节跳动/QQ)、快应用。
它支持使用各种ide开发,比如vscode、webstorm,但与HBuilderX结合使用更完美。详情
uni-app是当前国内主流开发框架,手机端月活超过12亿,案例众多:详情
uni-app是vuejs的语法+小程序的API,它有独立的js引擎,原生能力的扩展基于独立js引擎,而不是基于webview的扩展方案。
在App端,uni-app支持视图层使用原生渲染(此时类似react native),也支持使用webview渲染(此时类似小程序引擎),开发者可以自行选择。

uni-app官网

<a id="unimpsdk"/>

uni小程序sdk

uni小程序sdk,英文uniMpSDK,是为原生App开发者提供的sdk。
原生App集成uni小程序sdk可以获得众多好处:

  1. 快速打造自己的小程序生态
  2. 将App里的部分栏目实现小程序化,方便解耦、快速迭代升级

uni小程序sdk官网

<a id="unicloud"/>

uniCloud

uniCloud是与uni-app配套的后台服务器开发解决方案。它们之间设计了协作体系,搭配使用可以获得更高的开发效率。
它基于js开发服务器代码,它基于serverLess方案,免服务器的配置、安全、增容等运维工作。并且价格也比传统服务器低很多。
uniCloud与微信小程序云开发、支付宝小程序云开发类似。
但不同于这些云开发,uniCloud同时兼容阿里云serverLess和腾讯云serverLess,更重要的是与uni-app搭配实现手机端全端兼容(App、H5、所有小程序),而不是仅限于某家固定的小程序。
uniCloud可以让一个js工程师,完成全套业务,无需再为服务器开发雇佣php、java等工程师。大幅提升效率、降低成本。
uniCloud可通过云函数URL化实现普通http通信接口,非uni-app开发的应用也可以通过这种方式连接uniCloud。

uniCloud文档

uniCloud web控制台

<a id="plus"/>

5+App

5+,是html5plus的缩写,即基于html5的增强扩展。
它是一个跨iOS、Android的混合开发App解决方案,与cordova类似。
它基于webview渲染,封装了大量原生能力给js API。
5+App是DCloud早期产品,新产品uni-app推出后,从功能、性能、生态全部超越5+App。
但5+App不要求使用vue,使用普通HTML即可开发。
一般商业级项目建议使用uni-app开发。

html5plus规范文档

对比5+App和uni-app的详细区别:https://ask.dcloud.net.cn/article/37228

<a id="mui"/>

mui

mui,是mobile ui的全称,它是为5+App而配套推出的开源ui框架。
5+App可以使用很多基于html的ui库,mui是DCloud官方推出的一个库,在性能、与5+App的结合上,拥有更好的优势。
mui已停止更新。有更改需求的开发者可自行修改开源代码:https://github.com/dcloudio/mui

<a id="wap2app"/>

wap2app

wap2app,wap是手机网站的意思,它是一个快速将手机H5站点转换为跨平台App的方案。
它是基于5+App的一套前端框架,利用5+App引擎增强了远端网页的功能和性能,以接近App的效果。
它不适用于对用户体验要求很高的业务,只是为已存在的H5站点提供一个快速生成App的方案。
正规业务仍然建议使用uni-app,开发一次,手机网页和App同时生成,并且体验更好。

wap2app文档

DCloud的其他网络服务

  • 开发者web控制台:dev.dcloud.net.cn
    开发者的实名认证、应用管理和转让、App开发团队协作设置、uniPush等大多数功能在这里。
  • uni-AD:uniad.dcloud.net.cn/
    DCloud的广告联盟,帮助开发者变现。支持App、各家小程序。其中App端支持uni-app,也支持5+App、wap2app。
  • 插件市场:https://ext.dcloud.net.cn/
    DCloud插件市场有数千款插件,各种优秀轮子拿来即用。
    包括uni-app的前端插件、uniCloud的云端插件、HBuilderX的ide插件都在这里。该市场对5+App和wap2app不适用。
  • uni统计:tongji.dcloud.net.cn/
    uni-app配套的统计平台,一套报表看全平台数据。

后记:
uni系列产品命名,均意指统一、聚合的意思。并非uni开头的产品仅支持uni-app。比如uni-push是聚合推送,但5+App和uni-app都可以使用。

收起阅读 »

推送插件配置

5+App开发

云端打包推送功能需要到第三方开发平台申请应用后获取相关配置参数,目前HBuilder内置的是个推平台:

  1. 个推:个推推送平台

双击应用的manifest.json文件:
manifest.json使用第三方插件
按照以下方法配置第三方登录模块。

添加第三方推送模块

  • 可视化界面配置
    切换到“模块权限配置”项,在“未选模块”中选择“Push(消息推送)”添加到“已选模块”:
  • 代码视图配置
    切换到“代码视图”项,在permissions节点下添加如下Push节点数据:
    "Push": {  
    "description": "消息推送"  
    }

配置个推推送参数

  • 可视化界面配置
    切换到“SDK配置”项,在“plus.push-推送”区域配置参数:

  • 代码视图配置
    切换到“代码视图”项,在plus -> distribute -> plugins节点下添加如下Push节点数据:

    "push": {  
    "igexin": {  
      "appid": "**********************",  
      "appkey": "**********************",  
      "appsecret": "**********************"  
    }  
    }

  • 个推参数说明

    1. appid:个推开放平台申请应用的AppID值;
    2. appkey:个推开放平台申请应用的appkey值;
    3. appsecret:个推开放平台申请应用的appsecret值。

配置完成后Ctrl+S保存提交App云端打包生效

5+ APP使用推送功能参考:推送开发指南
使用5+SDK离线打包配置推送功能请参考:Android平台iOS平台

个推推送平台相关问题请在ask中@getui_johny、HBuilder官方交流群里@个推技术支持 (QQ 2880983152)

继续阅读 »

云端打包推送功能需要到第三方开发平台申请应用后获取相关配置参数,目前HBuilder内置的是个推平台:

  1. 个推:个推推送平台

双击应用的manifest.json文件:
manifest.json使用第三方插件
按照以下方法配置第三方登录模块。

添加第三方推送模块

  • 可视化界面配置
    切换到“模块权限配置”项,在“未选模块”中选择“Push(消息推送)”添加到“已选模块”:
  • 代码视图配置
    切换到“代码视图”项,在permissions节点下添加如下Push节点数据:
    "Push": {  
    "description": "消息推送"  
    }

配置个推推送参数

  • 可视化界面配置
    切换到“SDK配置”项,在“plus.push-推送”区域配置参数:

  • 代码视图配置
    切换到“代码视图”项,在plus -> distribute -> plugins节点下添加如下Push节点数据:

    "push": {  
    "igexin": {  
      "appid": "**********************",  
      "appkey": "**********************",  
      "appsecret": "**********************"  
    }  
    }

  • 个推参数说明

    1. appid:个推开放平台申请应用的AppID值;
    2. appkey:个推开放平台申请应用的appkey值;
    3. appsecret:个推开放平台申请应用的appsecret值。

配置完成后Ctrl+S保存提交App云端打包生效

5+ APP使用推送功能参考:推送开发指南
使用5+SDK离线打包配置推送功能请参考:Android平台iOS平台

个推推送平台相关问题请在ask中@getui_johny、HBuilder官方交流群里@个推技术支持 (QQ 2880983152)

收起阅读 »

mui产品概述

入门 mui

MUI为何诞生

  1. 性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。
    浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有;

  2. 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。

mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。

其实我们原本是开放心态,大家随意使用自己喜欢的前端框架。但是其他移动App框架实在不给力:

  • 基于jq的jqmobile,性能低的无法忍受
  • 基于angular的ionic,都把pc端很重的东西引入到移动App中。angularjs本身设计是为了pc端网页的双向数据绑定,做个移动App干嘛用这么重的东西。
  • bootstrap这种响应式设计,性能在低端机不足,而且UI风格一看就是网页,不是App的感觉。
    于是为了方便广大开发者,我们制作了mui。

MUI的定位是:最接近原生体验的移动App的UI框架

基于mui的定位,产生了mui的几个特点,轻、小、只涉及UI、只为移动App而生、界面风格原生化。
所以请大家注意,mui有所为有所不为:

  1. mui不是jq,不封装dom操作
    与ui无关的mui不做,你愿意用jq或zepto就自己用,并不冲突。
    但我们并不建议在移动App里引入jq或zepto这些框架,原因如下:

    • 为了性能,层层封装的框架,尤其是遍历循环dom时,影响效率,尤其在低端Android手机上,我们费死劲了才把性能以毫秒为单位一点点提升,搞这个的dom框架进来就让很多努力又付诸东流。
    • 原生JS挺简单,为何需要jq?
      jq的成功当时是因为ie6、7、8、9、10、chrome、ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能。但jq根本就不是为手机设计的。
      手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom。
      而且HBuilder提供了代码块来简化开发,敲dg、dq,直接生成document.getElementById("")、document.querySelectorAll(""),非常快捷方便,而且执行性能非常高,而且没有浏览器兼容问题。
      发现很多开发者只会jq,反正想继续在App里使用jq没有问题。但也建议大家多学学js本身。
      mui与vue、react、angular也不是一个层面的东西,可以在一个工程里混合使用。但在大多数ui控件上,应该直接使用mui的写法,因为mui的绘制是最朴素的HTML绘制,不是经过js操作的绘制,这种方案的效率比经过js绘制的效率要高很多。只有必须经过js操作才能渲染的控件,比如ajax联网后填充的list,此时使用vue或react都可以。
  2. mui、HTML5+、5+Runtime的关系说明
    mui是一个前端框架,HTML5+是一套HTML5能力扩展规范,HTML5+ Runtime是实现HTML5+规范的强化浏览器引擎。
    有点类似于bootstrap、w3c和chrome os的关系。
    HTML5+规范隶属于http://www.html5plus.org,定义了HTML5规范中没有但开发者做App需要的扩展规范。
    DCloud的5+ Runtime完整的实现了HTML5+规范。同时5+ Runtime还实现了Native.js,一种通过js调用几十万原生API的技术。
    为了提升体验,mui势必会调用一些5+Rutime的增强能力,主要是plus.webview、plus.nativeobj和plus.nativeUI。
    但mui不是要替代HTML5Plus,以后也无计划替代把所有5+的api都包一层。
    mui是把一些常用的窗体操作封装了,但这种封装适应面也是有限的,遇到复杂窗体管理,还是要仔细了解plus的api。
    所以,

    • 有人抱怨mui的文档不全,其实是缺本文,本文终于说清楚mui做什么不做什么了。详细的mui文档要去下方提示的mui官网查看。
    • 有人抱怨mui api不全,其实是没去看plus的api。知原理、知如何封装,方能融汇贯通。
    • 有人抱怨Hello mui示例代码里写的mui的方法,为何文档里没有,是因为有些方法是内部工程师简化开发中的封装,未考虑通用设计,还不足以开放为标准api,所以文档里没介绍。
  3. mui有插件体系
    为了简化开发者的多端发布开发,mui在核心库之外,补充了一些插件,这些插件不一定是ui相关,也有业务相关。
    在Hello mui示例里下方的示例模板,基本都属于插件。这些插件的使用需要加载mui标准库之外的js等资源。

mui是一个开源项目,请前往托管在github的mui官网查看详细介绍

这里是mui发布时的演讲视频:http://v.youku.com/v_show/id_XNzYyOTEyMjcy.html

继续阅读 »

MUI为何诞生

  1. 性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。
    浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新、侧滑抽屉卡顿等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有;

  2. 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。

mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。

其实我们原本是开放心态,大家随意使用自己喜欢的前端框架。但是其他移动App框架实在不给力:

  • 基于jq的jqmobile,性能低的无法忍受
  • 基于angular的ionic,都把pc端很重的东西引入到移动App中。angularjs本身设计是为了pc端网页的双向数据绑定,做个移动App干嘛用这么重的东西。
  • bootstrap这种响应式设计,性能在低端机不足,而且UI风格一看就是网页,不是App的感觉。
    于是为了方便广大开发者,我们制作了mui。

MUI的定位是:最接近原生体验的移动App的UI框架

基于mui的定位,产生了mui的几个特点,轻、小、只涉及UI、只为移动App而生、界面风格原生化。
所以请大家注意,mui有所为有所不为:

  1. mui不是jq,不封装dom操作
    与ui无关的mui不做,你愿意用jq或zepto就自己用,并不冲突。
    但我们并不建议在移动App里引入jq或zepto这些框架,原因如下:

    • 为了性能,层层封装的框架,尤其是遍历循环dom时,影响效率,尤其在低端Android手机上,我们费死劲了才把性能以毫秒为单位一点点提升,搞这个的dom框架进来就让很多努力又付诸东流。
    • 原生JS挺简单,为何需要jq?
      jq的成功当时是因为ie6、7、8、9、10、chrome、ff这些浏览器不兼容,让开发者崩溃,而且pc上浏览器性能好,跨平台兼容也不影响性能。但jq根本就不是为手机设计的。
      手机上只有webkit浏览器(忽略wp,反正mui不支持wp),根本就不需要jq这种封装框架来操作dom。
      而且HBuilder提供了代码块来简化开发,敲dg、dq,直接生成document.getElementById("")、document.querySelectorAll(""),非常快捷方便,而且执行性能非常高,而且没有浏览器兼容问题。
      发现很多开发者只会jq,反正想继续在App里使用jq没有问题。但也建议大家多学学js本身。
      mui与vue、react、angular也不是一个层面的东西,可以在一个工程里混合使用。但在大多数ui控件上,应该直接使用mui的写法,因为mui的绘制是最朴素的HTML绘制,不是经过js操作的绘制,这种方案的效率比经过js绘制的效率要高很多。只有必须经过js操作才能渲染的控件,比如ajax联网后填充的list,此时使用vue或react都可以。
  2. mui、HTML5+、5+Runtime的关系说明
    mui是一个前端框架,HTML5+是一套HTML5能力扩展规范,HTML5+ Runtime是实现HTML5+规范的强化浏览器引擎。
    有点类似于bootstrap、w3c和chrome os的关系。
    HTML5+规范隶属于http://www.html5plus.org,定义了HTML5规范中没有但开发者做App需要的扩展规范。
    DCloud的5+ Runtime完整的实现了HTML5+规范。同时5+ Runtime还实现了Native.js,一种通过js调用几十万原生API的技术。
    为了提升体验,mui势必会调用一些5+Rutime的增强能力,主要是plus.webview、plus.nativeobj和plus.nativeUI。
    但mui不是要替代HTML5Plus,以后也无计划替代把所有5+的api都包一层。
    mui是把一些常用的窗体操作封装了,但这种封装适应面也是有限的,遇到复杂窗体管理,还是要仔细了解plus的api。
    所以,

    • 有人抱怨mui的文档不全,其实是缺本文,本文终于说清楚mui做什么不做什么了。详细的mui文档要去下方提示的mui官网查看。
    • 有人抱怨mui api不全,其实是没去看plus的api。知原理、知如何封装,方能融汇贯通。
    • 有人抱怨Hello mui示例代码里写的mui的方法,为何文档里没有,是因为有些方法是内部工程师简化开发中的封装,未考虑通用设计,还不足以开放为标准api,所以文档里没介绍。
  3. mui有插件体系
    为了简化开发者的多端发布开发,mui在核心库之外,补充了一些插件,这些插件不一定是ui相关,也有业务相关。
    在Hello mui示例里下方的示例模板,基本都属于插件。这些插件的使用需要加载mui标准库之外的js等资源。

mui是一个开源项目,请前往托管在github的mui官网查看详细介绍

这里是mui发布时的演讲视频:http://v.youku.com/v_show/id_XNzYyOTEyMjcy.html

收起阅读 »

移动App精彩案例分享

案例 App

目前HBuilder已经生成十几万个移动App(不包括离线打包数据)。

我们无权直接采集App信息,以下案例均为开发者在日常交流时提供的截图。
如果有图不适合放出,请告知我们,我们将删除。

但我们认为程序员彼此的交流分享非常重要,并希望开发者能更踊跃的共享自己的案例和开发经验。
欢迎大家在自己的博客撰写案例和开发经验,然后把链接微博 @数字天堂网络
我们将汇总收集在这里,同时给予该开发者1000分的奖励。
我们收集的开源项目,都汇总在该地址:https://github.com/dcloudio/casecode,也欢迎更多人提交开源项目。

最新案例请到DCloud官网案例页面查看

以下是案例集锦:

挑食火锅

挑食火锅是国内领先的火锅外卖上门o2o厂商。
挑食App是典型的一套代码,多端发布。
1套HTML工程,通过grunt编译,发布为iOS版、Android版、手机浏览器版、微信版、360生活助手流应用版。
App下载地址:http://www.dcloud.io/case/tiaoshi/
手机浏览器访问地址:https://www.4000121777.com/m/



36Kr

此版本为36kr流应用专版,开源地址:https://github.com/dcloudio/casecode



明道OA

此App是企业移动应用的典范。明道的该产品目前已经有3千多企业在使用。
官方介绍及下载:http://oa.mingdao.com/home/index/mobile
开发者:zhenjiawang



明道企业理财

明道企业理财,企业账户专属的“余额宝”,详见
https://app.mingdao.com/?appID=d88313c4-e223-4e58-a67c-1a383ebb7a0c



期待乐

月供分期App,体验不错。了解详情及下载App
http://www.qidaile.com/app/download.qi




新华社瞭望智库

各大应用市场搜索“瞭望智库”均有下载,比如应用宝





爱学车

http://www.ai-drive.cn,36kr报道的创业项目,自由选教练而不用去驾校学车。



台湾开发者做的游戏资讯App

这是我们已知的第一个海外案例,也是第一个mui框架的案例,Appstore地址:https://itunes.apple.com/us/app/info-for-puzzle-dragons/id926008312?l=zh&ls=1&mt=8
开发者:WinePaster


赞宝 智能硬件

赞宝是一个智能玩具熊的配套App,使用5+ SDK开发。
没有玩具熊无法登陆,介绍详见http://www.iminido.com/
在各大应用市场搜索赞宝均可下载。



天行者户外 mui的微信App

这是一个脱离5+ runtime环境的、在微信等普通浏览器里运行的web app。http://m.skywalk-er.com/





移动办公

此应用为企业内部应用


U8旅途

旅行类O2O应用,了解详情及下载Apphttp://u8.lt/



一点爱车

IOS Appstore搜索一点爱车
开发者:路先生



呜呜喳喳

大连本地o2o,Appstore搜索呜呜喳喳
开发者:吃饭邋邋汤



人脉返现

导流电商和返现获取优惠,详细介绍及App下载:http://www.rmfanx.com/article/view-366.html





出国汇

已在各大安卓市场上线。是5+ SDK的案例。
开发者:郑州可瑞为信息技术有限公司



呼我

5+SDK案例,使用原生插件与HTML5+结合。
免费电话、多方通话、陌生交友。下载地址: http://android.myapp.com/myapp/detail.htm?apkName=com.taojin.icall




枫桥居花卉

种花养花识花,交花友。下载地址: http://android.myapp.com/myapp/detail.htm?apkName=io.dcloud.H510E2B40




1号房

已经在Appstore及各种安卓市场上架。




爱房帮

地产经纪人专用,非公开发行。
开发者:藏马_paladin



星梦影院

影讯、订票、选座一条龙




领信教育

学校专用,非公开发行。
开发者:燃烧



聚钱袋

互联网金融App,详见http://www.juqiandai.com/app/
开发者:记忆、del






开心洗衣

o2o应用,整个多家线下洗衣门店



健康频道

开发者:ser
豌豆荚地址:http://www.wandoujia.com/apps/com.jsoon.healthChannel



live note

问答社区,下载地址:http://shan-gong.com/iask-download.html




宝宝百科

育儿App,有声有色



某广告公司App

开发者:如果你听见我的歌



海外社交电商




易道时代


管家婆家庭记账


淄博警方

Appstore搜索可下载


华职人才网

mui在纯浏览器里的应用案例。http://www.fznsm.com/hzrcw/index.php/resume/resumelist.htm




指尖东楚


外勤管理


苗管易


Apm个人助理


笔记


手机物流


某订单系统


蜂播


历史上的今天

开发者:紫马科技张工 源码开放地址:http://coding.zimayun.com/?p=19


有些开发者误以为案例App是原生做的,这是由2种情况造成的:

  1. 有些App的Android或iOS中的某个平台使用HBuilder开发,另一个平台是原生的。
  2. 有些App确实是原生的,但是内嵌了5+ SDK,这也属于我们的案例。
    如果你想学习参考这些App的源码,解压安装包,寻找www目录,即可看到HTML等文件。
    反之,如果你想保护源码,请混淆后再发布。

发微博@数字天堂网络,提交你的案例,分享给所有HTML5开发者。

继续阅读 »

目前HBuilder已经生成十几万个移动App(不包括离线打包数据)。

我们无权直接采集App信息,以下案例均为开发者在日常交流时提供的截图。
如果有图不适合放出,请告知我们,我们将删除。

但我们认为程序员彼此的交流分享非常重要,并希望开发者能更踊跃的共享自己的案例和开发经验。
欢迎大家在自己的博客撰写案例和开发经验,然后把链接微博 @数字天堂网络
我们将汇总收集在这里,同时给予该开发者1000分的奖励。
我们收集的开源项目,都汇总在该地址:https://github.com/dcloudio/casecode,也欢迎更多人提交开源项目。

最新案例请到DCloud官网案例页面查看

以下是案例集锦:

挑食火锅

挑食火锅是国内领先的火锅外卖上门o2o厂商。
挑食App是典型的一套代码,多端发布。
1套HTML工程,通过grunt编译,发布为iOS版、Android版、手机浏览器版、微信版、360生活助手流应用版。
App下载地址:http://www.dcloud.io/case/tiaoshi/
手机浏览器访问地址:https://www.4000121777.com/m/



36Kr

此版本为36kr流应用专版,开源地址:https://github.com/dcloudio/casecode



明道OA

此App是企业移动应用的典范。明道的该产品目前已经有3千多企业在使用。
官方介绍及下载:http://oa.mingdao.com/home/index/mobile
开发者:zhenjiawang



明道企业理财

明道企业理财,企业账户专属的“余额宝”,详见
https://app.mingdao.com/?appID=d88313c4-e223-4e58-a67c-1a383ebb7a0c



期待乐

月供分期App,体验不错。了解详情及下载App
http://www.qidaile.com/app/download.qi




新华社瞭望智库

各大应用市场搜索“瞭望智库”均有下载,比如应用宝





爱学车

http://www.ai-drive.cn,36kr报道的创业项目,自由选教练而不用去驾校学车。



台湾开发者做的游戏资讯App

这是我们已知的第一个海外案例,也是第一个mui框架的案例,Appstore地址:https://itunes.apple.com/us/app/info-for-puzzle-dragons/id926008312?l=zh&ls=1&mt=8
开发者:WinePaster


赞宝 智能硬件

赞宝是一个智能玩具熊的配套App,使用5+ SDK开发。
没有玩具熊无法登陆,介绍详见http://www.iminido.com/
在各大应用市场搜索赞宝均可下载。



天行者户外 mui的微信App

这是一个脱离5+ runtime环境的、在微信等普通浏览器里运行的web app。http://m.skywalk-er.com/





移动办公

此应用为企业内部应用


U8旅途

旅行类O2O应用,了解详情及下载Apphttp://u8.lt/



一点爱车

IOS Appstore搜索一点爱车
开发者:路先生



呜呜喳喳

大连本地o2o,Appstore搜索呜呜喳喳
开发者:吃饭邋邋汤



人脉返现

导流电商和返现获取优惠,详细介绍及App下载:http://www.rmfanx.com/article/view-366.html





出国汇

已在各大安卓市场上线。是5+ SDK的案例。
开发者:郑州可瑞为信息技术有限公司



呼我

5+SDK案例,使用原生插件与HTML5+结合。
免费电话、多方通话、陌生交友。下载地址: http://android.myapp.com/myapp/detail.htm?apkName=com.taojin.icall




枫桥居花卉

种花养花识花,交花友。下载地址: http://android.myapp.com/myapp/detail.htm?apkName=io.dcloud.H510E2B40




1号房

已经在Appstore及各种安卓市场上架。




爱房帮

地产经纪人专用,非公开发行。
开发者:藏马_paladin



星梦影院

影讯、订票、选座一条龙




领信教育

学校专用,非公开发行。
开发者:燃烧



聚钱袋

互联网金融App,详见http://www.juqiandai.com/app/
开发者:记忆、del






开心洗衣

o2o应用,整个多家线下洗衣门店



健康频道

开发者:ser
豌豆荚地址:http://www.wandoujia.com/apps/com.jsoon.healthChannel



live note

问答社区,下载地址:http://shan-gong.com/iask-download.html




宝宝百科

育儿App,有声有色



某广告公司App

开发者:如果你听见我的歌



海外社交电商




易道时代


管家婆家庭记账


淄博警方

Appstore搜索可下载


华职人才网

mui在纯浏览器里的应用案例。http://www.fznsm.com/hzrcw/index.php/resume/resumelist.htm




指尖东楚


外勤管理


苗管易


Apm个人助理


笔记


手机物流


某订单系统


蜂播


历史上的今天

开发者:紫马科技张工 源码开放地址:http://coding.zimayun.com/?p=19


有些开发者误以为案例App是原生做的,这是由2种情况造成的:

  1. 有些App的Android或iOS中的某个平台使用HBuilder开发,另一个平台是原生的。
  2. 有些App确实是原生的,但是内嵌了5+ SDK,这也属于我们的案例。
    如果你想学习参考这些App的源码,解压安装包,寻找www目录,即可看到HTML等文件。
    反之,如果你想保护源码,请混淆后再发布。

发微博@数字天堂网络,提交你的案例,分享给所有HTML5开发者。

收起阅读 »

5+ App开发入门指南

App App入门

HTML5 Plus应用概述

HTML5 Plus移动App,简称5+App,是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能。

HTML5 Plus规范

通过HTML5开发移动App时,会发现HTML5很多能力不具备。为弥补HTML5能力的不足,在W3C中国的指导下成立了HTML5中国产业联盟www.html5plus.org组织,推出HTML5+规范。目前该联盟已经挂靠在工信部信通院标准所下,相关标准已经成为行业标准。
HTML5+规范是一个开放规范,隶属于工信部,允许三方浏览器厂商或其他手机runtime制造商实现。
HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。
除了功能外,HTML5+很重要的特点是提供了原生的渲染能力,通过plus.webview、plus.nativeObj、plus.nativeUI,让开发者可以使用js来调用原生渲染能力,实现体验的大幅提升。
原生的api多达40万,HTML5+的封装并非把40万api都封装了一遍,而是分成了2个层面:

  • HTML5Plus规范:常用的扩展能力,比如二维码、语音输入,都封装到了规范中,同时实现了Android和iOS的解析引擎,使得开发者的代码编写一次,可跨平台运行。
  • Native.js是另一项创新技术。手机OS的原生API有四十多万,大量的API无法被HTML5使用。Native.js把几十万原生API映射成了js对象,通过js可以直接调ios和android的原生API。这部分就不再跨平台,写法分别是plus.ios和plus.android,比如调ios game center,或在android手机桌面创建快捷方式,这些都是平台专有的api。

Native.js的用法示例

var obj= plus.android.import("android.content.Intent");

将一个原生对象android.content.Intent映射为js对象obj,然后在js里操作obj对象的方法属性就可以了。
Native.js的详细教程可以参考:5+ App开发Native.js入门指南
在5+App里,同时包含了HTML5Plus规范和Native.js的实现,开发者可以在5+App里自由使用相关技术。

5+ App概念解析

首先开发者需要清楚你要做什么,是要做一个app,安装和运行在手机上?或者要把一个mobile web项目打包成app?

  1. 做一个正经app
    传统意义上的app,是c/s方式的,它的程序要安装和运行在手机上,不通过浏览器在线下载。
    此时开发者在HBuilderX里新建项目时,选择“5+App”。(HBuilder里叫做移动App)
    在App项目下编写的HTML、js等文件,是会被打包到原生的安装包(Android是apk包、iOS是ipa包)里的。
    此时本地的js和服务器通过ajax交互,由服务器按接口方式给出数据(一般是json),然后客户端的js文件解析json,并根据本地的业务逻辑来渲染页面和执行功能。
    所以请不要在App项目中放置运行在服务器端的php等文件。
  2. 使用wap2app打包mobile web项目为app
    如果开发者想把一个做好的mobile web站,方便快速的打包成app,那么要使用DCloud的wap2app框架。
    在HBuilderX中新建项目时,选Wap2App项目,输入项目名称及wap站首页地址,其它参考框架的教程来配置。
    wap2app不同于普通的web打包技术,wap2app可真正做达到原生应用的功能和性能体验。
    具体教程另见:文档中心-wap2app,http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/1244
    wap2app属于5+app,它底层也是强大的HTML5Plus规范和Native.js在支撑。
    wap2app项目下的所有文件,也都是打包在本机运行的。

HTML5+ 应用架构

HTML5+ 应用架构图

HTML5+ 规范 API 及demo示例

最新规范请参考http://www.html5plus.org/#specification
手机端体验各个API的实现效果,ios手机在Appstore搜索Hello H5+,Android手机下载地址
在HBuilderX中新建项目,勾选5+ App,选择模板Hello H5+,即可看到这个demo的源代码。

开发环境HBuilderX

HBuilderX内置HTML5+ APP开发环境,提供一套完整的移动应用开发解决方案。
内置HTML5+ API语法提示,提高开发效率;
集成真机运行环境,方便开发后即时在真机上查看运行效果;
集成应用云端打包系统,不用部署xcode和Android sdk就可以打包应用。使开发者只需要使用HTML5、Javascript、CSS技术就可以快速开发跨平台的移动应用。
下载地址:http://www.dcloud.io/

平台支持

  • iOS 8.0及以上
  • Android 4.4及以上

手把手教你开发HelloWorld

以下教程已更新为HBuilderX版本,使用老版本HBuilder的开发者请更新到最新版本的HBuilderX,老版本HBuilder将不再更新。

创建HelloWorld应用

  • 启动HBuilderX(下载地址:http://www.dcloud.io/
  • 在菜单栏中选择“文件”-> “新建”->“项目”,打开“新建项目”对话框,选择“5+ App”
  • 在项目名称中输入“HelloWorld”,选择模板中勾选“默认模板”

    注意:新建5+ App项目需要联网分配一个appid,在真机联调、打包发行时都需要这个ID,所以不联网将无法获取appid
  • 创建完成后,会在项目管理器中显示新建的“HelloWorld”项目

manifest.json

在项目管理器中双击“manifest.json”文件,打开应用配置页面:

对于要打包的原生应用而言,其各种配置均在此处。具体配置教程见:Manifest.json文件配置,或者点击配置页面上的“配置指南”链接。

调用HTML5+ API

在项目管理器中双击“index.html”文件,对于HTML5+应用的页面有一个很重要的“plusready”事件,此事件会在页面加载后自动触发,表示所有HTML5+ API可以使用,在此事件触发之前不能调用HTML5+ API,所以应该在此事件回调函数中调用页面初始化需要调用的HTML5+ API,而不应该在onload或DOMContentLoaded事件中调用:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
    <title>Hello world</title>  
    <script type="text/javascript">   
// 扩展API是否准备好,如果没有则监听“plusready"事件  
if(window.plus){  
    plusReady();  
}else{   
    document.addEventListener("plusready", plusReady, false);  
}  
// 扩展API准备完成后要执行的操作  
function plusReady(){  
    var ws = plus.webview.currentWebview(); //pw回车可输出plus.webview  
    // ... code  
}  
    </script>  
</head>   
<body>  
  Hello World<br/>  
</body>  
</html>

编辑程序启动后默认显示的页面index.html,在页面中添加一个按钮,点击后将打开新页面加载“http://www.dcloud.io/”,为了实现此功能,我们需要定义openNewWebview方法,调用5+ API中plus.webview.createWebview()方法创建窗口,调用窗口对象的show方法显示:

// 打开新Webview窗口  
function openNewWebview(){  
  var wv = plus.webview.create('http://www.dcloud.io/');  
  wv.show();  
}

完整代码截图:

编辑完成后,按Ctrl+S键保存。

真机运行

写完代码后,我们可以通过真机运行来查看效果,真机运行有3个特点:

  1. 真实:
    虽然PC端HBuilderX右侧的内置浏览器也可以看大致的页面,但真实的布局效果以及手机上的特殊能力调用,还是必须在真机测试。
  2. 边改边看:
    在HBuilderX更改页面并保存后,可立即同步在真机上看到保存后的显示效果。比开发原生应用还方便。
  3. 检查错误和log:
    手机运行HTML等文件时如果发生错误以及打印的console.log,都可以在真机运行时从手机端反馈回到HBuilderX的控制台,在控制台直接查看。
    注意只有移动App项目(uni-app、Wap2App、5+ App)才可以真机联调。

在HBuilderX的“项目管理器”中选择创建的“HelloWorld”应用。

启动真机运行

将iOS或Android设备连接到电脑,这时HBuilderX会自动检测连接到电脑上的设备,通过菜单栏中的“运行” -> “运行到手机或模拟器”,选择要运行的设备启动真机运行:

也可通过工具栏启动:

启动真机运行后,在底部控制台显示以下信息:

注:如果提示错误信息,请尝试“终止”后重新启动真机运行!

启动后如果弹出提示框,请选择“确定”,显示以下页面:

点击“打开新页面”按钮,加载显示“http://www.dcloud.io/”网页:

在Android设备会自动安装真机运行基座HBuilder APP,并启动运行,iOS设备需要开发者手动点击手机桌面的HBuilder App图标。

如果你真机失败,注意看控制台的提示,或点HBuilder菜单-运行里的故障排查指南。
注意:真机联调App时,提供的是一个测试环境,并不真实发生打包,调试基座App的名字、图标、启动封面图片、是否可旋转这些只有打包才能更改的属性不会因为开发者修改manifest文件而变化。只有修改manifest且点击菜单发行-打包后,上述4个设置才能更改。

运行后,HBuilder中修改页面代码,保存后会自动同步到手机中,如果手机当前展示着被修改的页面,则会刷新页面。
尝试在js中在plusready之后编写console.log,或者改写错误的js,可以直接在HBuilder的控制台看到结果。
如果真机运行遇到各种故障,请点击运行菜单里的真机运行常见故障指南。

debug调试

除了真机运行,我们还可以利用chrome和safari的开发者控制台来调试5+App。
可以使用真机插上数据线,也可以使用Android或iOS的官方模拟器。所有Api包括plus的各种api,甚至包括plus.ios和plus.android的原生对象,都可以调试。
在HBuilder的菜单运行里选择打开Webview调试模式,如果手机连接正常,5+App启动,在ide上可看到可调试的页面,点击调试后,打开控制台,和普通的浏览器调试是一样的。

发行打包

完成应用页面的编辑后,需要正式打包为原生的apk或ipa安装包。
首先明确一下,有人说HTML5做的应用无法通过苹果Appstore审核,这是错误的说法。苹果只是拒绝开发者把web站点直接打包上Appstore,不优化任何体验,它认为这是给Appstore制造垃圾应用,如果是原生体验的App,虽然使用HTML5技术,苹果也不会拒绝上架。事实上Appstore上使用HTML5技术的App超过40w。
HBuilderX提供的打包有云打包和本地打包两种。
HBuilderX提供的云打包对正常开发者是免费的。但过多浪费服务器资源会额外收费。用本地打包无任何限制。
云打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包。

  1. 对于不熟悉原生开发的前端工程师,云打包大幅降低了他们的使用门槛。
  2. 对于没有mac电脑的开发者,他们也可以通过云打包直接打出iOS的ipa包。

无论云打包还是本地打包,在HBuilderX的菜单“发行”菜单中有链接。
本地打包还可参考原生开发者支持网站的App离线打包页面,此处仅对云打包进行说明。

通过菜单栏中的“发行”->“原生App-云打包”,打开“App云端打包”对话框提交。

注意:只有App项目才可以打包

iOS平台打包

对于iOS平台,可以选择越狱包或证书包(Appstore专用或企业证书),前者只能安装在已越狱的设备上,后者则可通过iDP证书打包提交到Appstore发布、或通过iEP证书打包在企业内部发布。

越狱包

  • Bundle ID(AppID):iOS应用标识,推荐使用反向域名风格的字符串,如“com.domainname.appname”。

IDP/IEP证书包

  • Bundle ID(AppID):iOS应用标识,推荐使用反向域名风格的字符串,如“com.domainname.appname”,必须与profile文件绑定的App ID匹配。
  • 证书profile文件:iOS Provisioning Profile文件(.mobileprovision),必须与苹果App ID和私钥证书区配。
  • 证书私钥密码:导入私钥证书的密码。
  • 私钥证书:iOS Certificates文件(.p12)。

私钥证书及profile文件生成请参考http://ask.dcloud.net.cn/article/152

Android平台打包

对于Android平台,可以选择使用DCloud生成的公用证书或自己生成的证书,两者不影响安装包的发布,唯一的差别就是证书中开发者和企业信息不同。
应用在开发测试阶段可以使用公共测试证书打包体验,发布时请使用自有证书打包,更多信息参考Android平台云端打包证书使用说明

使用自有证书

以自有证书打包为例,使用公共测试证书时不用配置证书相关信息,其它配置一致:

  • Android包名:Android应用包名,使用反向域名风格的字符串,如“com.domainname.appname”。
  • 证书别名:生成证书时使用-alias参数设置的证书别名;
  • 私钥密码:生成证书时使用的keystore密码;
  • 证书文件:生成证书时使用-keystore参数设置的证书保存路径;

查看打包状态

通过菜单栏中的“发行”->“原生App-查看打包状态”,可在控制台查看当前打包状态:

如果打包成功,则会在控制台显示下载地址,可点击链接下载安装包。

遇到打包失败,常见原因是:
如果使用自用证书,很可能是证书配置错误。
如果使用DCloud证书仍然出错,很可能是图片错误。所有图片格式必须是标准png,且严格符合分辨率要求。使用其他图片格式重命名为png会导致打包失败!
其他错误请参考: 云打包常见错误排查指南

UI框架

HBuilder并不限制UI框架,开发者使用任何UI框架均可以。
不过市面上确实没有什么好的手机App前端框架,DCloud开发了mui框架,它的性能更高,样式也更接近原生App,并且mui调用了HTML5+扩展能力,可以实现更好的体验。
我们强烈推荐开发移动App的开发者使用mui框架,详情请参考文档中心mui章节
请注意,mui只封装了部分HTML5Plus Api,学会mui框架不代表可以不学习HTML5Plus规范。mui不会做的很重,只是很有限的通过封装简化了常见开发过程。

开发资源

API手册HTML5+规范

HelloH5+示例应用,应用中包括几乎所有plus API的示例:

HelloH5二维码图片
获取Hello H5+的源代码,在HBuilder中新建移动App,选Hello H5+。可以查看所有plus api的调用样例代码。

Hello mui示例应用,漂亮且高性能的前端UI框架:
下载页面

进阶教程

如果想开发出接近原生体验的App,请访问如下教程:

三方培训

HTML5中国产业联盟里有专业的培训机构为HTML5开发者提供DCloud产品的培训。
详见专门文章http://ask.dcloud.net.cn/article/299

发行和变现服务

在你的app开发完毕后,DCloud还提供了发布平台,帮助开发者简单的完成应用推广页面,参考http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12936
如果开发者还需要流量变现,DCloud提供了广告平台,开发者可以方便的在自己的app中集成广告,参考https://uniad.dcloud.net.cn/

最后,祝你通过DCloud的免费工具,快速完成自己的移动App,并获得更多用户和变现收益!

继续阅读 »

HTML5 Plus应用概述

HTML5 Plus移动App,简称5+App,是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能。

HTML5 Plus规范

通过HTML5开发移动App时,会发现HTML5很多能力不具备。为弥补HTML5能力的不足,在W3C中国的指导下成立了HTML5中国产业联盟www.html5plus.org组织,推出HTML5+规范。目前该联盟已经挂靠在工信部信通院标准所下,相关标准已经成为行业标准。
HTML5+规范是一个开放规范,隶属于工信部,允许三方浏览器厂商或其他手机runtime制造商实现。
HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。
除了功能外,HTML5+很重要的特点是提供了原生的渲染能力,通过plus.webview、plus.nativeObj、plus.nativeUI,让开发者可以使用js来调用原生渲染能力,实现体验的大幅提升。
原生的api多达40万,HTML5+的封装并非把40万api都封装了一遍,而是分成了2个层面:

  • HTML5Plus规范:常用的扩展能力,比如二维码、语音输入,都封装到了规范中,同时实现了Android和iOS的解析引擎,使得开发者的代码编写一次,可跨平台运行。
  • Native.js是另一项创新技术。手机OS的原生API有四十多万,大量的API无法被HTML5使用。Native.js把几十万原生API映射成了js对象,通过js可以直接调ios和android的原生API。这部分就不再跨平台,写法分别是plus.ios和plus.android,比如调ios game center,或在android手机桌面创建快捷方式,这些都是平台专有的api。

Native.js的用法示例

var obj= plus.android.import("android.content.Intent");

将一个原生对象android.content.Intent映射为js对象obj,然后在js里操作obj对象的方法属性就可以了。
Native.js的详细教程可以参考:5+ App开发Native.js入门指南
在5+App里,同时包含了HTML5Plus规范和Native.js的实现,开发者可以在5+App里自由使用相关技术。

5+ App概念解析

首先开发者需要清楚你要做什么,是要做一个app,安装和运行在手机上?或者要把一个mobile web项目打包成app?

  1. 做一个正经app
    传统意义上的app,是c/s方式的,它的程序要安装和运行在手机上,不通过浏览器在线下载。
    此时开发者在HBuilderX里新建项目时,选择“5+App”。(HBuilder里叫做移动App)
    在App项目下编写的HTML、js等文件,是会被打包到原生的安装包(Android是apk包、iOS是ipa包)里的。
    此时本地的js和服务器通过ajax交互,由服务器按接口方式给出数据(一般是json),然后客户端的js文件解析json,并根据本地的业务逻辑来渲染页面和执行功能。
    所以请不要在App项目中放置运行在服务器端的php等文件。
  2. 使用wap2app打包mobile web项目为app
    如果开发者想把一个做好的mobile web站,方便快速的打包成app,那么要使用DCloud的wap2app框架。
    在HBuilderX中新建项目时,选Wap2App项目,输入项目名称及wap站首页地址,其它参考框架的教程来配置。
    wap2app不同于普通的web打包技术,wap2app可真正做达到原生应用的功能和性能体验。
    具体教程另见:文档中心-wap2app,http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/1244
    wap2app属于5+app,它底层也是强大的HTML5Plus规范和Native.js在支撑。
    wap2app项目下的所有文件,也都是打包在本机运行的。

HTML5+ 应用架构

HTML5+ 应用架构图

HTML5+ 规范 API 及demo示例

最新规范请参考http://www.html5plus.org/#specification
手机端体验各个API的实现效果,ios手机在Appstore搜索Hello H5+,Android手机下载地址
在HBuilderX中新建项目,勾选5+ App,选择模板Hello H5+,即可看到这个demo的源代码。

开发环境HBuilderX

HBuilderX内置HTML5+ APP开发环境,提供一套完整的移动应用开发解决方案。
内置HTML5+ API语法提示,提高开发效率;
集成真机运行环境,方便开发后即时在真机上查看运行效果;
集成应用云端打包系统,不用部署xcode和Android sdk就可以打包应用。使开发者只需要使用HTML5、Javascript、CSS技术就可以快速开发跨平台的移动应用。
下载地址:http://www.dcloud.io/

平台支持

  • iOS 8.0及以上
  • Android 4.4及以上

手把手教你开发HelloWorld

以下教程已更新为HBuilderX版本,使用老版本HBuilder的开发者请更新到最新版本的HBuilderX,老版本HBuilder将不再更新。

创建HelloWorld应用

  • 启动HBuilderX(下载地址:http://www.dcloud.io/
  • 在菜单栏中选择“文件”-> “新建”->“项目”,打开“新建项目”对话框,选择“5+ App”
  • 在项目名称中输入“HelloWorld”,选择模板中勾选“默认模板”

    注意:新建5+ App项目需要联网分配一个appid,在真机联调、打包发行时都需要这个ID,所以不联网将无法获取appid
  • 创建完成后,会在项目管理器中显示新建的“HelloWorld”项目

manifest.json

在项目管理器中双击“manifest.json”文件,打开应用配置页面:

对于要打包的原生应用而言,其各种配置均在此处。具体配置教程见:Manifest.json文件配置,或者点击配置页面上的“配置指南”链接。

调用HTML5+ API

在项目管理器中双击“index.html”文件,对于HTML5+应用的页面有一个很重要的“plusready”事件,此事件会在页面加载后自动触发,表示所有HTML5+ API可以使用,在此事件触发之前不能调用HTML5+ API,所以应该在此事件回调函数中调用页面初始化需要调用的HTML5+ API,而不应该在onload或DOMContentLoaded事件中调用:

<!DOCTYPE html>  
<html>  
<head>  
    <meta charset="utf-8"/>  
    <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>  
    <title>Hello world</title>  
    <script type="text/javascript">   
// 扩展API是否准备好,如果没有则监听“plusready"事件  
if(window.plus){  
    plusReady();  
}else{   
    document.addEventListener("plusready", plusReady, false);  
}  
// 扩展API准备完成后要执行的操作  
function plusReady(){  
    var ws = plus.webview.currentWebview(); //pw回车可输出plus.webview  
    // ... code  
}  
    </script>  
</head>   
<body>  
  Hello World<br/>  
</body>  
</html>

编辑程序启动后默认显示的页面index.html,在页面中添加一个按钮,点击后将打开新页面加载“http://www.dcloud.io/”,为了实现此功能,我们需要定义openNewWebview方法,调用5+ API中plus.webview.createWebview()方法创建窗口,调用窗口对象的show方法显示:

// 打开新Webview窗口  
function openNewWebview(){  
  var wv = plus.webview.create('http://www.dcloud.io/');  
  wv.show();  
}

完整代码截图:

编辑完成后,按Ctrl+S键保存。

真机运行

写完代码后,我们可以通过真机运行来查看效果,真机运行有3个特点:

  1. 真实:
    虽然PC端HBuilderX右侧的内置浏览器也可以看大致的页面,但真实的布局效果以及手机上的特殊能力调用,还是必须在真机测试。
  2. 边改边看:
    在HBuilderX更改页面并保存后,可立即同步在真机上看到保存后的显示效果。比开发原生应用还方便。
  3. 检查错误和log:
    手机运行HTML等文件时如果发生错误以及打印的console.log,都可以在真机运行时从手机端反馈回到HBuilderX的控制台,在控制台直接查看。
    注意只有移动App项目(uni-app、Wap2App、5+ App)才可以真机联调。

在HBuilderX的“项目管理器”中选择创建的“HelloWorld”应用。

启动真机运行

将iOS或Android设备连接到电脑,这时HBuilderX会自动检测连接到电脑上的设备,通过菜单栏中的“运行” -> “运行到手机或模拟器”,选择要运行的设备启动真机运行:

也可通过工具栏启动:

启动真机运行后,在底部控制台显示以下信息:

注:如果提示错误信息,请尝试“终止”后重新启动真机运行!

启动后如果弹出提示框,请选择“确定”,显示以下页面:

点击“打开新页面”按钮,加载显示“http://www.dcloud.io/”网页:

在Android设备会自动安装真机运行基座HBuilder APP,并启动运行,iOS设备需要开发者手动点击手机桌面的HBuilder App图标。

如果你真机失败,注意看控制台的提示,或点HBuilder菜单-运行里的故障排查指南。
注意:真机联调App时,提供的是一个测试环境,并不真实发生打包,调试基座App的名字、图标、启动封面图片、是否可旋转这些只有打包才能更改的属性不会因为开发者修改manifest文件而变化。只有修改manifest且点击菜单发行-打包后,上述4个设置才能更改。

运行后,HBuilder中修改页面代码,保存后会自动同步到手机中,如果手机当前展示着被修改的页面,则会刷新页面。
尝试在js中在plusready之后编写console.log,或者改写错误的js,可以直接在HBuilder的控制台看到结果。
如果真机运行遇到各种故障,请点击运行菜单里的真机运行常见故障指南。

debug调试

除了真机运行,我们还可以利用chrome和safari的开发者控制台来调试5+App。
可以使用真机插上数据线,也可以使用Android或iOS的官方模拟器。所有Api包括plus的各种api,甚至包括plus.ios和plus.android的原生对象,都可以调试。
在HBuilder的菜单运行里选择打开Webview调试模式,如果手机连接正常,5+App启动,在ide上可看到可调试的页面,点击调试后,打开控制台,和普通的浏览器调试是一样的。

发行打包

完成应用页面的编辑后,需要正式打包为原生的apk或ipa安装包。
首先明确一下,有人说HTML5做的应用无法通过苹果Appstore审核,这是错误的说法。苹果只是拒绝开发者把web站点直接打包上Appstore,不优化任何体验,它认为这是给Appstore制造垃圾应用,如果是原生体验的App,虽然使用HTML5技术,苹果也不会拒绝上架。事实上Appstore上使用HTML5技术的App超过40w。
HBuilderX提供的打包有云打包和本地打包两种。
HBuilderX提供的云打包对正常开发者是免费的。但过多浪费服务器资源会额外收费。用本地打包无任何限制。
云打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包。

  1. 对于不熟悉原生开发的前端工程师,云打包大幅降低了他们的使用门槛。
  2. 对于没有mac电脑的开发者,他们也可以通过云打包直接打出iOS的ipa包。

无论云打包还是本地打包,在HBuilderX的菜单“发行”菜单中有链接。
本地打包还可参考原生开发者支持网站的App离线打包页面,此处仅对云打包进行说明。

通过菜单栏中的“发行”->“原生App-云打包”,打开“App云端打包”对话框提交。

注意:只有App项目才可以打包

iOS平台打包

对于iOS平台,可以选择越狱包或证书包(Appstore专用或企业证书),前者只能安装在已越狱的设备上,后者则可通过iDP证书打包提交到Appstore发布、或通过iEP证书打包在企业内部发布。

越狱包

  • Bundle ID(AppID):iOS应用标识,推荐使用反向域名风格的字符串,如“com.domainname.appname”。

IDP/IEP证书包

  • Bundle ID(AppID):iOS应用标识,推荐使用反向域名风格的字符串,如“com.domainname.appname”,必须与profile文件绑定的App ID匹配。
  • 证书profile文件:iOS Provisioning Profile文件(.mobileprovision),必须与苹果App ID和私钥证书区配。
  • 证书私钥密码:导入私钥证书的密码。
  • 私钥证书:iOS Certificates文件(.p12)。

私钥证书及profile文件生成请参考http://ask.dcloud.net.cn/article/152

Android平台打包

对于Android平台,可以选择使用DCloud生成的公用证书或自己生成的证书,两者不影响安装包的发布,唯一的差别就是证书中开发者和企业信息不同。
应用在开发测试阶段可以使用公共测试证书打包体验,发布时请使用自有证书打包,更多信息参考Android平台云端打包证书使用说明

使用自有证书

以自有证书打包为例,使用公共测试证书时不用配置证书相关信息,其它配置一致:

  • Android包名:Android应用包名,使用反向域名风格的字符串,如“com.domainname.appname”。
  • 证书别名:生成证书时使用-alias参数设置的证书别名;
  • 私钥密码:生成证书时使用的keystore密码;
  • 证书文件:生成证书时使用-keystore参数设置的证书保存路径;

查看打包状态

通过菜单栏中的“发行”->“原生App-查看打包状态”,可在控制台查看当前打包状态:

如果打包成功,则会在控制台显示下载地址,可点击链接下载安装包。

遇到打包失败,常见原因是:
如果使用自用证书,很可能是证书配置错误。
如果使用DCloud证书仍然出错,很可能是图片错误。所有图片格式必须是标准png,且严格符合分辨率要求。使用其他图片格式重命名为png会导致打包失败!
其他错误请参考: 云打包常见错误排查指南

UI框架

HBuilder并不限制UI框架,开发者使用任何UI框架均可以。
不过市面上确实没有什么好的手机App前端框架,DCloud开发了mui框架,它的性能更高,样式也更接近原生App,并且mui调用了HTML5+扩展能力,可以实现更好的体验。
我们强烈推荐开发移动App的开发者使用mui框架,详情请参考文档中心mui章节
请注意,mui只封装了部分HTML5Plus Api,学会mui框架不代表可以不学习HTML5Plus规范。mui不会做的很重,只是很有限的通过封装简化了常见开发过程。

开发资源

API手册HTML5+规范

HelloH5+示例应用,应用中包括几乎所有plus API的示例:

HelloH5二维码图片
获取Hello H5+的源代码,在HBuilder中新建移动App,选Hello H5+。可以查看所有plus api的调用样例代码。

Hello mui示例应用,漂亮且高性能的前端UI框架:
下载页面

进阶教程

如果想开发出接近原生体验的App,请访问如下教程:

三方培训

HTML5中国产业联盟里有专业的培训机构为HTML5开发者提供DCloud产品的培训。
详见专门文章http://ask.dcloud.net.cn/article/299

发行和变现服务

在你的app开发完毕后,DCloud还提供了发布平台,帮助开发者简单的完成应用推广页面,参考http://ask.dcloud.net.cn/docs/#//ask.dcloud.net.cn/article/12936
如果开发者还需要流量变现,DCloud提供了广告平台,开发者可以方便的在自己的app中集成广告,参考https://uniad.dcloud.net.cn/

最后,祝你通过DCloud的免费工具,快速完成自己的移动App,并获得更多用户和变现收益!

收起阅读 »

5+ App开发Native.js入门指南

Native.JS

概述

Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术。
如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展到手机App的原生世界。
HTML/JS/Css全部语法只有7万多,而原生语法有几十万,Native.js大幅提升了HTML5的能力。
NJS突破了浏览器的功能限制,也不再需要像Hybrid那样由原生语言开发插件才能补足浏览器欠缺的功能。
NJS编写的代码,最终需要在HBuilder里打包发行为App安装包,或者在支持Native.js技术的浏览器里运行。目前Native.js技术不能在普通手机浏览器里直接运行。

  • NJS大幅扩展了HTML5的能力范围,原本只有原生或Hybrid App的原生插件才能实现的功能如今可以使用JS实现。
  • NJS大幅提升了App开发效率,将iOS、Android、Web的3个工程师组队才能完成的App,变为1个web工程师就搞定。
  • NJS不再需要配置原生开发和编译环境,调试、打包均在HBuilder里进行。没有mac和xcode一样可以开发iOS应用。
  • 如果不熟悉原生API也没关系,我们汇总了很多NJS的代码示例,复制粘贴就可以用。http://ask.dcloud.net.cn/article/114

再次强调,Native.js不是一个js库,不需要下载引入到页面的script中,也不像nodejs那样有单独的运行环境,Native.js的运行环境是集成在5+runtime里的,使用HBuilder打包的app或流应用都可以直接使用Native.js。

注意事项:

Uni-app不支Native.js执行UI相关操作的API调用及webview相关API调用。将失效无法正常使用。Uni-app不推荐使用Native.js

技术要求

由于NJS是直接调用Native API,需要对Native API有一定了解,知道所需要的功能调用了哪些原生API,能看懂原生代码并参考原生代码修改为JS代码。
否则只能直接copy别人写好的NJS代码。

开始使用

判断平台

Native API具有平台依赖性,所以需要通过以下方式判断当前的运行平台:

function judgePlatform(){  
    switch ( plus.os.name ) {  
        case "Android":  
        // Android平台: plus.android.*  
        break;  
        case "iOS":  
        // iOS平台: plus.ios.*  
        break;  
        default:  
        // 其它平台  
        break;  
    }  
}

类型转换

在NJS中调用Native API或从Native API返回数据到NJS时会自动转换数据类型。

类型转换表

类型 Objective-C Java JavaScript
基本数据 byte/short/int/long/float/double/... byte/short/int/long/float/double/... Number
字符 char char String
字符串 NSString/@"" String/"" String
数组 @[1,2,3]/NSArray new XXX[] InstanceObject
@interface class ClassObject
对象(实例) * * InstanceObject
空对象 nil null null
其它 Protocol Interface Object(JSON)

其他转换

  • Android原生应用的主Activity对象 转为plus.android.runtimeMainActivity()
    Android的主Activity对象是启动应用时自动创建的,不是代码创建,此时通过plus.android.runtimeMainActivity()方法获取该Activity对象
  • Objective-C方法冒号剔除
    [pos setPositionX:(int)x Y:(int)y;] 转为 pos.setPositionXY(x,y);
    OC语法中方法的定义格式为:
    “(返回值类型) 函数名: (参数1类型) 形参1 参数2名称: (参数2类型) 形参2”
    方法的完整名称为: “函数名:参数2名称:”。
    如:“(void)setPositionX:(int)x Y:(int)y;”,方法的完整名称为“setPositionX:Y:”,调用时语法为:“[pos setPositionX:x Y:y];”。
    在JS语法中函数名称不能包含“:”字符,所以OC对象的方法名映射成NJS对象方法名时将其中的“:”字符自动删除,上面方法名映射为“setPositionXY”,在NJS调用的语法为:“pos.setPositionXY(x,y);”。
  • 文件路径转换
    Web开发里使用的image/1.png是该web工程的相对路径,而原生API中经常需要使用绝对路径,比如/sdcard/apptest/image/1.png,此时使用这个扩展方法来完成转换:plus.io.convertLocalFileSystemURL("image/1.png")

概念

类对象

由于JavaScript中本身没有类的概念,为了使用Native API层的类,在NJS中引入了类对象(ClassObject)的概念,用于对Native中的类进行操作,如创建类的实例对象、访问类的静态属性、调用类的静态方法等。其原型如下:

Interface ClassObject {  
    function Object plusGetAttribute( String name );  
    function void plusSetAttribute( String name, Object value );  
}

获取类对象
在iOS平台我们可以通过plus.ios.importClass(name)方法导入类对象,参数name为类的名称;在Android平台我们可以通过plus.android.importClass(name)方法导入类对象,其参数name为类的名称,必须包含完整的命名空间。

示例:

// iOS平台导入NSNotificationCenter类  
var NSNotificationCenter = plus.ios.importClass("NSNotificationCenter");  

// Android平台导入Intent类  
var Intent = plus.android.importClass("android.content.Intent");

获取类对象后,可以通过类对象“.”操作符获取类的静态常量属性、调用类的静态方法,类的静态非常量属性需通过plusGetAttribute、plusSetAttribute方法操作。

实例对象

在JavaScript中,所有对象都是Object,为了操作Native层类的实例对象,在NJS中引入了实例对象(InstanceObject)的概念,用于对Native中的对象进行操作,如操作对象的属性、调用对象的方法等。其原型如下:

Interface InstanceObject {  
    function Object plusGetAttribute( String name );  
    function void plusSetAttribute( String name, Object value );  
}

获取实例对象
有两种方式获取类的实例对象,一种是调用Native API返回值获取,另一种是通过new操作符来创建导入的类对象的实例,如下:

// iOS平台导入NSDictionary类  
var NSDictionary = plus.ios.importClass("NSDictionary");  
// 创建NSDictionary的实例对象  
var ns = new NSDictionary();  

// Android平台导入Intent类  
var Intent = plus.android.importClass("android.content.Intent");  
// 创建Intent的实例对象  
var intent = new Intent();

获取实例对象后,可以通过实例对象“.”操作符获取对象的常量属性、调用对象的成员方法,实例对象的非常量属性则需通过plusGetAttribute、plusSetAttribute方法操作。

操作对象的属性方法

  • 常量属性
    获取对象后就可以通过“.”操作符获取对象的常量属性,如果是类对象则获取的是类的静态常量属性,如果是实例对象则获取的是对象的成员常量属性。

  • 非常量属性
    如果Native层对象的属性值在原生环境下被更改,此时使用“.”操作符获取到对应NJS对象的属性值就可能不是实时的属性值,而是该Native层对象被映射为NJS对象那一刻的属性值。
    为获取获取Native层对象的实时属性值,需调用NJS对象的plusGetAttribute(name)方法,参数name为属性的名称,返回值为属性的值。调用NJS对象的plusSetAttribute(name,value)方法设置Native层对象的非常量属性值,参数name为属性的名称,value为要设置新的属性值。
    注意:使用plusGetAttribute(name)方法也可以获取Native层对象的常量属性值,但不如直接使用“.”操作符来获取性能高。

  • 方法
    获取对象后可以通过“.”操作符直接调用Native层方法,如果是类对象调用的是Native层类的静态方法,如果是实例对象调用的是Native层对象的成员方法。
    注意:在iOS平台由于JS语法的原因,Objective-C方法名称中的“:”字符转成NJS对象的方法名称后将会被忽略,因此在NJS中调用的方法名需去掉所有“:”字符。

  • 类的继承
    Objective-C和Java中类如果存在继承自基类,在NJS中对应的对象会根据继承关系递归将所有基类的公有方法一一换成NJS对象的方法,所有基类的公有属性也可以通过其plusGetAttribute、plusSetAttribute方法访问。

开始写NJS

使用NJS调用Native API非常简单,基本步骤如下:

  1. 导入要使用到的类;
  2. 创建类的实例对象(或者调用类的静态方法创建);
  3. 调用实例对象的方法;

以下例子使用NJS调用iOS和Android的原生弹出提示框(类似但不同于js的alert)。

Android

以下代码在Android平台展示调用Native API显示系统提示框。
首先是Android原生 Java代码,用于比对参考:

import android.app.AlertDialog;  
//...  
// 创建提示框构造对象,Builder是AlertDialog的内部类。参数this指代Android的主Activity对象,该对象启动应用时自动生成  
AlertDialog.Builder dlg = new AlertDialog.Builder(this);  
// 设置提示框标题  
dlg.setTitle("自定义标题");  
// 设置提示框内容  
dlg.setMessage("使用NJS的原生弹出框,可自定义弹出框的标题、按钮");  
// 设置提示框按钮  
dlg.setPositiveButton("确定(或者其他字符)", null);  
// 显示提示框  
dlg.show();  
//...

Native.js代码:

/**  
 * 在Android平台通过NJS显示系统提示框  
 */  
function njsAlertForAndroid(){  
    // 导入AlertDialog类  
    var AlertDialog = plus.android.importClass("android.app.AlertDialog");  
    // 创建提示框构造对象,构造函数需要提供程序全局环境对象,通过plus.android.runtimeMainActivity()方法获取  
    var dlg = new AlertDialog.Builder(plus.android.runtimeMainActivity());  
    // 设置提示框标题  
    dlg.setTitle("自定义标题");  
    // 设置提示框内容  
    dlg.setMessage("使用NJS的原生弹出框,可自定义弹出框的标题、按钮");  
    // 设置提示框按钮  
    dlg.setPositiveButton("确定(或者其他字符)",null);  
    // 显示提示框  
    dlg.show();  
}  
//...

注意:NJS代码中创建提示框构造对象要求传入程序全局环境对象,可通过plus.android.runtimeMainActivity()方法获取应用的主Activity对象,它是HTML5+应用运行期自动创建的程序全局环境对象。

Android设备上运行效果图:
Android Native.js示例运行效果图
`注意:其实HTML5+规范已经封装过原生提示框消息API:plus.ui.alert( message, alertCB, title, buttonCapture)。此处NJS的示例仅为了开发者方便理解,实际使用时调用plus.ui.alert更简单,性能也更高。**

iOS

以下代码在iOS平台展示调用Native API显示系统提示对话框。
iOS原生Objective-C代码,用于比对参考:

#import <UIKit/UIKit.h>  
//...  
// 创建UIAlertView类的实例对象  
UIAlertView *view = [UIAlertView alloc];  
// 设置提示对话上的内容  
[view initWithTitle:@"自定义标题" // 提示框标题  
    message:@"使用NJS的原生弹出框,可自定义弹出框的标题、按钮" // 提示框上显示的内容  
    delegate:nil // 点击提示框后的通知代理对象,nil类似js的null,意为不设置  
    cancelButtonTitle:@"确定(或者其他字符)" // 提示框上取消按钮的文字  
    otherButtonTitles:nil]; // 提示框上其它按钮的文字,设置为nil表示不显示  
// 调用show方法显示提示对话框,在OC中使用[]语法调用对象的方法  
[view show];  
//...

Native.js代码:

/**  
 * 在iOS平台通过NJS显示系统提示框  
 */  
function njsAlertForiOS(){  
    // 导入UIAlertView类  
    var UIAlertView = plus.ios.importClass("UIAlertView");  
    // 创建UIAlertView类的实例对象  
    var view = new UIAlertView();  
    // 设置提示对话上的内容  
    view.initWithTitlemessagedelegatecancelButtonTitleotherButtonTitles("自定义标题" // 提示框标题  
        , "使用NJS的原生弹出框,可自定义弹出框的标题、按钮" // 提示框上显示的内容  
        , null // 操作提示框后的通知代理对象,暂不设置  
        , "确定(或者其他字符)" // 提示框上取消按钮的文字  
        , null ); // 提示框上其它按钮的文字,设置为null表示不显示  
    // 调用show方法显示提示对话框,在JS中使用()语法调用对象的方法  
    view.show();  
}  
//...

注意:在OC语法中方法的定义格式为: “(返回值类型) 函数名: (参数1类型) 形参1 参数2名称: (参数2类型) 形参2” 方法的完整名称为: “函数名:参数2名称:”。 如:“(void)setPositionX:(int)x Y:(int)y;”,方法的完整名称为“setPositionX:Y:” 调用时语法为:“[pos setPositionX:x Y:y];”。 在JS语法中函数名称不能包含“:”字符,所以OC对象的方法名映射成NJS对象方法名时将其中的“:”字符自动删除,上面方法名映射为“setPositionXY”,在NJS调用的语法为:“pos.setPositionXY(x,y);”。
iOS设备上运行效果图:
iOS Native.js示例运行效果图
`注意:其实HTML5+规范已经封装过原生提示框消息API:plus.ui.alert( message, alertCB, title, buttonCapture)。此处NJS的示例仅为了开发者方便理解,实际使用时调用plus.ui.alert更简单、性能也更高。

在HBuilder自带的Hello H5+模板应用中“Native.JS”(plus/njs.html)页面有完整的源代码,可真机运行查看效果。

常用API

API on Android

为了能更好的理解NJS调用Java Native API,我们在Android平台用Java实现以下测试类,将在会后面API说明中的示例来调用。
文件NjsHello.java代码如下:

package io.dcloud;  

// 定义类NjsHello  
public class NjsHello {  
    // 静态常量  
    public static final int CTYPE = 1;  
    // 静态变量  
    public static int count;  
    // 成员常量  
    public final String BIRTHDAY = "2013-01-13";  
    // 成员变量  
    String name; //定义属性name  
    NjsHelloEvent observer;  
    public void updateName( String newname ) { //定义方法updateName  
        name = newname;  
    }  
    public void setEventObserver( NjsHelloEvent newobserver ) {  
        observer = newobserver;  
    }  
    public void test() { //定义方法test  
        System.out.printf( "My name is: %s", name );  
        observer.onEventInvoked( name );  
    }  
    public static void testCount() {  
        System.out.printf( "Static count is:%d", count );  
    }  
    static{  // 初始化类的静态变量  
        NjsHello.count = 0;  
    }  
}

文件NjsHelloEvent.java代码如下:

package io.dcloud;  

// 定义接口NjsHelloEvent  
public interface NjsHelloEvent {  
    public void onEventInvoked( String name );  
}

注:此NjsHello示例仅为了说明原生代码与NJS代码之间的映射关系,以下示例代码无法直接在HBuilder里真机运行,必须在以后HBuilder开放自定义打包后方可把NjsHello类打入app并被NJS调用。实际使用中,这种需要并非必要,大多数情况可以通过直接写NJS代码调用操作系统API,而无需由原生语言二次封装类供JS调用。

plus.android.importClass

导入Java类对象,方法原型如下:

ClassObject plus.android.importClass( String classname );

导入类对象后,就可以通过“.”操作符直接调用对象(类对象/实例对象)的常量和方法。
classname:要导入的Java类名,必须是完整的命名空间(使用"."分割),如果指定的类名不存在,则导入类失败,返回null。

注意:导入类对象可以方便的使用“.”操作符来调用对象的属性和方法,但也会消耗较多的系统资源。因此导入过多的类对象会影响性能,此时可以使用“高级API”中提供的方法在不导入类对象的情况下调用Native API。

示例:

  1. 导入类对象
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 创建NjsHello的实例对象  
    var hello = new NjsHello();  
    // ...

ClassObject

调用plus.android.importClass()方法导入类并返回ClassObject类对象,通过该类对象,可以创建类的实例对象。在Java中类的静态方法会转换成NJS类对象的方法,可通过类对象的“.”操作符调用;类的静态常量会转换为NJS类对象的属性,可通过类对象的“.”操作符访问;类的静态属性则需通过NJS类对象的plusGetAttribute、plusSetAttribute方法操作。
示例:

  1. 导入类后获取类的静态常量属性
    Java代码:

    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 获取类的静态常量属性  
    int type = NjsHello.CTYPE;  
    System.out.printf( "NjsHello Final's value: %d", type );  // 输出“NjsHello Final's value: 1”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 获取类的静态常量属性  
    var type = NjsHello.CTYPE;  
    console.log( "NjsHello Final's value: "+type ); // 输出“NjsHello Final's value: 1”  
    // ...
  2. 导入类后调用类的静态方法
    Java代码:

    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 调用类的静态方法  
    NjsHello.testCount();  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 调用类的静态方法  
    NjsHello.testCount();  
    // ...
ClassObject.plusGetAttribute

获取类对象的静态属性值,方法原型如下:

Object classobject.plusGetAttribute( String name );

导入类对象后,就可以调用其plusGetAttribute方法获取类的静态属性值。

  • name:要获取的静态属性名称,如果指定的属性名称不存在,则获取属性失败,返回null。

注意:如果导入的类对象中存在“plusGetAttribute”同名的静态方法,则必须通过plus.android.invoke()方法调用。

示例:

  1. 导入类后获取类的静态属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 获取类的静态属性  
    int count = NjsHello.count;  
    System.out.printf( "NjsHello Static's value: %d", count );  // 输出“NjsHello Static's value: 0”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 获取类的静态属性  
    var count = NjsHello.plusGetAttribute( "count" );  
    console.log( "NjsHello Static's value: "+count ); // 输出“NjsHello Static's value: 0”  
    // ...
ClassObject.plusSetAttribute

设置类对象的静态属性值,方法原型如下:

void classobject.plusSetAttribute( String name, Object value );

导入类对象后,就可以调用其plusSetAttribute方法设置类的静态属性值。

  • name:要设置的静态属性名称,如果指定的属性名称不存在,则设置属性失败,返回null。
  • value:要设置的属性值,其类型必须与Native层类对象的静态属性区配,否则设置操作不生效,将保留以前的值。

注意:如果导入的类对象中存在“plusSetAttribute”同名的静态方法,则必须通过plus.android.invoke()方法调用。

示例:

  1. 导入类后设置类的静态属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 设置类的静态属性值  
    NjsHello.count = 2;  
    System.out.printf( "NjsHello Static's value: %d", NjsHello.count );  // 输出“NjsHello Static's value: 2”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 设置类的静态属性值  
    NjsHello.plusSetAttribute( "count", 2 );  
    console.log( "NjsHello Static's value: "+NjsHello.plusGetAttribute( "count" ) ); // 输出“NjsHello Static's value: 2”  
    // ...

InstanceObject

NJS中实例对象与Java中的对象对应,调用plus.android.importClass()方法导入类后,通过new操作符可创建该类的实例对象,或直接调用plus.android.newObject方法创建类的实例对象,也可通过调用Native API返回实例对象。在Java中对象的方法会转换成NJS实例对象的方法,可通过实例对象的“.”操作符调用;对象的常量属性会转换NJS实例对象的属性,可通过实例对象的“.”操作符访问。对象的非常量属性则必须通过NJS实例对象的plusGetAttribute、plusSetAttribute方法操作。
示例:

  1. 导入类创建实例对象,调用对象的方法
    Java代码:

    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建NjsHello的实例对象  
    NjsHello hello = new NjsHello();  
    // 调用对象的方法  
    hello.updateName( "Tester" );  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 创建NjsHello的实例对象  
    var hello = new NjsHello();  
    // 调用对象的方法  
    hello.updateName( "Tester" );  
    // ...
  2. 导入类创建实例对象,获取对象的常量属性
    Java代码:

    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建NjsHello的实例对象  
    NjsHello hello = new NjsHello();  
    // 访问对象的常量属性  
    String birthday = hello.BIRTHDAY;  
    System.out.printf( "NjsHello Object Final's value: %s", birthday );  // 输出“NjsHello Object Final's value: 2013-01-13”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 创建NjsHello的实例对象  
    var hello = new NjsHello();  
    // 访问对象的常量属性  
    var birthday = hello.BIRTHDAY;  
    console.log( "NjsHello Object Final's value: "+birthday ); // 输出“NjsHello Object Final's value: 2013-01-13”  
    // ...
InstanceObject.plusGetAttribute

获取实例对象的属性值,方法原型如下:

Object instancebject.plusGetAttribute( String name );

获取实例对象后,就可以调用其plusGetAttribute方法获取对象的属性值。
name:要获取对象的属性名称,如果指定的属性名称不存在,则获取属性失败,返回null。

注意:如果实例对象中存在“plusGetAttribute”同名的方法,则必须通过plus.android.invoke()方法调用。

示例:

  1. 导入类创建实例对象,获取对象的属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    hello.updateName( "Tester" );  
    // 获取其name属性值  
    String name = hello.name;  
    System.out.printf( "NjsHello Object's name: %s", name );  // 输出“NjsHello Object's name: Tester”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    hello.updateName( "Tester" );  
    // 获取其name属性值  
    var name = hello.plusGetAttribute( "name" );  
    console.log( "NjsHello Object's name: "+name );  // 输出“NjsHello Object's name: Tester”  
    // ...
InstanceObject.plusSetAttribute

设置类对象的静态属性值,方法原型如下:

void instanceobject.plusSetAttribute( String name, Object value );

导入类对象后,就可以调用其plusSetAttribute方法设置类的静态属性值。

  • name:要设置的静态属性名称,如果指定的属性名称不存在,则设置属性失败,返回null。
  • value:要设置的属性值,其类型必须与Native层类对象的静态属性区配,否则设置操作不生效,将保留以前的值。

注意:如果导入的类对象中存在“plusSetAttribute”同名的静态方法,则必须通过plus.android.invoke()方法调用。

示例:

  1. 导入类创建实例对象,设置对象的属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    // 设置其name属性值  
    hello.name = "Tester";  
    System.out.printf( "NjsHello Object's name: %s", hello.name );  // 输出“NjsHello Object's name: Tester”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var Hello = plus.android.importClass("NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    // 设置其name属性值  
    hello.plusSetAttribute( "name", "Tester" );  
    console.log( "NjsHello Object's name: "+hello.plusGetAttribute("name") ); // 输出“NjsHello Object's name: Tester”  
    // ...

plus.android.implements

在Java中可以通过定义新类并实现Interface的接口,并创建出新类对象作为其它接口的参数,在NJS中则可快速创建对应的Interface对象,方法原型如下:
Object plus.android.implements( String name, Object obj );

此方法创建Native层中Java的接口实现对象,作为调用其它Native API的参数。

  • name:接口的名称,必须是完整的命名空间(使用"."分割),如果不存在此接口,则创建接口实现对象失败,返回null。
  • obj:JSON对象类型,接口实现方法的定义,JSON对象中key值为接口方法的名称;value值为Function,方法参数必须与接口中方法定义的参数区配。

示例:

  1. Test类中实现接口NjsHelloEvent的方法,并调用NjsHello对象的test方法触发接口中函数的运行。
    Java代码:
    import io.dcloud.NjsHello;  
    import io.dcloud.NjsHelloEvent;  
    //...  
    // Test类实现NjsHelloEvent接口  
    public class Test implements NjsHelloEvent {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    // 调用updateName方法  
    hello.updateName( "Tester" );  
    // 设置监听对象  
    hello.setEventObserver( this );  
    // 调用test方法,触发接口事件  
    hello.test(); // 触发onEventInvoked函数运行  
    //...  
    }  
    // 实现接口NjsHelloEvent的onEventInvoked方法  
    @Override  
    public void onEventInvoked( String name ) {  
    System.out.printf( "Invoked Object's name is: %s", name );  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 实现接口“NjsHelloEvent”对象  
    var hevent = plus.android.implements( "io.dcloud.NjsHelloEvent", {  
    "onEventInvoked":function( name ){  
        console.log( "Invoked Object’s name: "+name ); // 输出“Invoked Object’s name: Tester”  
    }  
    } );  
    // 创建对象的实例  
    var hello = new NjsHello();  
    // 调用updateName方法  
    hello.updateName( "Tester" );  
    // 设置监听对象  
    hello.setEventObserver( hevent );  
    // 调用test方法,触发代理事件  
    hello.test(); // 触发上面定义的匿名函数运行  
    // ...

plus.android.runtimeMainActivity

获取运行期环境主Activity实例对象,方法原型如下:

InstanceObject plus.android.runtimeMainActivity();

此方法将获取程序的主Activity的实例对象,它是Html5+运行期环境主组件,用于处理与用户交互的各种事件,也是应用程序全局环境android.app.Activity的实现对象。android.app.Activity是一个特殊的类,需要在原生开发环境中注册后才能使用,所以使用new操作符创建对象无实际意义。

示例:

  1. 调用Activity的startActivity方法来拨打电话
    Java代码:
    import android.app.Activity;  
    import android.content.Intent;  
    import android.net.Uri;  
    //...  
    // 获取主Activity对象的实例  
    Activity main = context;  
    // 创建Intent  
    Uri uri = Uri.parse("tel:10086");  
    Intent call = new Intent("android.intent.action.CALL",uri);  
    // 调用startActivity方法拨打电话  
    main.startActivity(call);  
    //...

    NJS代码:

    // 导入Activity、Intent类  
    var Intent = plus.android.importClass("android.content.Intent");  
    var Uri = plus.android.importClass("android.net.Uri");  
    // 获取主Activity对象的实例  
    var main = plus.android.runtimeMainActivity();  
    // 创建Intent  
    var uri = Uri.parse("tel:10086");  
    var call = new Intent("android.intent.action.CALL",uri);  
    // 调用startActivity方法拨打电话  
    main.startActivity( call );  
    // ...

plus.android.currentWebview

获取当前Webview窗口对象的native层实例对象,方法原型如下:

InstanceObject plus.android.currentWebview();

Android平台完整Java类名为android.webkit.Webview,完整API请参考Android开发文档android.webkit.Webview

示例:

  1. 调用Webview的loadUrl方法跳转页面
    Java代码:
    import android.webkit.Webview;  
    //...  
    // 获取Webview对象  
    Webview wv = this;  
    // 跳转页面  
    wv.loadUrl("http://www.dcloud.io/");  
    //...

    NJS代码:

    // 导入Webview类  
    var Webview = plus.android.importClass("android.webkit.Webview");  
    // 当前Webview对象的实例  
    var wv = plus.android.currentWebview();  
    // 跳转页面  
    wv.loadUrl("http://www.dcloud.io/");  
    // ...

    完整API文档参考:HTML5+ API - Native.js for Android

API on iOS

为了能更好的理解NJS调用Objective-C Native API,我们在iOS平台用Objective-C实现以下测试类,将会在后面API说明中的示例来调用。
头文件njshello.h代码如下:

// 定义协议  
@protocol NjsHelloEvent <NSObject>  
@required  
-(void) onEventInvoked:(NSString*)name;  
@end  
// -------------------------------------------------------------  
// 定义类NjsHello  
@interface NjsHello : NSObject {  
    NSString *_name;  
    id<NjsHelloEvent > _delegate;  
}  
@property (nonatomic,retain) NSString *name;  
@property (nonatomic,retain) id delegate;  
-(void)updateName:(NSString*)newname;  
-(void)setEventObserver:(id<NjsHelloEvent >)delegate;  
-(void)test;  
+(void)testCount;  
@end

实现文件njshello.m源代码如下:

#import "njshello.h"  
// 实现类NjsHello  
@implementation NjsHello  
@synthesize name=_name;  
-(void)updateName:(NSString*)newname{  
    _name = [newname copy];  
}  
-(void)setEventObserver:(id<NjsHelloEvent >)delegate{  
    _delegate = delegate;  
}  
-(void)test{  
    NSLog(@"My name is: %@",_name);  
    [[self delegate]onEventInvoked:name];  
}  
-(void)dealloc{  
    [_name release];  
    [supper dealloc];  
}  
+(void)testCount{  
    NSLog( @"Static test count" );  
}  
@end

plus.ios.importClass

导入Objective-C类对象,方法原型如下:

ClassObject plus.ios.importClass( String classname );

导入类对象后,就可以通过“.”操作符直接调用对象(类对象/实例对象)的常量和方法。通过“.”操作符号调用方法时,不需要使用“:”来分割方法名。

  • classname:要导入的Objective-C类名,如果指定的类名不存在,则导入类失败,返回null。

注意:导入类对象可以方便的使用“.”操作符来调用对象的属性和方法,但也会消耗较多的系统资源。因此导入过多的类对象会影响性能,此时可以使用“高级API”中提供的方法在不导入类对象的情况下调用Native API。
示例:

  1. 导入类并创建实例对象
    Objective-C代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // ...  
    }  
    // ...

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    // ...

ClassObject

调用plus.ios.importClass()方法导入类并返回ClassObject类对象,通过该类对象,可以创建类的实例对象。在Objective-C中类的静态方法会转换成NJS类对象的方法,可通过类对象的“.”操作符调用;

注意:由于Objective-C中类没有静态变量,而是通过定义全局变量来实现,目前NJS中无法访问全局变量的值。对于全局常量,在NJS中也无法访问,对于原类型常量可在文档中找到其具体的值,在JS代码中直接赋值;对于非原类型常量目前还无法访问。

示例:

  1. 导入类后调用类的静态方法
    Objective-C代码:
    #import "njshello.h"  
    // ...  
    int main( int argc, char *argv[] )  
    {  
    // 调用类的静态方法  
    [NjsHello testCount];  
    // ...  
    }  
    // ...

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 调用类的静态方法  
    NjsHello.testCount();  
    // ...

InstanceObject

NJS中实例对象与Objective-C中的对象对应,调用plus.ios.importClass()方法导入类后,通过new操作符可创建该类的实例对象,或直接调用plus.ios.newObject方法创建类的实例对象,也可通过调用Native API返回实例对象。在Objective-C中对象的方法会转换成NJS实例对象的方法,可通过实例对象的“.”操作符调用;对象的属性则必须通过NJS实例对象的plusGetAttribute、plusSetAttribute方法操作。

示例:

  1. 导入类创建实例对象,调用对象的方法
    Objective-C代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // ...  
    }  
    // ...

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    // ...
InstanceObject.plusGetAttribute

获取实例对象的属性值,方法原型如下:

Object instancebject.plusGetAttribute( String name );

获取实例对象后,就可以调用其plusGetAttribute方法获取对象的属性值。

  • name:要获取对象的属性名称,如果指定的属性名称不存在,则获取属性失败,返回null。

注意:如果实例对象中存在“plusGetAttribute”同名的方法,则只能通过plus.ios.invoke()方法调用。

示例:

  1. 导入类创建实例对象,获取对象的属性值
    Objective-C代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    [hello updateName:@"Tester"];  
    // 获取其name属性值  
    NSString* name = hello.name;  
    NSLog(@"NjsHello Object's name: %@",name);  // 输出“NjsHello Object's name: Tester”  
    // ...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    hello.updateName( "Tester" );  
    // 获取其name属性值  
    var name = hello.plusGetAttribute( "name" );  
    console.log( "NjsHello Object’s name: "+name );  // 输出“NjsHello Object’s name: Tester”  
    // ...
InstanceObject.plusSetAttribute

设置类对象的静态属性值,方法原型如下:

void instanceobject.plusSetAttribute( String name, Object value );

导入类对象后,就可以调用其plusSetAttribute方法设置类的静态属性值。

  • name:要设置的静态属性名称,如果指定的属性名称不存在,则设置属性失败,返回null。
  • value:要设置的属性值,其类型必须与Native层类对象的静态属性区配,否则设置操作不生效,将保留以前的值。

注意:如果导入的类对象中存在“plusSetAttribute”同名的静态方法,则只能通过plus.android.invoke()方法调用。

示例:

  1. 导入类创建实例对象,设置对象的属性值
    Java代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // 设置其name属性值  
    hello.name = @"Tester";  
    NSLog(@"NjsHello Object's name: %@",hello.name);  // 输出“NjsHello Object's name: Tester”  
    // ...  
    }  
    //...

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    // 设置其name属性值  
    hello.plusSetAttribute( "name", "Tester" );  
    console.log( "NjsHello Object’s name: "+hello.plusGetAttribute("name") ); // 输出“NjsHello Object’s name: Tester”  
    // ...

plus.ios.implements

在Objective-C中可以通过定义新类并实现Protocol的协议,并创建出新类对象作为代理对象,在NJS中则可实现协议快速创建代理对象,方法原型如下:

Object plus.ios.implements( String name, Object obj );

此方法返回一个NJS实例对象,映射到Native层中的代理对象,其父类为“NSObject”,并且实现obj中指定的协议方法。通常作为调用其它Native API的参数。

  • name:协议的名称,也可以是自定的字符串名称用于定义一个代理。
  • obj:JSON对象类型,代理实现方法的定义,JSON对象中key值为协议中定义的方法名称,必须保留方法名称中的“:”字符;value值为Function,方法参数必须与协议中定义方法的参数区配。

示例:

  1. 实现一个代理,并调用test方法触发调用代理的方法
    Objective-C代码:
    #import "njshello.h"  
    // 定义代理类NjsDelegate  
    @interface NjsDelegate: NSObject<NjsHelloEvent> {  
    -(void) onEventInvoked:(NSString*)name;  
    }  
    @end  
    // -------------------------------------------------------------  
    // 实现代理类NjsDelegate  
    @implementation NjsDelegate  
    -(void) onEventInvoked:(NSString*)name{  
    NSLog(@"Invoked Object's name:%@",name);  // 输出“Invoked Object’s name: Tester”  
    }  
    @end  
    // -------------------------------------------------------------  
    // 主函数  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // 调用updateName方法  
    [hello updateName:@"Tester"];  
    // 创建代理对象  
    NjsDelegate* delegate = [[NjsDelegate alloc] init];  
    // 设置监听对象  
    [hello setEventObserver:delegate];  
    // 调用test方法,触发代理事件  
    [hello test];  // 触发上面代理对象定义的onEventInvoked运行  
    // ...  
    }

    在NJS中不需要创建新的类对象,调用plus.ios.implements实现协议接口即可创建出代理对象,代码如下:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 实现协议“NjsHelloEvent”的代理  
    var hevent = plus.ios.implements( "NjsHelloEvent", {  
    "onEventInvoked:":function( name ){  
        console.log( "Invoked Object’s name: "+name ); // 输出“Invoked Object’s name: Tester”  
    }  
    } );  
    // 调用updateName方法  
    hello.updateName( "Tester" );  
    // 设置监听对象  
    hello.setEventObserver( hevent );  
    // 调用test方法,触发代理事件  
    hello.test(); // 触发上面代理对象定义的匿名函数运行  
    // ...

plus.ios.deleteObject

释放NJS中实例对象中映射的Native对象,方法原型如下:

void plus.ios.deleteObject( Object obj );

NJS中所有的实例对象(InstanceObject)都可以通过此方法释放,会将Native层的对象使用的资源进行释放。

  • obj:要释放的实例对象,如果obj对象不是有效的实例对象,则不执行对象的是否资源操作。

注意:此方法是可选的,如果不调用此方法释放实例对象,则在页面关闭时会自动释放所有对象;若对象占用较多的系统资源,则在业务逻辑处理完成时应该主动调用此方法释放资源,以提到程序的运行效率。

示例:

  1. 创建实例对象使用完成后,显式操作销毁对象
    Objective-C代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // 调用updateName方法  
    [hello updateName:@"Tester"];  
    // ...  
    // 使用完后销毁对象的实例  
    [hello release];  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    // 调用updateName方法  
    hello.updateName( "Tester" );  
    // ...  
    // 使用完后销毁对象的实例  
    plus.ios.deleteObject( hello );

plus.ios.currentWebview

获取当前Webview窗口对象的native层UIWebview实例对象,方法原型如下:

InstanceObject plus.ios.currentWebview();

UIWebview对象的API请参考Apple开发文档UIWebview

示例:

  1. 创建实例对象使用完成后,显式操作销毁对象
    Objective-C代码:
    // 获取当前Webview对象的实例  
    UIWebview* wv=self;  
    // 创建请求对象  
    NSURLRequest *req = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.dcloud.io/"]];  
    // 跳转页面  
    [web loadRequest:req];  
    // 释放对象  
    // 系统自动回收  
    // ...

    NJS代码:

    // 导入UIWebview、NSURLRequest、NSURL类  
    var Webview = plus.ios.importClass("UIWebview");  
    var NSURLRequest = plus.ios.import('NSURLRequest');  
    var NSURL = plus.ios.import('NSURL');  
    // 获取当前Webview对象的实例  
    var wv = plus.ios.currentWebview();  
    // 创建请求对象  
    var req = NSURLRequest.requestWithURL(NSURL.URLWithString('http://www.dcloud.io/'));  
    // 跳转页面  
    plus.ios.invoke(wv,"loadRequest:",req);  
    // 释放对象(可选)  
    plus.ios.deleteObject(req);  
    plus.ios.deleteObject(wv);  
    // ...

    完整API文档参考:HTML5+ API - Native.js for iOS

完整业务演示

Android

在Android手机桌面上创建快捷方式图标,这是原本只有原生程序才能实现的功能。即使使用Hybrid方案,也需要原生工程师来配合写插件。
下面我们演示如何直接使用js在Android手机桌面创建快捷方式,在HelloH5+应用中Native.JS页面中“Shortcut (Android)”可以查看运行效果。
这段代码是使用原生Java实现的创建快捷方式的代码,用于参考比对:

import android.app.Activity;  
import android.content.Intent;  
import android.graphics.BitmapFactory;  
import android.graphics.Bitmap;  
// 创建桌面快捷方式  
void createShortcut(){  
    // 获取主Activity  
    Activity main = this;  
    // 创建快捷方式意图  
    Intent shortcut = new Intent("com.android.launcher.action.INSTALL_SHORTCUT");  
    // 设置快捷方式的名称  
    shortcut.putExtra(Intent.EXTRA_SHORTCUT_NAME, "HelloH5+");  
    // 设置不可重复创建  
    shortcut.putExtra("duplicate",false);  
    // 设置快捷方式图标  
    Bitmap bitmap = BitmapFactory.decodeFile("/sdcard/icon.png");  
    shortcut.putExtra(Intent.EXTRA_SHORTCUT_ICON, bitmap);  
    // 设置快捷方式启动执行动作  
    Intent action = new Intent(Intent.ACTION_MAIN);  
    action.setComponent( main.getComponentName() );  
    shortcut.putExtra( Intent.EXTRA_SHORTCUT_INTENT, action );  
    // 广播创建快捷方式  
    main.sendBroadcast(shortcut);  
}

使用NJS实现时首先导入需要使用到的android.content.Intent、android.graphics.BitmapFactory类,按照Java代码中的方法对应转换成JavaScript代码。
其中快捷方式图标是通过解析本地png文件进行设置,在JavaScript中需要使用plus.io.* API转换成本地路径传递给Native API,完整代码如下:

var Intent=null,BitmapFactory=null;  
var main=null;  
document.addEventListener( "plusready", function() {//"plusready"事件触发时执行plus对象的方法  
    // ...  
    if ( plus.os.name == "Android" ) {  
        // 导入要用到的类对象  
        Intent = plus.android.importClass("android.content.Intent");  
        BitmapFactory = plus.android.importClass("android.graphics.BitmapFactory");  
        // 获取主Activity  
        main = plus.android.runtimeMainActivity();  
    }  
}, false);  
/**  
 * 创建桌面快捷方式  
 */  
function createShortcut(){  
    // 创建快捷方式意图  
    var shortcut = new Intent("com.android.launcher.action.INSTALL_SHORTCUT");  
    // 设置快捷方式的名称  
    shortcut.putExtra(Intent.EXTRA_SHORTCUT_NAME, "测试快捷方式");  
    // 设置不可重复创建  
    shortcut.putExtra("duplicate",false);  
    // 设置快捷方式图标  
    var iconPath = plus.io.convertLocalFileSystemURL("/icon.png"); // 将相对路径资源转换成系统绝对路径  
    var bitmap = BitmapFactory.decodeFile(iconPath);  
    shortcut.putExtra(Intent.EXTRA_SHORTCUT_ICON,bitmap);  
    // 设置快捷方式启动执行动作  
    var action = new Intent(Intent.ACTION_MAIN);  
    action.setClassName(main.getPackageName(), 'io.dcloud.PandoraEntry');  
    shortcut.putExtra(Intent.EXTRA_SHORTCUT_INTENT,action);  
    // 广播创建快捷方式  
    main.sendBroadcast(shortcut);  
    console.log( "桌面快捷方式已创建完成!" );  
}

注意:提交到云平台打包时需要添加Android权限才能在桌面创建快捷方式,在HBuilder工程中双击应用的“manifest.json”文件,切换到“代码视图”中在plus->distribute->google->permissions节点下添加权限数据:

"google": {  
    // ...  
    "permissions": [  
"<uses-permission android:name=\"com.android.launcher.permission.INSTALL_SHORTCUT\"/>"  
    ]  
}

如下图所示:
manifest.json中Android权限 permissions

iOS

在iOS手机上登录game center,一个游戏中心服务,这是原本只有原生程序才能实现的功能。即使使用Hybrid方案,也需要原生工程师来配合写插件。
下面我们演示如何直接使用js在iOS手机上登录game center,在HelloH5+应用中Native.JS页面中的“Game Center (iOS)”可以查看运行效果。
注意手机未开通game center则无法登陆,请先点击iOS自带的game center进行配置。
这段代码是使用原生Objective-C实现的登录game center的代码,用于参考比对。原生Objective-C代码的头文件Test.h中代码如下:

@interface Test: NSObject  
// 游戏玩家登录状态监听函数  
- (void)authenticationChanged:(NSNotification*)notification;  
// 获取游戏玩家状态信息  
- (void)playerInformation:(GKPlayer *)player;  
// 登录到游戏中心  
- (void)loginGamecenter;  
// 停止监听登录游戏状态变化  
- (void)logoutGamecenter;  
@end  

实现文件Test.m中代码如下:  
@implementation Test  
// 游戏玩家登录状态监听函数  
- (void)authenticationChanged:(NSNotification*)notification  
{  
    // 获取游戏玩家共享实例对象  
    GKLocalPlayer *player = notification.object;  
    if ( player.isAuthenticated ) {  
        // 玩家已登录认证,获取玩家信息  
        [self playerInformation:player];  
    } else {  
        // 玩家未登录认证,提示用户登录  
        NSLog(@"请登录!");  
    }  
    // 释放使用的对象  
    [player release];  
}  
// 获取游戏玩家状态信息  
- (void)playerInformation:(GKPlayer *)player  
{  
    // 获取游戏玩家的名称  
    NSLog(@"Name: %@",player.displayName);  
}  

// 登录到游戏中心  
- (void)loginGamecenter  
{  
    // 监听用户登录状态变更事件  
    NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];  
    [nc addObserver:self  
           selector:@selector(authenticationChanged)  
               name:@"GKPlayerAuthenticationDidChangeNotificationName"  
             object:nil];  
    // 获取游戏玩家共享实例对象  
    GKLocalPlayer *localplayer = [GKLocalPlayer localPlayer];  
    // 判断游戏玩家是否已经登录认证  
    if ( localplayer.isAuthenticated ) {  
        // 玩家已登录认证,获取玩家信息  
        [self playerInformation:localplayer];  
    } else {  
        // 玩家未登录认证,发起认证请求  
        [localplayer authenticateWithCompletionHandler:nil];  
        NSLog(@"登录中...");  
    }  
    // 释放使用的对象  
    [localplayer release];  
    [nc release];  
}  

// 停止监听登录游戏状态变化  
- (void)logoutGamecenter  
{  
    // 取消监听用户登录状态变化  
    NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];  
    [nc removeObserver:self  
                  name:@"GKPlayerAuthenticationDidChangeNotificationName"  
                object:nil];  
    // 释放使用的对象  
    [nc release];  
}  
@end

使用NJS实现时可以按照Objective-C代码中的方法对应转换成JavaScript代码,最关键的代码是loginGamecenter方法中对用户登录状态的监听,需调用NSNotificationCenter对象的“addObserver:selector:name:object”方法,

  1. addObserver:后要求传入一个实例对象用于查找selector参数中指定的方法,在Objective-C中通常将对象自身(self)传入,但在NJS中没有此概念,因此需使用plus.ios.implements方法来创建一个新的对象:
    var delegate = plus.ios.implements("NSObject",{"authenticationChanged:":authenticationChanged});
    第一个参数“NSObject”表示对象的类型,第二个参数中的JSON对象表明对象拥有的方法,“authenticationChanged”方法是delegate对象的方法。
  2. selector:后要传入一个类函数指针,在Objective-C中通过“@selector”指令可选择函数指针,在NJS中则需使用plus.ios.newObject方法来创建一个函数对象:
    plus.ios.newObject("@selector","authenticationChanged:")
    第一个参数需固定值为“@selector”,表示创建的是类函数指针对象,第二个参数。
    在"plusready"事件中导入GKLocalPlayer和NSNotificationCenter类,并调用登录方法longinGamecenter()。

完整JavaScript代码如下:

// 处理"plusready"事件  
var bLogin=false;  
document.addEventListener( "plusready", function() {  
    // ...  
    if ( plus.os.name == "iOS" ) {  
        GKLocalPlayer  = plus.ios.importClass("GKLocalPlayer");  
        NSNotificationCenter = plus.ios.importClass("NSNotificationCenter");  
        longinGamecenter();  
    } else {  
        alert("欢迎您");  
        bLogin = true;  
        setTimeout( function(){  
            plus.ui.toast( "此平台不支持Game Center功能!" );  
        }, 500 );  
    }  
}, false);  

var GKLocalPlayer=null,NSNotificationCenter=null;  
var delegate=null;  

// 游戏玩家登录状态监听函数  
function authenticationChanged( notification ){  
    // 获取游戏玩家共享实例对象  
    var player = notification.plusGetAttribute("object");  
    if ( player.plusGetAttribute("isAuthenticated") ) {  
        // 玩家已登录认证,获取玩家信息  
        playerInformation(player);  
        bLogin = true;  
    } else {  
        // 玩家未登录认证,提示用户登录  
        alert("请登录");  
        bLogin = false;  
    }  
    // 释放使用的对象  
    plus.ios.deleteObject(player);  
}  

// 获取游戏玩家状态信息  
function playerInformation( player ){  
    var name = player.plusGetAttribute("displayName");  
    alert( name+" 已登录!" );  
}  

// 登录到游戏中心  
function longinGamecenter(){  
    if ( bLogin ){  
        return;  
    }  
    // 监听用户登录状态变更事件  
    var nc = NSNotificationCenter.defaultCenter();  
    delegate = plus.ios.implements("NSObject",{"authenticationChanged:":authenticationChanged});  
    nc.addObserverselectornameobject(delegate,  
        plus.ios.newObject("@selector","authenticationChanged:"),  
        "GKPlayerAuthenticationDidChangeNotificationName",  
        null);  
    // 获取游戏玩家共享实例对象  
    var localplayer = GKLocalPlayer.localPlayer();  
    // 判断游戏玩家是否已经登录认证  
    if ( localplayer.isAuthenticated() ) {  // localplayer.plusGetAttribute("isAuthenticated")  
        // 玩家已登录认证,获取玩家信息  
        playerInformation( localplayer );  
        bLogin = true;  
    } else {  
        // 玩家未登录认证,发起认证请求  
        localplayer.authenticateWithCompletionHandler(null);  
        alert( "登录中..." );  
    }  
    // 释放使用的对象  
    plus.ios.deleteObject(localplayer);  
    plus.ios.deleteObject(nc);  
}  

// 停止监听登录游戏状态变化  
function stopGamecenterObserver()  
{  
    // 取消监听用户登录状态变化  
    var nc = NSNotificationCenter.defaultCenter();  
    nc.removeObservernameobject(delegate,"GKPlayerAuthenticationDidChangeNotificationName",null);  
    plus.ios.deleteObject(nc);  
    plus.ios.deleteObject(delegate);  
    delegate = null;  
}

注意

  1. 提交到云平台打包时需要添加Game Center API的系统库(framework)才能正确调用,在HBuilder工程中双击应用的“manifest.json”文件,切换到“代码视图”中在plus->distribute->apple->frameworks节点下添加要引用的系统Framework:
    "apple": {  
    "devices": "universal",  
    "frameworks": [  
        "GameKit.framework"  
    ]  
    }

    ,如下图所示:
    HBuilder frameworks

  2. 正式发布提交到AppStore时,在配置苹果开发者网站上配置App ID需要选中“Game Center”服务:
    Game Center

开发注意和建议用途

Native.js的运行性能仍然不比纯原生应用;JS与Native之间的数据交换效率并不如在js内部的数据交换效率;基于如上原因,有几点开发建议:

  • 以标准web 代码为主,当遇到web能力不足的时候,调用Native.js。
  • 以标准web 代码为主,当遇到web性能不足的时候,需要分析,
    if ((原生进行运算的效率-js与原生通讯的损耗)>纯web的效率){
    使用Native.js
    }else{
    还应该使用纯js
    }
  • 应避免把程序设计为在短时间内并发触发Native.js代码

调试

使用safari和chrome的控制台调试HBuilder的5+App时,一样可以调试NJS对象,即可以在浏览器控制台中查看各种原生对象的属性和方法,如下图所示,57行设了断点,watch了Intent对象,并在右边展开了该对象的所有属性方法:
Chrome Debug
关于如何在浏览器控制台调试HBuilder的5+App,请参考HBuilder的5+App开发入门教程。

开发资源

iOS 官方在线文档:https://developer.apple.com/library/ios/navigation/
Android 官方在线文档:https://developer.android.com/reference/packages.html
演讲视频:http://v.youku.com/v_show/id_XNzYzNTcwNDI4.html

高级API

有前述的常用API,已经可以完成各项业务开发。此处补充的高级API,是在熟悉NJS后,为了提升性能而使用的API。高级API无法直接用“.”操作符使用原生对象的方法,在debug时也无法watch原生对象,但高级API性能高于常规API。
虽然导入类对象(plus.android.importClass和plus.ios.importClass)后,可以方便的通过“.”操作符来访问对象的常量、调用对象的方法,但导入类对象也需要消耗较多的系统资源,所以在实际开发时应该尽可能的减少导入类对象,以提高程序效率。可以参考以下依据进行判断:

  1. 如导入的类特别复杂,继承自很多基类,方法和属性特别多则考虑不导入类;
  2. 对导入类是否需要频繁操作,若导入类仅是为了实例化,并作为调用其它API的参数,则不应该导入类;
  3. 在同一页面中是否导入了很多类?如果导入太多则需要考虑减少导入类的数目。

如果我们不导入类对象则无法通过new操作符实例化类对象,这时可通过plus.ios.newObject()、plus.android.newObject()方法来创建实例对象,如下:

// iOS平台创建NSDictionary的实例对象  
var ns = plus.ios.newObject( "NSDictionary" );  

// Android平台创建Intent的实例对象  
var intent = plus.android.newObject( "android.content.Intent" );

API on Android

plus.android.newObject

不导入类对象直接创建类的实例对象,方法原型如下:

InstanceObject plus.android.newObject( String classname, Object...args );

此方法对Native层中对类进行实例化操作,创建一个类的实体并返回NJS层的实例对象。相比导入类对象后使用new操作符创建对象效率要高。

  • classname:要创建实例对象的类名,类名必须是完整的命名空间,使用“.”分隔符(如“android.app.AlertDialog”),如果需要创建内部类对象需要使用“$”分割符(如“android.app.AlertDialog$Builder”)。如果指定的类名不存在,则创建对象失败,返回null。
  • args:调用类构造函数的参数,其类型和数目必须与Native层Java类构造函数区配,否则无法创建类对象,将返回null。

注意:由于没有导入类对象,所以通过此方法创建的实例对象无法通过“.”操作符直接调用对象的方法,而必须使用plus.android.invoke方法来调用。

示例:

  1. 不导入类创建实例对象
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
    // 创建对象的实例  
    var hello = plus.android.newObject( "io.dcloud.NjsHello" );  
    // ...

plus.android.getAttribute

不导入类对象,则无法通过类对象并访问类的静态属性,需调用以下方法获取类的静态属性值,方法原型如下:

Object plus.android.getAttribute( String|Object obj, String name );

此方法也可以获取类对象或实例对象的属性值,如果是类对象获取的则是类的静态属性,如果是实例对象则获取的是对象的非静态属性。

  • obj:若是String类型,表示要获取静态属性值的类名,类名必须是完整的命名空间(使用"."分割);若是ClassObject类型,表示要获取静态属性的类对象;若是InstanceObject类型,表示要获取属性值的实例对象。
  • name:要获取的属性名称,如果指定的属性名称不存在,则获取属性失败,返回null。

注意:同样导入类对象后也可以调用此方法,obj参数类型为ClassObject时,其作用与ClassObject.plusSetAttribute方法一致。obj参数类型为InstanceObject时,其作用与InstanceObject.plusSetAttribute方法一致。

示例:

  1. 不导入类对象获取类的静态常量属性
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 获取类的静态常量属性  
    int type = NjsHello.CTYPE;  
    System.out.printf( "NjsHello Final's value: %d", type );  // 输出“NjsHello Final's value: 1”  
    // 获取类的静态属性  
    int count = NjsHello.count;  
    System.out.printf( "NjsHello Static's value: %d", count );  // 输出“NjsHello Static's value: 0”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
    // 访问类的静态常量属性  
    var type = plus.android.getAttribute( "io.dcloud.NjsHello", "CTYPE" );  
    console.log( "NjsHello Final's value: "+type ); // 输出“NjsHello Final's value: 1”  
    // ...
  2. 不导入类对象,创建实例对象,并获取其name属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    // 获取其name属性值  
    String name = hello.name;  
    System.out.printf( "NjsHello Object's name: %s", name );  // 输出“NjsHello Object's name: Tester”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
    // 创建对象的实例  
    var hello = plus.android.newObject( "io.dcloud.NjsHello" );  
    // 获取其name属性值  
    var name = plus.android.getAttribute( hello, "name" );  
    console.log( "NjsHello Object's name: "+name );  // 输出“NjsHello Object's name: Tester”  
    // ...

plus.android.setAttribute

若没有导入类对象,则无法通过类对象设置类的静态属性值,需调用以下方法设置类的静态属性值,方法原型如下:

void plus.android.setAttribute( String|Object obj, String name, Object value );

此方法也可以设置类对象或实例对象的属性值,如果是类对象设置的则是类的静态属性,如果是实例对象则设置的是对象的非静态属性。

  • obj:若是String类型,表示要设置静态属性值的类名,类名必须是完整的命名空间(使用"."分割);若是ClassObject类型,表示要设置静态属性的类对象;若是InstanceObject类型,表示要设置属性值的实例对象。
  • name:要设置的属性名称,如果指定的属性名称不存在,则设置属性失败,返回null。
  • value:要设置的属性值,其类型必须与Native层obj对象的属性区配,否则设置操作不生效,将保留以前的值。

注意:同样导入类对象后也可以调用此方法,obj参数类型为ClassObject时,其作用与ClassObject.plusSetAttribute方法一致。obj参数类型为InstanceObject时,其作用与InstanceObject.plusSetAttribute方法一致。

示例:

  1. 不导入类对象设置类的静态属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 设置类的静态属性值  
    NjsHello.count = 2;  
    System.out.printf( "NjsHello Static's value: %d", NjsHello.count );  // 输出“NjsHello Static's value: 2”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
    // 设置类的静态属性值  
    plus.android.setAttribute( "io.dcloud.NjsHello", "count", 2 );  
    console.log( "NjsHello Static's value: "+plus.android.getAttribute("io.dcloud.NjsHello","count") ); // 输出“NjsHello Static's value: 2”  
    // ...
  2. 导入类对象,创建实例对象,并设置其name属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    // 设置其name属性值  
    hello.name = "Tester";  
    System.out.printf( "NjsHello Object's name: %s", hello.name );  // 输出“NjsHello Object's name: Tester”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
    // 创建对象的实例  
    var hello = plus.android.newObject( "io.dcloud.NjsHello" );  
    // 设置其name属性值  
    plus.android.setAttribute( hello, "name", "Tester" );  
    console.log( "NjsHello Object's name: "+hello.plusGetAttribute("name") ); // 输出“NjsHello Object's name: Tester”  
    // ...

plus.android.invoke

若没有导入类对象,则无法通过实例对象的“.”操作符调用其成员方法,需通过以下方法调用实例对象的成员方法,方法原型如下:

Object plus.android.invoke( String|Object obj, String name, Object... args );

此方法也可以调用类对象或实例对象的方法,如果是类对象则调用的是类的静态方法,如果是实例对象则调用的是对象的普通成员方法。函数返回值是调用Native层方法运行后的返回值,Native对象的方法无返回值则返回undefined。

  • obj:若是String类型,表示要调用静态方法的类名,类名必须包含完整的包名;若是ClassObject类型,表示要调用静态方法的类对象;若是InstanceObject类型,表示要调用成员方法的实例对象。
  • name:要调用的方法名称,如果指定的方法不存在,则调用方法失败,返回值为null。
  • args:调用方法的参数,其类型和数目必须与Native层对象方法的函数区配,否则无法调用对象的方法,将返回null。

注意:同样导入类对象后也可以调用此方法,其作用与通过类对象或实例对象的“.”操作符调用方法作用一致。

示例:
1.不导入类对象,调用类的静态方法
Java代码:

import io.dcloud.NjsHello;  
//...  
public class Test {  
public static void main( String args[] ) {  
    // 调用类的静态方法  
    NjsHello.testCount();  
    //...  
}  
//...  
}

NJS代码:

// 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
// 调用类的静态方法  
plus.android.invoke( "io.dcloud.NjsHello", "testCount" );  
// ...
  1. 不导入类对象,创建实例对象,并调用其updateNmae方法
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    // 调用updateName方法  
    hello.updateName( "Tester" );  
    System.out.printf( "NjsHello Object's name: %s", name );  // 输出“NjsHello Object's name: Tester”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
    // 创建对象的实例  
    var hello = plus.android.newObject( "io.dcloud.NjsHello" );  
    // 调用updateName方法  
    plus.android.invoke( hello, "updateName", "Tester" );  
    console.log( "NjsHello Object's name: "+hello.getAttribute("name") ); // 输出“NjsHello Object's name: Tester”  
    // ...

    完整API文档参考:HTML5+ API - Native.js for Android

API on iOS

plus.ios.newObject

不导入类对象直接创建类的实例对象,方法原型如下:

InstanceObject plus.ios.newObject( String classname, Object..args );

此方法会在Native层中对类进行实例化操作,创建一个类的实体并返回NJS层的类实例对象。相比导入类对象后使用new操作符创建对象效率要高。

  • classname:要创建实例对象的类名,如果指定的类名不存在,则创建对象失败,返回null。
  • args:调用类构造函数的参数,其类型和数目必须与Native层对象构造函数区配,否则无法创建类对象,将返回null。

注意:由于没有导入类对象,所以通过此方法创建的实例对象无法通过“.”操作符直接调用对象的方法,而必须使用plus.ios.invoke方法来调用。classname参数值为“@selector”表示需要创建一个函数指针对象,与Objective-C中的@selector指令功能相似,args参数为函数的名称,此时函数的名称需要包含“:”字符。

示例:

  1. 不导入类创建实例对象
    Objective-C代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // ...  
    }

    NJS代码:

    // 未导入“NjsHello”类  
    // 创建对象的实例  
    var hello = plus.ios.newObject( "NjsHello" );  
    // ...

plus.ios.invoke

若没有导入类对象,则无法通过实例对象的“.”操作符调用其成员方法,需通过以下方法调用实例对象的成员方法,方法原型如下:

Object plus.ios.invoke( String|Object obj, String name, Object... args );

此方法也可以调用类对象或实例对象的方法,如果是类对象则调用的是类的静态方法,如果是实例对象则调用的是对象的普通成员方法。函数返回值是调用Native层方法运行后的返回值,Native对象的方法无返回值则返回undefined。

  • obj:若是String类型,表示要调用静态方法的类名,类名必须包含完整的包名;若是ClassObject类型,表示要调用静态方法的类对象;若是InstanceObject类型,表示要调用成员方法的实例对象。
  • name:要调用的方法名称,必须保留方法名称中的“:”字符,如果指定的方法不存在,则调用方法失败,返回值为null。
  • args:调用方法的参数,其类型和数目必须与Native层对象方法的函数区配,否则无法调用对象的方法,将返回null。

注意:同样导入类对象后也可以调用此方法,其作用与通过类对象或实例对象的“.”操作符调用方法作用一致。

示例:

  1. 不导入类创建实例对象,并调用updateName方法
    Objective-C代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // 调用updateName方法  
    [hello updateName:@"Tester"];  
    NSLog(@"NjsHello Object's name: %@",hello.name);  // 输出“NjsHello Object's name: Tester”  
    // ...  
    }

    NJS代码:

    // 未导入“NjsHello”类  
    // 创建对象的实例  
    var hello = plus.ios.newObject( "NjsHello" );  
    // 调用updateName方法  
    plus.ios.invoke( hello, "updateName", "Tester" );  
    console.log( "NjsHello Object's name: "+hello.getAttribute("name") ); // 输出“NjsHello Object's name: Tester”  
    // ...

    完整API文档参考:HTML5+ API - Native.js for iOS

性能优化

调整代码结构优化

前面章节中我们介绍如何通过NJS调用Native API来显示系统提示框,在真机运行时会发现第一次调用时会有0.5s左右的延时,再次调用则不会延时。这是因为NJS中导入类对象操作会花费较长的时间,再次调用时由于类对象已经导入过,会能很快执行完毕。因此可以调整代码结构进行优化,在页面打开后触发的“plusready”事件中进行类对象的导入操作,从而避免第一次调用的延时。

Android平台调整NJS代码结构如下:

// 保存Android导入对象和全局环境对象  
var AlertDialog=null,mainActivity=null;  
// H5+事件处理  
document.addEventListener("plusready",function(){  
    switch ( plus.os.name ) {  
        case "Android":  
        // 程序全局环境对象,内部自动导入Activity类  
        mainActivity = plus.android.runtimeMainActivity();  
        // 导入AlertDialog类  
        AlertDialog = plus.android.importClass("android.app.AlertDialog");  
        break;  
        default:  
        break;  
    }  
},false);  
//...  
/**  
 * 在Android平台通过NJS显示系统提示框  
 */  
function njsAlertForAndroid(){  
    // 创建提示框构造对象,构造函数需要提供程序全局环境对象,通过plus.android.runtimeMainActivity()方法获取  
    var dlg = new AlertDialog.Builder(mainActivity);  
    // 设置提示框标题  
    dlg.setTitle("自定义标题");  
    // 设置提示框内容  
    dlg.setMessage("使用NJS的原生弹出框,可自定义弹出框的标题、按钮");  
    // 设置提示框按钮  
    dlg.setPositiveButton("确定(或者其他字符)",null);  
    // 显示提示框  
    dlg.show();  
}  
//...

iOS平台调整NJS代码结构如下:

// 保存iOS平台导入的类对象  
var UIAlertView=null;  
// H5+事件处理  
document.addEventListener("plusready",function(){  
    switch ( plus.os.name ) {  
        case "iOS":  
        // 导入UIAlertView类  
        UIAlertView = plus.ios.importClass("UIAlertView");  
        break;  
        default:  
        break;  
    }  
},false);  
//...  
/**  
 * 在iOS平台通过NJS显示系统提示框  
 */  
function njsAlertForiOS(){  
    // 创建UIAlertView类的实例对象  
    var view = new UIAlertView();  
    // 设置提示对话上的内容  
    view.initWithTitlemessagedelegatecancelButtonTitleotherButtonTitles("自定义标题" // 提示框标题  
        , "使用NJS的原生弹出框,可自定义弹出框的标题、按钮" // 提示框上显示的内容  
        , null // 操作提示框后的通知代理对象,暂不设置  
        , "确定(或者其他字符)" // 提示框上取消按钮的文字  
        , null ); // 提示框上其它按钮的文字,设置为null表示不显示  
    // 调用show方法显示提示对话框  
    view.show();  
}  
//...

使用高级API优化

前面章节中我们提到导入类对象会消耗较多的系统资源,导入过多的类对象会影响性能。在高级API中提供一组接口可以在不导入类对象的情况下调用Native API,从而提升代码运行性能。

Android平台使用高级API优化代码如下:

// 保存Android导入对象和全局环境对象  
var mainActivity=null;  
// H5+事件处理  
document.addEventListener("plusready",function(){  
    switch ( plus.os.name ) {  
        case "Android":  
        // 程序全局环境对象,内部自动导入Activity类  
        mainActivity = plus.android.runtimeMainActivity();  
        break;  
        default:  
        break;  
    }  
},false);  
//...  
/**  
 * 在Android平台通过NJS显示系统提示框  
 */  
function njsAlertForAndroid(){  
    // 由于Builder类是android.app.AlertDialog类的内部类,这里需要使用$符号分割  
    var dlg = plus.android.newObject("android.app.AlertDialog$Builder",mainActivity);  
    // 设置提示框标题  
    plus.android.invoke(dlg,"setTitle","自定义标题");  
    // 设置提示框内容  
    plus.android.invoke(dlg,"setMessage","使用NJS的原生弹出框,可自定义弹出框的标题、按钮");  
    // 设置提示框按钮  
    plus.android.invoke(dlg,"setPositiveButton","确定(或者其他字符)",null);  
    // 显示提示框  
    plus.android.invoke(dlg,"show");  
}  
//...

iOS平台使用高级API优化代码如下:

/**  
 * 在iOS平台通过NJS显示系统提示框  
 */  
function njsAlertForiOS(){  
    // 创建UIAlertView类的实例对象  
    var view = plus.ios.newObject("UIAlertView");  
    // 设置提示对话上的内容,这里的方法名称中必须包含':'字符  
    plus.ios.invoke(view,"initWithTitle:message:delegate:cancelButtonTitle:otherButtonTitles:"  
        ,"自定义标题" // 提示框标题  
        , "使用NJS的原生弹出框,可自定义弹出框的标题、按钮" // 提示框上显示的内容  
        , null // 操作提示框后的通知代理对象,暂不设置  
        , "确定(或者其他字符)" // 提示框上取消按钮的文字  
        , null ); // 提示框上其它按钮的文字,设置为null表示不显示  
    // 调用show方法显示提示对话框,在JS中使用()语法调用对象的方法  
    plus.ios.invoke(view,"show");  
}  
//...
继续阅读 »

概述

Native.js技术,简称NJS,是一种将手机操作系统的原生对象转义,映射为JS对象,在JS里编写原生代码的技术。
如果说Node.js把js扩展到服务器世界,那么Native.js则把js扩展到手机App的原生世界。
HTML/JS/Css全部语法只有7万多,而原生语法有几十万,Native.js大幅提升了HTML5的能力。
NJS突破了浏览器的功能限制,也不再需要像Hybrid那样由原生语言开发插件才能补足浏览器欠缺的功能。
NJS编写的代码,最终需要在HBuilder里打包发行为App安装包,或者在支持Native.js技术的浏览器里运行。目前Native.js技术不能在普通手机浏览器里直接运行。

  • NJS大幅扩展了HTML5的能力范围,原本只有原生或Hybrid App的原生插件才能实现的功能如今可以使用JS实现。
  • NJS大幅提升了App开发效率,将iOS、Android、Web的3个工程师组队才能完成的App,变为1个web工程师就搞定。
  • NJS不再需要配置原生开发和编译环境,调试、打包均在HBuilder里进行。没有mac和xcode一样可以开发iOS应用。
  • 如果不熟悉原生API也没关系,我们汇总了很多NJS的代码示例,复制粘贴就可以用。http://ask.dcloud.net.cn/article/114

再次强调,Native.js不是一个js库,不需要下载引入到页面的script中,也不像nodejs那样有单独的运行环境,Native.js的运行环境是集成在5+runtime里的,使用HBuilder打包的app或流应用都可以直接使用Native.js。

注意事项:

Uni-app不支Native.js执行UI相关操作的API调用及webview相关API调用。将失效无法正常使用。Uni-app不推荐使用Native.js

技术要求

由于NJS是直接调用Native API,需要对Native API有一定了解,知道所需要的功能调用了哪些原生API,能看懂原生代码并参考原生代码修改为JS代码。
否则只能直接copy别人写好的NJS代码。

开始使用

判断平台

Native API具有平台依赖性,所以需要通过以下方式判断当前的运行平台:

function judgePlatform(){  
    switch ( plus.os.name ) {  
        case "Android":  
        // Android平台: plus.android.*  
        break;  
        case "iOS":  
        // iOS平台: plus.ios.*  
        break;  
        default:  
        // 其它平台  
        break;  
    }  
}

类型转换

在NJS中调用Native API或从Native API返回数据到NJS时会自动转换数据类型。

类型转换表

类型 Objective-C Java JavaScript
基本数据 byte/short/int/long/float/double/... byte/short/int/long/float/double/... Number
字符 char char String
字符串 NSString/@"" String/"" String
数组 @[1,2,3]/NSArray new XXX[] InstanceObject
@interface class ClassObject
对象(实例) * * InstanceObject
空对象 nil null null
其它 Protocol Interface Object(JSON)

其他转换

  • Android原生应用的主Activity对象 转为plus.android.runtimeMainActivity()
    Android的主Activity对象是启动应用时自动创建的,不是代码创建,此时通过plus.android.runtimeMainActivity()方法获取该Activity对象
  • Objective-C方法冒号剔除
    [pos setPositionX:(int)x Y:(int)y;] 转为 pos.setPositionXY(x,y);
    OC语法中方法的定义格式为:
    “(返回值类型) 函数名: (参数1类型) 形参1 参数2名称: (参数2类型) 形参2”
    方法的完整名称为: “函数名:参数2名称:”。
    如:“(void)setPositionX:(int)x Y:(int)y;”,方法的完整名称为“setPositionX:Y:”,调用时语法为:“[pos setPositionX:x Y:y];”。
    在JS语法中函数名称不能包含“:”字符,所以OC对象的方法名映射成NJS对象方法名时将其中的“:”字符自动删除,上面方法名映射为“setPositionXY”,在NJS调用的语法为:“pos.setPositionXY(x,y);”。
  • 文件路径转换
    Web开发里使用的image/1.png是该web工程的相对路径,而原生API中经常需要使用绝对路径,比如/sdcard/apptest/image/1.png,此时使用这个扩展方法来完成转换:plus.io.convertLocalFileSystemURL("image/1.png")

概念

类对象

由于JavaScript中本身没有类的概念,为了使用Native API层的类,在NJS中引入了类对象(ClassObject)的概念,用于对Native中的类进行操作,如创建类的实例对象、访问类的静态属性、调用类的静态方法等。其原型如下:

Interface ClassObject {  
    function Object plusGetAttribute( String name );  
    function void plusSetAttribute( String name, Object value );  
}

获取类对象
在iOS平台我们可以通过plus.ios.importClass(name)方法导入类对象,参数name为类的名称;在Android平台我们可以通过plus.android.importClass(name)方法导入类对象,其参数name为类的名称,必须包含完整的命名空间。

示例:

// iOS平台导入NSNotificationCenter类  
var NSNotificationCenter = plus.ios.importClass("NSNotificationCenter");  

// Android平台导入Intent类  
var Intent = plus.android.importClass("android.content.Intent");

获取类对象后,可以通过类对象“.”操作符获取类的静态常量属性、调用类的静态方法,类的静态非常量属性需通过plusGetAttribute、plusSetAttribute方法操作。

实例对象

在JavaScript中,所有对象都是Object,为了操作Native层类的实例对象,在NJS中引入了实例对象(InstanceObject)的概念,用于对Native中的对象进行操作,如操作对象的属性、调用对象的方法等。其原型如下:

Interface InstanceObject {  
    function Object plusGetAttribute( String name );  
    function void plusSetAttribute( String name, Object value );  
}

获取实例对象
有两种方式获取类的实例对象,一种是调用Native API返回值获取,另一种是通过new操作符来创建导入的类对象的实例,如下:

// iOS平台导入NSDictionary类  
var NSDictionary = plus.ios.importClass("NSDictionary");  
// 创建NSDictionary的实例对象  
var ns = new NSDictionary();  

// Android平台导入Intent类  
var Intent = plus.android.importClass("android.content.Intent");  
// 创建Intent的实例对象  
var intent = new Intent();

获取实例对象后,可以通过实例对象“.”操作符获取对象的常量属性、调用对象的成员方法,实例对象的非常量属性则需通过plusGetAttribute、plusSetAttribute方法操作。

操作对象的属性方法

  • 常量属性
    获取对象后就可以通过“.”操作符获取对象的常量属性,如果是类对象则获取的是类的静态常量属性,如果是实例对象则获取的是对象的成员常量属性。

  • 非常量属性
    如果Native层对象的属性值在原生环境下被更改,此时使用“.”操作符获取到对应NJS对象的属性值就可能不是实时的属性值,而是该Native层对象被映射为NJS对象那一刻的属性值。
    为获取获取Native层对象的实时属性值,需调用NJS对象的plusGetAttribute(name)方法,参数name为属性的名称,返回值为属性的值。调用NJS对象的plusSetAttribute(name,value)方法设置Native层对象的非常量属性值,参数name为属性的名称,value为要设置新的属性值。
    注意:使用plusGetAttribute(name)方法也可以获取Native层对象的常量属性值,但不如直接使用“.”操作符来获取性能高。

  • 方法
    获取对象后可以通过“.”操作符直接调用Native层方法,如果是类对象调用的是Native层类的静态方法,如果是实例对象调用的是Native层对象的成员方法。
    注意:在iOS平台由于JS语法的原因,Objective-C方法名称中的“:”字符转成NJS对象的方法名称后将会被忽略,因此在NJS中调用的方法名需去掉所有“:”字符。

  • 类的继承
    Objective-C和Java中类如果存在继承自基类,在NJS中对应的对象会根据继承关系递归将所有基类的公有方法一一换成NJS对象的方法,所有基类的公有属性也可以通过其plusGetAttribute、plusSetAttribute方法访问。

开始写NJS

使用NJS调用Native API非常简单,基本步骤如下:

  1. 导入要使用到的类;
  2. 创建类的实例对象(或者调用类的静态方法创建);
  3. 调用实例对象的方法;

以下例子使用NJS调用iOS和Android的原生弹出提示框(类似但不同于js的alert)。

Android

以下代码在Android平台展示调用Native API显示系统提示框。
首先是Android原生 Java代码,用于比对参考:

import android.app.AlertDialog;  
//...  
// 创建提示框构造对象,Builder是AlertDialog的内部类。参数this指代Android的主Activity对象,该对象启动应用时自动生成  
AlertDialog.Builder dlg = new AlertDialog.Builder(this);  
// 设置提示框标题  
dlg.setTitle("自定义标题");  
// 设置提示框内容  
dlg.setMessage("使用NJS的原生弹出框,可自定义弹出框的标题、按钮");  
// 设置提示框按钮  
dlg.setPositiveButton("确定(或者其他字符)", null);  
// 显示提示框  
dlg.show();  
//...

Native.js代码:

/**  
 * 在Android平台通过NJS显示系统提示框  
 */  
function njsAlertForAndroid(){  
    // 导入AlertDialog类  
    var AlertDialog = plus.android.importClass("android.app.AlertDialog");  
    // 创建提示框构造对象,构造函数需要提供程序全局环境对象,通过plus.android.runtimeMainActivity()方法获取  
    var dlg = new AlertDialog.Builder(plus.android.runtimeMainActivity());  
    // 设置提示框标题  
    dlg.setTitle("自定义标题");  
    // 设置提示框内容  
    dlg.setMessage("使用NJS的原生弹出框,可自定义弹出框的标题、按钮");  
    // 设置提示框按钮  
    dlg.setPositiveButton("确定(或者其他字符)",null);  
    // 显示提示框  
    dlg.show();  
}  
//...

注意:NJS代码中创建提示框构造对象要求传入程序全局环境对象,可通过plus.android.runtimeMainActivity()方法获取应用的主Activity对象,它是HTML5+应用运行期自动创建的程序全局环境对象。

Android设备上运行效果图:
Android Native.js示例运行效果图
`注意:其实HTML5+规范已经封装过原生提示框消息API:plus.ui.alert( message, alertCB, title, buttonCapture)。此处NJS的示例仅为了开发者方便理解,实际使用时调用plus.ui.alert更简单,性能也更高。**

iOS

以下代码在iOS平台展示调用Native API显示系统提示对话框。
iOS原生Objective-C代码,用于比对参考:

#import <UIKit/UIKit.h>  
//...  
// 创建UIAlertView类的实例对象  
UIAlertView *view = [UIAlertView alloc];  
// 设置提示对话上的内容  
[view initWithTitle:@"自定义标题" // 提示框标题  
    message:@"使用NJS的原生弹出框,可自定义弹出框的标题、按钮" // 提示框上显示的内容  
    delegate:nil // 点击提示框后的通知代理对象,nil类似js的null,意为不设置  
    cancelButtonTitle:@"确定(或者其他字符)" // 提示框上取消按钮的文字  
    otherButtonTitles:nil]; // 提示框上其它按钮的文字,设置为nil表示不显示  
// 调用show方法显示提示对话框,在OC中使用[]语法调用对象的方法  
[view show];  
//...

Native.js代码:

/**  
 * 在iOS平台通过NJS显示系统提示框  
 */  
function njsAlertForiOS(){  
    // 导入UIAlertView类  
    var UIAlertView = plus.ios.importClass("UIAlertView");  
    // 创建UIAlertView类的实例对象  
    var view = new UIAlertView();  
    // 设置提示对话上的内容  
    view.initWithTitlemessagedelegatecancelButtonTitleotherButtonTitles("自定义标题" // 提示框标题  
        , "使用NJS的原生弹出框,可自定义弹出框的标题、按钮" // 提示框上显示的内容  
        , null // 操作提示框后的通知代理对象,暂不设置  
        , "确定(或者其他字符)" // 提示框上取消按钮的文字  
        , null ); // 提示框上其它按钮的文字,设置为null表示不显示  
    // 调用show方法显示提示对话框,在JS中使用()语法调用对象的方法  
    view.show();  
}  
//...

注意:在OC语法中方法的定义格式为: “(返回值类型) 函数名: (参数1类型) 形参1 参数2名称: (参数2类型) 形参2” 方法的完整名称为: “函数名:参数2名称:”。 如:“(void)setPositionX:(int)x Y:(int)y;”,方法的完整名称为“setPositionX:Y:” 调用时语法为:“[pos setPositionX:x Y:y];”。 在JS语法中函数名称不能包含“:”字符,所以OC对象的方法名映射成NJS对象方法名时将其中的“:”字符自动删除,上面方法名映射为“setPositionXY”,在NJS调用的语法为:“pos.setPositionXY(x,y);”。
iOS设备上运行效果图:
iOS Native.js示例运行效果图
`注意:其实HTML5+规范已经封装过原生提示框消息API:plus.ui.alert( message, alertCB, title, buttonCapture)。此处NJS的示例仅为了开发者方便理解,实际使用时调用plus.ui.alert更简单、性能也更高。

在HBuilder自带的Hello H5+模板应用中“Native.JS”(plus/njs.html)页面有完整的源代码,可真机运行查看效果。

常用API

API on Android

为了能更好的理解NJS调用Java Native API,我们在Android平台用Java实现以下测试类,将在会后面API说明中的示例来调用。
文件NjsHello.java代码如下:

package io.dcloud;  

// 定义类NjsHello  
public class NjsHello {  
    // 静态常量  
    public static final int CTYPE = 1;  
    // 静态变量  
    public static int count;  
    // 成员常量  
    public final String BIRTHDAY = "2013-01-13";  
    // 成员变量  
    String name; //定义属性name  
    NjsHelloEvent observer;  
    public void updateName( String newname ) { //定义方法updateName  
        name = newname;  
    }  
    public void setEventObserver( NjsHelloEvent newobserver ) {  
        observer = newobserver;  
    }  
    public void test() { //定义方法test  
        System.out.printf( "My name is: %s", name );  
        observer.onEventInvoked( name );  
    }  
    public static void testCount() {  
        System.out.printf( "Static count is:%d", count );  
    }  
    static{  // 初始化类的静态变量  
        NjsHello.count = 0;  
    }  
}

文件NjsHelloEvent.java代码如下:

package io.dcloud;  

// 定义接口NjsHelloEvent  
public interface NjsHelloEvent {  
    public void onEventInvoked( String name );  
}

注:此NjsHello示例仅为了说明原生代码与NJS代码之间的映射关系,以下示例代码无法直接在HBuilder里真机运行,必须在以后HBuilder开放自定义打包后方可把NjsHello类打入app并被NJS调用。实际使用中,这种需要并非必要,大多数情况可以通过直接写NJS代码调用操作系统API,而无需由原生语言二次封装类供JS调用。

plus.android.importClass

导入Java类对象,方法原型如下:

ClassObject plus.android.importClass( String classname );

导入类对象后,就可以通过“.”操作符直接调用对象(类对象/实例对象)的常量和方法。
classname:要导入的Java类名,必须是完整的命名空间(使用"."分割),如果指定的类名不存在,则导入类失败,返回null。

注意:导入类对象可以方便的使用“.”操作符来调用对象的属性和方法,但也会消耗较多的系统资源。因此导入过多的类对象会影响性能,此时可以使用“高级API”中提供的方法在不导入类对象的情况下调用Native API。

示例:

  1. 导入类对象
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 创建NjsHello的实例对象  
    var hello = new NjsHello();  
    // ...

ClassObject

调用plus.android.importClass()方法导入类并返回ClassObject类对象,通过该类对象,可以创建类的实例对象。在Java中类的静态方法会转换成NJS类对象的方法,可通过类对象的“.”操作符调用;类的静态常量会转换为NJS类对象的属性,可通过类对象的“.”操作符访问;类的静态属性则需通过NJS类对象的plusGetAttribute、plusSetAttribute方法操作。
示例:

  1. 导入类后获取类的静态常量属性
    Java代码:

    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 获取类的静态常量属性  
    int type = NjsHello.CTYPE;  
    System.out.printf( "NjsHello Final's value: %d", type );  // 输出“NjsHello Final's value: 1”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 获取类的静态常量属性  
    var type = NjsHello.CTYPE;  
    console.log( "NjsHello Final's value: "+type ); // 输出“NjsHello Final's value: 1”  
    // ...
  2. 导入类后调用类的静态方法
    Java代码:

    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 调用类的静态方法  
    NjsHello.testCount();  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 调用类的静态方法  
    NjsHello.testCount();  
    // ...
ClassObject.plusGetAttribute

获取类对象的静态属性值,方法原型如下:

Object classobject.plusGetAttribute( String name );

导入类对象后,就可以调用其plusGetAttribute方法获取类的静态属性值。

  • name:要获取的静态属性名称,如果指定的属性名称不存在,则获取属性失败,返回null。

注意:如果导入的类对象中存在“plusGetAttribute”同名的静态方法,则必须通过plus.android.invoke()方法调用。

示例:

  1. 导入类后获取类的静态属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 获取类的静态属性  
    int count = NjsHello.count;  
    System.out.printf( "NjsHello Static's value: %d", count );  // 输出“NjsHello Static's value: 0”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 获取类的静态属性  
    var count = NjsHello.plusGetAttribute( "count" );  
    console.log( "NjsHello Static's value: "+count ); // 输出“NjsHello Static's value: 0”  
    // ...
ClassObject.plusSetAttribute

设置类对象的静态属性值,方法原型如下:

void classobject.plusSetAttribute( String name, Object value );

导入类对象后,就可以调用其plusSetAttribute方法设置类的静态属性值。

  • name:要设置的静态属性名称,如果指定的属性名称不存在,则设置属性失败,返回null。
  • value:要设置的属性值,其类型必须与Native层类对象的静态属性区配,否则设置操作不生效,将保留以前的值。

注意:如果导入的类对象中存在“plusSetAttribute”同名的静态方法,则必须通过plus.android.invoke()方法调用。

示例:

  1. 导入类后设置类的静态属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 设置类的静态属性值  
    NjsHello.count = 2;  
    System.out.printf( "NjsHello Static's value: %d", NjsHello.count );  // 输出“NjsHello Static's value: 2”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 设置类的静态属性值  
    NjsHello.plusSetAttribute( "count", 2 );  
    console.log( "NjsHello Static's value: "+NjsHello.plusGetAttribute( "count" ) ); // 输出“NjsHello Static's value: 2”  
    // ...

InstanceObject

NJS中实例对象与Java中的对象对应,调用plus.android.importClass()方法导入类后,通过new操作符可创建该类的实例对象,或直接调用plus.android.newObject方法创建类的实例对象,也可通过调用Native API返回实例对象。在Java中对象的方法会转换成NJS实例对象的方法,可通过实例对象的“.”操作符调用;对象的常量属性会转换NJS实例对象的属性,可通过实例对象的“.”操作符访问。对象的非常量属性则必须通过NJS实例对象的plusGetAttribute、plusSetAttribute方法操作。
示例:

  1. 导入类创建实例对象,调用对象的方法
    Java代码:

    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建NjsHello的实例对象  
    NjsHello hello = new NjsHello();  
    // 调用对象的方法  
    hello.updateName( "Tester" );  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 创建NjsHello的实例对象  
    var hello = new NjsHello();  
    // 调用对象的方法  
    hello.updateName( "Tester" );  
    // ...
  2. 导入类创建实例对象,获取对象的常量属性
    Java代码:

    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建NjsHello的实例对象  
    NjsHello hello = new NjsHello();  
    // 访问对象的常量属性  
    String birthday = hello.BIRTHDAY;  
    System.out.printf( "NjsHello Object Final's value: %s", birthday );  // 输出“NjsHello Object Final's value: 2013-01-13”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 创建NjsHello的实例对象  
    var hello = new NjsHello();  
    // 访问对象的常量属性  
    var birthday = hello.BIRTHDAY;  
    console.log( "NjsHello Object Final's value: "+birthday ); // 输出“NjsHello Object Final's value: 2013-01-13”  
    // ...
InstanceObject.plusGetAttribute

获取实例对象的属性值,方法原型如下:

Object instancebject.plusGetAttribute( String name );

获取实例对象后,就可以调用其plusGetAttribute方法获取对象的属性值。
name:要获取对象的属性名称,如果指定的属性名称不存在,则获取属性失败,返回null。

注意:如果实例对象中存在“plusGetAttribute”同名的方法,则必须通过plus.android.invoke()方法调用。

示例:

  1. 导入类创建实例对象,获取对象的属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    hello.updateName( "Tester" );  
    // 获取其name属性值  
    String name = hello.name;  
    System.out.printf( "NjsHello Object's name: %s", name );  // 输出“NjsHello Object's name: Tester”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    hello.updateName( "Tester" );  
    // 获取其name属性值  
    var name = hello.plusGetAttribute( "name" );  
    console.log( "NjsHello Object's name: "+name );  // 输出“NjsHello Object's name: Tester”  
    // ...
InstanceObject.plusSetAttribute

设置类对象的静态属性值,方法原型如下:

void instanceobject.plusSetAttribute( String name, Object value );

导入类对象后,就可以调用其plusSetAttribute方法设置类的静态属性值。

  • name:要设置的静态属性名称,如果指定的属性名称不存在,则设置属性失败,返回null。
  • value:要设置的属性值,其类型必须与Native层类对象的静态属性区配,否则设置操作不生效,将保留以前的值。

注意:如果导入的类对象中存在“plusSetAttribute”同名的静态方法,则必须通过plus.android.invoke()方法调用。

示例:

  1. 导入类创建实例对象,设置对象的属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    // 设置其name属性值  
    hello.name = "Tester";  
    System.out.printf( "NjsHello Object's name: %s", hello.name );  // 输出“NjsHello Object's name: Tester”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var Hello = plus.android.importClass("NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    // 设置其name属性值  
    hello.plusSetAttribute( "name", "Tester" );  
    console.log( "NjsHello Object's name: "+hello.plusGetAttribute("name") ); // 输出“NjsHello Object's name: Tester”  
    // ...

plus.android.implements

在Java中可以通过定义新类并实现Interface的接口,并创建出新类对象作为其它接口的参数,在NJS中则可快速创建对应的Interface对象,方法原型如下:
Object plus.android.implements( String name, Object obj );

此方法创建Native层中Java的接口实现对象,作为调用其它Native API的参数。

  • name:接口的名称,必须是完整的命名空间(使用"."分割),如果不存在此接口,则创建接口实现对象失败,返回null。
  • obj:JSON对象类型,接口实现方法的定义,JSON对象中key值为接口方法的名称;value值为Function,方法参数必须与接口中方法定义的参数区配。

示例:

  1. Test类中实现接口NjsHelloEvent的方法,并调用NjsHello对象的test方法触发接口中函数的运行。
    Java代码:
    import io.dcloud.NjsHello;  
    import io.dcloud.NjsHelloEvent;  
    //...  
    // Test类实现NjsHelloEvent接口  
    public class Test implements NjsHelloEvent {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    // 调用updateName方法  
    hello.updateName( "Tester" );  
    // 设置监听对象  
    hello.setEventObserver( this );  
    // 调用test方法,触发接口事件  
    hello.test(); // 触发onEventInvoked函数运行  
    //...  
    }  
    // 实现接口NjsHelloEvent的onEventInvoked方法  
    @Override  
    public void onEventInvoked( String name ) {  
    System.out.printf( "Invoked Object's name is: %s", name );  
    }  
    //...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.android.importClass("io.dcloud.NjsHello");  
    // 实现接口“NjsHelloEvent”对象  
    var hevent = plus.android.implements( "io.dcloud.NjsHelloEvent", {  
    "onEventInvoked":function( name ){  
        console.log( "Invoked Object’s name: "+name ); // 输出“Invoked Object’s name: Tester”  
    }  
    } );  
    // 创建对象的实例  
    var hello = new NjsHello();  
    // 调用updateName方法  
    hello.updateName( "Tester" );  
    // 设置监听对象  
    hello.setEventObserver( hevent );  
    // 调用test方法,触发代理事件  
    hello.test(); // 触发上面定义的匿名函数运行  
    // ...

plus.android.runtimeMainActivity

获取运行期环境主Activity实例对象,方法原型如下:

InstanceObject plus.android.runtimeMainActivity();

此方法将获取程序的主Activity的实例对象,它是Html5+运行期环境主组件,用于处理与用户交互的各种事件,也是应用程序全局环境android.app.Activity的实现对象。android.app.Activity是一个特殊的类,需要在原生开发环境中注册后才能使用,所以使用new操作符创建对象无实际意义。

示例:

  1. 调用Activity的startActivity方法来拨打电话
    Java代码:
    import android.app.Activity;  
    import android.content.Intent;  
    import android.net.Uri;  
    //...  
    // 获取主Activity对象的实例  
    Activity main = context;  
    // 创建Intent  
    Uri uri = Uri.parse("tel:10086");  
    Intent call = new Intent("android.intent.action.CALL",uri);  
    // 调用startActivity方法拨打电话  
    main.startActivity(call);  
    //...

    NJS代码:

    // 导入Activity、Intent类  
    var Intent = plus.android.importClass("android.content.Intent");  
    var Uri = plus.android.importClass("android.net.Uri");  
    // 获取主Activity对象的实例  
    var main = plus.android.runtimeMainActivity();  
    // 创建Intent  
    var uri = Uri.parse("tel:10086");  
    var call = new Intent("android.intent.action.CALL",uri);  
    // 调用startActivity方法拨打电话  
    main.startActivity( call );  
    // ...

plus.android.currentWebview

获取当前Webview窗口对象的native层实例对象,方法原型如下:

InstanceObject plus.android.currentWebview();

Android平台完整Java类名为android.webkit.Webview,完整API请参考Android开发文档android.webkit.Webview

示例:

  1. 调用Webview的loadUrl方法跳转页面
    Java代码:
    import android.webkit.Webview;  
    //...  
    // 获取Webview对象  
    Webview wv = this;  
    // 跳转页面  
    wv.loadUrl("http://www.dcloud.io/");  
    //...

    NJS代码:

    // 导入Webview类  
    var Webview = plus.android.importClass("android.webkit.Webview");  
    // 当前Webview对象的实例  
    var wv = plus.android.currentWebview();  
    // 跳转页面  
    wv.loadUrl("http://www.dcloud.io/");  
    // ...

    完整API文档参考:HTML5+ API - Native.js for Android

API on iOS

为了能更好的理解NJS调用Objective-C Native API,我们在iOS平台用Objective-C实现以下测试类,将会在后面API说明中的示例来调用。
头文件njshello.h代码如下:

// 定义协议  
@protocol NjsHelloEvent <NSObject>  
@required  
-(void) onEventInvoked:(NSString*)name;  
@end  
// -------------------------------------------------------------  
// 定义类NjsHello  
@interface NjsHello : NSObject {  
    NSString *_name;  
    id<NjsHelloEvent > _delegate;  
}  
@property (nonatomic,retain) NSString *name;  
@property (nonatomic,retain) id delegate;  
-(void)updateName:(NSString*)newname;  
-(void)setEventObserver:(id<NjsHelloEvent >)delegate;  
-(void)test;  
+(void)testCount;  
@end

实现文件njshello.m源代码如下:

#import "njshello.h"  
// 实现类NjsHello  
@implementation NjsHello  
@synthesize name=_name;  
-(void)updateName:(NSString*)newname{  
    _name = [newname copy];  
}  
-(void)setEventObserver:(id<NjsHelloEvent >)delegate{  
    _delegate = delegate;  
}  
-(void)test{  
    NSLog(@"My name is: %@",_name);  
    [[self delegate]onEventInvoked:name];  
}  
-(void)dealloc{  
    [_name release];  
    [supper dealloc];  
}  
+(void)testCount{  
    NSLog( @"Static test count" );  
}  
@end

plus.ios.importClass

导入Objective-C类对象,方法原型如下:

ClassObject plus.ios.importClass( String classname );

导入类对象后,就可以通过“.”操作符直接调用对象(类对象/实例对象)的常量和方法。通过“.”操作符号调用方法时,不需要使用“:”来分割方法名。

  • classname:要导入的Objective-C类名,如果指定的类名不存在,则导入类失败,返回null。

注意:导入类对象可以方便的使用“.”操作符来调用对象的属性和方法,但也会消耗较多的系统资源。因此导入过多的类对象会影响性能,此时可以使用“高级API”中提供的方法在不导入类对象的情况下调用Native API。
示例:

  1. 导入类并创建实例对象
    Objective-C代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // ...  
    }  
    // ...

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    // ...

ClassObject

调用plus.ios.importClass()方法导入类并返回ClassObject类对象,通过该类对象,可以创建类的实例对象。在Objective-C中类的静态方法会转换成NJS类对象的方法,可通过类对象的“.”操作符调用;

注意:由于Objective-C中类没有静态变量,而是通过定义全局变量来实现,目前NJS中无法访问全局变量的值。对于全局常量,在NJS中也无法访问,对于原类型常量可在文档中找到其具体的值,在JS代码中直接赋值;对于非原类型常量目前还无法访问。

示例:

  1. 导入类后调用类的静态方法
    Objective-C代码:
    #import "njshello.h"  
    // ...  
    int main( int argc, char *argv[] )  
    {  
    // 调用类的静态方法  
    [NjsHello testCount];  
    // ...  
    }  
    // ...

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 调用类的静态方法  
    NjsHello.testCount();  
    // ...

InstanceObject

NJS中实例对象与Objective-C中的对象对应,调用plus.ios.importClass()方法导入类后,通过new操作符可创建该类的实例对象,或直接调用plus.ios.newObject方法创建类的实例对象,也可通过调用Native API返回实例对象。在Objective-C中对象的方法会转换成NJS实例对象的方法,可通过实例对象的“.”操作符调用;对象的属性则必须通过NJS实例对象的plusGetAttribute、plusSetAttribute方法操作。

示例:

  1. 导入类创建实例对象,调用对象的方法
    Objective-C代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // ...  
    }  
    // ...

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    // ...
InstanceObject.plusGetAttribute

获取实例对象的属性值,方法原型如下:

Object instancebject.plusGetAttribute( String name );

获取实例对象后,就可以调用其plusGetAttribute方法获取对象的属性值。

  • name:要获取对象的属性名称,如果指定的属性名称不存在,则获取属性失败,返回null。

注意:如果实例对象中存在“plusGetAttribute”同名的方法,则只能通过plus.ios.invoke()方法调用。

示例:

  1. 导入类创建实例对象,获取对象的属性值
    Objective-C代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    [hello updateName:@"Tester"];  
    // 获取其name属性值  
    NSString* name = hello.name;  
    NSLog(@"NjsHello Object's name: %@",name);  // 输出“NjsHello Object's name: Tester”  
    // ...  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    hello.updateName( "Tester" );  
    // 获取其name属性值  
    var name = hello.plusGetAttribute( "name" );  
    console.log( "NjsHello Object’s name: "+name );  // 输出“NjsHello Object’s name: Tester”  
    // ...
InstanceObject.plusSetAttribute

设置类对象的静态属性值,方法原型如下:

void instanceobject.plusSetAttribute( String name, Object value );

导入类对象后,就可以调用其plusSetAttribute方法设置类的静态属性值。

  • name:要设置的静态属性名称,如果指定的属性名称不存在,则设置属性失败,返回null。
  • value:要设置的属性值,其类型必须与Native层类对象的静态属性区配,否则设置操作不生效,将保留以前的值。

注意:如果导入的类对象中存在“plusSetAttribute”同名的静态方法,则只能通过plus.android.invoke()方法调用。

示例:

  1. 导入类创建实例对象,设置对象的属性值
    Java代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // 设置其name属性值  
    hello.name = @"Tester";  
    NSLog(@"NjsHello Object's name: %@",hello.name);  // 输出“NjsHello Object's name: Tester”  
    // ...  
    }  
    //...

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    // 设置其name属性值  
    hello.plusSetAttribute( "name", "Tester" );  
    console.log( "NjsHello Object’s name: "+hello.plusGetAttribute("name") ); // 输出“NjsHello Object’s name: Tester”  
    // ...

plus.ios.implements

在Objective-C中可以通过定义新类并实现Protocol的协议,并创建出新类对象作为代理对象,在NJS中则可实现协议快速创建代理对象,方法原型如下:

Object plus.ios.implements( String name, Object obj );

此方法返回一个NJS实例对象,映射到Native层中的代理对象,其父类为“NSObject”,并且实现obj中指定的协议方法。通常作为调用其它Native API的参数。

  • name:协议的名称,也可以是自定的字符串名称用于定义一个代理。
  • obj:JSON对象类型,代理实现方法的定义,JSON对象中key值为协议中定义的方法名称,必须保留方法名称中的“:”字符;value值为Function,方法参数必须与协议中定义方法的参数区配。

示例:

  1. 实现一个代理,并调用test方法触发调用代理的方法
    Objective-C代码:
    #import "njshello.h"  
    // 定义代理类NjsDelegate  
    @interface NjsDelegate: NSObject<NjsHelloEvent> {  
    -(void) onEventInvoked:(NSString*)name;  
    }  
    @end  
    // -------------------------------------------------------------  
    // 实现代理类NjsDelegate  
    @implementation NjsDelegate  
    -(void) onEventInvoked:(NSString*)name{  
    NSLog(@"Invoked Object's name:%@",name);  // 输出“Invoked Object’s name: Tester”  
    }  
    @end  
    // -------------------------------------------------------------  
    // 主函数  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // 调用updateName方法  
    [hello updateName:@"Tester"];  
    // 创建代理对象  
    NjsDelegate* delegate = [[NjsDelegate alloc] init];  
    // 设置监听对象  
    [hello setEventObserver:delegate];  
    // 调用test方法,触发代理事件  
    [hello test];  // 触发上面代理对象定义的onEventInvoked运行  
    // ...  
    }

    在NJS中不需要创建新的类对象,调用plus.ios.implements实现协议接口即可创建出代理对象,代码如下:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 实现协议“NjsHelloEvent”的代理  
    var hevent = plus.ios.implements( "NjsHelloEvent", {  
    "onEventInvoked:":function( name ){  
        console.log( "Invoked Object’s name: "+name ); // 输出“Invoked Object’s name: Tester”  
    }  
    } );  
    // 调用updateName方法  
    hello.updateName( "Tester" );  
    // 设置监听对象  
    hello.setEventObserver( hevent );  
    // 调用test方法,触发代理事件  
    hello.test(); // 触发上面代理对象定义的匿名函数运行  
    // ...

plus.ios.deleteObject

释放NJS中实例对象中映射的Native对象,方法原型如下:

void plus.ios.deleteObject( Object obj );

NJS中所有的实例对象(InstanceObject)都可以通过此方法释放,会将Native层的对象使用的资源进行释放。

  • obj:要释放的实例对象,如果obj对象不是有效的实例对象,则不执行对象的是否资源操作。

注意:此方法是可选的,如果不调用此方法释放实例对象,则在页面关闭时会自动释放所有对象;若对象占用较多的系统资源,则在业务逻辑处理完成时应该主动调用此方法释放资源,以提到程序的运行效率。

示例:

  1. 创建实例对象使用完成后,显式操作销毁对象
    Objective-C代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // 调用updateName方法  
    [hello updateName:@"Tester"];  
    // ...  
    // 使用完后销毁对象的实例  
    [hello release];  
    }

    NJS代码:

    // 导入测试类NjsHello  
    var NjsHello = plus.ios.importClass("NjsHello");  
    // 创建对象的实例  
    var hello = new NjsHello();  
    // 调用updateName方法  
    hello.updateName( "Tester" );  
    // ...  
    // 使用完后销毁对象的实例  
    plus.ios.deleteObject( hello );

plus.ios.currentWebview

获取当前Webview窗口对象的native层UIWebview实例对象,方法原型如下:

InstanceObject plus.ios.currentWebview();

UIWebview对象的API请参考Apple开发文档UIWebview

示例:

  1. 创建实例对象使用完成后,显式操作销毁对象
    Objective-C代码:
    // 获取当前Webview对象的实例  
    UIWebview* wv=self;  
    // 创建请求对象  
    NSURLRequest *req = [NSURLRequest requestWithURL:[NSURL URLWithString:@"http://www.dcloud.io/"]];  
    // 跳转页面  
    [web loadRequest:req];  
    // 释放对象  
    // 系统自动回收  
    // ...

    NJS代码:

    // 导入UIWebview、NSURLRequest、NSURL类  
    var Webview = plus.ios.importClass("UIWebview");  
    var NSURLRequest = plus.ios.import('NSURLRequest');  
    var NSURL = plus.ios.import('NSURL');  
    // 获取当前Webview对象的实例  
    var wv = plus.ios.currentWebview();  
    // 创建请求对象  
    var req = NSURLRequest.requestWithURL(NSURL.URLWithString('http://www.dcloud.io/'));  
    // 跳转页面  
    plus.ios.invoke(wv,"loadRequest:",req);  
    // 释放对象(可选)  
    plus.ios.deleteObject(req);  
    plus.ios.deleteObject(wv);  
    // ...

    完整API文档参考:HTML5+ API - Native.js for iOS

完整业务演示

Android

在Android手机桌面上创建快捷方式图标,这是原本只有原生程序才能实现的功能。即使使用Hybrid方案,也需要原生工程师来配合写插件。
下面我们演示如何直接使用js在Android手机桌面创建快捷方式,在HelloH5+应用中Native.JS页面中“Shortcut (Android)”可以查看运行效果。
这段代码是使用原生Java实现的创建快捷方式的代码,用于参考比对:

import android.app.Activity;  
import android.content.Intent;  
import android.graphics.BitmapFactory;  
import android.graphics.Bitmap;  
// 创建桌面快捷方式  
void createShortcut(){  
    // 获取主Activity  
    Activity main = this;  
    // 创建快捷方式意图  
    Intent shortcut = new Intent("com.android.launcher.action.INSTALL_SHORTCUT");  
    // 设置快捷方式的名称  
    shortcut.putExtra(Intent.EXTRA_SHORTCUT_NAME, "HelloH5+");  
    // 设置不可重复创建  
    shortcut.putExtra("duplicate",false);  
    // 设置快捷方式图标  
    Bitmap bitmap = BitmapFactory.decodeFile("/sdcard/icon.png");  
    shortcut.putExtra(Intent.EXTRA_SHORTCUT_ICON, bitmap);  
    // 设置快捷方式启动执行动作  
    Intent action = new Intent(Intent.ACTION_MAIN);  
    action.setComponent( main.getComponentName() );  
    shortcut.putExtra( Intent.EXTRA_SHORTCUT_INTENT, action );  
    // 广播创建快捷方式  
    main.sendBroadcast(shortcut);  
}

使用NJS实现时首先导入需要使用到的android.content.Intent、android.graphics.BitmapFactory类,按照Java代码中的方法对应转换成JavaScript代码。
其中快捷方式图标是通过解析本地png文件进行设置,在JavaScript中需要使用plus.io.* API转换成本地路径传递给Native API,完整代码如下:

var Intent=null,BitmapFactory=null;  
var main=null;  
document.addEventListener( "plusready", function() {//"plusready"事件触发时执行plus对象的方法  
    // ...  
    if ( plus.os.name == "Android" ) {  
        // 导入要用到的类对象  
        Intent = plus.android.importClass("android.content.Intent");  
        BitmapFactory = plus.android.importClass("android.graphics.BitmapFactory");  
        // 获取主Activity  
        main = plus.android.runtimeMainActivity();  
    }  
}, false);  
/**  
 * 创建桌面快捷方式  
 */  
function createShortcut(){  
    // 创建快捷方式意图  
    var shortcut = new Intent("com.android.launcher.action.INSTALL_SHORTCUT");  
    // 设置快捷方式的名称  
    shortcut.putExtra(Intent.EXTRA_SHORTCUT_NAME, "测试快捷方式");  
    // 设置不可重复创建  
    shortcut.putExtra("duplicate",false);  
    // 设置快捷方式图标  
    var iconPath = plus.io.convertLocalFileSystemURL("/icon.png"); // 将相对路径资源转换成系统绝对路径  
    var bitmap = BitmapFactory.decodeFile(iconPath);  
    shortcut.putExtra(Intent.EXTRA_SHORTCUT_ICON,bitmap);  
    // 设置快捷方式启动执行动作  
    var action = new Intent(Intent.ACTION_MAIN);  
    action.setClassName(main.getPackageName(), 'io.dcloud.PandoraEntry');  
    shortcut.putExtra(Intent.EXTRA_SHORTCUT_INTENT,action);  
    // 广播创建快捷方式  
    main.sendBroadcast(shortcut);  
    console.log( "桌面快捷方式已创建完成!" );  
}

注意:提交到云平台打包时需要添加Android权限才能在桌面创建快捷方式,在HBuilder工程中双击应用的“manifest.json”文件,切换到“代码视图”中在plus->distribute->google->permissions节点下添加权限数据:

"google": {  
    // ...  
    "permissions": [  
"<uses-permission android:name=\"com.android.launcher.permission.INSTALL_SHORTCUT\"/>"  
    ]  
}

如下图所示:
manifest.json中Android权限 permissions

iOS

在iOS手机上登录game center,一个游戏中心服务,这是原本只有原生程序才能实现的功能。即使使用Hybrid方案,也需要原生工程师来配合写插件。
下面我们演示如何直接使用js在iOS手机上登录game center,在HelloH5+应用中Native.JS页面中的“Game Center (iOS)”可以查看运行效果。
注意手机未开通game center则无法登陆,请先点击iOS自带的game center进行配置。
这段代码是使用原生Objective-C实现的登录game center的代码,用于参考比对。原生Objective-C代码的头文件Test.h中代码如下:

@interface Test: NSObject  
// 游戏玩家登录状态监听函数  
- (void)authenticationChanged:(NSNotification*)notification;  
// 获取游戏玩家状态信息  
- (void)playerInformation:(GKPlayer *)player;  
// 登录到游戏中心  
- (void)loginGamecenter;  
// 停止监听登录游戏状态变化  
- (void)logoutGamecenter;  
@end  

实现文件Test.m中代码如下:  
@implementation Test  
// 游戏玩家登录状态监听函数  
- (void)authenticationChanged:(NSNotification*)notification  
{  
    // 获取游戏玩家共享实例对象  
    GKLocalPlayer *player = notification.object;  
    if ( player.isAuthenticated ) {  
        // 玩家已登录认证,获取玩家信息  
        [self playerInformation:player];  
    } else {  
        // 玩家未登录认证,提示用户登录  
        NSLog(@"请登录!");  
    }  
    // 释放使用的对象  
    [player release];  
}  
// 获取游戏玩家状态信息  
- (void)playerInformation:(GKPlayer *)player  
{  
    // 获取游戏玩家的名称  
    NSLog(@"Name: %@",player.displayName);  
}  

// 登录到游戏中心  
- (void)loginGamecenter  
{  
    // 监听用户登录状态变更事件  
    NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];  
    [nc addObserver:self  
           selector:@selector(authenticationChanged)  
               name:@"GKPlayerAuthenticationDidChangeNotificationName"  
             object:nil];  
    // 获取游戏玩家共享实例对象  
    GKLocalPlayer *localplayer = [GKLocalPlayer localPlayer];  
    // 判断游戏玩家是否已经登录认证  
    if ( localplayer.isAuthenticated ) {  
        // 玩家已登录认证,获取玩家信息  
        [self playerInformation:localplayer];  
    } else {  
        // 玩家未登录认证,发起认证请求  
        [localplayer authenticateWithCompletionHandler:nil];  
        NSLog(@"登录中...");  
    }  
    // 释放使用的对象  
    [localplayer release];  
    [nc release];  
}  

// 停止监听登录游戏状态变化  
- (void)logoutGamecenter  
{  
    // 取消监听用户登录状态变化  
    NSNotificationCenter *nc = [NSNotificationCenter defaultCenter];  
    [nc removeObserver:self  
                  name:@"GKPlayerAuthenticationDidChangeNotificationName"  
                object:nil];  
    // 释放使用的对象  
    [nc release];  
}  
@end

使用NJS实现时可以按照Objective-C代码中的方法对应转换成JavaScript代码,最关键的代码是loginGamecenter方法中对用户登录状态的监听,需调用NSNotificationCenter对象的“addObserver:selector:name:object”方法,

  1. addObserver:后要求传入一个实例对象用于查找selector参数中指定的方法,在Objective-C中通常将对象自身(self)传入,但在NJS中没有此概念,因此需使用plus.ios.implements方法来创建一个新的对象:
    var delegate = plus.ios.implements("NSObject",{"authenticationChanged:":authenticationChanged});
    第一个参数“NSObject”表示对象的类型,第二个参数中的JSON对象表明对象拥有的方法,“authenticationChanged”方法是delegate对象的方法。
  2. selector:后要传入一个类函数指针,在Objective-C中通过“@selector”指令可选择函数指针,在NJS中则需使用plus.ios.newObject方法来创建一个函数对象:
    plus.ios.newObject("@selector","authenticationChanged:")
    第一个参数需固定值为“@selector”,表示创建的是类函数指针对象,第二个参数。
    在"plusready"事件中导入GKLocalPlayer和NSNotificationCenter类,并调用登录方法longinGamecenter()。

完整JavaScript代码如下:

// 处理"plusready"事件  
var bLogin=false;  
document.addEventListener( "plusready", function() {  
    // ...  
    if ( plus.os.name == "iOS" ) {  
        GKLocalPlayer  = plus.ios.importClass("GKLocalPlayer");  
        NSNotificationCenter = plus.ios.importClass("NSNotificationCenter");  
        longinGamecenter();  
    } else {  
        alert("欢迎您");  
        bLogin = true;  
        setTimeout( function(){  
            plus.ui.toast( "此平台不支持Game Center功能!" );  
        }, 500 );  
    }  
}, false);  

var GKLocalPlayer=null,NSNotificationCenter=null;  
var delegate=null;  

// 游戏玩家登录状态监听函数  
function authenticationChanged( notification ){  
    // 获取游戏玩家共享实例对象  
    var player = notification.plusGetAttribute("object");  
    if ( player.plusGetAttribute("isAuthenticated") ) {  
        // 玩家已登录认证,获取玩家信息  
        playerInformation(player);  
        bLogin = true;  
    } else {  
        // 玩家未登录认证,提示用户登录  
        alert("请登录");  
        bLogin = false;  
    }  
    // 释放使用的对象  
    plus.ios.deleteObject(player);  
}  

// 获取游戏玩家状态信息  
function playerInformation( player ){  
    var name = player.plusGetAttribute("displayName");  
    alert( name+" 已登录!" );  
}  

// 登录到游戏中心  
function longinGamecenter(){  
    if ( bLogin ){  
        return;  
    }  
    // 监听用户登录状态变更事件  
    var nc = NSNotificationCenter.defaultCenter();  
    delegate = plus.ios.implements("NSObject",{"authenticationChanged:":authenticationChanged});  
    nc.addObserverselectornameobject(delegate,  
        plus.ios.newObject("@selector","authenticationChanged:"),  
        "GKPlayerAuthenticationDidChangeNotificationName",  
        null);  
    // 获取游戏玩家共享实例对象  
    var localplayer = GKLocalPlayer.localPlayer();  
    // 判断游戏玩家是否已经登录认证  
    if ( localplayer.isAuthenticated() ) {  // localplayer.plusGetAttribute("isAuthenticated")  
        // 玩家已登录认证,获取玩家信息  
        playerInformation( localplayer );  
        bLogin = true;  
    } else {  
        // 玩家未登录认证,发起认证请求  
        localplayer.authenticateWithCompletionHandler(null);  
        alert( "登录中..." );  
    }  
    // 释放使用的对象  
    plus.ios.deleteObject(localplayer);  
    plus.ios.deleteObject(nc);  
}  

// 停止监听登录游戏状态变化  
function stopGamecenterObserver()  
{  
    // 取消监听用户登录状态变化  
    var nc = NSNotificationCenter.defaultCenter();  
    nc.removeObservernameobject(delegate,"GKPlayerAuthenticationDidChangeNotificationName",null);  
    plus.ios.deleteObject(nc);  
    plus.ios.deleteObject(delegate);  
    delegate = null;  
}

注意

  1. 提交到云平台打包时需要添加Game Center API的系统库(framework)才能正确调用,在HBuilder工程中双击应用的“manifest.json”文件,切换到“代码视图”中在plus->distribute->apple->frameworks节点下添加要引用的系统Framework:
    "apple": {  
    "devices": "universal",  
    "frameworks": [  
        "GameKit.framework"  
    ]  
    }

    ,如下图所示:
    HBuilder frameworks

  2. 正式发布提交到AppStore时,在配置苹果开发者网站上配置App ID需要选中“Game Center”服务:
    Game Center

开发注意和建议用途

Native.js的运行性能仍然不比纯原生应用;JS与Native之间的数据交换效率并不如在js内部的数据交换效率;基于如上原因,有几点开发建议:

  • 以标准web 代码为主,当遇到web能力不足的时候,调用Native.js。
  • 以标准web 代码为主,当遇到web性能不足的时候,需要分析,
    if ((原生进行运算的效率-js与原生通讯的损耗)>纯web的效率){
    使用Native.js
    }else{
    还应该使用纯js
    }
  • 应避免把程序设计为在短时间内并发触发Native.js代码

调试

使用safari和chrome的控制台调试HBuilder的5+App时,一样可以调试NJS对象,即可以在浏览器控制台中查看各种原生对象的属性和方法,如下图所示,57行设了断点,watch了Intent对象,并在右边展开了该对象的所有属性方法:
Chrome Debug
关于如何在浏览器控制台调试HBuilder的5+App,请参考HBuilder的5+App开发入门教程。

开发资源

iOS 官方在线文档:https://developer.apple.com/library/ios/navigation/
Android 官方在线文档:https://developer.android.com/reference/packages.html
演讲视频:http://v.youku.com/v_show/id_XNzYzNTcwNDI4.html

高级API

有前述的常用API,已经可以完成各项业务开发。此处补充的高级API,是在熟悉NJS后,为了提升性能而使用的API。高级API无法直接用“.”操作符使用原生对象的方法,在debug时也无法watch原生对象,但高级API性能高于常规API。
虽然导入类对象(plus.android.importClass和plus.ios.importClass)后,可以方便的通过“.”操作符来访问对象的常量、调用对象的方法,但导入类对象也需要消耗较多的系统资源,所以在实际开发时应该尽可能的减少导入类对象,以提高程序效率。可以参考以下依据进行判断:

  1. 如导入的类特别复杂,继承自很多基类,方法和属性特别多则考虑不导入类;
  2. 对导入类是否需要频繁操作,若导入类仅是为了实例化,并作为调用其它API的参数,则不应该导入类;
  3. 在同一页面中是否导入了很多类?如果导入太多则需要考虑减少导入类的数目。

如果我们不导入类对象则无法通过new操作符实例化类对象,这时可通过plus.ios.newObject()、plus.android.newObject()方法来创建实例对象,如下:

// iOS平台创建NSDictionary的实例对象  
var ns = plus.ios.newObject( "NSDictionary" );  

// Android平台创建Intent的实例对象  
var intent = plus.android.newObject( "android.content.Intent" );

API on Android

plus.android.newObject

不导入类对象直接创建类的实例对象,方法原型如下:

InstanceObject plus.android.newObject( String classname, Object...args );

此方法对Native层中对类进行实例化操作,创建一个类的实体并返回NJS层的实例对象。相比导入类对象后使用new操作符创建对象效率要高。

  • classname:要创建实例对象的类名,类名必须是完整的命名空间,使用“.”分隔符(如“android.app.AlertDialog”),如果需要创建内部类对象需要使用“$”分割符(如“android.app.AlertDialog$Builder”)。如果指定的类名不存在,则创建对象失败,返回null。
  • args:调用类构造函数的参数,其类型和数目必须与Native层Java类构造函数区配,否则无法创建类对象,将返回null。

注意:由于没有导入类对象,所以通过此方法创建的实例对象无法通过“.”操作符直接调用对象的方法,而必须使用plus.android.invoke方法来调用。

示例:

  1. 不导入类创建实例对象
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
    // 创建对象的实例  
    var hello = plus.android.newObject( "io.dcloud.NjsHello" );  
    // ...

plus.android.getAttribute

不导入类对象,则无法通过类对象并访问类的静态属性,需调用以下方法获取类的静态属性值,方法原型如下:

Object plus.android.getAttribute( String|Object obj, String name );

此方法也可以获取类对象或实例对象的属性值,如果是类对象获取的则是类的静态属性,如果是实例对象则获取的是对象的非静态属性。

  • obj:若是String类型,表示要获取静态属性值的类名,类名必须是完整的命名空间(使用"."分割);若是ClassObject类型,表示要获取静态属性的类对象;若是InstanceObject类型,表示要获取属性值的实例对象。
  • name:要获取的属性名称,如果指定的属性名称不存在,则获取属性失败,返回null。

注意:同样导入类对象后也可以调用此方法,obj参数类型为ClassObject时,其作用与ClassObject.plusSetAttribute方法一致。obj参数类型为InstanceObject时,其作用与InstanceObject.plusSetAttribute方法一致。

示例:

  1. 不导入类对象获取类的静态常量属性
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 获取类的静态常量属性  
    int type = NjsHello.CTYPE;  
    System.out.printf( "NjsHello Final's value: %d", type );  // 输出“NjsHello Final's value: 1”  
    // 获取类的静态属性  
    int count = NjsHello.count;  
    System.out.printf( "NjsHello Static's value: %d", count );  // 输出“NjsHello Static's value: 0”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
    // 访问类的静态常量属性  
    var type = plus.android.getAttribute( "io.dcloud.NjsHello", "CTYPE" );  
    console.log( "NjsHello Final's value: "+type ); // 输出“NjsHello Final's value: 1”  
    // ...
  2. 不导入类对象,创建实例对象,并获取其name属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    // 获取其name属性值  
    String name = hello.name;  
    System.out.printf( "NjsHello Object's name: %s", name );  // 输出“NjsHello Object's name: Tester”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
    // 创建对象的实例  
    var hello = plus.android.newObject( "io.dcloud.NjsHello" );  
    // 获取其name属性值  
    var name = plus.android.getAttribute( hello, "name" );  
    console.log( "NjsHello Object's name: "+name );  // 输出“NjsHello Object's name: Tester”  
    // ...

plus.android.setAttribute

若没有导入类对象,则无法通过类对象设置类的静态属性值,需调用以下方法设置类的静态属性值,方法原型如下:

void plus.android.setAttribute( String|Object obj, String name, Object value );

此方法也可以设置类对象或实例对象的属性值,如果是类对象设置的则是类的静态属性,如果是实例对象则设置的是对象的非静态属性。

  • obj:若是String类型,表示要设置静态属性值的类名,类名必须是完整的命名空间(使用"."分割);若是ClassObject类型,表示要设置静态属性的类对象;若是InstanceObject类型,表示要设置属性值的实例对象。
  • name:要设置的属性名称,如果指定的属性名称不存在,则设置属性失败,返回null。
  • value:要设置的属性值,其类型必须与Native层obj对象的属性区配,否则设置操作不生效,将保留以前的值。

注意:同样导入类对象后也可以调用此方法,obj参数类型为ClassObject时,其作用与ClassObject.plusSetAttribute方法一致。obj参数类型为InstanceObject时,其作用与InstanceObject.plusSetAttribute方法一致。

示例:

  1. 不导入类对象设置类的静态属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 设置类的静态属性值  
    NjsHello.count = 2;  
    System.out.printf( "NjsHello Static's value: %d", NjsHello.count );  // 输出“NjsHello Static's value: 2”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
    // 设置类的静态属性值  
    plus.android.setAttribute( "io.dcloud.NjsHello", "count", 2 );  
    console.log( "NjsHello Static's value: "+plus.android.getAttribute("io.dcloud.NjsHello","count") ); // 输出“NjsHello Static's value: 2”  
    // ...
  2. 导入类对象,创建实例对象,并设置其name属性值
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    // 设置其name属性值  
    hello.name = "Tester";  
    System.out.printf( "NjsHello Object's name: %s", hello.name );  // 输出“NjsHello Object's name: Tester”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
    // 创建对象的实例  
    var hello = plus.android.newObject( "io.dcloud.NjsHello" );  
    // 设置其name属性值  
    plus.android.setAttribute( hello, "name", "Tester" );  
    console.log( "NjsHello Object's name: "+hello.plusGetAttribute("name") ); // 输出“NjsHello Object's name: Tester”  
    // ...

plus.android.invoke

若没有导入类对象,则无法通过实例对象的“.”操作符调用其成员方法,需通过以下方法调用实例对象的成员方法,方法原型如下:

Object plus.android.invoke( String|Object obj, String name, Object... args );

此方法也可以调用类对象或实例对象的方法,如果是类对象则调用的是类的静态方法,如果是实例对象则调用的是对象的普通成员方法。函数返回值是调用Native层方法运行后的返回值,Native对象的方法无返回值则返回undefined。

  • obj:若是String类型,表示要调用静态方法的类名,类名必须包含完整的包名;若是ClassObject类型,表示要调用静态方法的类对象;若是InstanceObject类型,表示要调用成员方法的实例对象。
  • name:要调用的方法名称,如果指定的方法不存在,则调用方法失败,返回值为null。
  • args:调用方法的参数,其类型和数目必须与Native层对象方法的函数区配,否则无法调用对象的方法,将返回null。

注意:同样导入类对象后也可以调用此方法,其作用与通过类对象或实例对象的“.”操作符调用方法作用一致。

示例:
1.不导入类对象,调用类的静态方法
Java代码:

import io.dcloud.NjsHello;  
//...  
public class Test {  
public static void main( String args[] ) {  
    // 调用类的静态方法  
    NjsHello.testCount();  
    //...  
}  
//...  
}

NJS代码:

// 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
// 调用类的静态方法  
plus.android.invoke( "io.dcloud.NjsHello", "testCount" );  
// ...
  1. 不导入类对象,创建实例对象,并调用其updateNmae方法
    Java代码:
    import io.dcloud.NjsHello;  
    //...  
    public class Test {  
    public static void main( String args[] ) {  
    // 创建对象的实例  
    NjsHello hello = new NjsHello();  
    // 调用updateName方法  
    hello.updateName( "Tester" );  
    System.out.printf( "NjsHello Object's name: %s", name );  // 输出“NjsHello Object's name: Tester”  
    //...  
    }  
    //...  
    }

    NJS代码:

    // 不调用plus.android.importClass("io.dcloud.NjsHello")导入类NjsHello  
    // 创建对象的实例  
    var hello = plus.android.newObject( "io.dcloud.NjsHello" );  
    // 调用updateName方法  
    plus.android.invoke( hello, "updateName", "Tester" );  
    console.log( "NjsHello Object's name: "+hello.getAttribute("name") ); // 输出“NjsHello Object's name: Tester”  
    // ...

    完整API文档参考:HTML5+ API - Native.js for Android

API on iOS

plus.ios.newObject

不导入类对象直接创建类的实例对象,方法原型如下:

InstanceObject plus.ios.newObject( String classname, Object..args );

此方法会在Native层中对类进行实例化操作,创建一个类的实体并返回NJS层的类实例对象。相比导入类对象后使用new操作符创建对象效率要高。

  • classname:要创建实例对象的类名,如果指定的类名不存在,则创建对象失败,返回null。
  • args:调用类构造函数的参数,其类型和数目必须与Native层对象构造函数区配,否则无法创建类对象,将返回null。

注意:由于没有导入类对象,所以通过此方法创建的实例对象无法通过“.”操作符直接调用对象的方法,而必须使用plus.ios.invoke方法来调用。classname参数值为“@selector”表示需要创建一个函数指针对象,与Objective-C中的@selector指令功能相似,args参数为函数的名称,此时函数的名称需要包含“:”字符。

示例:

  1. 不导入类创建实例对象
    Objective-C代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // ...  
    }

    NJS代码:

    // 未导入“NjsHello”类  
    // 创建对象的实例  
    var hello = plus.ios.newObject( "NjsHello" );  
    // ...

plus.ios.invoke

若没有导入类对象,则无法通过实例对象的“.”操作符调用其成员方法,需通过以下方法调用实例对象的成员方法,方法原型如下:

Object plus.ios.invoke( String|Object obj, String name, Object... args );

此方法也可以调用类对象或实例对象的方法,如果是类对象则调用的是类的静态方法,如果是实例对象则调用的是对象的普通成员方法。函数返回值是调用Native层方法运行后的返回值,Native对象的方法无返回值则返回undefined。

  • obj:若是String类型,表示要调用静态方法的类名,类名必须包含完整的包名;若是ClassObject类型,表示要调用静态方法的类对象;若是InstanceObject类型,表示要调用成员方法的实例对象。
  • name:要调用的方法名称,必须保留方法名称中的“:”字符,如果指定的方法不存在,则调用方法失败,返回值为null。
  • args:调用方法的参数,其类型和数目必须与Native层对象方法的函数区配,否则无法调用对象的方法,将返回null。

注意:同样导入类对象后也可以调用此方法,其作用与通过类对象或实例对象的“.”操作符调用方法作用一致。

示例:

  1. 不导入类创建实例对象,并调用updateName方法
    Objective-C代码:
    #import "njshello.h"  
    int main( int argc, char *argv[] )  
    {  
    // 创建对象的实例  
    NjsHello* hello = [[NjsHello alloc] init];  
    // 调用updateName方法  
    [hello updateName:@"Tester"];  
    NSLog(@"NjsHello Object's name: %@",hello.name);  // 输出“NjsHello Object's name: Tester”  
    // ...  
    }

    NJS代码:

    // 未导入“NjsHello”类  
    // 创建对象的实例  
    var hello = plus.ios.newObject( "NjsHello" );  
    // 调用updateName方法  
    plus.ios.invoke( hello, "updateName", "Tester" );  
    console.log( "NjsHello Object's name: "+hello.getAttribute("name") ); // 输出“NjsHello Object's name: Tester”  
    // ...

    完整API文档参考:HTML5+ API - Native.js for iOS

性能优化

调整代码结构优化

前面章节中我们介绍如何通过NJS调用Native API来显示系统提示框,在真机运行时会发现第一次调用时会有0.5s左右的延时,再次调用则不会延时。这是因为NJS中导入类对象操作会花费较长的时间,再次调用时由于类对象已经导入过,会能很快执行完毕。因此可以调整代码结构进行优化,在页面打开后触发的“plusready”事件中进行类对象的导入操作,从而避免第一次调用的延时。

Android平台调整NJS代码结构如下:

// 保存Android导入对象和全局环境对象  
var AlertDialog=null,mainActivity=null;  
// H5+事件处理  
document.addEventListener("plusready",function(){  
    switch ( plus.os.name ) {  
        case "Android":  
        // 程序全局环境对象,内部自动导入Activity类  
        mainActivity = plus.android.runtimeMainActivity();  
        // 导入AlertDialog类  
        AlertDialog = plus.android.importClass("android.app.AlertDialog");  
        break;  
        default:  
        break;  
    }  
},false);  
//...  
/**  
 * 在Android平台通过NJS显示系统提示框  
 */  
function njsAlertForAndroid(){  
    // 创建提示框构造对象,构造函数需要提供程序全局环境对象,通过plus.android.runtimeMainActivity()方法获取  
    var dlg = new AlertDialog.Builder(mainActivity);  
    // 设置提示框标题  
    dlg.setTitle("自定义标题");  
    // 设置提示框内容  
    dlg.setMessage("使用NJS的原生弹出框,可自定义弹出框的标题、按钮");  
    // 设置提示框按钮  
    dlg.setPositiveButton("确定(或者其他字符)",null);  
    // 显示提示框  
    dlg.show();  
}  
//...

iOS平台调整NJS代码结构如下:

// 保存iOS平台导入的类对象  
var UIAlertView=null;  
// H5+事件处理  
document.addEventListener("plusready",function(){  
    switch ( plus.os.name ) {  
        case "iOS":  
        // 导入UIAlertView类  
        UIAlertView = plus.ios.importClass("UIAlertView");  
        break;  
        default:  
        break;  
    }  
},false);  
//...  
/**  
 * 在iOS平台通过NJS显示系统提示框  
 */  
function njsAlertForiOS(){  
    // 创建UIAlertView类的实例对象  
    var view = new UIAlertView();  
    // 设置提示对话上的内容  
    view.initWithTitlemessagedelegatecancelButtonTitleotherButtonTitles("自定义标题" // 提示框标题  
        , "使用NJS的原生弹出框,可自定义弹出框的标题、按钮" // 提示框上显示的内容  
        , null // 操作提示框后的通知代理对象,暂不设置  
        , "确定(或者其他字符)" // 提示框上取消按钮的文字  
        , null ); // 提示框上其它按钮的文字,设置为null表示不显示  
    // 调用show方法显示提示对话框  
    view.show();  
}  
//...

使用高级API优化

前面章节中我们提到导入类对象会消耗较多的系统资源,导入过多的类对象会影响性能。在高级API中提供一组接口可以在不导入类对象的情况下调用Native API,从而提升代码运行性能。

Android平台使用高级API优化代码如下:

// 保存Android导入对象和全局环境对象  
var mainActivity=null;  
// H5+事件处理  
document.addEventListener("plusready",function(){  
    switch ( plus.os.name ) {  
        case "Android":  
        // 程序全局环境对象,内部自动导入Activity类  
        mainActivity = plus.android.runtimeMainActivity();  
        break;  
        default:  
        break;  
    }  
},false);  
//...  
/**  
 * 在Android平台通过NJS显示系统提示框  
 */  
function njsAlertForAndroid(){  
    // 由于Builder类是android.app.AlertDialog类的内部类,这里需要使用$符号分割  
    var dlg = plus.android.newObject("android.app.AlertDialog$Builder",mainActivity);  
    // 设置提示框标题  
    plus.android.invoke(dlg,"setTitle","自定义标题");  
    // 设置提示框内容  
    plus.android.invoke(dlg,"setMessage","使用NJS的原生弹出框,可自定义弹出框的标题、按钮");  
    // 设置提示框按钮  
    plus.android.invoke(dlg,"setPositiveButton","确定(或者其他字符)",null);  
    // 显示提示框  
    plus.android.invoke(dlg,"show");  
}  
//...

iOS平台使用高级API优化代码如下:

/**  
 * 在iOS平台通过NJS显示系统提示框  
 */  
function njsAlertForiOS(){  
    // 创建UIAlertView类的实例对象  
    var view = plus.ios.newObject("UIAlertView");  
    // 设置提示对话上的内容,这里的方法名称中必须包含':'字符  
    plus.ios.invoke(view,"initWithTitle:message:delegate:cancelButtonTitle:otherButtonTitles:"  
        ,"自定义标题" // 提示框标题  
        , "使用NJS的原生弹出框,可自定义弹出框的标题、按钮" // 提示框上显示的内容  
        , null // 操作提示框后的通知代理对象,暂不设置  
        , "确定(或者其他字符)" // 提示框上取消按钮的文字  
        , null ); // 提示框上其它按钮的文字,设置为null表示不显示  
    // 调用show方法显示提示对话框,在JS中使用()语法调用对象的方法  
    plus.ios.invoke(view,"show");  
}  
//...
收起阅读 »

如何自定义mui控件样式

控件样式 mui

mui以iOS 7的UI为基础,补充了部分Android平台特有的UI组件,整体色系比较素雅;但在实际项目,往往需要根据UED的设计,调整色系及排版布局,此时就涉及mui控件样式的重定义问题,本文以hello mui中导航栏默认样式页面为示例,讲解如何自定义mui控件样式。原始界面如图:
图片
我们希望重定义为如下界面:
图片
操作步骤如下:
1、通过chrome浏览器模拟手机浏览器打开对应页面,初级用户参考这里这里
2、在需要重定义样式的控件(导航栏)上,点击右键,选择“审查元素”,会打开chrome控制台,控制台左侧会显示对应控件的DOM结构,右侧会显示作用在该控件上的CSS定义,如下图所示;在左侧DOM区,切换DOM节点,上方模拟器对应控件及右侧作用的CSS定义均会变化;


3、分析需要重定义的内容,从效果图上直观来看,需要将导航条背景色修改为蓝色,然后将返回图标及导航标题修改为白色;
4、通过DOM结构分析,应该较容易的看出,header节点表示导航条控件,那我们就DOM区选择header节点,然后分析右侧模拟器,会看到header上的所有css定义,找到background-color定义,如下所示:

5、单击background-color对应颜色值,修改成UED设计师提供的蓝色,比如#253ff2,这时上方模拟器上导航条会实时变成蓝色,如下:

6、确认颜色值正确后,将修改代码复制到对应页面中,本示例为titlebar.html,保存如下代码(需放在mui.min.css引用之后),这样就可以覆盖mui默认的背景色定义:

.mui-bar{  
    background-color: #253FF2;  
}

7、此时再刷新当前页面,就会看到背景色已变;
8、同样的方式,找到标题栏文字颜色定义,找文字颜色时要定位到对应文字的最小节点,对于如下的DOM节点,

<header class="mui-bar mui-bar-nav">  
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
    <h1 class="mui-title">导航栏</h1>  
</header>

我们应该优先看h1的css定义,会发现color定义为#000,修改为#fff即可,如下:


修改后效果:
图片
同样复制保存css定义,如下:

.mui-title{  
    color:#fff  
}

9、最后,还剩一个左侧返回箭头的颜色值,我们也以同样的方法修改,左侧DOM区选中<a>节点,然后在右侧css区查看css定义,找到color颜色定义的地方,然后同样修改为#fff,修改结果如下:

10、以同样方式拷贝css代码到html文件,最终复写的css代码为

.mui-bar{  
    background-color: #253FF2;  
}  
.mui-title{  
     color:#fff;  
}  
a{  
    color:#fff;  
}

经过如上几个步骤,我们就完成了导航条的自定义,当然在实际开发中,我们可以更为灵活,比如<a>的css定义牵扯范围太广,我们仅在返回的a节点上增加style属性,在style中定义color,例如:

<header class="mui-bar mui-bar-nav">  
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>  
    <h1 class="mui-title">导航栏</h1>  
</header>
继续阅读 »

mui以iOS 7的UI为基础,补充了部分Android平台特有的UI组件,整体色系比较素雅;但在实际项目,往往需要根据UED的设计,调整色系及排版布局,此时就涉及mui控件样式的重定义问题,本文以hello mui中导航栏默认样式页面为示例,讲解如何自定义mui控件样式。原始界面如图:
图片
我们希望重定义为如下界面:
图片
操作步骤如下:
1、通过chrome浏览器模拟手机浏览器打开对应页面,初级用户参考这里这里
2、在需要重定义样式的控件(导航栏)上,点击右键,选择“审查元素”,会打开chrome控制台,控制台左侧会显示对应控件的DOM结构,右侧会显示作用在该控件上的CSS定义,如下图所示;在左侧DOM区,切换DOM节点,上方模拟器对应控件及右侧作用的CSS定义均会变化;


3、分析需要重定义的内容,从效果图上直观来看,需要将导航条背景色修改为蓝色,然后将返回图标及导航标题修改为白色;
4、通过DOM结构分析,应该较容易的看出,header节点表示导航条控件,那我们就DOM区选择header节点,然后分析右侧模拟器,会看到header上的所有css定义,找到background-color定义,如下所示:

5、单击background-color对应颜色值,修改成UED设计师提供的蓝色,比如#253ff2,这时上方模拟器上导航条会实时变成蓝色,如下:

6、确认颜色值正确后,将修改代码复制到对应页面中,本示例为titlebar.html,保存如下代码(需放在mui.min.css引用之后),这样就可以覆盖mui默认的背景色定义:

.mui-bar{  
    background-color: #253FF2;  
}

7、此时再刷新当前页面,就会看到背景色已变;
8、同样的方式,找到标题栏文字颜色定义,找文字颜色时要定位到对应文字的最小节点,对于如下的DOM节点,

<header class="mui-bar mui-bar-nav">  
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a>  
    <h1 class="mui-title">导航栏</h1>  
</header>

我们应该优先看h1的css定义,会发现color定义为#000,修改为#fff即可,如下:


修改后效果:
图片
同样复制保存css定义,如下:

.mui-title{  
    color:#fff  
}

9、最后,还剩一个左侧返回箭头的颜色值,我们也以同样的方法修改,左侧DOM区选中<a>节点,然后在右侧css区查看css定义,找到color颜色定义的地方,然后同样修改为#fff,修改结果如下:

10、以同样方式拷贝css代码到html文件,最终复写的css代码为

.mui-bar{  
    background-color: #253FF2;  
}  
.mui-title{  
     color:#fff;  
}  
a{  
    color:#fff;  
}

经过如上几个步骤,我们就完成了导航条的自定义,当然在实际开发中,我们可以更为灵活,比如<a>的css定义牵扯范围太广,我们仅在返回的a节点上增加style属性,在style中定义color,例如:

<header class="mui-bar mui-bar-nav">  
    <a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left" style="color: #fff;"></a>  
    <h1 class="mui-title">导航栏</h1>  
</header>
收起阅读 »

PC上使用chrome浏览器模拟手机浏览器

chrome

chrome浏览器提供了模拟手机浏览器的功能,这样在开发mobile app的过程中,就可以通过pc端的chrome浏览器快速模拟不同手机浏览器的显示效果。模拟方法如下:
1、通过pc端的chrome浏览器打开要预览的页面
2、在页面上右键,选择“审查元素”,打开chrome控制台;
3、选择右下角的“Show drawer”按钮,如下截图:


4、选择“Emulation”选项,如下图所示:

5、通过Model选择要模拟的手机类型,如图:

6、刷新当前页面,即可看到在手机上的模拟显示效果;
7、若要模拟手机端的touch事件,则勾选Sensors选项,并勾选“Emulate touch screen”即可,如下;

继续阅读 »

chrome浏览器提供了模拟手机浏览器的功能,这样在开发mobile app的过程中,就可以通过pc端的chrome浏览器快速模拟不同手机浏览器的显示效果。模拟方法如下:
1、通过pc端的chrome浏览器打开要预览的页面
2、在页面上右键,选择“审查元素”,打开chrome控制台;
3、选择右下角的“Show drawer”按钮,如下截图:


4、选择“Emulation”选项,如下图所示:

5、通过Model选择要模拟的手机类型,如图:

6、刷新当前页面,即可看到在手机上的模拟显示效果;
7、若要模拟手机端的touch事件,则勾选Sensors选项,并勾选“Emulate touch screen”即可,如下;

收起阅读 »

IOS平台以Widget方式集成HTML5+SDK方法

SDK

5+ SDKWidget方式集成WebView方式集成 将不再继续维护支持,相关功能已迁移到uni小程序 SDK,因此建议开发者尽快将应用升级到uni-app项目。

开发者可参考SDK中示例 “HBuilder-Integrate”
最新SDK下载地址

1 概述

HTML5+ SDK 可以按照“独立应用”、“Widget”和“WebView”三种方式进行集成,三种集成方式各有优点。
独立应用集成方式:使用独立应用方式,开发者需要将HTML5+SDK生成的首页面设置为当前View的subView。HTML5+ SDK将对应用进行管理。
Widget集成方式:运行方式和独立运行方式类似,开发者在集成时可在需要的位置启动HTML5+ SDK,显示指定的HTML5+应用。原生App中集成uni-app也需使用本集成方式。
Webview集成方式:用户可在任何页面将HTML5+ SDK的页面以Webview的形式独立显示,显示的Webview页面。

2 导入SDK Lib文件和头文件

在工程中引入HTML5+ SDK扩展功能的.a文件,开发者可以根据需求添加不同的扩展插件。必须要引入的是liblibPDRCore.a,liblibUI.a,liblibNativeUI.a,liblibNavigator.a,libcoreSupport.a,这几个库是HTML5+SDK运行的基础库文件。
注意: 开发者在使用示例工程时建议不要把工程从SDK目录里挪出来,如果要移动工程可以通过修改library search path ,framework search path 和head search path来解决报错。


工程中引入HTML5+ SDK 中提供的头文件。

3 添加代码编译测试

  1. 开发者初始化PDRCore句柄。
  2. 设置指定的View为HTML5+ SDK的父View,用于显示HTML5+ SDK的页面
  3. 调用PDRCore接口设置要启动应用的APPID
  4. 调用PDRCore句柄的start接口启动应用,HTML5+ Runtime将会根据用户 指定APPID启动指定的应用
- (void)viewDidLoad  
{  
[super viewDidLoad];  
PDRCore* pCoreHandle = [PDRCore Instance];  
[pCoreHandle setContainerView:self.view];  
[pCoreHandle setAutoStartAppid:@"HelloH5"];  
[pCoreHandle start];          
}

4 导入应用并配置

4.1 添加应用

在离线打包之前,用户需要将已经开发完成的HTML5+ 应用导入到Xcode工程中。

4.1.1 应用导入

需要将开发完成的HTML5+ 应用拷贝到Pandora/apps/[appid]/www目录下。

4.1.2 manifes.json文件编写

请参考manifest.json 文件配置指导手册

4.2 配置应用的插件功能

开发者需要将html5+ SDK里的PandoraAPI.bundle引入到开发中的工程中。开发者如开发了HTML5+扩展插件,需要修改PandoraAPI.bundle下的feature.plist文件,在文件中添加扩展插件JS类名和原生类名的对应关系。

6 常用类说明

PDRCore

常用接口说明:

+ (PDRCore*)Instance;

获取Core单例对象
返回值:
PDRCore 单例的PDRCore对象

- (int)setAppsRunPath:(NSString*)workPath;

设置应用运行时目录,应用运行时产生的文件在该目录下生成,当应用 runmode为liberate时将把资源拷贝到该目录
参数说明:
workPath 应用运行时目录
返回值:
int 0 成功

- (int)setAppsInstallPath:(NSString*)installPath;

设置runtime应用的安装目录,该地址为安装包中携带的应用资源位置
参数说明:
installPath 应用的安装目录
返回值:
int 0 成功

- (void)setInnerVersion:(NSString*)innerVersion;

设置HTML5+ SDK运行版本
参数说明:
HTML5+ SDK运行版本号

- (int)setDocumethPath:(NSString*)documentPath;

设置HTML5+ SDK文档目录
参数说明:
documentPath 应用的文档目录
返回值:
int 0 成功

- (int)setDownloadPath:(NSString*)downlaodPath;

设置runtime下载目录
参数说明:
downloadPath 应用下载文件的路径
返回值:
int 0 成功

- (int)setAutoStartAppid:(NSString*)appid;

设置runtiem启动时自动运行的APP
参数说明:
appid 默认启动应用的APPID
返回值:
int 0 成功

- (int)setContainerView:(UIView*)containerView;

设置runtime根视图的父亲View
参数说明:
containerView 要显示HTML5+SDK的父View
返回值:
int 0 成功

- (PDRCoreApp*)openAppWithAppid:(NSString*)appId  
                       withArgs:(NSString*__nullable)args  
                   withDelegate:(id<PDRCoreAppWindowDelegate>__nullable)delegate;

@param appId appId
@param args 传入启动参数,可以在页面中通过 plus.runtime.arguments 参数获取
@param delegate 代理
@return PDRCoreApp实例对象

- (int)regPluginWithName:(NSString*)pluginName  
             impClassName:(NSString*)impClassName  
                    type:(PDRExendPluginType)pluginType  
               javaScript:(NSString*)javaScript;

注册第三方扩展的HTML5+插件
参数说明:
pluginName 插件名称JS文件中定义的名字
impClassName 插件对应的实现类名
pluginType 插件类型 详情: PDRExendPluginType
javaScript js实现 为javascript文本
返回值:
int 0 成功

- (int)start;

正常启动runtime,使用改方法启动runtime具有全部功能,包括具有应用管理、窗口管理、插件管理、权限管理、资源管理等功能

- (int)startAsWebClient;

启动runtime,使用该方法启动的runtime不具有应用管理窗口管理功能,当需要显示页面时,需要自己创建PDRCoreAppFrame

PDRCoreAppFrame

常用接口说明

- (PDRCoreAppFrame*)initWithId:(NSString*)frameID loadURL:(NSString*)pagePath  frame:(CGRect)frame;

创建runtime页面
参数说明:
frameID 页面标示
pagePath 页面地址 支持http:// file:// 本地地址
frame 页面位置

@property(nonatomic, readonly)UIWebView *webView;

应用页面的WebView对象

继续阅读 »

5+ SDKWidget方式集成WebView方式集成 将不再继续维护支持,相关功能已迁移到uni小程序 SDK,因此建议开发者尽快将应用升级到uni-app项目。

开发者可参考SDK中示例 “HBuilder-Integrate”
最新SDK下载地址

1 概述

HTML5+ SDK 可以按照“独立应用”、“Widget”和“WebView”三种方式进行集成,三种集成方式各有优点。
独立应用集成方式:使用独立应用方式,开发者需要将HTML5+SDK生成的首页面设置为当前View的subView。HTML5+ SDK将对应用进行管理。
Widget集成方式:运行方式和独立运行方式类似,开发者在集成时可在需要的位置启动HTML5+ SDK,显示指定的HTML5+应用。原生App中集成uni-app也需使用本集成方式。
Webview集成方式:用户可在任何页面将HTML5+ SDK的页面以Webview的形式独立显示,显示的Webview页面。

2 导入SDK Lib文件和头文件

在工程中引入HTML5+ SDK扩展功能的.a文件,开发者可以根据需求添加不同的扩展插件。必须要引入的是liblibPDRCore.a,liblibUI.a,liblibNativeUI.a,liblibNavigator.a,libcoreSupport.a,这几个库是HTML5+SDK运行的基础库文件。
注意: 开发者在使用示例工程时建议不要把工程从SDK目录里挪出来,如果要移动工程可以通过修改library search path ,framework search path 和head search path来解决报错。


工程中引入HTML5+ SDK 中提供的头文件。

3 添加代码编译测试

  1. 开发者初始化PDRCore句柄。
  2. 设置指定的View为HTML5+ SDK的父View,用于显示HTML5+ SDK的页面
  3. 调用PDRCore接口设置要启动应用的APPID
  4. 调用PDRCore句柄的start接口启动应用,HTML5+ Runtime将会根据用户 指定APPID启动指定的应用
- (void)viewDidLoad  
{  
[super viewDidLoad];  
PDRCore* pCoreHandle = [PDRCore Instance];  
[pCoreHandle setContainerView:self.view];  
[pCoreHandle setAutoStartAppid:@"HelloH5"];  
[pCoreHandle start];          
}

4 导入应用并配置

4.1 添加应用

在离线打包之前,用户需要将已经开发完成的HTML5+ 应用导入到Xcode工程中。

4.1.1 应用导入

需要将开发完成的HTML5+ 应用拷贝到Pandora/apps/[appid]/www目录下。

4.1.2 manifes.json文件编写

请参考manifest.json 文件配置指导手册

4.2 配置应用的插件功能

开发者需要将html5+ SDK里的PandoraAPI.bundle引入到开发中的工程中。开发者如开发了HTML5+扩展插件,需要修改PandoraAPI.bundle下的feature.plist文件,在文件中添加扩展插件JS类名和原生类名的对应关系。

6 常用类说明

PDRCore

常用接口说明:

+ (PDRCore*)Instance;

获取Core单例对象
返回值:
PDRCore 单例的PDRCore对象

- (int)setAppsRunPath:(NSString*)workPath;

设置应用运行时目录,应用运行时产生的文件在该目录下生成,当应用 runmode为liberate时将把资源拷贝到该目录
参数说明:
workPath 应用运行时目录
返回值:
int 0 成功

- (int)setAppsInstallPath:(NSString*)installPath;

设置runtime应用的安装目录,该地址为安装包中携带的应用资源位置
参数说明:
installPath 应用的安装目录
返回值:
int 0 成功

- (void)setInnerVersion:(NSString*)innerVersion;

设置HTML5+ SDK运行版本
参数说明:
HTML5+ SDK运行版本号

- (int)setDocumethPath:(NSString*)documentPath;

设置HTML5+ SDK文档目录
参数说明:
documentPath 应用的文档目录
返回值:
int 0 成功

- (int)setDownloadPath:(NSString*)downlaodPath;

设置runtime下载目录
参数说明:
downloadPath 应用下载文件的路径
返回值:
int 0 成功

- (int)setAutoStartAppid:(NSString*)appid;

设置runtiem启动时自动运行的APP
参数说明:
appid 默认启动应用的APPID
返回值:
int 0 成功

- (int)setContainerView:(UIView*)containerView;

设置runtime根视图的父亲View
参数说明:
containerView 要显示HTML5+SDK的父View
返回值:
int 0 成功

- (PDRCoreApp*)openAppWithAppid:(NSString*)appId  
                       withArgs:(NSString*__nullable)args  
                   withDelegate:(id<PDRCoreAppWindowDelegate>__nullable)delegate;

@param appId appId
@param args 传入启动参数,可以在页面中通过 plus.runtime.arguments 参数获取
@param delegate 代理
@return PDRCoreApp实例对象

- (int)regPluginWithName:(NSString*)pluginName  
             impClassName:(NSString*)impClassName  
                    type:(PDRExendPluginType)pluginType  
               javaScript:(NSString*)javaScript;

注册第三方扩展的HTML5+插件
参数说明:
pluginName 插件名称JS文件中定义的名字
impClassName 插件对应的实现类名
pluginType 插件类型 详情: PDRExendPluginType
javaScript js实现 为javascript文本
返回值:
int 0 成功

- (int)start;

正常启动runtime,使用改方法启动runtime具有全部功能,包括具有应用管理、窗口管理、插件管理、权限管理、资源管理等功能

- (int)startAsWebClient;

启动runtime,使用该方法启动的runtime不具有应用管理窗口管理功能,当需要显示页面时,需要自己创建PDRCoreAppFrame

PDRCoreAppFrame

常用接口说明

- (PDRCoreAppFrame*)initWithId:(NSString*)frameID loadURL:(NSString*)pagePath  frame:(CGRect)frame;

创建runtime页面
参数说明:
frameID 页面标示
pagePath 页面地址 支持http:// file:// 本地地址
frame 页面位置

@property(nonatomic, readonly)UIWebView *webView;

应用页面的WebView对象

收起阅读 »

IOS平台以WebView方式集成HTML5+SDK方法

SDK 集成 iOS

5+ SDKWidget方式集成WebView方式集成 将不再继续维护支持,相关功能已迁移到uni小程序 SDK,因此建议开发者尽快将应用升级到uni-app项目。

开发者可参考SDK中示例 “HBuilder-Integrate”
最新SDK下载地址

1 概述

HTML5+ SDK 可以按照“独立应用”、“Widget”和“WebView”三种方式进行集成,三种集成方式各有优点。
独立应用集成方式: 使用独立应用方式,开发者需要将HTML5+SDK生成的首页面设置为当前View的subView。HTML5+ SDK将对应用进行管理。
Widget集成方式: 运行方式和独立运行方式类似,开发者在集成时可在需要的位置启动HTML5+ SDK,显示指定的HTML5+应用。
Webview集成方式: 用户可在任何页面将HTML5+ SDK的页面以Webview的形式独立显示,显示的Webview页面。

2 导入SDK Lib文件和头文件

在工程中引入HTML5+ SDK扩展功能的.a文件,开发者可以根据需求添加不同的扩展插件。必须要引入的是liblibPDRCore.a 和libcoreSupport.a,liblibPDRCore.a库是HTML5+SDK运行的基础库文件,libcoreSupport文件是PDRCore依赖的文件。
在引入lib文件将SDK/libs目录下的静态库文件拖入到Xcode工程里即可

注意开发者在使用示例工程时建议不要把工程从SDK目录里挪出来,如果要移动工程可以通过修改library search path ,framework search path 和head search path来解决报错。
在集成5+SDK时必须在Other link flags 里添加 -ObjC, 同时还需要引入如下几个库文件
liblibUI.a
liblibPDRCore.a
libcoreSupport.a
liblibNavigator.a

工程中引入HTML5+ SDK 中提供的头文件。
头文件在目录 IOS-SDK/SDK/Inc目录下

工程中必须要引入的系统库
点击TARGETS->General->Linked Frameworks and Librarys 添加工程依赖的库文件

WebKit.framework
CoreLocation.framework
AVFoundation.framework
QuickLook.framework
JavaScriptCore.framework
UserNotifications.framework (设置Status 为 Optional)
StoreKit.framework
AssetsLibrary.framework
AddressBook.framework
SystemConfiguration.framework
UIKit.framework
Foundation.framework
CFNetwork.framework
CoreAudioKit.framework
CoreAudio.framework
CoreMedia.framework
MediaPlayer.framework
CoreFoundation.framework
AudioToolbox.framework
CoreTelephony.framework
MobileCoreServices.framework
libstdc++.tbd
libxml2.tbd
libz.tbd

3 添加代码编译测试

使用Webview方式进行集成HTML5+SDK,开发者可以在任意位置显示支持HTML5+扩展API的WebView页面,具体步骤如下
1.获取PDRCore句柄
2.设置HTML5+ SDK运行方式
3.设置默认启动应用的APPID
4.创建PDRCoreAppFrame,并指定Webview的ID和URL,并指定打开的WebView的Frame。
5.设置PDRCoreFrame的WebView的Request,Webview会显示Request返回的页面
6.将PDRCoreFrame句柄设置为指定View的WebView

-(IBAction)ShowWebViewPageOne:(id)sender  
{  
    // 获取PDRCore句柄  
    PDRCore* pCoreHandle = [PDRCore Instance];  
    if (pCoreHandle != nil)  
    {  

        [pCoreHandle start];  
        // 设置拼写Webview将要打开文件的url  
        NSString* pFilePath = [NSString stringWithFormat:@"file://%@/%@", [NSBundle mainBundle].bundlePath, @"Pandora/apps/HelloH5/www/plus/audio.html"];  

        CGRect StRect = CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20);  

        appFrame = [[PDRCoreAppFrame alloc] initWithName:@"WebViewID1" loadURL:pFilePath frame:StRect];  

        // 设置webview的Appframe  
            PDRCoreApp* activeApp= (PDRCoreApp*)pCoreHandle.appManager.activeApp;  
            [activeApp.appWindow registerFrame:appFrame];  

        // 将AppFrame设置为当前View的Subview  
        [self.view addSubview:appFrame];  
    }  
}

4 导入应用并配置

4.1 添加应用

在离线打包之前,用户需要将已经开发完成的HTML5+ 应用导入到Xcode工程中。

4.1.1 应用导入

需要将开发完成的HTML5+ 应用拷贝到Pandora/apps/[appid]/www目录下。

4.1.2 manifes.json文件编写

请参考manifest.json 文件配置指导手册

4.2 配置应用的插件功能

开发者需要将html5+ SDK里的PandoraAPI.bundle引入到开发中的工程中。开发者如开发了HTML5+扩展插件,需要修改PandoraAPI.bundle下的feature.plist文件,在文件中添加扩展插件JS类名和原生类名的对应关系。

5 常用类说明

PDRCore

常用接口说明:

+ (PDRCore*)Instance;

获取Core单例对象
返回值:
PDRCore 单例的PDRCore对象

- (int)setAppsRunPath:(NSString*)workPath;

设置应用运行时目录,应用运行时产生的文件在该目录下生成,当应用 runmode为liberate时将把资源拷贝到该目录
参数说明:
workPath 应用运行时目录
返回值:
int 0 成功

- (int)setAppsInstallPath:(NSString*)installPath;

设置runtime应用的安装目录,该地址为安装包中携带的应用资源位置
参数说明:
installPath 应用的安装目录
*返回值:**
int 0 成功

- (void)setInnerVersion:(NSString*)innerVersion;

设置HTML5+ SDK运行版本
参数说明:
innerVersion HTML5+ SDK运行版本号

- (int)setDocumethPath:(NSString*)documentPath;

设置HTML5+ SDK文档目录
参数说明:
documentPath 应用的文档目录
返回值:
int 0 成功

- (int)setDownloadPath:(NSString*)downlaodPath;

设置runtime下载目录
参数说明:
downloadPath 应用下载文件的路径
返回值:
int 0 成功

- (int)setAutoStartAppid:(NSString*)appid;

设置runtiem启动时自动运行的APP
参数说明:
appid 默认启动应用的APPID
返回值:
int 0 成功

- (int)setContainerView:(UIView*)containerView;

设置runtime根视图的父亲View
参数说明:
containerView 要显示HTML5+SDK的父View
返回值:
int 0 成功

- (int)setApp:(NSString*)appid documentPath:(NSString*)doucmentPath;

设置指定app的文档目录
参数说明:
appid 要设置的appid
doucmentPath 要设置的路径
返回值:
int 0 成功

- (int)regPluginWithName:(NSString*)pluginName  
             impClassName:(NSString*)impClassName  
                    type:(PDRExendPluginType)pluginType  
               javaScript:(NSString*)javaScript;

注册第三方扩展的HTML5+插件
参数说明:
pluginName 插件名称JS文件中定义的名字
impClassName 插件对应的实现类名
pluginType 插件类型 详情: PDRExendPluginType
javaScript js实现 为javascript文本
返回值:
int 0 成功

- (int)start;

正常启动runtime,使用改方法启动runtime具有全部功能,包括具有应用管理、窗口管理、插件管理、权限管理、资源管理等功能

- (int)startAsWebClient;

启动runtime,使用该方法启动的runtime不具有应用管理窗口管理功能,当需要显示页面时,需要自己创建PDRCoreAppFrame

PDRCoreAppFrame

常用接口说明

- (PDRCoreAppFrame*)initWithId:(NSString*)frameID loadURL:(NSString*)pagePath  frame:(CGRect)frame;

创建runtime页面
参数说明:
frameID 页面标示
pagePath 页面地址 支持http:// file:// 本地地址
frame 页面位置

@property(nonatomic, readonly)UIWebView *webView;

应用页面的WebView对象

继续阅读 »

5+ SDKWidget方式集成WebView方式集成 将不再继续维护支持,相关功能已迁移到uni小程序 SDK,因此建议开发者尽快将应用升级到uni-app项目。

开发者可参考SDK中示例 “HBuilder-Integrate”
最新SDK下载地址

1 概述

HTML5+ SDK 可以按照“独立应用”、“Widget”和“WebView”三种方式进行集成,三种集成方式各有优点。
独立应用集成方式: 使用独立应用方式,开发者需要将HTML5+SDK生成的首页面设置为当前View的subView。HTML5+ SDK将对应用进行管理。
Widget集成方式: 运行方式和独立运行方式类似,开发者在集成时可在需要的位置启动HTML5+ SDK,显示指定的HTML5+应用。
Webview集成方式: 用户可在任何页面将HTML5+ SDK的页面以Webview的形式独立显示,显示的Webview页面。

2 导入SDK Lib文件和头文件

在工程中引入HTML5+ SDK扩展功能的.a文件,开发者可以根据需求添加不同的扩展插件。必须要引入的是liblibPDRCore.a 和libcoreSupport.a,liblibPDRCore.a库是HTML5+SDK运行的基础库文件,libcoreSupport文件是PDRCore依赖的文件。
在引入lib文件将SDK/libs目录下的静态库文件拖入到Xcode工程里即可

注意开发者在使用示例工程时建议不要把工程从SDK目录里挪出来,如果要移动工程可以通过修改library search path ,framework search path 和head search path来解决报错。
在集成5+SDK时必须在Other link flags 里添加 -ObjC, 同时还需要引入如下几个库文件
liblibUI.a
liblibPDRCore.a
libcoreSupport.a
liblibNavigator.a

工程中引入HTML5+ SDK 中提供的头文件。
头文件在目录 IOS-SDK/SDK/Inc目录下

工程中必须要引入的系统库
点击TARGETS->General->Linked Frameworks and Librarys 添加工程依赖的库文件

WebKit.framework
CoreLocation.framework
AVFoundation.framework
QuickLook.framework
JavaScriptCore.framework
UserNotifications.framework (设置Status 为 Optional)
StoreKit.framework
AssetsLibrary.framework
AddressBook.framework
SystemConfiguration.framework
UIKit.framework
Foundation.framework
CFNetwork.framework
CoreAudioKit.framework
CoreAudio.framework
CoreMedia.framework
MediaPlayer.framework
CoreFoundation.framework
AudioToolbox.framework
CoreTelephony.framework
MobileCoreServices.framework
libstdc++.tbd
libxml2.tbd
libz.tbd

3 添加代码编译测试

使用Webview方式进行集成HTML5+SDK,开发者可以在任意位置显示支持HTML5+扩展API的WebView页面,具体步骤如下
1.获取PDRCore句柄
2.设置HTML5+ SDK运行方式
3.设置默认启动应用的APPID
4.创建PDRCoreAppFrame,并指定Webview的ID和URL,并指定打开的WebView的Frame。
5.设置PDRCoreFrame的WebView的Request,Webview会显示Request返回的页面
6.将PDRCoreFrame句柄设置为指定View的WebView

-(IBAction)ShowWebViewPageOne:(id)sender  
{  
    // 获取PDRCore句柄  
    PDRCore* pCoreHandle = [PDRCore Instance];  
    if (pCoreHandle != nil)  
    {  

        [pCoreHandle start];  
        // 设置拼写Webview将要打开文件的url  
        NSString* pFilePath = [NSString stringWithFormat:@"file://%@/%@", [NSBundle mainBundle].bundlePath, @"Pandora/apps/HelloH5/www/plus/audio.html"];  

        CGRect StRect = CGRectMake(0, 20, self.view.frame.size.width, self.view.frame.size.height - 20);  

        appFrame = [[PDRCoreAppFrame alloc] initWithName:@"WebViewID1" loadURL:pFilePath frame:StRect];  

        // 设置webview的Appframe  
            PDRCoreApp* activeApp= (PDRCoreApp*)pCoreHandle.appManager.activeApp;  
            [activeApp.appWindow registerFrame:appFrame];  

        // 将AppFrame设置为当前View的Subview  
        [self.view addSubview:appFrame];  
    }  
}

4 导入应用并配置

4.1 添加应用

在离线打包之前,用户需要将已经开发完成的HTML5+ 应用导入到Xcode工程中。

4.1.1 应用导入

需要将开发完成的HTML5+ 应用拷贝到Pandora/apps/[appid]/www目录下。

4.1.2 manifes.json文件编写

请参考manifest.json 文件配置指导手册

4.2 配置应用的插件功能

开发者需要将html5+ SDK里的PandoraAPI.bundle引入到开发中的工程中。开发者如开发了HTML5+扩展插件,需要修改PandoraAPI.bundle下的feature.plist文件,在文件中添加扩展插件JS类名和原生类名的对应关系。

5 常用类说明

PDRCore

常用接口说明:

+ (PDRCore*)Instance;

获取Core单例对象
返回值:
PDRCore 单例的PDRCore对象

- (int)setAppsRunPath:(NSString*)workPath;

设置应用运行时目录,应用运行时产生的文件在该目录下生成,当应用 runmode为liberate时将把资源拷贝到该目录
参数说明:
workPath 应用运行时目录
返回值:
int 0 成功

- (int)setAppsInstallPath:(NSString*)installPath;

设置runtime应用的安装目录,该地址为安装包中携带的应用资源位置
参数说明:
installPath 应用的安装目录
*返回值:**
int 0 成功

- (void)setInnerVersion:(NSString*)innerVersion;

设置HTML5+ SDK运行版本
参数说明:
innerVersion HTML5+ SDK运行版本号

- (int)setDocumethPath:(NSString*)documentPath;

设置HTML5+ SDK文档目录
参数说明:
documentPath 应用的文档目录
返回值:
int 0 成功

- (int)setDownloadPath:(NSString*)downlaodPath;

设置runtime下载目录
参数说明:
downloadPath 应用下载文件的路径
返回值:
int 0 成功

- (int)setAutoStartAppid:(NSString*)appid;

设置runtiem启动时自动运行的APP
参数说明:
appid 默认启动应用的APPID
返回值:
int 0 成功

- (int)setContainerView:(UIView*)containerView;

设置runtime根视图的父亲View
参数说明:
containerView 要显示HTML5+SDK的父View
返回值:
int 0 成功

- (int)setApp:(NSString*)appid documentPath:(NSString*)doucmentPath;

设置指定app的文档目录
参数说明:
appid 要设置的appid
doucmentPath 要设置的路径
返回值:
int 0 成功

- (int)regPluginWithName:(NSString*)pluginName  
             impClassName:(NSString*)impClassName  
                    type:(PDRExendPluginType)pluginType  
               javaScript:(NSString*)javaScript;

注册第三方扩展的HTML5+插件
参数说明:
pluginName 插件名称JS文件中定义的名字
impClassName 插件对应的实现类名
pluginType 插件类型 详情: PDRExendPluginType
javaScript js实现 为javascript文本
返回值:
int 0 成功

- (int)start;

正常启动runtime,使用改方法启动runtime具有全部功能,包括具有应用管理、窗口管理、插件管理、权限管理、资源管理等功能

- (int)startAsWebClient;

启动runtime,使用该方法启动的runtime不具有应用管理窗口管理功能,当需要显示页面时,需要自己创建PDRCoreAppFrame

PDRCoreAppFrame

常用接口说明

- (PDRCoreAppFrame*)initWithId:(NSString*)frameID loadURL:(NSString*)pagePath  frame:(CGRect)frame;

创建runtime页面
参数说明:
frameID 页面标示
pagePath 页面地址 支持http:// file:// 本地地址
frame 页面位置

@property(nonatomic, readonly)UIWebView *webView;

应用页面的WebView对象

收起阅读 »

Android平台以Widget方式集成HTML5+SDK方法

SDK

5+ SDKWidget方式集成WebView方式集成 将不再继续维护支持,相关功能已迁移到uni小程序 SDK,因此建议开发者尽快将应用升级到uni-app项目。

最新SDK下载地址
HTML5+ SDK 可以按照“独立应用”和“单页面”两种种方式进行集成,两种集成方式各有优点。

  • 独立应用集成方式:即Widget集成方式,开发者在集成后可在需要时启动HTML5+ SDK,显示指定目录下的5+ WebAPP。原生App中集成uni-app也需使用本集成方式。

  • 单页面集成方式:即Webview集成方式,用户可在需要时显示一个支持5+扩展API的Webview页面。使用单页面方式集成5+ SDK,在页面内不能调用plus.webview的API创建新的页面,其他5+API的使用不受影响。

集成代码请参考SDK内HBuilder-Integrate工程 点击下载最新SDK

集成步骤

一 将5+SDK导入现有原生工程

点击下载最新 5+ SDK
开发者需要根据WebApp中将要用到的5+API,将涉及的5+SDK的jar包和资源文件导入到现有的Android原生工程中,并根据需求修改工程的Androidmanifest.xml文件。
注意:集成SDK时需要将DCloudApplication配置到AndroidManifest.xml 的application节点中。也可继承DCloudApplication实现自己的application并配置。不配置DCloudApplication会导致SDK中业务逻辑无法正常运行!!!!

<application  
        android:name="io.dcloud.application.DCloudApplication" >

各API需要导入的资源和AndroidManifest.xml文件需要修改地方请点击查看以下文档
基础插件配置
推送插件配置
分享插件配置
授权登陆插件配置
地图插件配置
支付插件配置
定位插件配置

二 将WebApp导入现有原生工程

5+Webapp的导入现有工程的方法可以参考Android平台离线打包配置文档

三 5+SDK集成代码编写

1 创建一个继承自ICoreStatusListener的类,并实现其中的方法

ICoreStatusListener类用来监听5+内核的运行事件,当5+内核运行状态发生变化时会触发相应的方法,包含以下几个方法:

void onCoreReady(ICore arg0)
说明:
5+内核开始初始化时触发
SDK的方法必须在调用SDK.init()之后才可以调用,在使用中通常在onCoreReady方法触发时初始化5+SDK。
代码示例:

@Override  
    public void onCoreReady(ICore coreHandler) {  
        // 调用SDK的初始化接口,初始化5+ SDK  
        SDK.initSDK(coreHandler);  
        // 设置当前应用可使用的5+ API  
        SDK.requestAllFeature();  
    }

void onCoreInitEnd(ICore arg0)
说明:
5+内核初始化完成时触发
开发者要在5+内核初始化完成后才能调用SDK.startWebApp()等接口启动指定目录下的5+Webapp

boolean onCoreStop()
说明:
5+内核关闭时触发

Object onCreateSplash(Context pContextWrapper)
说明:
Splash页面创建时触发

void onCloseSplash()
说明:
Splash页面关闭时触发

2 调用SDK.startWebApp方法创建并启动5+WebApp

在5+内核初始化完毕后可调用SDK.startWebApp() 方法启动5+WebApp,方法会创建并返回一个IApp对象。开发者可通过调用IApp对象的方法获取该应用内已经打开的页面的IWebView对象也可以关闭这个5+WebApp。

应用创建后需要将应用的主页面添加到要显示该应用的父View中。

在调用startWebApp方法时可以传入一个IWebviewStateListener用来监听WebApp首页面加载的进度。

IApp对象创建成功后我们可以添加一个IAppStatusListener用来监听当前创建的IAPP对象的运行状态。

代码示例

    class WebappModeListener implements ICoreStatusListener, IOnCreateSplashView {  
    Activity activity;  
    View splashView = null;  
    ViewGroup rootView;  
    IApp app = null;  
    ProgressDialog pd = null;  

    public WebappModeListener(Activity activity, ViewGroup rootView) {  
        this.activity = activity;  
        this.rootView = rootView;  
    }  

    @Override  
    public void onCoreInitEnd(ICore coreHandler) {  

        // 表示Webapp的路径在 file:///android_asset/apps/HelloH5  
        String appBasePath = "/apps/HelloH5";  

        // 设置启动参数,可在页面中通过plus.runtime.arguments;方法获取到传入的参数  
        String args = "{url:'http://www.baidu.com'}";  

        // 启动启动独立应用的5+ Webapp  
        app = SDK.startWebApp(activity, appBasePath, args, new IWebviewStateListener() {  
            // 设置Webview事件监听,可在监监听内获取WebIvew加载内容的进度  
            @Override  
            public Object onCallBack(int pType, Object pArgs) {  
                switch (pType) {  
                case IWebviewStateListener.ON_WEBVIEW_READY:  
                    // WebApp准备加载事件  
                    // 准备完毕之后添加webview到显示父View中,  
                    // 设置排版不显示状态,避免显示webview时html内容排版错乱问题  
                    View view = ((IWebview) pArgs).obtainApp().obtainWebAppRootView().obtainMainView();  
                    view.setVisibility(View.INVISIBLE);  
                    rootView.addView(view, 0);  
                    break;  
                case IWebviewStateListener.ON_PAGE_STARTED:  
                    pd = ProgressDialog.show(activity, "加载中", "0/100");  
                    break;  
                case IWebviewStateListener.ON_PROGRESS_CHANGED:  
                    // WebApp首页面加载进度变化事件  
                    if (pd != null) {  
                        pd.setMessage(pArgs + "/100");  
                    }  
                    break;  
                case IWebviewStateListener.ON_PAGE_FINISHED:  
                    // WebApp首页面加载完成事件  
                    if (pd != null) {  
                        pd.dismiss();  
                        pd = null;  
                    }  
                    // 页面加载完毕,设置显示webview  
                    app.obtainWebAppRootView().obtainMainView().setVisibility(View.VISIBLE);  
                    break;  
                }  
                return null;  
            }  
        }, this);  

        app.setIAppStatusListener(new IAppStatusListener() {  
            // 设置APP运行事件监听  
            @Override  
            public boolean onStop() {  
                // 应用运行停止时调用  
                rootView.removeView(app.obtainWebAppRootView().obtainMainView());  
                // TODO Auto-generated method stub  
                return false;  
            }  

            @Override  
            public void onStart() {  
                // 独立应用启动时触发事件  
            }  

            @Override  
            public void onPause(IApp arg0, IApp arg1) {  
                // WebApp暂停运行时触发事件  

            }  
        });  
    }  

    @Override  
    public void onCoreReady(ICore coreHandler) {  
        // 初始化SDK并将5+引擎的对象设置给SDK  
        SDK.initSDK(coreHandler);  
        //   
        SDK.requestAllFeature();  
    }  

    @Override  
    public boolean onCoreStop() {  
        // 当返回false时候回关闭activity  
        return false;  
    }  

    @Override  
    public Object onCreateSplash(Context pContextWrapper) {  
        splashView = new FrameLayout(activity);  
        splashView.setBackgroundResource(RInformation.DRAWABLE_SPLASH);  
        rootView.addView(splashView);  
        return null;  
    }  

    @Override  
    public void onCloseSplash() {  
        rootView.removeView(splashView);  
    }  
}

3 启动5+ 内核

5+SDK在使用前首先要进行5+内核的初始化,在启动时需要添加一个ICoreStatusListener用来监听5+内核启动状态。io.dcloud.feature.internal.sdk.SDK类的方法需要在5+内核初始化后才能够调用。

同时还需要在5+内核初始化后指定当前将要使用那种集成方式。独立应用集成方式使用SDK.IntegratedMode.WEBAPP 参数指定当前SDK将使用独立应用方式启动5+WebApp。

示例中5+ SDK是在Activity的onCreate方法中初始化,在具体使用中可在任意时刻初始化5+内核。

public class SDK_WebApp extends Activity {  

    boolean doHardAcc = true;  
    EntryProxy mEntryProxy = null;  

    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        if (mEntryProxy == null) {  
            FrameLayout f = new FrameLayout(this);  
            // 创建5+内核运行事件监听  
            WebappModeListener wm = new WebappModeListener(this, f);  
            // 初始化5+内核  
            mEntryProxy = EntryProxy.init(this, wm);  
            // 启动5+内核  
            mEntryProxy.onCreate(this, savedInstanceState, SDK.IntegratedMode.WEBAPP, null);  
            setContentView(f);  
        }  
    }  
}

4 传递Activity事件给5+ SDK

开发者在集成5+SDK时可根据需要将Activity的事件传递给5+SDK引擎,5+引擎会将事件传递给监听事件的Webview,由Webview进行事件处理。

@Override  
    public boolean onCreateOptionsMenu(Menu menu) {  
        return mEntryProxy.onActivityExecute(this, SysEventType.onCreateOptionMenu, menu);  
    }  

    @Override  
    public void onPause() {  
        super.onPause();  
        mEntryProxy.onPause(this);  
    }  

    @Override  
    public void onResume() {  
        super.onResume();  
        mEntryProxy.onResume(this);  
    }  

    public void onNewIntent(Intent intent) {  
        super.onNewIntent(intent);  
        if (intent.getFlags() != 0x10600000) {  
        // 非点击icon调用activity时才调用newintent事件  
            mEntryProxy.onNewIntent(this, intent);  
        }  
    }  

    @Override  
    protected void onDestroy() {  
        super.onDestroy();  
        mEntryProxy.onStop(this);  
    }  

    @Override  
    public boolean onKeyDown(int keyCode, KeyEvent event) {  
        boolean _ret = mEntryProxy.onActivityExecute(this, SysEventType.onKeyDown, new Object[] { keyCode, event });  
        return _ret ? _ret : super.onKeyDown(keyCode, event);  
    }  

    @Override  
    public boolean onKeyUp(int keyCode, KeyEvent event) {  
        boolean _ret = mEntryProxy.onActivityExecute(this, SysEventType.onKeyUp, new Object[] { keyCode, event });  
        return _ret ? _ret : super.onKeyUp(keyCode, event);  
    }  

    @Override  
    public boolean onKeyLongPress(int keyCode, KeyEvent event) {  
        boolean _ret = mEntryProxy.onActivityExecute(this, SysEventType.onKeyLongPress, new Object[] { keyCode, event });  
        return _ret ? _ret : super.onKeyLongPress(keyCode, event);  
    }  

    public void onConfigurationChanged(Configuration newConfig) {  
        try {  
            int temp = this.getResources().getConfiguration().orientation;  
            if (mEntryProxy != null) {  
                mEntryProxy.onConfigurationChanged(this, temp);  
            }  
            super.onConfigurationChanged(newConfig);  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }  

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {  
        mEntryProxy.onActivityExecute(this, SysEventType.onActivityResult, new Object[] { requestCode, resultCode, data });  
    }  

Android 平台5+SDK常用接口说明

Android 平台5+SDK常用接口及使用示例请点击

继续阅读 »

5+ SDKWidget方式集成WebView方式集成 将不再继续维护支持,相关功能已迁移到uni小程序 SDK,因此建议开发者尽快将应用升级到uni-app项目。

最新SDK下载地址
HTML5+ SDK 可以按照“独立应用”和“单页面”两种种方式进行集成,两种集成方式各有优点。

  • 独立应用集成方式:即Widget集成方式,开发者在集成后可在需要时启动HTML5+ SDK,显示指定目录下的5+ WebAPP。原生App中集成uni-app也需使用本集成方式。

  • 单页面集成方式:即Webview集成方式,用户可在需要时显示一个支持5+扩展API的Webview页面。使用单页面方式集成5+ SDK,在页面内不能调用plus.webview的API创建新的页面,其他5+API的使用不受影响。

集成代码请参考SDK内HBuilder-Integrate工程 点击下载最新SDK

集成步骤

一 将5+SDK导入现有原生工程

点击下载最新 5+ SDK
开发者需要根据WebApp中将要用到的5+API,将涉及的5+SDK的jar包和资源文件导入到现有的Android原生工程中,并根据需求修改工程的Androidmanifest.xml文件。
注意:集成SDK时需要将DCloudApplication配置到AndroidManifest.xml 的application节点中。也可继承DCloudApplication实现自己的application并配置。不配置DCloudApplication会导致SDK中业务逻辑无法正常运行!!!!

<application  
        android:name="io.dcloud.application.DCloudApplication" >

各API需要导入的资源和AndroidManifest.xml文件需要修改地方请点击查看以下文档
基础插件配置
推送插件配置
分享插件配置
授权登陆插件配置
地图插件配置
支付插件配置
定位插件配置

二 将WebApp导入现有原生工程

5+Webapp的导入现有工程的方法可以参考Android平台离线打包配置文档

三 5+SDK集成代码编写

1 创建一个继承自ICoreStatusListener的类,并实现其中的方法

ICoreStatusListener类用来监听5+内核的运行事件,当5+内核运行状态发生变化时会触发相应的方法,包含以下几个方法:

void onCoreReady(ICore arg0)
说明:
5+内核开始初始化时触发
SDK的方法必须在调用SDK.init()之后才可以调用,在使用中通常在onCoreReady方法触发时初始化5+SDK。
代码示例:

@Override  
    public void onCoreReady(ICore coreHandler) {  
        // 调用SDK的初始化接口,初始化5+ SDK  
        SDK.initSDK(coreHandler);  
        // 设置当前应用可使用的5+ API  
        SDK.requestAllFeature();  
    }

void onCoreInitEnd(ICore arg0)
说明:
5+内核初始化完成时触发
开发者要在5+内核初始化完成后才能调用SDK.startWebApp()等接口启动指定目录下的5+Webapp

boolean onCoreStop()
说明:
5+内核关闭时触发

Object onCreateSplash(Context pContextWrapper)
说明:
Splash页面创建时触发

void onCloseSplash()
说明:
Splash页面关闭时触发

2 调用SDK.startWebApp方法创建并启动5+WebApp

在5+内核初始化完毕后可调用SDK.startWebApp() 方法启动5+WebApp,方法会创建并返回一个IApp对象。开发者可通过调用IApp对象的方法获取该应用内已经打开的页面的IWebView对象也可以关闭这个5+WebApp。

应用创建后需要将应用的主页面添加到要显示该应用的父View中。

在调用startWebApp方法时可以传入一个IWebviewStateListener用来监听WebApp首页面加载的进度。

IApp对象创建成功后我们可以添加一个IAppStatusListener用来监听当前创建的IAPP对象的运行状态。

代码示例

    class WebappModeListener implements ICoreStatusListener, IOnCreateSplashView {  
    Activity activity;  
    View splashView = null;  
    ViewGroup rootView;  
    IApp app = null;  
    ProgressDialog pd = null;  

    public WebappModeListener(Activity activity, ViewGroup rootView) {  
        this.activity = activity;  
        this.rootView = rootView;  
    }  

    @Override  
    public void onCoreInitEnd(ICore coreHandler) {  

        // 表示Webapp的路径在 file:///android_asset/apps/HelloH5  
        String appBasePath = "/apps/HelloH5";  

        // 设置启动参数,可在页面中通过plus.runtime.arguments;方法获取到传入的参数  
        String args = "{url:'http://www.baidu.com'}";  

        // 启动启动独立应用的5+ Webapp  
        app = SDK.startWebApp(activity, appBasePath, args, new IWebviewStateListener() {  
            // 设置Webview事件监听,可在监监听内获取WebIvew加载内容的进度  
            @Override  
            public Object onCallBack(int pType, Object pArgs) {  
                switch (pType) {  
                case IWebviewStateListener.ON_WEBVIEW_READY:  
                    // WebApp准备加载事件  
                    // 准备完毕之后添加webview到显示父View中,  
                    // 设置排版不显示状态,避免显示webview时html内容排版错乱问题  
                    View view = ((IWebview) pArgs).obtainApp().obtainWebAppRootView().obtainMainView();  
                    view.setVisibility(View.INVISIBLE);  
                    rootView.addView(view, 0);  
                    break;  
                case IWebviewStateListener.ON_PAGE_STARTED:  
                    pd = ProgressDialog.show(activity, "加载中", "0/100");  
                    break;  
                case IWebviewStateListener.ON_PROGRESS_CHANGED:  
                    // WebApp首页面加载进度变化事件  
                    if (pd != null) {  
                        pd.setMessage(pArgs + "/100");  
                    }  
                    break;  
                case IWebviewStateListener.ON_PAGE_FINISHED:  
                    // WebApp首页面加载完成事件  
                    if (pd != null) {  
                        pd.dismiss();  
                        pd = null;  
                    }  
                    // 页面加载完毕,设置显示webview  
                    app.obtainWebAppRootView().obtainMainView().setVisibility(View.VISIBLE);  
                    break;  
                }  
                return null;  
            }  
        }, this);  

        app.setIAppStatusListener(new IAppStatusListener() {  
            // 设置APP运行事件监听  
            @Override  
            public boolean onStop() {  
                // 应用运行停止时调用  
                rootView.removeView(app.obtainWebAppRootView().obtainMainView());  
                // TODO Auto-generated method stub  
                return false;  
            }  

            @Override  
            public void onStart() {  
                // 独立应用启动时触发事件  
            }  

            @Override  
            public void onPause(IApp arg0, IApp arg1) {  
                // WebApp暂停运行时触发事件  

            }  
        });  
    }  

    @Override  
    public void onCoreReady(ICore coreHandler) {  
        // 初始化SDK并将5+引擎的对象设置给SDK  
        SDK.initSDK(coreHandler);  
        //   
        SDK.requestAllFeature();  
    }  

    @Override  
    public boolean onCoreStop() {  
        // 当返回false时候回关闭activity  
        return false;  
    }  

    @Override  
    public Object onCreateSplash(Context pContextWrapper) {  
        splashView = new FrameLayout(activity);  
        splashView.setBackgroundResource(RInformation.DRAWABLE_SPLASH);  
        rootView.addView(splashView);  
        return null;  
    }  

    @Override  
    public void onCloseSplash() {  
        rootView.removeView(splashView);  
    }  
}

3 启动5+ 内核

5+SDK在使用前首先要进行5+内核的初始化,在启动时需要添加一个ICoreStatusListener用来监听5+内核启动状态。io.dcloud.feature.internal.sdk.SDK类的方法需要在5+内核初始化后才能够调用。

同时还需要在5+内核初始化后指定当前将要使用那种集成方式。独立应用集成方式使用SDK.IntegratedMode.WEBAPP 参数指定当前SDK将使用独立应用方式启动5+WebApp。

示例中5+ SDK是在Activity的onCreate方法中初始化,在具体使用中可在任意时刻初始化5+内核。

public class SDK_WebApp extends Activity {  

    boolean doHardAcc = true;  
    EntryProxy mEntryProxy = null;  

    @Override  
    public void onCreate(Bundle savedInstanceState) {  
        super.onCreate(savedInstanceState);  
        requestWindowFeature(Window.FEATURE_NO_TITLE);  
        if (mEntryProxy == null) {  
            FrameLayout f = new FrameLayout(this);  
            // 创建5+内核运行事件监听  
            WebappModeListener wm = new WebappModeListener(this, f);  
            // 初始化5+内核  
            mEntryProxy = EntryProxy.init(this, wm);  
            // 启动5+内核  
            mEntryProxy.onCreate(this, savedInstanceState, SDK.IntegratedMode.WEBAPP, null);  
            setContentView(f);  
        }  
    }  
}

4 传递Activity事件给5+ SDK

开发者在集成5+SDK时可根据需要将Activity的事件传递给5+SDK引擎,5+引擎会将事件传递给监听事件的Webview,由Webview进行事件处理。

@Override  
    public boolean onCreateOptionsMenu(Menu menu) {  
        return mEntryProxy.onActivityExecute(this, SysEventType.onCreateOptionMenu, menu);  
    }  

    @Override  
    public void onPause() {  
        super.onPause();  
        mEntryProxy.onPause(this);  
    }  

    @Override  
    public void onResume() {  
        super.onResume();  
        mEntryProxy.onResume(this);  
    }  

    public void onNewIntent(Intent intent) {  
        super.onNewIntent(intent);  
        if (intent.getFlags() != 0x10600000) {  
        // 非点击icon调用activity时才调用newintent事件  
            mEntryProxy.onNewIntent(this, intent);  
        }  
    }  

    @Override  
    protected void onDestroy() {  
        super.onDestroy();  
        mEntryProxy.onStop(this);  
    }  

    @Override  
    public boolean onKeyDown(int keyCode, KeyEvent event) {  
        boolean _ret = mEntryProxy.onActivityExecute(this, SysEventType.onKeyDown, new Object[] { keyCode, event });  
        return _ret ? _ret : super.onKeyDown(keyCode, event);  
    }  

    @Override  
    public boolean onKeyUp(int keyCode, KeyEvent event) {  
        boolean _ret = mEntryProxy.onActivityExecute(this, SysEventType.onKeyUp, new Object[] { keyCode, event });  
        return _ret ? _ret : super.onKeyUp(keyCode, event);  
    }  

    @Override  
    public boolean onKeyLongPress(int keyCode, KeyEvent event) {  
        boolean _ret = mEntryProxy.onActivityExecute(this, SysEventType.onKeyLongPress, new Object[] { keyCode, event });  
        return _ret ? _ret : super.onKeyLongPress(keyCode, event);  
    }  

    public void onConfigurationChanged(Configuration newConfig) {  
        try {  
            int temp = this.getResources().getConfiguration().orientation;  
            if (mEntryProxy != null) {  
                mEntryProxy.onConfigurationChanged(this, temp);  
            }  
            super.onConfigurationChanged(newConfig);  
        } catch (Exception e) {  
            e.printStackTrace();  
        }  
    }  

    protected void onActivityResult(int requestCode, int resultCode, Intent data) {  
        mEntryProxy.onActivityExecute(this, SysEventType.onActivityResult, new Object[] { requestCode, resultCode, data });  
    }  

Android 平台5+SDK常用接口说明

Android 平台5+SDK常用接口及使用示例请点击

收起阅读 »