最近看了下h5+规范的官网,开始觉得晦涩难懂,确实很乱,不过这也是基于我不理解的情况,终于艰难读完了,现在来分享下心得吧,基本看完文章,按我的方法,应该可以直接上手项目。

  我准备的工具 hbuilder编译器(打包用),逍遥安卓模拟器(测试安卓用)一个html 搞定,开工,为了讲解的更易于新手,咱们从简单的一个底部弹出的按钮这个demo为例子,先看下效果图

iOS H5参数拼接 h5怎么集成plus_f5

如上就是效果图 ,就实现这个  可以吧,虽然简单,或许来说用个插件就实现了 没必要去碰h5+,但是这只是为了大家抱砖引玉用。重点不是教你实现这个是教你看h5+文档,会看文档什么效果不可以写?

开始

iOS H5参数拼接 h5怎么集成plus_控件_02

我使用的是nativeUI的actionSheet这个模块,看方法模块这里能清晰的知道,这个方法/模块是做什么用的,可以看到  我这个是:弹出系统选择按钮框,那么,点一下标题开始往下面走到用的这个模块的专区

iOS H5参数拼接 h5怎么集成plus_控件_03

到了这里,喜欢对照示例的就可以不往下了,当然我不是,我喜欢自己去写,所以我会去看说明,参数。

首先是这段代码



NativeUIObj plus.nativeUI.actionSheet(actionsheetStyle, actionsheetCallback);



开始看时候一脸懵逼,这nima是个啥?什么鬼,不急  咱们直接看参数,

有actionsheetStyle和actionsheetCallback这俩参数,翻了上下半天,没找到啊,难道猜测字义么,那个是是什么啊?懵逼,不慌,我来教你 首先我们看到actionsheetStyle这个是必选参数,我先来找找他,可以发现参数后面小括号是个蓝色,应该是个链接,点击,

iOS H5参数拼接 h5怎么集成plus_html_04

哈哈,还真是这个参数介绍,原来这个是参数都写在最后了,可以清晰看到 这写的很清楚,json对象,有title/cancel/buttons这三个参数,需要注意他后面的支持版本,不要轻易使用哦,像buttons里面也写清楚了他的格式,也可以通过点击格式来到对应的介绍,就这么简单,看懂文档还愁不会代码么?那我们尝试下。

首先,h5的plus对象仅作用于app,其次他也是类似于window.onload一样的存在不过他的监听要用



document.addEventListener("plusready",plusReady,false);



 

这样子来监听是否初始化,初始化就可以开始读文档写代码了,让我们来编辑plusReady函数吧

首先我们调用plus.nativeUI.actionSheet这个  然后我们开始根据上面已知的开始配置了,这就能实现如上图搬的效果了,



function plusReady(){
        plus.nativeUI.actionSheet({
            title:"我是弹窗title",
            cancel:"我是取消哦",
            buttons:[
                {
                    color:"#f55",
                    title:"按钮一"
              
                },
                {
                    color:"f55",
                    title:"按钮二"
                    
                },
                {
                    color:"f55",
                    title:"按钮三"
                    
                }
            ]
        })
    }



刚才文档还有第二个参数是个回调,那我们来加上?下面是上图的全部代码,直接打包app即可预览



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    
   <div onclick = "plusReady()">
        弹出系统选择按钮框
   </div>

</body>
<script>
    function plusReady(){
        plus.nativeUI.actionSheet({
            title:"我是弹窗title",
            cancel:"我是取消哦",
            buttons:[
                {
                    color:"#f55",
                    title:"按钮一"
              
                },
                {
                    color:"f55",
                    title:"按钮二"
                    
                },
                {
                    color:"f55",
                    title:"按钮三"
                    
                }
            ]
        },function(e){
            alert(JSON.stringify(e));
        })
    }
    if(window.plus){
        plusReady();
    }else{
        document.addEventListener("plusready",plusReady,false);
    }
    
</script>
</html>



tips:千万不要吧js单独拿出去(或者你后期用webpack什么的合并也可以)因为hb是不会把你外联一起打包进app。

 

下面给大家一份索引  需要干嘛直接去某个模块,免得挨个去找浪费时间了,快去创建属于你的app



http://www.html5plus.org/doc/zh_cn/nativeui.html#plus.nativeUI.ActionSheetStyles



accelerometer
Accelerometer模块管理设备加速度传感器,用于获取设备加速度信息,包括x(屏幕水平方向)、y(垂直屏幕水平方向)、z(垂直屏幕平面方向)三个方向的加速度信息。通过plus.accelerometer获取设备加速度传感器管理对象。

audio
Audio模块用于提供音频的录制和播放功能,可调用系统的麦克风设备进行录音操作,也可调用系统的扬声器设备播放音频文件。通过plus.audio获取音频管理对象。


barcode
Barcode模块管理条码扫描,支持常见的条码(一维码及二维码)的扫描识别功能。可调用设备的摄像头对条码图片扫描进行数据输入,解码后返回码数据及码类型。通过plus.barcode可获取条码码管理对象。


camera
Camera模块管理设备的摄像头,可用于拍照、摄像操作,通过plus.camera获取摄像头管理对象。

contacts
Contacts模块管理系统通讯录,用于可对系统通讯录进行增、删、改、查等操作。通过plus.contacts获取系统通讯录管理对象。

device
Device模块管理设备信息,用于获取手机设备的相关信息,如IMEI、IMSI、型号、厂商等。通过plus.device获取设备信息管理对象。

downloader
ownloader模块管理网络文件下载任务,用于从服务器下载各种文件,并支持跨域访问操作。通过plus.downloader获取下载管理对象。Downloader下载使用HTTP的GET/POST方式请求下载文件,符合标准HTTP/HTTPS传输协议。

Events
Events模块管理客户端事件,包括系统事件,如扩展API加载完毕、程序前后台切换等。

fingerprint
Fingerprint模块管理指纹识别。

gallery
Gallery模块管理系统相册,支持从相册中选择图片或视频文件、保存图片或视频文件到相册等功能。通过plus.gallery获取相册管理对象。


geolocation
Geolocation模块管理设备位置信息,用于获取地理位置信息,如经度、纬度等。通过plus.geolocation可获取设备位置管理对象。虽然W3C已经提供标准API获取位置信息,但在某些平台存在差异或未实现,为了保持各平台的统一性,定义此规范接口获取位置信息。

ibeacon
iBeacon模块用于搜索附件的iBeacon设备(*请使用HBuilderX并更新到最新版本*)




io
IO模块管理本地文件系统,用于对文件系统的目录浏览、文件的读取、文件的写入等操作。通过plus.io可获取文件系统管理对象。


key
Key管理设备按键事件


maps
Maps模块管理地图控件,用于在web页面中显示地图控件,提供各种接口操作地图控件,如添加标点、路线等。通过plus.maps可获取地图管理对象。

messaging
Messaging模块管理设备通讯功能,可用于短信、彩信、邮件发送等。通过plus.messaging可获取设备通讯管理对象。另外也可以直接通过html中的href直接快速发送短信、拨打电话、发送邮件等。


nativeObj
nativeObj管理系统原生对象。

nativeUI
nativeUI管理系统原生界面,可用于弹出系统原生提示对话框窗口、时间日期选择对话框、等待对话框等。

navigator
navigator用于管理浏览器运行环境信息

oauth
OAuth模块管理客户端的用户登录授权验证功能,允许应用访问第三方平台的资源。

orientation
Orientation模块管理设备的方向信息,包括alpha、beta、gamma三个方向信息,通过plus.orientation可获取设备方向管理对象。

payment
Payment模块管理支付功能,用于提供网页安全支付能力,支持通过Web接口进行支付操作。通过plus.payment可获取支付管理对象。

proximity
Proximity模块管理设备距离传感器,可获取当前设备的接近距离信息,通过plus.proximity可获取设备距离传感管理对象。

push
Push模块管理推送消息功能,可以实现在线、离线的消息推送,通过plus.push可获取推送消息管理对象。

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


share
Share模块管理客户端的社交分享功能,提供调用终端社交软件的分享能力。通过plus.share可获取社交分享管理对象。

speech
Speech模块管理语音输入功能,提供语音识别功能,可支持用户通过麦克风设备进行语音输入内容。通过plus.speech可获取语音输入管理对象。

statistic

Statistic模块管理统计功能,用于提供应用内统计的能力,支持统计和分析用户属性和用户行为数据。通过plus.statistic可获取统计管理对象。



storage
Storage模块管理应用本地数据存储区,用于应用数据的保存和读取。应用本地数据与localStorage、sessionStorage的区别在于数据有效域不同,前者可在应用内跨域操作,数据存储期是持久化的,并且没有容量限制。通过plus.storage可获取应用本地数据管理对象。

uploader
Uploader模块管理网络上传任务,用于从本地上传各种文件到服务器,并支持跨域访问操作。通过plus.uploader可获取上传管理对象。Uploader上传使用HTTP的POST方式提交数据,数据格式符合Multipart/form-data规范,即rfc1867(Form-based File Upload in HTML)协议。

video
Video模块管理多媒体视频相关能力,可用创建视频播放控件,直播推流控件等

webview
Webview模块管理应用窗口界面,实现多窗口的逻辑控制管理操作。通过plus.webview可获取应用界面管理对象。

net
XMLHttpRequest模块管理网络请求,与标准HTML中的XMLHttpRequest用途一致,差别在于前者可以进行跨域访问。通过plus.net可获取网络请求管理对象。

zip
Zip模块管理文件压缩和解压,通过plus.zip可获取压缩管理对象。