HBuilderX

HBuilderX

极客开发工具
uni-app

uni-app

开发一次,多端覆盖
uniCloud

uniCloud

云开发平台
HTML5+

HTML5+

增强HTML5的功能体验
MUI

MUI

上万Star的前端框架

Android平台指定程序使用的权限(Permissions)

5+App开发

HBuilder的App云端打包会根据应用使用的5+ API自动添加Android权限(Permissions),是按照5+ API模块分类来添加的(参考5+ API使用的Android权限列表)。

例如,如使用了Device的API,如plus.networkinfo.getCurrentType(),默认情况下打包机会自动添加Device模块相关的所有权限:
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.CALL_PHONE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
而实际只需要最后两个权限就可以,前面四个权限都是没有必要添加的。

为了解决添加不必要Android权限的问题,我们可以通过以下方式设置定义Android权限

  • 打开应用的manifest.json文件,切换到代码视图,添加plus->distribute->google->custompermissions节点,并设置值为true:

  • 参考5+ API使用的Android权限列表,根据应用中使用的5+ API整理出要使用的Android权限,并添加到plus->distribute->google->permissions值数组中,如下是使用Speech和Statistic两个模块要使用到的权限:

  • 保存,并提交App云端打包

继续阅读 »

HBuilder的App云端打包会根据应用使用的5+ API自动添加Android权限(Permissions),是按照5+ API模块分类来添加的(参考5+ API使用的Android权限列表)。

例如,如使用了Device的API,如plus.networkinfo.getCurrentType(),默认情况下打包机会自动添加Device模块相关的所有权限:
<uses-permission android:name="android.permission.WAKE_LOCK"/>
<uses-permission android:name="android.permission.VIBRATE"/>
<uses-permission android:name="android.permission.READ_PHONE_STATE"/>
<uses-permission android:name="android.permission.CALL_PHONE"/>
<uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/>
<uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/>
而实际只需要最后两个权限就可以,前面四个权限都是没有必要添加的。

为了解决添加不必要Android权限的问题,我们可以通过以下方式设置定义Android权限

  • 打开应用的manifest.json文件,切换到代码视图,添加plus->distribute->google->custompermissions节点,并设置值为true:

  • 参考5+ API使用的Android权限列表,根据应用中使用的5+ API整理出要使用的Android权限,并添加到plus->distribute->google->permissions值数组中,如下是使用Speech和Statistic两个模块要使用到的权限:

  • 保存,并提交App云端打包

收起阅读 »

5+ API使用的Android权限列表(Permissions)

5+App开发

5+ API分模块封装调用了系统各种原生能力,而部分能力需要使用到Android的permissions,以下列出了各模块(或具体API)使用的的权限:

基础权限

5+ App必须使用的到最小权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.INTERNET"/> 允许程序访问网络
ALL <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> 允许程序读写扩展存储卡

Audio

调用plus.audio.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.RECORD_AUDIO"/> 允许程序录制音频
ALL <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 允许程序修改全局音频设置

Camera

调用plus.camera.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.CAMERA"/> 允许程序使用照相设备
ALL <uses-feature android:name="android.hardware.camera"/> 允许程序访问照相设备

Contacts

调用plus.contacts.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.GET_ACCOUNTS"/> 允许程序访问Accounts Service帐户列表
ALL <uses-permission android:name="android.permission.READ_CONTACTS"/> 允许程序读取用户联系人数据
ALL <uses-permission android:name="android.permission.WRITE_CONTACTS"/> 允许程序修改用户联系人数据

Device

调用plus.device.、plus.screen.、plus.display.、plus.networkinfo.、plus.os.*使用到的权限集

API 权限 说明
plus.device.setWakelock(); plus.device.isWakelock(); <uses-permission android:name="android.permission.WAKE_LOCK"/> 允许程序保持进程不进入休眠状态
plus.device.vibrate(); <uses-permission android:name="android.permission.VIBRATE"/> 允许程序访问振动设备
plus.device.* <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息
plus.device.dail(); <uses-permission android:name="android.permission.CALL_PHONE"/> 允许程序不通过拨号界面拨打电话
plus.networkinfo.* <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
plus.networkinfo.* <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息

Geolocation

调用plus.geolocation.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 允许程序访问位置信息
ALL <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 允许程序访问CellID或WiFi热点来获取位置信息
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/> 允许程序改变Wi-Fi连接状态
ALL <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息
ALL <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/> 允许程序挂载和移除可移动存储设备
ALL <uses-permission android:name="android.permission.READ_LOGS"/> 允许程序读取系统日志文件
ALL <uses-permission android:name="android.permission.WRITE_SETTINGS"/>" 允许程序读取或写入系统设置

Messaging

调用plus.messaging.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.SEND_SMS"/> 允许程序发送SMS短信
ALL <uses-permission android:name="android.permission.READ_SMS"/> 允许程序读取短信息
ALL <uses-permission android:name="android.permission.WRITE_SMS"/> 允许程序写短信

Barcode

调用plus.barcode.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.CAMERA"/> 允许程序使用照相设备
ALL <uses-feature android:name="android.hardware.camera"/> 允许程序访问照相设备
ALL <uses-feature android:name="android.hardware.camera.autofocus"/> 允许程序访问照相设备自动聚焦
ALL <uses-permission android:name="android.permission.FLASHLIGHT"/>" 允许程序访问闪光灯
ALL <uses-permission android:name="android.permission.VIBRATE"/> 允许程序访问振动设备

Map

调用plus.maps.*使用到的权限集

百度地图

API 权限 说明
ALL <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 允许程序访问位置信息
ALL <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 允许程序访问CellID或WiFi热点来获取位置信息
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/> 允许程序改变Wi-Fi连接状态
ALL <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息
ALL <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/> 允许程序挂载和移除可移动存储设备
ALL <uses-permission android:name="android.permission.READ_LOGS"/> 允许程序读取系统日志文件
ALL <uses-permission android:name="android.permission.WRITE_SETTINGS"/>" 允许程序读取或写入系统设置

高德地图

API 权限 说明
ALL <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 允许程序访问位置信息
ALL <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 允许程序访问CellID或WiFi热点来获取位置信息
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/> 允许程序改变Wi-Fi连接状态
ALL <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息
ALL <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/> 允许程序挂载和移除可移动存储设备
ALL <uses-permission android:name="android.permission.READ_LOGS"/> 允许程序读取系统日志文件
ALL <uses-permission android:name="android.permission.WRITE_SETTINGS"/>" 允许程序读取或写入系统设置

OAuth

调用plus.oauth.*使用到的权限集

微信

API 权限 说明
ALL <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 允许程序修改全局音频设置

新浪微博

API 权限 说明
ALL

QQ分享

API 权限 说明
ALL <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 允许程序修改全局音频设置

Payment

调用plus.payment.*使用到的权限集

支付宝

API 权限 说明
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息
ALL <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 允许程序访问CellID或WiFi热点来获取位置信息

微信支付

API 权限 说明
ALL <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 允许程序修改全局音频设置

Push

调用plus.push.*使用到的权限集

个推推送

API 权限 说明
ALL <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/> 允许程序改变Wi-Fi连接状态
ALL <uses-permission android:name="android.permission.WAKE_LOCK"/> 允许程序保持进程不进入休眠状态
ALL <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/> 允许程序开机启动服务(离线推送服务)
ALL <uses-permission android:name="android.permission.VIBRATE"/> 允许程序访问振动设备
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.GET_TASKS"/> 允许程序获取系统当前运行的任务信息
ALL <uses-permission android:name="android.permission.READ_LOGS"/> 允许程序读取系统日志文件
ALL <uses-permission android:name="android.permission.RECEIVE_USER_PRESENT"/>" 允许程序唤醒机器
ALL <uses-permission android:name="getui.permission.GetuiService"/> 允许程序访问个推离线服务(个推自定义权限)
ALL <permission android:name="getui.permission.GetuiService" android:protectionLevel="normal"/> 允许程序访问个推离线服务(个推自定义权限)

Share

调用plus.share.*使用到的权限集

微信

API 权限 说明
ALL <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 允许程序修改全局音频设置

新浪微博

API 权限 说明
ALL <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/> 允许程序改变Wi-Fi连接状态
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息

QQ分享

API 权限 说明
ALL <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 允许程序修改全局音频设置

腾讯微博

API 权限 说明
ALL <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/> 允许程序改变Wi-Fi连接状态
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 允许程序访问CellID或WiFi热点来获取位置信息
ALL <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 允许程序访问位置信息
ALL <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION"/> 允许程序创建模拟位置

Speech

调用plus.speech.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.RECORD_AUDIO"/> 允许程序录制音频
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/> 允许程序改变网络连接状态
ALL <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息

Statistic

调用plus.statistic.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.READ_LOGS"/> 允许程序读取系统日志文件
ALL <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/> 允许程序开机启动服务(实时提交统计数据服务)
ALL <uses-permission android:name="android.permission.RECEIVE_USER_PRESENT"/> 允许程序唤醒机器

Native.JS

native.js封装的plus.android.* API不需要额外的权限,但导入对应对象调用native API时可能需要用到特定的权限,这时需根据情况在manifest.json中的plus->distribute->google->permissions下添加。

继续阅读 »

5+ API分模块封装调用了系统各种原生能力,而部分能力需要使用到Android的permissions,以下列出了各模块(或具体API)使用的的权限:

基础权限

5+ App必须使用的到最小权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.INTERNET"/> 允许程序访问网络
ALL <uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/> 允许程序读写扩展存储卡

Audio

调用plus.audio.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.RECORD_AUDIO"/> 允许程序录制音频
ALL <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 允许程序修改全局音频设置

Camera

调用plus.camera.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.CAMERA"/> 允许程序使用照相设备
ALL <uses-feature android:name="android.hardware.camera"/> 允许程序访问照相设备

Contacts

调用plus.contacts.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.GET_ACCOUNTS"/> 允许程序访问Accounts Service帐户列表
ALL <uses-permission android:name="android.permission.READ_CONTACTS"/> 允许程序读取用户联系人数据
ALL <uses-permission android:name="android.permission.WRITE_CONTACTS"/> 允许程序修改用户联系人数据

Device

调用plus.device.、plus.screen.、plus.display.、plus.networkinfo.、plus.os.*使用到的权限集

API 权限 说明
plus.device.setWakelock(); plus.device.isWakelock(); <uses-permission android:name="android.permission.WAKE_LOCK"/> 允许程序保持进程不进入休眠状态
plus.device.vibrate(); <uses-permission android:name="android.permission.VIBRATE"/> 允许程序访问振动设备
plus.device.* <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息
plus.device.dail(); <uses-permission android:name="android.permission.CALL_PHONE"/> 允许程序不通过拨号界面拨打电话
plus.networkinfo.* <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
plus.networkinfo.* <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息

Geolocation

调用plus.geolocation.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 允许程序访问位置信息
ALL <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 允许程序访问CellID或WiFi热点来获取位置信息
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/> 允许程序改变Wi-Fi连接状态
ALL <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息
ALL <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/> 允许程序挂载和移除可移动存储设备
ALL <uses-permission android:name="android.permission.READ_LOGS"/> 允许程序读取系统日志文件
ALL <uses-permission android:name="android.permission.WRITE_SETTINGS"/>" 允许程序读取或写入系统设置

Messaging

调用plus.messaging.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.SEND_SMS"/> 允许程序发送SMS短信
ALL <uses-permission android:name="android.permission.READ_SMS"/> 允许程序读取短信息
ALL <uses-permission android:name="android.permission.WRITE_SMS"/> 允许程序写短信

Barcode

调用plus.barcode.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.CAMERA"/> 允许程序使用照相设备
ALL <uses-feature android:name="android.hardware.camera"/> 允许程序访问照相设备
ALL <uses-feature android:name="android.hardware.camera.autofocus"/> 允许程序访问照相设备自动聚焦
ALL <uses-permission android:name="android.permission.FLASHLIGHT"/>" 允许程序访问闪光灯
ALL <uses-permission android:name="android.permission.VIBRATE"/> 允许程序访问振动设备

Map

调用plus.maps.*使用到的权限集

百度地图

API 权限 说明
ALL <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 允许程序访问位置信息
ALL <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 允许程序访问CellID或WiFi热点来获取位置信息
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/> 允许程序改变Wi-Fi连接状态
ALL <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息
ALL <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/> 允许程序挂载和移除可移动存储设备
ALL <uses-permission android:name="android.permission.READ_LOGS"/> 允许程序读取系统日志文件
ALL <uses-permission android:name="android.permission.WRITE_SETTINGS"/>" 允许程序读取或写入系统设置

高德地图

API 权限 说明
ALL <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 允许程序访问位置信息
ALL <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 允许程序访问CellID或WiFi热点来获取位置信息
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/> 允许程序改变Wi-Fi连接状态
ALL <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息
ALL <uses-permission android:name="android.permission.MOUNT_UNMOUNT_FILESYSTEMS"/> 允许程序挂载和移除可移动存储设备
ALL <uses-permission android:name="android.permission.READ_LOGS"/> 允许程序读取系统日志文件
ALL <uses-permission android:name="android.permission.WRITE_SETTINGS"/>" 允许程序读取或写入系统设置

OAuth

调用plus.oauth.*使用到的权限集

微信

API 权限 说明
ALL <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 允许程序修改全局音频设置

新浪微博

API 权限 说明
ALL

QQ分享

API 权限 说明
ALL <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 允许程序修改全局音频设置

Payment

调用plus.payment.*使用到的权限集

支付宝

API 权限 说明
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息
ALL <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 允许程序访问CellID或WiFi热点来获取位置信息

微信支付

API 权限 说明
ALL <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 允许程序修改全局音频设置

Push

调用plus.push.*使用到的权限集

个推推送

API 权限 说明
ALL <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/> 允许程序改变Wi-Fi连接状态
ALL <uses-permission android:name="android.permission.WAKE_LOCK"/> 允许程序保持进程不进入休眠状态
ALL <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/> 允许程序开机启动服务(离线推送服务)
ALL <uses-permission android:name="android.permission.VIBRATE"/> 允许程序访问振动设备
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.GET_TASKS"/> 允许程序获取系统当前运行的任务信息
ALL <uses-permission android:name="android.permission.READ_LOGS"/> 允许程序读取系统日志文件
ALL <uses-permission android:name="android.permission.RECEIVE_USER_PRESENT"/>" 允许程序唤醒机器
ALL <uses-permission android:name="getui.permission.GetuiService"/> 允许程序访问个推离线服务(个推自定义权限)
ALL <permission android:name="getui.permission.GetuiService" android:protectionLevel="normal"/> 允许程序访问个推离线服务(个推自定义权限)

Share

调用plus.share.*使用到的权限集

微信

API 权限 说明
ALL <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 允许程序修改全局音频设置

新浪微博

API 权限 说明
ALL <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/> 允许程序改变Wi-Fi连接状态
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息

QQ分享

API 权限 说明
ALL <uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS"/> 允许程序修改全局音频设置

腾讯微博

API 权限 说明
ALL <uses-permission android:name="android.permission.CHANGE_WIFI_STATE"/> 允许程序改变Wi-Fi连接状态
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.ACCESS_COARSE_LOCATION"/> 允许程序访问CellID或WiFi热点来获取位置信息
ALL <uses-permission android:name="android.permission.ACCESS_FINE_LOCATION"/> 允许程序访问位置信息
ALL <uses-permission android:name="android.permission.ACCESS_MOCK_LOCATION"/> 允许程序创建模拟位置

Speech

调用plus.speech.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.RECORD_AUDIO"/> 允许程序录制音频
ALL <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE"/> 允许程序访问有关GSM网络信息
ALL <uses-permission android:name="android.permission.ACCESS_WIFI_STATE"/> 允许程序访问Wi-Fi网络状态信息
ALL <uses-permission android:name="android.permission.CHANGE_NETWORK_STATE"/> 允许程序改变网络连接状态
ALL <uses-permission android:name="android.permission.READ_PHONE_STATE"/> 允许程序访问手机状态信息

Statistic

调用plus.statistic.*使用到的权限集

API 权限 说明
ALL <uses-permission android:name="android.permission.READ_LOGS"/> 允许程序读取系统日志文件
ALL <uses-permission android:name="android.permission.RECEIVE_BOOT_COMPLETED"/> 允许程序开机启动服务(实时提交统计数据服务)
ALL <uses-permission android:name="android.permission.RECEIVE_USER_PRESENT"/> 允许程序唤醒机器

Native.JS

native.js封装的plus.android.* API不需要额外的权限,但导入对应对象调用native API时可能需要用到特定的权限,这时需根据情况在manifest.json中的plus->distribute->google->permissions下添加。

收起阅读 »

HBuilder/HBuilder中less、sass、scss、stylus、typescript/ts等预编译语言的使用方法

预编译 sass less

一、HBuilderX

1. 语法提示

HBuilderX自带less、scss的完整语法提示和转到定义,无需安装语法提示插件,但不支持stylus的语法提示。
HBuilderX的ts语法提示,需要在菜单【工具】-【插件安装】中安装typescript语法提示插件。

2. 编译

  • 在菜单工具-插件中安装less、sass、scss、stylus、typescript相关的插件,包括编译插件、格式化插件。
  • 安装编译插件后,对less/scss/stylus/ts文件点右键-外部命令,展开的菜单里会有编译菜单。
  • 除了编译菜单,插件下还有配置菜单(那个package.json文件),可设置快捷键、编译路径、是否保存时自动编译等。具体见http://ask.dcloud.net.cn/article/19599
  • 如果你工程下有webpack等编译器,执行npm运行命令时会走工程下的编译器而不是HBuilderX的插件。
  • uni-app项目由uni-app插件在保存时自动编译,无需手动配置。

3. 格式化

格式化less、scss、stylus、typescript等文件需要在插件安装里装prettier插件。然后正常按格式化快捷键ctrl+k即可。

二、老HBuilder

HBuilder支持less、sass。不支持stylus、typescript。

  1. less、scss代码提示:只能提示其中的css部分,less、sass仅支持对已编写的代码的单词提示
  2. 编译:
    对less、sass文件右键点击编译,即可正常编译
    HBuilder还支持预编译器配置,在菜单工具-预编译器配置里,可以自己选配less、sass甚至coffeescript等文件的预编译器,保存即可触发。
    Less文件配置说明, 其他文件可参照操作:
  3. npm全局安装less: npm install less -g
  4. hbuilder 菜单"工具"->"选项"->"预编译器", 修改.less 中的命令路径和命令参数, 也可以直接使用"智能完成".
  5. 如果"智能完成"失败, 请在"命令触发地址"中填写less全局安装后的命令文件lessc.cmd (windows) 或 less (mac)文件的路径. 命令参数请参照截图填写,也可自行修改保存路径
继续阅读 »

一、HBuilderX

1. 语法提示

HBuilderX自带less、scss的完整语法提示和转到定义,无需安装语法提示插件,但不支持stylus的语法提示。
HBuilderX的ts语法提示,需要在菜单【工具】-【插件安装】中安装typescript语法提示插件。

2. 编译

  • 在菜单工具-插件中安装less、sass、scss、stylus、typescript相关的插件,包括编译插件、格式化插件。
  • 安装编译插件后,对less/scss/stylus/ts文件点右键-外部命令,展开的菜单里会有编译菜单。
  • 除了编译菜单,插件下还有配置菜单(那个package.json文件),可设置快捷键、编译路径、是否保存时自动编译等。具体见http://ask.dcloud.net.cn/article/19599
  • 如果你工程下有webpack等编译器,执行npm运行命令时会走工程下的编译器而不是HBuilderX的插件。
  • uni-app项目由uni-app插件在保存时自动编译,无需手动配置。

3. 格式化

格式化less、scss、stylus、typescript等文件需要在插件安装里装prettier插件。然后正常按格式化快捷键ctrl+k即可。

二、老HBuilder

HBuilder支持less、sass。不支持stylus、typescript。

  1. less、scss代码提示:只能提示其中的css部分,less、sass仅支持对已编写的代码的单词提示
  2. 编译:
    对less、sass文件右键点击编译,即可正常编译
    HBuilder还支持预编译器配置,在菜单工具-预编译器配置里,可以自己选配less、sass甚至coffeescript等文件的预编译器,保存即可触发。
    Less文件配置说明, 其他文件可参照操作:
  3. npm全局安装less: npm install less -g
  4. hbuilder 菜单"工具"->"选项"->"预编译器", 修改.less 中的命令路径和命令参数, 也可以直接使用"智能完成".
  5. 如果"智能完成"失败, 请在"命令触发地址"中填写less全局安装后的命令文件lessc.cmd (windows) 或 less (mac)文件的路径. 命令参数请参照截图填写,也可自行修改保存路径
收起阅读 »

HBuilder/HBuilderX真机运行、手机运行、真机联调常见问题

真机运行 App HBuilder

本帖已移动到:https://uniapp.dcloud.net.cn/tutorial/run/run-app-faq.html

.

特别说明

回帖,请详细描述:电脑操作系统、手机系统(anroid、ios)、手机系统版本号、或手机型号。

您只有描述清问题,别人才能更快帮到您。

.

联系方式

HBuilderX Mac电脑专用交流: 148229211

HBuilderX 官方QQ群:793046085

继续阅读 »

本帖已移动到:https://uniapp.dcloud.net.cn/tutorial/run/run-app-faq.html

.

特别说明

回帖,请详细描述:电脑操作系统、手机系统(anroid、ios)、手机系统版本号、或手机型号。

您只有描述清问题,别人才能更快帮到您。

.

联系方式

HBuilderX Mac电脑专用交流: 148229211

HBuilderX 官方QQ群:793046085

收起阅读 »

常见问题

FAQ HBuilder

Q:怎么才能快速掌握HBuilder开发技巧?
A:软件自带HelloHBuilder项目,该项目为教程项目(如果不小心删除了不要担心,可以在新建WEB项目时,使用HelloHBuilder模板新建出来),按照项目中的lesson1.txt中的快捷键敲一遍即可快速掌握HBuilder快速开发技巧。

Q:什么是HTML5+?
A:HTML5+规范是基于HTML5的扩展规范,用于弥补HTML5和原生应用功能之间的差距。HTML5+规范是一个开放的规范,在W3C中国的指导下,由工信部下属的HTML5中国产业联盟(www.html5plus.org)运作,所有规范都是面向开发者的,开发者提需求、开发者评审实现方案、开发者投票选定规范。

Q:什么叫滚动条信息点?
A: 当代码中有重要的标记出现时,会生成滚动条信息点,在滚动条右侧出现颜色各异的点。点击这些点或使用跳转到下一个信息点功能,可以快速到达这些代码处。如下标记会生成信息点:书签、任务、错误提示。
infopiont.png

Q:怎么实现代码追踪?
A: 在编辑代码时经常会出现需要跳转到引用文件或者变量定义的地方,HBuilder提供了一个非常好用的代码追踪功能,只需要按住Alt+鼠标左键即可实现追踪。
图示:
Ctrl_Click

Q:输入small不提示,语法库是不是不全?
A: 代码块是否提示,取决于是否设置了这个代码块,代码块是可自定义的。
默认没有预置small代码块,你也可以在代码块弹出界面点右下角的编辑图标,进行代码块的补充修改。
另外可以使用emmet(ZenCoding)语法,这个没有提示,但敲完small,按tab,就会自动生成标签。
emmet是一种前端公开技术,网上教程很多。

Q:为什么有时候我输入代码块的名称,却没有出现想要的代码块?
A: 代码块的显示名称和激活字符是不同的,查看激活字符请在激活代码助手后选择代码块,看右边信息栏的详情

Q:编辑器怎么实现分栏?
A: HBuilder编辑器分栏功能可以实现左右分栏和上下分栏以及组合分栏。
1、左右分栏实现:鼠标点着编辑器选项卡往最右边拖动即可实现左右分栏
left_right
左右分栏实现效果:
left_right_result
2、上下分栏实现:鼠标点着编辑器选项卡往最下边拖动即可实现上下分栏
up_down
上下分栏实现效果:
up_down_result
3、组合分栏实现:组合分栏就是即有的文件向下拖动,有的文件向右拖动,下面给出一个效果图,感兴趣的话您可以拖个试试:)
muti_result

Q:为什么我的代码明明是对的却报错?
A: HBuilder的语法验证器是集成的三方插件,有可能其本身对某些写法不兼容,当某种语法验证器把正确代码识别为错误时,你可以在工具-选项-HBuilder-Validation中关掉那个语法验证器。还可以设置正则表达式以兼容这种错误。

Q:有没有快速比较两个文件差异的办法?
A: 比较两个文档的方法是,在项目管理器按ctrl选两个文件,点右键,选比较对象

Q:不建项目单独打开文件会提示有部分功能无法使用,具体是哪些功能无法使用?
A: 主要是跨文件的项目管理功能受影响。
HBuilder会为项目建立索引,工程间文件的链接引用关系都在管理中。
这样在跨文件引用提示、转到定义、重构、移动图片路径等很多操作中HBuilder都能智能处理。
如果单独打开文件,功能就弱了很多,当然也比普通文本编辑器多。
举个例子,<a class="classA">,在HBuilder里写class=时,可以提示工程中各种css,classA如果是外部的css文件定义的, 可以按下Alt点鼠标跳转到那个css中。
这都是普通文本编辑器做不到的。
如果您习惯了资源管理器做项目管理、文本编辑器做代码编辑,那么建议改变下工作习惯。
用HBuilder做统一的项目管理和文本编辑,你会发现工作效率更高。

Q:我安装了SVN插件为什么我找不到SVN的功能?
A: 跟eclipse的svn插件用法是一样的。
在工具-插件安装中选择svn插件安装,安装完毕后,按提示重启HBuilder。
在菜单文件-导入里,选择从svn中检出项目,配置svn地址。
在项目管理器中点右键-版本管理,里面有svn的各种提交、更新等命令。

Q:怎么才能快速记住快捷键?
A: 记快捷键,不如记快捷键语法。
Alt是转到,Shift是转移,Ctrl是操作。
比如Alt+括号、引号,即使转到对于的符号。
Shift+回车是<br/>,shift+空格是&nbsp;。
Ctrl+D是删除行,Ctrl+F2是重构命名。

Q:为什么不能手机预览?
A: WEB项目不可以手机预览页面。只有移动APP才可以。
确定项目是移动APP后,确保移动设备插好数据线并连接到电脑。
如果是iOS设备,请确保电脑安装有itunes,如果是Android,请确定手机驱动已经安装。
此时在HBuilder下方的状态栏也会提示手机已连接
然后点运行,选择对应的设备即可。
如果你只是想预览web项目,那么在菜单工具->高级选项->HBuilder->web服务器->内建服务器里,选择一个内网ip,比如192.xxx,然后手机通过wifi连入这台机器,即可预览。

Q:如何修改使用浏览器预览时,地址栏显示的IP
A: 依次点击工具-选项-HBuilder-Web服务器-内建服务器
可修改内建服务器的IP地址为127.0.0.1或本机网卡IP
内建服务器不可以运行PHP
需要重启HBuilder才生效

Q:如何方便在手机上浏览开发的网页?
A: 保证手机和pc在一个网段内,手机可连到pc的web服务器。HBuilder内置的web服务器地址配成192.168等内网地址,手机wifi连入,即可访问。
更改HBuilder内置的web服务器地址请点击菜单工具-选项,展开左边的HBuilder-web服务器-内建服务器,在右边更改地址,需要重启HBuilder才生效。
然后打开边改边看模式,点二维码,然后手机扫码即可。

Q:不能在收起代码的情况下复制粘贴收起的代码?
A: 复制折叠的代码,选择时需要多选择一个换行符。然后再复制。

Q:启动太慢?
A: HBuilder一般启动时6秒左右可以进入完整操作状态。
HBuilder还是属于IDE而不是文本编辑器,速度比文本编辑器慢是肯定的。
这两者最大的区别就是是否有AST语法树和WEB语法解析引擎,就是说HBuilder知道你写的是什么,按下点知道该出什么,写的对不对。
包括重构变量命名和转到定义,这些都是因为有语法树和解析引擎。
拥有最全的web语法库和最强的语法解析引擎,这个也是HBuilder的核心优势。
算是一种取舍吧,启动时慢几秒,但启动后写代码快的可不是差几秒了。
更新:请使用新一代HBuilderX,秒速启动。

Q:速度慢、内存占用高?
A: 速度我们一直在优化,请更新新版再试试。
HBuilder毕竟是IDE,功能比文本编辑器多非常多,执行的也自然会慢点。但机器性能若足够,也可以正常使用。
比如var a = document.getElementById("a1");。
在a后输入点的时候,HBuilder要扫描a到底是什么,超链接?canvas?输入框?然后才会给予用户最准确的提示。
这种计算都需要在按下键盘的很短时间内完成,想不卡还是很有挑战。
文本编辑器没有这些功能,所以不卡。
当然,在机器性能好时,HBuilder写代码要远爽于文本编辑器;但机器性能不好时...
影响性能的一些要素,可帮助你用的更快。
1、如果有固态硬盘,把HBuilder和工程代码都放到固态盘上;
2、同时打开的项目不要太多,把不用的项目点右键关闭,这样HBuilder就不扫描这些项目了,后台资源会释放不少
3、编辑大文档时慎用语法验证器,语法验证器较易引发卡顿,可以在工具-语法验证器设置里关闭。
4、编辑大文档时,最好关闭大纲的实时同步功能。大文档的大纲结构会很多,每次移动光标实时计算大纲的位置会有点慢。可以在需要定位时再点一下同步。大纲实时同步在大纲的右上角的下拉菜单里。
5、清理无用的js框架。Js框架文件都比较大且结构复杂,扫描框架比较费时。不用的框架就移出项目。另如果不在意框架的扫描提示,也可以把框架移除扫描清单,这样就不扫描这个文件了。对文件点右键-构建-移除构建目录。
6、windows search index和dropxbox等工具也会监控磁盘,当项目文件目录被他们监控时,磁盘IO会比较高。在新建项目时会明显卡。
7、有时HBuilder占用的内存释放不及时,可以使用360加速器等工具回收一些内存。
更新:请使用新一代HBuilderX,轻巧敏捷。

Q:升级失败或长时间无响应?
A: 如果装过其他eclipse插件,其升级服务器可能连不上而导致报错。
此时在工具-插件安装-手动安装eclipse插件-可用软件站点,取消其他插件的升级地址。
重新点击帮助-检查新版本即可。

Q:HBuilder必须联网使用吗?
A: 可以点离线使用。
但是没有网络时,有些依赖网络的功能不能使用,比如不能使用云服务创建、打包移动APP。
如果不方便联网,可以第一次使用手机做代理临时登录验证一下,以后就可以脱线使用了。
更新:请使用新一代HBuilderX,直接进软件,不需要点离线使用。

Q:你们会把这个工具做成 eclipse 的插件发布么?
A: 无法变成eclipse插件。
HBuilder里面有4种编程语言,除了java,还有c、HTML、ruby。单纯的java满足不了我们的需求。
另外HBuilder的核心定位就是做最好的HTML5编辑器,而非最好的所有编辑器。
倒是如果大家愿意的话,可以给HBuilder装其他语言的插件。

Q:PHP怎么运行?
A: HBuilder自带的web服务器是不能解析php的。
如果想解析php,需要自己安装php服务器,比如Apache。
安装好后,在HBuilder的工具-选项-web服务器中点新建外部web服务器,配置地址和参数,保存后重启HBuilder。
然后点运行即可。

Q:PHP怎么不高亮不提示?
A: PHP的语法提示需要安装PHP插件。
在工具-插件安装中,可以安装Aptana PHP插件。
如果确定安装了php插件,那么在工具-选项,搜索文件关联,在里面配置php文件和PHP Editor的关联。
也可以在项目管理器里对文件点右键,打开方式,里面选PHP Editor。

Q:PHP插件安装失败了?
A: 关闭PHP文件。
在帮助-关于我们-安装细节里,卸载PHP插件,重启。
然后在工具-插件安装里装php插件。再重启。
如仍有问题,请再联系我们。

继续阅读 »

Q:怎么才能快速掌握HBuilder开发技巧?
A:软件自带HelloHBuilder项目,该项目为教程项目(如果不小心删除了不要担心,可以在新建WEB项目时,使用HelloHBuilder模板新建出来),按照项目中的lesson1.txt中的快捷键敲一遍即可快速掌握HBuilder快速开发技巧。

Q:什么是HTML5+?
A:HTML5+规范是基于HTML5的扩展规范,用于弥补HTML5和原生应用功能之间的差距。HTML5+规范是一个开放的规范,在W3C中国的指导下,由工信部下属的HTML5中国产业联盟(www.html5plus.org)运作,所有规范都是面向开发者的,开发者提需求、开发者评审实现方案、开发者投票选定规范。

Q:什么叫滚动条信息点?
A: 当代码中有重要的标记出现时,会生成滚动条信息点,在滚动条右侧出现颜色各异的点。点击这些点或使用跳转到下一个信息点功能,可以快速到达这些代码处。如下标记会生成信息点:书签、任务、错误提示。
infopiont.png

Q:怎么实现代码追踪?
A: 在编辑代码时经常会出现需要跳转到引用文件或者变量定义的地方,HBuilder提供了一个非常好用的代码追踪功能,只需要按住Alt+鼠标左键即可实现追踪。
图示:
Ctrl_Click

Q:输入small不提示,语法库是不是不全?
A: 代码块是否提示,取决于是否设置了这个代码块,代码块是可自定义的。
默认没有预置small代码块,你也可以在代码块弹出界面点右下角的编辑图标,进行代码块的补充修改。
另外可以使用emmet(ZenCoding)语法,这个没有提示,但敲完small,按tab,就会自动生成标签。
emmet是一种前端公开技术,网上教程很多。

Q:为什么有时候我输入代码块的名称,却没有出现想要的代码块?
A: 代码块的显示名称和激活字符是不同的,查看激活字符请在激活代码助手后选择代码块,看右边信息栏的详情

Q:编辑器怎么实现分栏?
A: HBuilder编辑器分栏功能可以实现左右分栏和上下分栏以及组合分栏。
1、左右分栏实现:鼠标点着编辑器选项卡往最右边拖动即可实现左右分栏
left_right
左右分栏实现效果:
left_right_result
2、上下分栏实现:鼠标点着编辑器选项卡往最下边拖动即可实现上下分栏
up_down
上下分栏实现效果:
up_down_result
3、组合分栏实现:组合分栏就是即有的文件向下拖动,有的文件向右拖动,下面给出一个效果图,感兴趣的话您可以拖个试试:)
muti_result

Q:为什么我的代码明明是对的却报错?
A: HBuilder的语法验证器是集成的三方插件,有可能其本身对某些写法不兼容,当某种语法验证器把正确代码识别为错误时,你可以在工具-选项-HBuilder-Validation中关掉那个语法验证器。还可以设置正则表达式以兼容这种错误。

Q:有没有快速比较两个文件差异的办法?
A: 比较两个文档的方法是,在项目管理器按ctrl选两个文件,点右键,选比较对象

Q:不建项目单独打开文件会提示有部分功能无法使用,具体是哪些功能无法使用?
A: 主要是跨文件的项目管理功能受影响。
HBuilder会为项目建立索引,工程间文件的链接引用关系都在管理中。
这样在跨文件引用提示、转到定义、重构、移动图片路径等很多操作中HBuilder都能智能处理。
如果单独打开文件,功能就弱了很多,当然也比普通文本编辑器多。
举个例子,<a class="classA">,在HBuilder里写class=时,可以提示工程中各种css,classA如果是外部的css文件定义的, 可以按下Alt点鼠标跳转到那个css中。
这都是普通文本编辑器做不到的。
如果您习惯了资源管理器做项目管理、文本编辑器做代码编辑,那么建议改变下工作习惯。
用HBuilder做统一的项目管理和文本编辑,你会发现工作效率更高。

Q:我安装了SVN插件为什么我找不到SVN的功能?
A: 跟eclipse的svn插件用法是一样的。
在工具-插件安装中选择svn插件安装,安装完毕后,按提示重启HBuilder。
在菜单文件-导入里,选择从svn中检出项目,配置svn地址。
在项目管理器中点右键-版本管理,里面有svn的各种提交、更新等命令。

Q:怎么才能快速记住快捷键?
A: 记快捷键,不如记快捷键语法。
Alt是转到,Shift是转移,Ctrl是操作。
比如Alt+括号、引号,即使转到对于的符号。
Shift+回车是<br/>,shift+空格是&nbsp;。
Ctrl+D是删除行,Ctrl+F2是重构命名。

Q:为什么不能手机预览?
A: WEB项目不可以手机预览页面。只有移动APP才可以。
确定项目是移动APP后,确保移动设备插好数据线并连接到电脑。
如果是iOS设备,请确保电脑安装有itunes,如果是Android,请确定手机驱动已经安装。
此时在HBuilder下方的状态栏也会提示手机已连接
然后点运行,选择对应的设备即可。
如果你只是想预览web项目,那么在菜单工具->高级选项->HBuilder->web服务器->内建服务器里,选择一个内网ip,比如192.xxx,然后手机通过wifi连入这台机器,即可预览。

Q:如何修改使用浏览器预览时,地址栏显示的IP
A: 依次点击工具-选项-HBuilder-Web服务器-内建服务器
可修改内建服务器的IP地址为127.0.0.1或本机网卡IP
内建服务器不可以运行PHP
需要重启HBuilder才生效

Q:如何方便在手机上浏览开发的网页?
A: 保证手机和pc在一个网段内,手机可连到pc的web服务器。HBuilder内置的web服务器地址配成192.168等内网地址,手机wifi连入,即可访问。
更改HBuilder内置的web服务器地址请点击菜单工具-选项,展开左边的HBuilder-web服务器-内建服务器,在右边更改地址,需要重启HBuilder才生效。
然后打开边改边看模式,点二维码,然后手机扫码即可。

Q:不能在收起代码的情况下复制粘贴收起的代码?
A: 复制折叠的代码,选择时需要多选择一个换行符。然后再复制。

Q:启动太慢?
A: HBuilder一般启动时6秒左右可以进入完整操作状态。
HBuilder还是属于IDE而不是文本编辑器,速度比文本编辑器慢是肯定的。
这两者最大的区别就是是否有AST语法树和WEB语法解析引擎,就是说HBuilder知道你写的是什么,按下点知道该出什么,写的对不对。
包括重构变量命名和转到定义,这些都是因为有语法树和解析引擎。
拥有最全的web语法库和最强的语法解析引擎,这个也是HBuilder的核心优势。
算是一种取舍吧,启动时慢几秒,但启动后写代码快的可不是差几秒了。
更新:请使用新一代HBuilderX,秒速启动。

Q:速度慢、内存占用高?
A: 速度我们一直在优化,请更新新版再试试。
HBuilder毕竟是IDE,功能比文本编辑器多非常多,执行的也自然会慢点。但机器性能若足够,也可以正常使用。
比如var a = document.getElementById("a1");。
在a后输入点的时候,HBuilder要扫描a到底是什么,超链接?canvas?输入框?然后才会给予用户最准确的提示。
这种计算都需要在按下键盘的很短时间内完成,想不卡还是很有挑战。
文本编辑器没有这些功能,所以不卡。
当然,在机器性能好时,HBuilder写代码要远爽于文本编辑器;但机器性能不好时...
影响性能的一些要素,可帮助你用的更快。
1、如果有固态硬盘,把HBuilder和工程代码都放到固态盘上;
2、同时打开的项目不要太多,把不用的项目点右键关闭,这样HBuilder就不扫描这些项目了,后台资源会释放不少
3、编辑大文档时慎用语法验证器,语法验证器较易引发卡顿,可以在工具-语法验证器设置里关闭。
4、编辑大文档时,最好关闭大纲的实时同步功能。大文档的大纲结构会很多,每次移动光标实时计算大纲的位置会有点慢。可以在需要定位时再点一下同步。大纲实时同步在大纲的右上角的下拉菜单里。
5、清理无用的js框架。Js框架文件都比较大且结构复杂,扫描框架比较费时。不用的框架就移出项目。另如果不在意框架的扫描提示,也可以把框架移除扫描清单,这样就不扫描这个文件了。对文件点右键-构建-移除构建目录。
6、windows search index和dropxbox等工具也会监控磁盘,当项目文件目录被他们监控时,磁盘IO会比较高。在新建项目时会明显卡。
7、有时HBuilder占用的内存释放不及时,可以使用360加速器等工具回收一些内存。
更新:请使用新一代HBuilderX,轻巧敏捷。

Q:升级失败或长时间无响应?
A: 如果装过其他eclipse插件,其升级服务器可能连不上而导致报错。
此时在工具-插件安装-手动安装eclipse插件-可用软件站点,取消其他插件的升级地址。
重新点击帮助-检查新版本即可。

Q:HBuilder必须联网使用吗?
A: 可以点离线使用。
但是没有网络时,有些依赖网络的功能不能使用,比如不能使用云服务创建、打包移动APP。
如果不方便联网,可以第一次使用手机做代理临时登录验证一下,以后就可以脱线使用了。
更新:请使用新一代HBuilderX,直接进软件,不需要点离线使用。

Q:你们会把这个工具做成 eclipse 的插件发布么?
A: 无法变成eclipse插件。
HBuilder里面有4种编程语言,除了java,还有c、HTML、ruby。单纯的java满足不了我们的需求。
另外HBuilder的核心定位就是做最好的HTML5编辑器,而非最好的所有编辑器。
倒是如果大家愿意的话,可以给HBuilder装其他语言的插件。

Q:PHP怎么运行?
A: HBuilder自带的web服务器是不能解析php的。
如果想解析php,需要自己安装php服务器,比如Apache。
安装好后,在HBuilder的工具-选项-web服务器中点新建外部web服务器,配置地址和参数,保存后重启HBuilder。
然后点运行即可。

Q:PHP怎么不高亮不提示?
A: PHP的语法提示需要安装PHP插件。
在工具-插件安装中,可以安装Aptana PHP插件。
如果确定安装了php插件,那么在工具-选项,搜索文件关联,在里面配置php文件和PHP Editor的关联。
也可以在项目管理器里对文件点右键,打开方式,里面选PHP Editor。

Q:PHP插件安装失败了?
A: 关闭PHP文件。
在帮助-关于我们-安装细节里,卸载PHP插件,重启。
然后在工具-插件安装里装php插件。再重启。
如仍有问题,请再联系我们。

收起阅读 »

HBuilder入门-设计理念及常用功能

入门 HBuilder

获取HBuilder

HBuilder新一代产品是HBuilderX,获取上一代产品的方式如下:
http://dcloud.io/hbuilderx.html,点击右上角download,在弹出界面的底部点击“上一代HBuilder下载”。

设计理念

HBuilder,即Html Builder的缩写,Builder是建造者的意思。
HBuilder是一个极客工具,追求无鼠标的极速操作。
不管是敲代码的快捷设定,还是操作功能的快捷设定,都融入了效率第一的设计思想。
程序员究竟是coder,还是builder,我们坚持后者。
不为敲字母而花费时间,不为大小写拼错而调错半天,把精力花在思考上,想清楚后落笔如飞。
支撑这个理念,除了体验上的精细设计,还要求我们突破很多世界级技术难题,包括语法库、语法结构模型、AST语法分析引擎。
另一个需要强调的理念是H。
HBuilder顾名思义是为HTML设计的。
相对于java、.net、object-c这些主流编程语言,HTML开发者以往总感觉低人一等。
但时代在变,前端代码越来越复杂,前端工程师的身价也持续攀高,我们认为HTML5需要一款配得上它的地位的高级IDE,而不再是刀耕火种时代的文本编辑器。
所以HBuilder主要用于开发html、js、css,同时配合HTML的后端脚本语言如php、jsp也可以适用,还有前端的预编译语言如less以及我们钟爱的markdown都可以良好的编辑。
从2013年夏天发布至今,HBuilder已经成为业内主流的开发工具,拥有几百万开发者。
欢迎你使用HBuilder,成为HBuilder。

以下为常用功能简介。

代码助手,飞一样的编码

代码输入法:一个数字,少敲10下键盘。

按下候选列表前的数字,自动把该候选项输入到编辑区,你将不用把所有字都敲一遍了。当然除了数字选择,跳字输入也是支持的。
codeassist

代码块:一个代码块,少敲20下键盘。

图标为codeblock的候选项为代码块。
代码块是常用的代码组合,比如在js中输入$,回车,则可以自动输入document.getElementById(id)。
再举例,在HTML中输入i,回车,可以得到input button标签。
codeblock_input
查看、编辑代码块可以在工具-自定义代码块中,选择相应的代码块进行查看和编辑。也可以在激活代码块的代码助手中,点击详细信息右下角的修改图标进行修改和查看。

代码块激活字符原则1:连续单词的首字母。比如:dg激活document.getElementById("");vari激活var i=0;dn激活display: none;

代码块激活字符原则2:整段HTML一般使用tag的名称。比如script、style,通常,敲最多4个字母即可匹配到需要的代码块,不需要完整录入,如sc回车、st回车,即可完成script、style标签的输入。

代码块激活字符原则3:同一个tag,有多个代码块输出,则在最后加后缀。比如meta输出<meta name="" content=""/>但metau则输出<meta charset="UTF-8"/>,metag同理。

代码块激活字符原则4:如果原始语法超过4个字符,针对常用语法,则第一个单词的激活符使用缩写。比如input button,缩写为inbutton,同理intext是输入框。

代码块激活字符原则5:js的关键字代码块,是在关键字最后加一个重复字母。比如if直接敲会提示if关键字,但iff回车,则出现if代码块。类似的有forr、withh等。由于funtion字母较长,为加快输入速度,取fun缩写,比如funn,输出function代码块,而funa和func,分别输出匿名函数和闭包。

全时提示

HBuilder不仅仅提示全面的语法,非语法的各种候选输入也都能提示。包括图片、链接、颜色、字体、脚本、样式、URI、ID、class、自定义JS对象、方法。

举例,在img src=后激活代码助手,可以看到本工程所有图片列表;输入<sc可以看到本工程所有js列表;在js的document.getElementById(id)中提示本工程已经定义的ID列表;在css的color:后可以列出本工程所有使用过的颜色。

Emmet支持

HBuilder内嵌了emmet(即zencoding)插件。输入div#id1,按下tab,可以自动生成 <div id="id1"></div>。Emmet的详细语法请查阅其官方网站emmet.io。

框架语法支持

HBuilder内嵌了jquery、bootstrap、angular、mui等常用框架的语法提示库,并且这些框架语法一样可以享受到HBuilder的全时提示机制,提示图片、颜色、id、class...
如果要使用框架语法,需要在工具菜单/项目的右键菜单中,点击引入框架语法提示的子项,为该项目选择框架语法提示。提示效果如下:
jq1
jq2
jq3
jq4

JSDoc+

HBuilder扩展了jsdoc,并改良用途用于酷酷的语法提示,让动态的js有了静态的感觉。具体参考:http://ask.dcloud.net.cn/article/129

边看边改

想一边写代码,一边看效果?按下Ctrl P进入边看边改视图。左边保存右边立即刷新。
调试的玩法还有很多,参考http://ask.dcloud.net.cn/article/483

绿柔保护你的眼睛

绿柔主题的特点是柔和、低对比度、强光可见、绿色感加强。对着这样的界面写一天代码,感受要比对着太亮或太暗的界面舒服很多。
绿柔是一个严谨的设计过程,包含色彩心理学和色彩生理学的很多知识,而且在北京国奥心理医院做过严谨的医学测试,形成大量脑电波数据。
我们安排工程师在不同的配色主题下写代码,检测他们的脑疲劳程度,最终调校出了这套配色方案。
实验过程在官网下方也有介绍http://dcloud.io/
这是HBuilder发布会时设计师的演讲实录,表达了我们的设计理念:
最近有部电影叫盲探,其中刘德华盯了4天嫌疑犯眼睛就瞎了,眼睛很重要但也很脆弱。
我们现在的生活中到处是电子屏,电脑屏、手机屏、平板、电视,无论上班下班,我们都对着这些屏幕。这个时代保护眼睛更重要。一定不能程序员让在写代码时受更多罪。所以我们很重视配色方案。
我们调研了所有主流配色方案。没有满意的。有的很漂亮,但长时间看不舒服。所以我们决定自己调,但我们的设计目的不是为了好看,而是为了更健康。
色彩方面有色彩生理学和色彩心理学。我们先来看色彩生理学,当一个人眼睛长期看暗色系事物时,大脑会分泌激素强迫眼睛增强视力,比如我们在一个黑屋子待一会就能看清东西,但回到阳光下时又会晕眩,这叫做暗适应。暗适应会让程序员很不舒服,所以我们不能选暗色系。
再看色彩心理学,不同的色彩给人以不同的心理感受。红色让人感到刺激,绿色让人感到舒适,因为人们会联想到不同的事物从而引发心理的变化。
基于这些分析,调了上百次后,我们得出这样的方案,我们叫它绿柔。它的特点是柔和,自然,低对比度,并且强化了绿色的感觉。我们把各种颜色中的RGB中G,就是绿的数值调的更高。
我们做了样本测试,结果不错,程序员们在使用了一天绿柔界面后都表示比看一天其他软件更舒服。
最后衷心祝愿大家在满是电子屏的世界中,活的更健康!_

最全语法库和浏览器兼容数据

HBuilder的语法库包括W3C的HTML、JAVASCRIPT、CSS的正式标准和推荐标准...,ECMAScript中浏览器支持的部分,还有各大浏览器的扩展语法,webkit、moz、ms,均实时更新到各浏览器的最新版本。
信息栏中的浏览器品牌图标,全亮表示无障碍支持该语法,全灰表示不支持,而半亮则表示该浏览器部分支持该语法。半亮时会下图标下方显示出来详细的支持情况,比如video标签,从IE9才开始支持。

手机App开发

HTML5一大用途就是App开发。HBuilder良好的支持手机App开发。
包括新建移动App项目、run in device真机调试、本地及云端打包。
HBuilder开发的HTML5+ App,比普通的web App功能更强、性能更高,具体参考文档 5+ App章节。

更多挖宝

  • 跳转助手、选择助手、转义助手、快捷键助手,让你手不离键盘。

  • 更多精彩功能:语法校验 | 转到定义 | 重构 | 大纲 | 任务TODO | 版本历史 | 内置webserver | 预编译less、sass等文件

  • 还不满足?下载插件增强更多功能,高手更可开发插件,并共享插件造福所有开发者。

继续阅读 »

获取HBuilder

HBuilder新一代产品是HBuilderX,获取上一代产品的方式如下:
http://dcloud.io/hbuilderx.html,点击右上角download,在弹出界面的底部点击“上一代HBuilder下载”。

设计理念

HBuilder,即Html Builder的缩写,Builder是建造者的意思。
HBuilder是一个极客工具,追求无鼠标的极速操作。
不管是敲代码的快捷设定,还是操作功能的快捷设定,都融入了效率第一的设计思想。
程序员究竟是coder,还是builder,我们坚持后者。
不为敲字母而花费时间,不为大小写拼错而调错半天,把精力花在思考上,想清楚后落笔如飞。
支撑这个理念,除了体验上的精细设计,还要求我们突破很多世界级技术难题,包括语法库、语法结构模型、AST语法分析引擎。
另一个需要强调的理念是H。
HBuilder顾名思义是为HTML设计的。
相对于java、.net、object-c这些主流编程语言,HTML开发者以往总感觉低人一等。
但时代在变,前端代码越来越复杂,前端工程师的身价也持续攀高,我们认为HTML5需要一款配得上它的地位的高级IDE,而不再是刀耕火种时代的文本编辑器。
所以HBuilder主要用于开发html、js、css,同时配合HTML的后端脚本语言如php、jsp也可以适用,还有前端的预编译语言如less以及我们钟爱的markdown都可以良好的编辑。
从2013年夏天发布至今,HBuilder已经成为业内主流的开发工具,拥有几百万开发者。
欢迎你使用HBuilder,成为HBuilder。

以下为常用功能简介。

代码助手,飞一样的编码

代码输入法:一个数字,少敲10下键盘。

按下候选列表前的数字,自动把该候选项输入到编辑区,你将不用把所有字都敲一遍了。当然除了数字选择,跳字输入也是支持的。
codeassist

代码块:一个代码块,少敲20下键盘。

图标为codeblock的候选项为代码块。
代码块是常用的代码组合,比如在js中输入$,回车,则可以自动输入document.getElementById(id)。
再举例,在HTML中输入i,回车,可以得到input button标签。
codeblock_input
查看、编辑代码块可以在工具-自定义代码块中,选择相应的代码块进行查看和编辑。也可以在激活代码块的代码助手中,点击详细信息右下角的修改图标进行修改和查看。

代码块激活字符原则1:连续单词的首字母。比如:dg激活document.getElementById("");vari激活var i=0;dn激活display: none;

代码块激活字符原则2:整段HTML一般使用tag的名称。比如script、style,通常,敲最多4个字母即可匹配到需要的代码块,不需要完整录入,如sc回车、st回车,即可完成script、style标签的输入。

代码块激活字符原则3:同一个tag,有多个代码块输出,则在最后加后缀。比如meta输出<meta name="" content=""/>但metau则输出<meta charset="UTF-8"/>,metag同理。

代码块激活字符原则4:如果原始语法超过4个字符,针对常用语法,则第一个单词的激活符使用缩写。比如input button,缩写为inbutton,同理intext是输入框。

代码块激活字符原则5:js的关键字代码块,是在关键字最后加一个重复字母。比如if直接敲会提示if关键字,但iff回车,则出现if代码块。类似的有forr、withh等。由于funtion字母较长,为加快输入速度,取fun缩写,比如funn,输出function代码块,而funa和func,分别输出匿名函数和闭包。

全时提示

HBuilder不仅仅提示全面的语法,非语法的各种候选输入也都能提示。包括图片、链接、颜色、字体、脚本、样式、URI、ID、class、自定义JS对象、方法。

举例,在img src=后激活代码助手,可以看到本工程所有图片列表;输入<sc可以看到本工程所有js列表;在js的document.getElementById(id)中提示本工程已经定义的ID列表;在css的color:后可以列出本工程所有使用过的颜色。

Emmet支持

HBuilder内嵌了emmet(即zencoding)插件。输入div#id1,按下tab,可以自动生成 <div id="id1"></div>。Emmet的详细语法请查阅其官方网站emmet.io。

框架语法支持

HBuilder内嵌了jquery、bootstrap、angular、mui等常用框架的语法提示库,并且这些框架语法一样可以享受到HBuilder的全时提示机制,提示图片、颜色、id、class...
如果要使用框架语法,需要在工具菜单/项目的右键菜单中,点击引入框架语法提示的子项,为该项目选择框架语法提示。提示效果如下:
jq1
jq2
jq3
jq4

JSDoc+

HBuilder扩展了jsdoc,并改良用途用于酷酷的语法提示,让动态的js有了静态的感觉。具体参考:http://ask.dcloud.net.cn/article/129

边看边改

想一边写代码,一边看效果?按下Ctrl P进入边看边改视图。左边保存右边立即刷新。
调试的玩法还有很多,参考http://ask.dcloud.net.cn/article/483

绿柔保护你的眼睛

绿柔主题的特点是柔和、低对比度、强光可见、绿色感加强。对着这样的界面写一天代码,感受要比对着太亮或太暗的界面舒服很多。
绿柔是一个严谨的设计过程,包含色彩心理学和色彩生理学的很多知识,而且在北京国奥心理医院做过严谨的医学测试,形成大量脑电波数据。
我们安排工程师在不同的配色主题下写代码,检测他们的脑疲劳程度,最终调校出了这套配色方案。
实验过程在官网下方也有介绍http://dcloud.io/
这是HBuilder发布会时设计师的演讲实录,表达了我们的设计理念:
最近有部电影叫盲探,其中刘德华盯了4天嫌疑犯眼睛就瞎了,眼睛很重要但也很脆弱。
我们现在的生活中到处是电子屏,电脑屏、手机屏、平板、电视,无论上班下班,我们都对着这些屏幕。这个时代保护眼睛更重要。一定不能程序员让在写代码时受更多罪。所以我们很重视配色方案。
我们调研了所有主流配色方案。没有满意的。有的很漂亮,但长时间看不舒服。所以我们决定自己调,但我们的设计目的不是为了好看,而是为了更健康。
色彩方面有色彩生理学和色彩心理学。我们先来看色彩生理学,当一个人眼睛长期看暗色系事物时,大脑会分泌激素强迫眼睛增强视力,比如我们在一个黑屋子待一会就能看清东西,但回到阳光下时又会晕眩,这叫做暗适应。暗适应会让程序员很不舒服,所以我们不能选暗色系。
再看色彩心理学,不同的色彩给人以不同的心理感受。红色让人感到刺激,绿色让人感到舒适,因为人们会联想到不同的事物从而引发心理的变化。
基于这些分析,调了上百次后,我们得出这样的方案,我们叫它绿柔。它的特点是柔和,自然,低对比度,并且强化了绿色的感觉。我们把各种颜色中的RGB中G,就是绿的数值调的更高。
我们做了样本测试,结果不错,程序员们在使用了一天绿柔界面后都表示比看一天其他软件更舒服。
最后衷心祝愿大家在满是电子屏的世界中,活的更健康!_

最全语法库和浏览器兼容数据

HBuilder的语法库包括W3C的HTML、JAVASCRIPT、CSS的正式标准和推荐标准...,ECMAScript中浏览器支持的部分,还有各大浏览器的扩展语法,webkit、moz、ms,均实时更新到各浏览器的最新版本。
信息栏中的浏览器品牌图标,全亮表示无障碍支持该语法,全灰表示不支持,而半亮则表示该浏览器部分支持该语法。半亮时会下图标下方显示出来详细的支持情况,比如video标签,从IE9才开始支持。

手机App开发

HTML5一大用途就是App开发。HBuilder良好的支持手机App开发。
包括新建移动App项目、run in device真机调试、本地及云端打包。
HBuilder开发的HTML5+ App,比普通的web App功能更强、性能更高,具体参考文档 5+ App章节。

更多挖宝

  • 跳转助手、选择助手、转义助手、快捷键助手,让你手不离键盘。

  • 更多精彩功能:语法校验 | 转到定义 | 重构 | 大纲 | 任务TODO | 版本历史 | 内置webserver | 预编译less、sass等文件

  • 还不满足?下载插件增强更多功能,高手更可开发插件,并共享插件造福所有开发者。

收起阅读 »

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,并获得更多用户和变现收益!

收起阅读 »