zoukankan      html  css  js  c++  java
  • HBuilder初探——强大的提示符及纯网页打包成APP

    之前做手机页面,只是时效短、更新度高的零星几个,供APP内嵌调用。比如抽奖嘛、活动宣传啦。

    现在的公司,不知是不是不知者无畏,整一个app全部用html5来实现,包括头部导航条。客户端只需封装一下,打个包就OK。实现的方式是网页放在服务器,像从浏览器访问一下,客户端只是充当一个浏览器的角色。这种方式app store应该是不允许的吧。但所做的只是供医院内部人员使用的一个项目,能实现在线学习课程、报名、考试、签到、查房、论文申报等功能就OK。

    得知HBuilder这个东东,还是从客户口里听来的,他对HBuilder推崇备致,充满对新技术的兴奋感。他说这个可以实现下载到本地,而不是从服务器访问。还可以打包。更可以调用设备的一些功能,如摄像头什么的,这倒比较新鲜,我从来不知道网页也可以调用设备。

    于是去找来研究了一下。发现的确是有不少优点。不考虑别的,只拿它来做html编辑器都是极好的,速度快、提示相当强大。

    它内嵌了emmet,就是以前的zen coding,使代码提示功能发挥到极致,速度加快不少。

    举例如下:

    一、js(按“回车”键)

    dl:$("")

    dli:$("#")----id

    dlc:$(".")----class

    dg:document.getElementById("")

    二、DOM(按Tab键)

    不用输入<>,直接输入标签的名字即可。

    ! or html:5:

    html5全套标签

    <!doctype html>
    <html lang="en">
    <head>
    <meta charset="UTF-8" />
    <title>Document</title>
    </head>
    <body>

    </body>
    </html>

    p#foo.bar:

    <p id="foo" class="bar"></p>

    h1{foo}: <h1>foo</h1>

    >:子元素;+:同级元素;^:换行;*:复制

    div+div>p>span+em^bq:

    <div></div>

    <div>

      <p>

        <span></span>

        <em></em>

      <p>

      <blockquote></blockquote>

    </div>

    ul>li*5:

    <ul>

      <li></li>
      <li></li>
      <li></li>
      <li></li>
      <li></li>

    </ul>

    另外还可以用它来打包成app,安装到手机上,当原生来用。而我之前的做法都是搭好本机服务器,用草料二维码生成访问地址,再用手机扫描,在手机浏览器中打开来调试。从没试过可以安装,甚至可以定义图标和应用名称。

    在hbuilder中新建移动APP项目;在manifest.json中设置应用名称、版本号和入口页面等;在第二页“图标配置”中可以上传app的图标。

    然后右键“发行”,选择“App打包”,android使用DCloud公用证书上传到云端打包,通过360手机助手可以直接安装到手机。

    有一个问题:打包的app按返回键时会直接退出程序,而不是返回上一页,这需要用到html5+的plus.key.addEventListener('backbutton',function()手动设置backbutton监听事件来定义。

    common.js:

    //取消浏览器的所有事件,使得active的样式在手机上正常生效
    document.addEventListener('touchstart',function(){
    return false;
    },true);
    // 禁止选择
    document.oncontextmenu=function(){
    return false;
    };
    // H5 plus事件处理
    var ws=null,as='pop-in';// 默认窗口动画

    function plusReady(){
    ws=plus.webview.currentWebview();
    // 隐藏滚动条
    ws.setStyle({scrollIndicator:'none'});
    // Android处理返回键
    var pageUrl=window.location.href;
    plus.key.addEventListener('backbutton',function(){
    //判断是否返回到首页,是->退出,否则返回上一页
    if(pageUrl.indexOf('home')==-1){
    history.back();
    }else{
    if(confirm('确认退出?')){
    plus.runtime.quit();
    }
    }
    },false);
    }
    //扩展API是否准备好,如果没有则监听“plusready"事件
    if(window.plus){
    plusReady();
    }else{
    document.addEventListener('plusready',plusReady,false);
    }

  • 相关阅读:
    丁丁又病了
    领导之所以是领导
    丁丁的进步
    最近比较烦
    批量更新数据表
    转帖:《EnterLib PIAB深入剖析》系列博文汇总
    XML DOM介绍
    转大白话系列之C#委托与事件讲解大结局
    using
    jQuery工作原理解析以及源代码示例
  • 原文地址:https://www.cnblogs.com/wildorchid/p/4727483.html
Copyright © 2011-2022 走看看