PHP群:95885625 Hbuilder+MUI群:81989597 站长QQ:634381967
    您现在的位置: 首页 > 开发编程 > 编程杂谈 > 正文

    webapp使用HBuilder,Runtime,mui

    作者:admin来源:网络浏览:时间:2020-09-30 00:07:50我要评论
    导读:1:HBuilder:开发工具;目前竟然没有一个开发工具能把7w多HTML5语法提示齐全,xcode之于iOS,eclipse之于Android,vs之于winphone,在语法提示、转到定义、重构、调试等方面都非常高效。
    作用:使用HTML5开发出原生体验的App

    1:HBuilder:开发工具;目前竟然没有一个开发工具能把7w多HTML5语法提示齐全,xcode之于iOS,eclipse之于Android,vs之于winphone,在语法提示、转到定义、重构、调试等方面都非常高效。

      1.1.优点

        1.1.1:强大的语法提示

        1.1.2:最快的开发工具

        1.1.3:App开发及部署:run in device真机调试,打包发行

    2:HTML5plus Runtime,简称5+ Runtime,是运行于手机端的强化web引擎,除了支持标准HTML5外,还支持更多扩展的js api,使得js的能力不输于原生。5+ Runtime内置于HBuilder,在真机运行、打包时自动挂载。

    3:mui前端框架问题

        3.1:Jquery mobile比较知名,但有3个硬伤:1. 体积高达500k;2. data-的写法虽然写起来简单,但在运行时需要js去解析HTML5标签并替换为新的dom结构,这是非常消耗手机资源和影响加载速度的;3. 样式风格自成一派,不是用户所熟悉的原生样式。

        3.2:基于这种情况,DCloud推出了开源的mui框架(http://dcloudio.github.io/mui/),它是目前最高性能和最接近原生体验的手机端框架。它的3个特点与Jquery mobile正好对应:1. 体积小,不到100k; 2. 直接使用class编写,性能远高于data-方式,又通过代码块的编写方式降低了开发者编码的复杂度 3. mui的风格样式是最接近原生样式的。

      3.3:MUI(Mobile User Interface)是一套基于Html5的,遵循Html5+规范的,中国团队(是否有老外我不知道哦)开发的,开源的(遵循MIT 条款),用于手机端界面开发的一套框架。以下内容摘自MUI在Github上的项目介绍:性能和体验的差距,一直是mobile app开发者放弃HTML5的首要原因。 浏览器天生的切页白屏、不忍直视的转页动画、浮动元素的抖动、无法流畅下拉刷新等问题,这些都让HTML5开发者倍感挫败,尤其拿到Android低端机运行,摔手机的心都有; 另一方面,浏览器默认控件样式又少又丑,制作一个漂亮的控件非常麻烦,也有一些制作简单的ui框架但性能低下。mui框架有效的解决了这些问题,这是一个可以方便开发出高性能App的框架,也是目前最接近原生App效果的框架。

    一:hbuilder使用方法

      1:快捷输入法

        1.1:在js中输入$+回车:document.getElementById("")

        1.2:在html中输入i:<!--[if IE]><![endif]-->

        1.3:forr:for(){ };funn:function function_name () {};forr:for () {};withh:with (){};funa:function () {}匿名函数;

      2:ctrl+p:边看边改视图;

    二:JSDoc

      1:有2个作用,导出API文档和明确代码类型,辅助代码提示。

    一:安装环境

      1:详见:http://ask.dcloud.net.cn/article/69

      2:

        2.1:在Chrome地址栏,输入“about:inspect”或通过“菜单”->“工具”->“检查设备”打开设备检查页面:

        2.2:hbuilder中运行-手机运行-在**设备上运行

        2.3:这时候about:inspect页面会出现

    webapp使用HBuilder,Runtime,mui

      2.4:点击inspect,即可在chrome上调试手机页面

        webapp使用HBuilder,Runtime,mui

      3:如果上面调试页面打不开,则是chrome需要FQ(chrome+goagent+SwitchySharp )

        3.1:注册google邮箱( 无法打开,可以下载XSkyWalker浏览器注册,这个浏览器自带FQ功能。)

        3.2:在Google App Engine申请appid(https://appengine.google.com),上面的是已经申请好的,点击create Appication,application identifer自定义,但不能重复,title随便写,然后点击完成。

          webapp使用HBuilder,Runtime,mui

     

    webapp使用HBuilder,Runtime,mui

    3.3:下载goagent最新版本,在goagent/local/proxy.ini 将appid改成自己的,运行 goagent/server/uploader.bat,根据提示输入 appid 以及 Gmail 的邮箱、密码等来进行上传。上图中的status为running即为上传成功。

    3.4:运行 goagent/local/goagent.exe 程序。(每次FQ都需运行这个),点击蓝色的goagent则表示任何网站都用goagent

    webapp使用HBuilder,Runtime,mui

    3.5:如果出现goagent连接超时,在proxy.ini文件中将[google_cn]下的

    webapp使用HBuilder,Runtime,mui

    改为:然后退出,以管理员方式重新登录即可。

    [google_cn]
    mode = http
    hosts = 203.208.46.1|203.208.46.2|203.208.46.3|203.208.46.4|203.208.46.5|203.208.46.6|203.208.46.7|203.208.46.8

    3.5:chrome添加switchysharp插件。

    转载请注明(B5教程网)原文链接:https://b5.mxunkeji.com/content-74-5459-1.html
    相关热词搜索: