HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。HBuilder的编写用到了Java、C、Web和Ruby。HBuilder本身主体是由Java编写。它基于Eclipse,所以顺其自然地兼容了Eclipse的插件。
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP。
前言 本人是一名JAVA后端开发,偶尔也会研究一下前端内容,因为Hbuilder是基于eclipse开发的,所以用起来倍感亲切啊,而且在我尝试使用的几款前端开发工具中,Hbuilder的表现也是相当出色地,可以访问Huilder官网下载
1、打开Hbuilder编辑器,菜单-工具-插件安装-选择FTP-安装 2、在自己项目右键-部署-运行web部署向导-选中FTP/SFTP/FTPS-下一步,按要求填写相关信息,最后确定。
其实大部分坑在 uni-app在官网都有介绍 具体位置在 [在 uni-app 中使用 Vue.js][1] 模块 官方文档中总结了很多坑,但我只说一下我今天遇到的: **坑1:[uni-app不支持vue中的过滤器][2]** 解决办法:从后台获取数据后始用js对数据进行处理, 例子: 始用过滤器时: {{talk.date|formatTime}} 始用uni-app: uni.request({ ...
insert_source_header.rb print %Q{#{line_comment}#{comment_start} #{line_comment}#{indent}#{tm_filename} #{line_comment}#{indent}#{project} #{line_comment}#{indent} #{line_comment}#{indent}Created by #{username} on #{date}. #{line_comment}#{indent}Copyright #{Time.now.year} #{copyright_holder}. Al...
注册表:HKEY_CURRENT_USER\Software\HBuilder (删除)
1.在打包之前需要修改一个地方,那就是config->index.js文件,修改assetsPublicPath: '/'为assetsPublicPath: './',截图如下上面文件改好后,开始打包,执行如下命令:npm run build生成 dist 文件夹 2.打包步骤步骤一:将 dist 文件 放入 HBuilder 编辑器中,将项目 转换成 App ,生成 manifest.json步骤二:配置 manifest.json , 点击 "发行" 按钮 -- 发行为原生安装包(P)步骤三:安装 -- 测试 -- 上线
Hybrid App(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。Hybrid App是什么呢1.Hybrid App就是一个移动应用2.同时使用网页语言与程序语言编写3.通过应用商店进行分发4.区分目标平台5.用户需要安装使用综合一下就是:“Hybrid App同时使用网页语言与程序语言开发,通过应用商店区分移动操作系统分发,用户需要安装使用的移动应用”。总体特性更接近Native App但是和Web App区别较大。只是因为同时使用了网页语言编码,所以开发成本和难度比Native App要小很多。因此说,Hybrid App兼具了Native App的所有优势,也兼具了Web App使用HTML5跨平台开发低成本的优势。Hybrid混合开发的原理其核心是使用WebView控件来实现:Native调用前端页面的JS方法,或者前端页面通过JS调用Native提供的接口;Native和前端JS互相调用皆通过Webview桥梁来实现。 图来自:http://www.cnblogs.com/yexiaochai/p/4921635.html  叶小钗-浅谈Hybrid技术的设计与实现Hybrid混合开发的优缺点优点:1.一次编译多平台运行。iPhone,Android2.开发速度快,不需要了解各个平台的native开发语言也可以开发轻量级移动应用。3.内容更新不需要内容审查。4,各平台UI表现一致。缺点:1.使用体验与native开发有差距。2,需要native api部分还是需要原生技术支持。Hybrid混合开发的工具1.Phonegap2.WeX53.Dcloud4.Appcan5.Apicloud 总结: app开发模式有3种:1,原生App,webApp,混合开发App。 而Hyprid App(混合开发App):既有原生App优良用户体验,又有web app的跨平台优点。而其核心是使用WebView控件实现加载。 WebView:是一个基于webkit引擎、展现web页面的控件。可以和JavaScript交互调用。 Hybrid混合开发的框架:PhoneGap:侧重于JS与原生的交互,但性能差,如触摸时反应不灵敏。AppCan:性能还行,使用简单,但要提交代码给AppCan的服务器才能打包,(把自己的代码提交给第三方才能打包) 
HBuilder是DCloud(数字天堂)推出的一款支持HTML5的Web开发IDE。该软件既可以支持web代码编写,也可以将已经编写好的项目代码打包为手机APP。HBuilder提供的打包有云端打包和本地打包两种,云端打包的特点是DCloud官方配置好了原生的打包环境,可以把HTML等文件编译为原生安装包。 1,下载HBuilder,注册并登陆。首先打开“文件”-“新建”-“移动APP”,输入“应用名称”,“位置”可以根据需要自己选择即可,“选择模板”建议选择空模板;2,新建完成后, 在项目管理器会显示新建的项目目录,其中css,img,js和index.html这几个文件可删可改可替换。unpackage文件夹是放置app图标和启动界面的图片。manifest.json文件是移动App的配置文件,用于指定应用的显示名称、图标、应用入口文件地址及需要使用的设备权限等信息,用户可通过HBuilder的可视化界面视图或者源码视图来配置移动App的信息。3,如果删除了css,img,js文件夹和index.html文件,就把其他自己的项目文件对应复制到文件夹中,注意html文件中的引用路径需要保持正确。如下图自己拷贝的项目: 4, 文件复制完成后,刷新更新下,双击打开manifest.json文件来配置App。appid:点击云端获取。版本号:根据需要来编辑。页面入口:默认是index.html,根据自己项目需要,更改APP的启动页面。应用描述:自己随便填。应用是否全屏显示:勾上就全屏显示。5,图标配置:点击页面下方的图标配置,配置APP显示图标。1)点击"+"号的正方形方框,选择图标素材的路径找到图标素材,再点击" 自动生成所有图标并替换"按钮,完成图标生成和替换。2),生成的图标自动在unpackage文件夹下6,启动图片(splash)配置,点击切换到启动图片配置1),启动选项:默认2),启动图片设置,根据自己需要是Android还是iOS平台,再根据不同设备对应做出启动图片3),在unpackage→res文件下新建个文件命名"splash",把做好的启动图片放到这个文件里面。4),在启动图片设置里点击"选择",找到刚放进来的启动图片7,SDK配置:有需要就配置,没有就默认就行。8,模块权限配置:有需要就配置,没有就默认就行。9,页面引用关系:首先点击“扫描代码”,再点击左边index.html文件该功能是什么意思:点击左侧html文件,右侧会显示不同的文件,图片等。可以表示左侧html文件加载时所需要的资源。10,代码视图:在代码视图里查看设置是否正确,确定后ctrl+s保存好。11,设置好配置选项,正式进入打包阶段HBuilder里点:"发行"-"发行为原生安装包"开始打包这里介绍一下iOS打包1),这里如果选择越狱包就不需要苹果证书,一路默认设置就可以打包成功,但是打包的App只能安装在越狱过的手机,没越狱安装不了。2),如果使用苹果证书,这里推荐一个申请iOS证书的工具 Appuploader。免苹果付费开发者账号,直接使用普通苹果id,就能使用Appuploader申请ios测试证书,打包ipa安装到非越狱设备。工具的安装网址:http://www.applicationloader.net/blog/zh/72.html免开发者账号申请iOS证书教程:http://www.applicationloader.net/blog/zh/1073.html 12,提交成功后点击确定,就可以查看App打包状态等打包成功,就可以点手动下载,通过第三方工具 苹果助手安装到ipad上了。13,调试和安装模拟器如果你需要在电脑本机进行调试那就需要安装模拟器,请参考http://ask.dcloud.net.cn/article/151如何安装配置手机模拟器,或者在HBuilder里→→运行→→手机运行→→如何安装配置手机模拟器进入查看。如果需要安装到手机进行真机调试,把手机用数据线连接到电脑,然后重新启动HBuilder→→运行→→手机运行→→连接上真机。 
accordion(折叠面板)<ul class="mui-table-view"><li class="mui-table-view-cell mui-collapse"><a class="mui-navigate-right" href="#">面板1</a><div class="mui-collapse-content"><p>面板1子内容</p></div></li></ul>可以在折叠面板中放置任何内容;折叠面板默认收缩,若希望某个面板默认展开,只需要在包含.mui-collapse类的li节点上,增加.mui-active类即可。actionsheet(操作表)badge(数字角标)数字角标一般和其他控件(列表,9宫格,选项卡等)配合使用,用于进行数量的提示。角标的核心类是.mui-badge,默认为实心灰色背景;mui还内置了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的数字角标、mui-badge 实心灰色mui-badge-primary 蓝色mui-badge-success 绿色mui-badge-warning 黄色mui-badge-danger 红色mui-badge-purple 紫色若无需底色,则增加.mui-badge-inverted类即可button(按钮)mui默认按钮为灰色,另外还提供了蓝色(blue)、绿色(green)、黄色(yellow)、红色(red)、紫色(purple)五种色系的按钮,五种色系对应五种场景,分别为primary、success、warning、danger、royal;使用.mui-btn类即可生成一个默认按钮,继续添加.mui-btn-颜色值或.mui-btn-场景可生成对应色系的按钮,例如:通过.mui-btn-blue或.mui-btn-primary均可生成蓝色按钮;普通按钮在button节点上增加.mui-btn类,即可生成默认按钮;若需要其他颜色的按钮,则继续增加对应class即可,比如.mui-btn-blue即可变成蓝色按钮<button type="button" class="mui-btn">默认</button><button type="button" class="mui-btn mui-btn-primary">蓝色</button><button type="button" class="mui-btn mui-btn-success">绿色</button><button type="button" class="mui-btn mui-btn-warning">黄色</button><button type="button" class="mui-btn mui-btn-danger">红色</button><button type="button" class="mui-btn mui-btn-royal">紫色</button>默认按钮有底色,运行效果如下:若希望无底色、有边框的按钮,仅需增加.mui-btn-outlined类即可,代码如下:<button type="button" class="mui-btn mui-btn-outlined">默认</button><button type="button" class="mui-btn mui-btn-primary mui-btn-outlined">蓝色</button><button type="button" class="mui-btn mui-btn-success mui-btn-outlined">绿色</button><button type="button" class="mui-btn mui-btn-warning mui-btn-outlined">黄色</button><button type="button" class="mui-btn mui-btn-danger mui-btn-outlined">红色</button><button type="button" class="mui-btn mui-btn-royal mui-btn-outlined">紫色</button>运行效果如下:加载按钮属性名 作用data-loading-text loading 状态显示的文案,默认为: loadingdata-loading-icon loading 状态显示的icon,默认为mui-spinner或mui-spinner mui-spinner-white(根据按钮样式自动识别),为空表示不使用icondata-loading-icon-position loading 状态显示的icon的位置,支持left/right默认leftcardview(卡片视图)卡片视图常用于展现一段完整独立的信息,比如一篇文章的预览图、作者信息、点赞数量等使用mui-card类即可生成一个卡片容器,卡片视图主要有页眉、内容区、页脚三部分组成,结构如下:<div class="mui-card"><!--页眉,放置标题--><div class="mui-card-header">页眉</div><!--内容区--><div class="mui-card-content">内容区</div><!--页脚,放置补充信息或支持的操作--><div class="mui-card-footer">页脚</div></div>卡片页眉及内容区,均支持放置图片; 页眉放置图片的话,需要在.mui-card-header节点上增加.mui-card-media类,然后设置一张图片做背景图即可,代码如下:<div class="mui-card-header mui-card-media" height:40vw;background-image:url(../images/cbd.jpg)"></div>若希望在页眉放置更丰富的信息,比如头像、主标题、副标题,则需使用.mui-media-body类<div class="mui-card-header mui-card-media"><img src="../images/logo.png" /><div class="mui-media-body">小M<p>发表于 2016-06-30 15:30</p></div></div>checkbox(复选框)默认checkbox在右侧显示,若希望在左侧显示,只需增加.mui-left类即可,如下:<div class="mui-input-row mui-checkbox mui-left"><label>checkbox左侧显示示例</label><input name="checkbox1" value="Item 1" type="checkbox"></div>若要禁用checkbox,只需在checkbox上增加disabled属性即可;dialog(对话框)组件名 作用alert 警告框confirm 确认框prompt 输入对话框toast 消息提示框mui v3.0 版本(含)以上的dialog控件支持换行(n)显示alert.alert( message, title, btnValue, callback [, type] )messageType: String提示对话框上显示的内容titleType: String提示对话框上显示的标题btnValueType: String提示对话框上按钮显示的内容callbackType: Function提示对话框上关闭后的回调函数typeValue: 'div'是否使用h5绘制的对话框confirm.confirm( message, title, btnValue, callback [, type] )messageType: String提示对话框上显示的内容titleType: String提示对话框上显示的标题btnValueType: Array提示对话框上按钮显示的内容callbackType: Function提示对话框上关闭后的回调函数typeValue: 'div'是否使用h5绘制的对话框prompt.prompt( message, placeholder, title, btnValue, callback[, type] )messageType: String提示对话框上显示的内容placeholderType: String编辑框显示的提示文字titleType: String提示对话框上显示的标题btnValueType: Array提示对话框上按钮显示的内容callbackType: Function提示对话框上关闭后的回调函数typeValue: 'div'是否使用h5绘制的对话框如果有定制对话框样式的需求( 只能修改h5模式对话框)可以在mui.css中修改.mui-popup类下的样式toast.toast( message [,options])message:'String' - 消息框显示的文字内容options: {JSON} - 提示消息的参数**options 参数需要mui v3.5+支持参数 说明 说明duration 持续显示时间,默认值 short(2000ms) 支持 整数值 和 String ,String可选: long(3500ms),short(2000ms)type 强制使用mui消息框(div模式) 'div'mui.toast('登陆成功',{ duration:'long', type:'div' })closePopup.closePopup()(只能关闭h5模式的对话框)关闭最后一次弹出的对话框closePopups.closePopups()(只能关闭h5模式的对话框)关闭所有对话框gallery(图片轮播)DO
事件绑定除了可以使用addEventListener()方法监听某个特定元素上的事件外, 也可以使用.on()方法实现批量元素的事件绑定。.on(event,selector,handler)eventType:String选择器selectorType:String选择器handlerType:Function(Event event)事件触发时的回调函数,通过回调中的event参数可以获得事件详情点击新闻列表,获取当前列表项的id,并将该id传给新闻详情页面,然后打开新闻详情页面mui(".mui-table-view").on('tap','.mui-table-view-cell',function(){//获取idvar id = this.getAttribute("id");//传值给详情页面,通知加载新数据mui.fire(detail,'getDetail',{id:id});//打开新闻详情mui.openWindow({id:'detail',url:'detail.html'});})事件取消使用on()方法绑定事件后,若希望取消绑定,则可以使用off()方法。 off()方法根据传入参数的不同,有不同的实现逻辑。.off(event,selector,handler)eventType:String需取消绑定的事件名称,例如:'top'selectorType:String选择器handlerType:Function之前绑定到该元素上的事件函数,不支持匿名函数off(event,selector,handle)适用于取消对应选择器上特定事件所执行的特定回调,例如://点击li时,执行foo_1函数mui("#list").on("tap","li",foo_1);//点击li时,执行foo_2函数mui("#list").on("tap","li",foo_2);function foo_1(){console.log("foo_1 execute");}function foo_2(){console.log("foo_2 execute");}//点击li时,不再执行foo_1函数,但会继续执行foo_2函数mui("#list").off("tap","li",foo_1);``.off(event,selector)eventType:String需取消绑定的事件名称,例如:'top'selectorType:String选择器off(event,selector)适用于取消对应选择器上特定事件的所有回调,例如://点击li时,执行foo_1函数mui("#list").on("tap","li",foo_1);//点击li时,执行foo_2函数mui("#list").on("tap","li",foo_2);function foo_1(){console.log("foo_1 execute");}function foo_2(){console.log("foo_2 execute");}//点击li时,foo_2、foo_2两个函数均不再执行mui("#list").off("tap","li");``.off(event)eventType:String需取消绑定的事件名称,例如:'top'off(event)适用于取消当前元素上绑定的特定事件的所有回调,例如://点击li时,执行foo_1函数mui("#list").on("tap","li",foo_1);//点击p时,执行foo_3函数mui("#list").on("tap","p",foo_3);function foo_1(){console.log("foo_1 execute");}function foo_3(){console.log("foo_3 execute");}//点击li时,不再执行foo_1函数;点击p时,也不再执行foo_3函数mui("#list").off("tap");``.off()空参数,删除该元素上所有事件off()适用于取消当前元素上绑定的所有事件回调,例如://点击li时,执行foo_1函数mui("#list").on("tap","li",foo_1);//双击li时,执行foo_4函数mui("#list").on("doubletap","li",foo_4);//点击p时,执行foo_3函数mui("#list").on("tap","p",foo_3);function foo_1(){console.log("foo_1 execute");}function foo_3(){console.log("foo_3 execute");}function foo_4(){console.log("foo_4 execute");}//点击li时,不再执行foo_1函数;点击p时,也不再执行foo_3函数;双击li时,也不再执行foo_4函数;mui("#list").off();事件触发使用mui.trigger()方法可以动态触发特定DOM元素上的事件.trigger(element,event,data)elementType:Element触发事件的DOM元素eventType:String事件名字,例如:'tap','swipeleft'dataType:Object需要传递给事件的业务参数自动触发按钮的点击事件:var btn = document.getElementById("submit");//监听点击事件btn.addEventListener("tap",function () {console.log("tap event trigger");});//触发submit按钮的点击事件mui.trigger(btn,'tap');手势事件在开发移动端的应用时,会用到很多的手势操作,比如滑动、长按等,为了方便开放者快速集成这些手势,mui内置了常用的手势事件,目前支持的手势事件见如下列表:分类 参数 描 述点击 tap 单击屏幕doubletap 双击屏幕长按 longtap 长按屏幕hold 按住屏幕release 离开屏幕滑动 swipeleft 向左滑动swiperight 向右滑动swipeup 向上滑动swipedown 向下滑动拖动 dragstart 开始拖动drag 拖动中dragend 拖动结束手势事件配置根据使用频率,mui默认会监听部分手势事件,如点击、滑动事件;为了开发出更高性能的moble App,mui支持用户根据实际业务需求,通过mui.init方法中的gestureConfig参数,配置具体需要监听的手势事件,。mui.init({gestureConfig:{tap: true, //默认为truedoubletap: true, //默认为falselongtap: true, //默认为falseswipe: true, //默认为truedrag: true, //默认为truehold:false,//默认为false,不监听release:false//默认为false,不监听}});注意:dragstart、drag、dragend共用drag开关,swipeleft、swiperight、swipeup、swipedown共用swipe开关事件监听单个元素上的事件监听,直接使用addEventListener()即可,如下:elem.addEventListener("swipeleft",function(){console.log("你正在向左滑动");});若多个元素执行相同逻辑,则建议使用事件绑定(on())。自定义事件在App开发中,经常会遇到页面间传值的需求,比如从新闻列表页进入详情页,需要将新闻id传递过去; Html5Plus规范设计了evalJS方法来解决该问题; 但evalJS方法仅接收字符串参数,涉及多个参数时,需要开发人员手动拼字符串; 为简化开发,mui框架在evalJS方法的基础上,封装了自定义事件,通过自定义事件,用户可以轻松实现多webview间数据传递。仅能在5+ App及流应用中使用因为是多webview之间传值,故无法在手机浏览器、微信中使用;监听自定义事件添加自定义事件监听操作和标准js事件监听类似,可直接通过window对象添加,如下:window.addEventListener('customEvent',function(event){//通过event.detail可获得传递过来的参数内容....});触发自定义事件通过mui.fire()方法可触发目标窗口的自定义事件:.fire( target , event , data )targetType:WebviewObjecteventType:String自定义事件名称dataType:JSONjson格式的数据
vue和mui一起完成登录页面(在hbuilder编辑器)<!DOCTYPE html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><title>vue做登录页面</title><link href="css/mui.min.css" rel="stylesheet" /><link rel="stylesheet" href="font_319767_xof0t45qf9qhyqfr/iconfont.css" /><style>#app {background: #ffcc33;width: 100%;padding: 20px;}.content {width: 100%;background: #ff6666;padding: 20px;}.form-group {position: relative;width: 100%;height: 45px;margin-bottom: 10px;}label {position: absolute;left: 8px;top: 10px;}label i {color: #ff6666;}.iconfont {font-size: 24px;}.form-group input {margin-bottom: 0;padding-left: 40px;}.form-group:nth-child(4) input{width: 60%;}.mui-btn-warning {float: right;width: 35%;height: 40px;font-size: 16px;}.mui-btn-primary {width: 100%;height: 40px;font-size: 16px;border-radius: 5px;}</style></head><body><div id="app"><div class="content"><div class="form-group"><label><i class="iconfont icon-yonghurenzheng"></i></label><input type="text" placeholder="请输入姓名" v-model.trim="name "/></div><div class="form-group"><label><i class="iconfont icon-shenfenzheng"></i></label><input type="text" placeholder="请输入身份证号码" v-model.trim="number"/></div><div class="form-group"><label><i class="iconfont icon-lianxifangshi"></i></label><input type="text" placeholder="请输入手机号码" v-model.trim="photo"/></div><div class="form-group"><label><i class="iconfont icon-duanxin"></i></label><input type="text" placeholder="请输入验证码" v-model.trim="code"/><button type="button" class="mui-btn mui-btn-warning" id="getTel">获取验证码</button></div><div class="form-group"><button type="button" class="mui-btn mui-btn-primary" @tap="btn">登录</button></div></div></div></body><script src="js/mui.min.js"></script><script src="js/vue.js"></script><script>new Vue ({el: "#app",data: {name: "",number: "",photo: "",code: ""},methods: {btn() {name: this.name;number: this.number;photo: this.photo;card: this.card;if(this.name == ""){mui.toast("请输入姓名");return;}//身份证验证var regIdNo = /(^d{15}$)|(^d{18}$)|(^d{17}(d|X|x)$)/;// 身份证号码为15位或者18位,15位时全为数字,18位前17位为数字,最后一位是校验位,可能为数字或字符Xif(this.number == ""){mui.toast("请输入身份证号码");return;}else if(!regIdNo.test(this.card_no)){mui.toast('身份证号填写有误');return false;}var regphoto = /^0?(13[0-9]|15[012356789]|17[013678]|18[0-9]|14[57])[0-9]{8}$/;if(this.photo == ""){mui.toast("请输入手机号码");return;}else if(!regphoto.test(this.tel)){mui.toast("手机号填写有误");return false;}if(this.code == ""){mui.toast("请输入验证码");return;}mui.ajax(index.html,{data: {name: this.name,number: this.number,photo: this.photo,card: this.card,},success:function(){mui.alert("登录成功")}})}}})</script></html>
vue点击切换颜色只能点击一个<!doctype html><head><meta charset="UTF-8"><title>修改资料--类别</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="../../css/mui.min.css" rel="stylesheet" /><link rel="stylesheet" href="../../css/modify-categroy.css" /></head><body><div id="categroy" v-cloak><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">类别</h1><span class="mui-save mui-pull-right">保存</span></header><div class="mui-content"><div class="categroy-box" ><span class="categroy-btn " v-for="(item,index) in items" :class='{active:changeActive == index }' @tap="isActive(index)">{{item.msg}}</span></div></div><p>最多可选择三项</p></div><script src="../../js/mui.min.js"></script><script src="../../js/vue.js"></script><script type="text/javascript">mui.init()var categroy = new Vue({el:'#categroy',data:{items:[{msg: '电影'},{msg: '剧集'},{msg: '综艺'},{msg: 'MV'},{msg: '记录'},{msg: '广告'},{msg: 'VR'},{msg: '动漫'},{msg: '其他'}],changeActive:0},mounted:function() {},methods: {isActive:function(index) {var _this = this;_this.changeActive = index;}}})</script></body>less用less实现#categroy {.mui-bar {background: #fff;box-shadow: none;border-bottom: 1px solid #c8c7cc;.mui-icon {color: #c8c7cc;}.mui-save {padding: 14px 10px;margin: 0 -10px;font-size: 14px;}}.mui-content {width: 100%;height: 100%;background: #ffffff;.categroy-box {margin: 13px 30px;.categroy-btn {display: inline-block;width: 23%;line-height: 2;margin: 0 5px 8px 0;text-align: center;font-size: 1.6rem;}.active {border-radius: 16px;color: #ffffff;background: #0189ff;}}}p {margin: 12px 0 0 20px;font-size: 1.6rem;}}vue点击切换颜色限制个数<!doctype html><html><head><meta charset="UTF-8"><title>修改资料--类别</title><meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" /><link href="../../css/mui.min.css" rel="stylesheet" /><link rel="stylesheet" href="../../css/modify-categroy.css" /></head><body><div id="categroy" v-cloak><header class="mui-bar mui-bar-nav"><a class="mui-action-back mui-icon mui-icon-left-nav mui-pull-left"></a><h1 class="mui-title">类别</h1><span class="mui-save mui-pull-right">保存</span></header><div class="mui-content"><div class="categroy-box" ><span class="categroy-btn " v-for="(item,index) in items" :class='{active:item.checked }' @tap="isActive(item)">{{item.msg}}</span></div></div><p>最多可选择三项</p></div><script src="../../js/mui.min.js"></script><script src="../../js/vue.js"></script><script type="text/javascript">mui.init()var categroy = new Vue({el:'#categroy',data:{items:[{msg: '电影'},{msg: '剧集'},{msg: '综艺'},{msg: 'MV'},{msg: '记录'},{msg: '广告'},{msg: 'VR'},{msg: '动漫'},{msg: '其他'}]},mounted:function() {},methods: {isActive:function(item) {var _this = this;var a = document.getElementsByClassName('active');//如果active class的checked是否存在if(typeof item.checked == 'undefined') {if(a.length<3){console.log(a.length)//全局创建//Vue.set(item,'checked',true);//局部创建_this.$set(item,'checked',true);}else {mui.toast('最多选择三项')}}else{item.checked = !item.checked;}}}})</script></body></html>
HTML5+API deviceDevice Device模块管理设备信息,用于获取手机设备的相关信息,如IMEI、IMSI、型号、厂商等。通过plus.device获取设备信息管理对象。对象: networkinfonetworkinfo模块用于获取网络信息networkinfo常量CONNECTION_UNKNOW: 网络连接状态未知CONNECTION_NONE: 未连接网络CONNECTION_ETHERNET: 有线网络CONNECTION_WIFI: 无线WIFI网络CONNECTION_CELL2G: 蜂窝移动2G网络CONNECTION_CELL3G: 蜂窝移动3G网络CONNECTION_CELL4G: 蜂窝移动4G网络方法getCurrentType: 获取设备当前连接的网络类型演示代码<div class="mui-content"><button type="button" id="btn1">获取设备信息</button></div></body><script type="text/javascript">mui.init();document.getElementById("btn1").addEventListener('tap', function(){mui.alert(plus.networkinfo.getCurrentType());});</script>使用网络前建议先判断网络情况<script type="text/javascript">mui.init();document.getElementById("btn1").addEventListener('tap', function(){var connectionStatus = plus.networkinfo.getCurrentType();if(connectionStatus == 0 || connectionStatus == 1){mui.toast('无法连接网络');}else if(connectionStatus == 3){mui.toast('使用wifi');}//......................});</script>检测网络状态变化<script type="text/javascript">mui.init();mui.plusReady(function(){document.addEventListener("netchange", function(){var nt = plus.networkinfo.getCurrentType();switch ( nt ) {case plus.networkinfo.CONNECTION_ETHERNET: //网络状态常量,当前设备连接到有线网络,固定值2case plus.networkinfo.CONNECTION_WIFI: //网络状态常量,当前设备连接到无线WIFI网络,固定值3alert("切换到wifi!");break;case plus.networkinfo.CONNECTION_CELL2G: //网络状态常量,当前设备连接到蜂窝移动2G网络,固定值为4。alert('切换到2G网络!')case plus.networkinfo.CONNECTION_CELL3G: //网络状态常量,当前设备连接到蜂窝移动3G网络,固定值为5。alert('切换到3G网络!')case plus.networkinfo.CONNECTION_CELL4G: //网络状态常量,当前设备连接到蜂窝移动4G网络,固定值为6。alert("切换到4G网络!");break;default:alert("无网络!");break;}}, false );});</script>原文地址: http://www.hcoder.net/tutorials/info_98.html官网地址: http://www.html5plus.org/doc/zh_cn/device.html#plus.networkinfoHTML5+ - 窗口事件及原生dom事件addEventListener 添加事件监听函数document.addEventListener(event,callback,capture);参数event: (DOMString) 必选要添加监听的事件类型,可取下面列出的所有事件常量callback: (EventTrigCallback) 必选扩展API加载完毕触发的回调函数capture:(Boolean) 可选 事件流捕获顺序,可忽略事件常量'plusready': 扩展API加载完成事件'pause': 运行环境从前台切换到后台事件'resume': 运行环境从后台切换到前台事件'netchange': 设备网络状态变化事件'newintent': 新意图事件'plusscrollbottom': 窗口滚动到底部事件'error': 页面加载错误事件'background': 应用切换到后台运行事件'foreground': 应用切换到前台运行事件'trimmemory': 应用需要清理内存事件'splashclosed':应用启动界面已关闭事件plusready: 扩展API加载完成事件document.addEventListener( "plusready", plusreadyCallback, capture )说明:String 类型为了保证扩展API的有效调用,所有应用页面都会用到的重要事件。应用页面显示时需要首先加载扩展和API代码库,当扩展API代码库加载完成时会触发pluseready事件,当设备触发该事件后,用户就可以安全的调用扩展API。 如果程序中打开多个页面,每个都会收到此事件。示例:// 扩展API加载完毕后调用onPlusReady回调函数document.addEventListener( "plusready", onPlusReady, false );function onPlusReady() {// 扩展API加载完毕,现在可以正常调用扩展API}pause: 运行环境从前台切换到后台事件document.addEventListener( "pause", pauseCallback, capture );当程序从前台切换到后台时会触发此事件。 若应用需要处理从前台切换到后台的事件行为,可通过注册事件监听器来监听“pause”事件,此事件需要在plusready事件后通过document进行注册。mui.plusReady(function(){document.addEventListener('pause',function(){mui.toast('app 在后端运行');},false)});resume: 运行环境从后台切换到前台事件document.addEventListener( "resume", resumeCallback, capture );mui.plusReady(function(){document.addEventListener('pause',function(){mui.toast('app 在后端运行');},false);document.addEventListener('resume',function(){mui.toast('app 在前端端运行');},false)});netchange:设备网络状态变化事件document.addEventListener("netchange", netchangeCallback, capture);String 类型设备网络状态发生时会触发此事件。 若应用需要处理网络状态变化的事件行为,可通过注册事件监听器来监听“netchange”事件,此事件需要在plusready事件后通过document进行注册// 扩展API加载完毕后调用onPlusReady回调函数document.addEventListener("plusready", onPlusReady, false);function onPlusReady(){document.addEventListener("netchange", onNetChange, false);}function onNetChange(){var nt = plus.networkinfo.getCurrentType();switch (nt){case plus.networkinfo.CONNECTION_ETHERNET:case plus.networkinfo.CONNECTION_WIFI:alert();break;case plus.networkinfo.CONNECTION_CELL2G:case plus.networkinfo.CONNECTION_CELL3G:case plus.networkinfo.CONNECTION_CELL4G:alert();break;default:alert();break;}}newintent:新意图事件document.addEventListener("newintent", newintentCallback, capture);String 类型程序从后台被第三方程序调用并传入新意图事件。 此时程序将切换到前台运行,若应用需要处理新意图的事件行为,可通过注册事件监听器来监听“newintent”事件,此事件需要在plusready事件后通过document进行注册。// 扩展API加载完毕后调用onPlusReady回调函数document.addEventListener("plusready", onPlusReady, false);function onPlusReady(){document.addEventListener("newintent", onNetIntent, false);}function onNetIntent(){// 获取新意图传入的参数var args = plus.runtime.arguments;// 处理意图事件}plusscrollbottom: 窗口滚动到底部事件document.addEventListener( "plusscrollbottom", eventCallback, capture );当滚动Webview窗口到底部时触发此事件。mui.plusReady(function(){document.addEventListener( "plusscrollbottom", onScrollToBottom, false );function onScrollToBottom() {mui.toast('窗口滚动到底部');}});background:应用切换到后台运行事件document.addEventListener("background", backgroundCallback,