码迷,mamicode.com
首页 > Web开发 > 详细

Flask&&人工智能AI -- 8 HTML5+ 初识,HBuilder,夜神模拟器,Webview

时间:2019-01-17 15:57:28      阅读:423      评论:0      收藏:0      [点我收藏+]

标签:怎么   json   pymongo   路径   apt   hat   win   双击   实现   

昨日内容回顾

技术分享图片
1.增删改查:
    增:
    db.collections.insert({a:1}) // 官方不推荐了
    db.collections.insertMany([{a:1},{b:1}])
    insertOne({a:1})
    
    查:
    db.collections.find({a:1,b:1})
    db.collections.findOne({a:1})
    
    改:
    db.collections.update({a:1},{$set:{b:2}}) // 官方不推荐了
    db.collections.updateOne({a:1},{$push:{name:1}})
    db.collections.updateMany({a:1},{$push:{name:1}})
    
    删:
    remove({})     //    官方不推荐写法
    deleteOne({a:1}) 
    deleteMany({a:1})

2.数学比较符:
    $gt 大于
    $gte 大于等于
    $lt 小于
    $lte 小于等于
    
    
3.修改器:
    1.$pull : 删除array中的元素
    2.$push : array中添加元素
    3.$inc : updateOne({a:1},{$inc:{a:1}}) 在原有值基础上增加xx
    4.$pop : 删除array第一个或最后一个值
    

4.$查询关键字:
    1.$in find({a:{$in:[1,2]}}) a的取值范围在[1,2] 查询字段的值符合$in描述的范围
    2.$all find({a:{$all:[1,2]}}) 查询字段值必须完全包含$all描述的范围 
    3.$or find({$or:[{a:1},{b:2}]}) 或 满足任意 $or 范围的数据
    
5.sort
    find({a:1}).sort({a:-1}) 1:升序 -1:降序
    pymongo sort("a",pymongo.DESCENDING) ASCENDING

6.skip
    skip(2) 跳过前两条数据,从第三条数据开始返回

7.limit
    limit(2) 只显示当前位置之后的两条数据

8.分页
    find({a:1}).sort({a:-1}).skip(5).limit(10)
View Code

 

一、HTML5+ 初识

HTML5 Plus应用概述

HTML5 Plus移动App,简称5+App,是一种基于HTML、JS、CSS编写的运行于手机端的App,这种App可以通过扩展的JS API任意调用手机的原生能力,实现与原生App同样强大的功能和性能。

 

HTML5 Plus规范

通过HTML5开发移动App时,会发现HTML5很多能力不具备。为弥补HTML5能力的不足,在W3C中国的指导下成立了www.html5plus.org组织,推出HTML5+规范。

HTML5+规范是一个开放规范,允许三方浏览器厂商或其他手机runtime制造商实现。

HTML5+扩展了JavaScript对象plus,使得js可以调用各种浏览器无法实现或实现不佳的系统能力,设备能力如摄像头、陀螺仪、文件系统等,业务能力如上传下载、二维码、地图、支付、语音输入、消息推送等。

HBuilder的手机原生能力调用分2个层面:

- 跨手机平台的能力调用都在HTML5+规范里,比如二维码、语音输入,使用plus.barcode和plus.speech。编写一次,可跨平台运行。
- Native.js是另一项创新技术。手机OS的原生API有四十多万,大量的API无法被HTML5使用。Native.js把几十万原生API封装成了js对象,通过js可以直接调ios和android的原生API。这部分就不再跨平台,写法分别是plus.ios和plus.android,比如调ios game center,或在android手机桌面创建快捷方式。

Native.js的用法示例,var obj= plus.android.import("android.content.Intent");,将一个原生对象android.content.Intent映射为js对象obj,然后在js里操作obj对象的方法属性就可以了。

HTML5+ App

使用HTML5+开发的移动App并非mobile web页面。这是新手最容易混淆的地方。mobile web的文件存放在web服务器上,而移动App的文件存放在手机本地,编写移动App的html、js、css文件被打包到ipa或apk等原生安装包,在手机客户端运行。

用个更形象的列子,web app仍然是b/s结构,而移动App是c/s结构甚至是完全脱线的单机应用。
这或许有点超过一些人的想象,他们认为HTML就是web、就是b/s,事实上javascript早已可通过nodejs等技术运行在服务器侧,而在HBuilder的移动App里,HTML、JS等文件也可以被打包成原生安装包。

当然这些移动App里某些页面也可以继续从服务器端以网页方式下行,就像任何原生应用(如微信)都可以内嵌网页一样。

所以mobile web,在HBuilder里新建项目时,属于web项目。不要放置到移动App项目下。mobile web项目也不能真机联调和打包。

举几个例子说明mobile web和移动App的区别。
例1:把一个mobile web项目,打包成移动App。

1. 在HBuilder里新建一个web项目,把mobile web代码放进去。
2. 在HBuilder里新建移动App
3. 在新建的移动App下找到manifest.json,将其中的入口页面配置为mobile web的网络地址。
4. 然后点发行打包,就得到一个移动App的安装包。除了有个安装包和桌面有个快捷方式外,与浏览器的体验不会有其他区别。
5. 不过注意,这样的移动App体验很差,它在页面跳转时会像浏览器那样切换并且白屏,它完全无法脱线使用,没有网络时点开这个app只能看到一片白板。这样的app在Apple的Appstore审核时是无法通过的,其他大的安卓市场也不会允许发行。

例子2:正规的移动App

1. 在HBuilder里新建移动App项目
2. 在移动App里编写html、Js、css文件,本地js通过ajax方式请求服务器数据,通过plus.net对象避开跨域限制
3. 移动App里的js可以通过plus对象调用手机原生能力
4. 编写好的移动App点打包变成安装包,这才是一个体验良好的、可上线的移动App。

例子3:混合型移动App

这里的混合型移动App,所指并非是原生和HTML5的hybrid App,而是指一部分页面是本地的HTML,通过ajax与服务器交互,另一部分页面是从服务器下行的mobile web页面。
1. 分别新建一个web项目和一个移动App项目
2. 在移动App里的某个html里通过<a href= 或者location.href=或者webview对象的loadURL方法指定mobile web的页面地址。
3. 在服务器下行的mobile web页面中,一样可以通过js调用本地HTML5Plus api对硬件层进行访问。类似微信JS SDK。

HTML5+ 应用架构

技术分享图片

HTML5+ 规范 API 及demo示例

最新规范请参考http://www.html5plus.org/#specification
手机端体验各个API的实现效果,ios手机在Appstore搜索Hello H5+,Android手机下载地址
在HBuilder中新建移动App,选Hello H5+,即可看到这个demo的源代码。

建议:在进行开发之前先把DCloud公司提供的实例都运行一遍,这样能够利用许多现有的功能模块,省去很多开发时间和成本。

开发环境HBuilder

HBuilder内置HTML5+ APP开发环境,提供一套完整的移动应用开发解决方案。内置HTML5+ API语法提示,提高开发效率;集成真机运行环境,方便开发后即时在真机上查看运行效果;集成应用云端打包系统,不用部署xcode和Android sdk就可以打包应用。使开发者只需要使用HTML5、Javascript、CSS技术就可以快速开发跨平台的移动应用。
下载地址:http://www.dcloud.io/

平台支持

    • iOS 5.0及以上
    • Android 2.3及以上

 

本文参考链接:

https://www.cnblogs.com/sMKing/p/6717846.html

使用HBuilder开发移动App,HBuilder是基于Eclipse进行二次开发的,所以新建项目等各项操作与Eclipse类似。

 

这是绿色版,解压即可。下载地址如下:

链接:https://pan.baidu.com/s/1dw1mtTGwFltkear8hKGnRA 密码:o738

 

进入官网:

http://www.dcloud.io/mui.html

看到右边有一个手机黑框,里面有很多功能,可以点击看看。比如这个:

技术分享图片

只需要3个字母,就能帮你生成了!是不是很6?这个是HBuilder的代码块功能的其中一个,下面会慢慢介绍!

通过十几个代码,就能帮你快速生成一个APP首页!

 

新建移动APP

首先打开HBulider,新建一个移动App项目,文件-->新建-->移动APP

技术分享图片

 

双击index.html,选择右边的 边改边看模式

技术分享图片

默认是一个空白页面

 

代码块

打开官方文档

http://dev.dcloud.net.cn/mui/snippet/

接下来会用到5个代码块,分别是

  • mhe 标题栏
  • msl 图片轮播
  • mgr 九宫格
  • mli 图文列表图片居左
  • mta 底部选项卡

 

mhe  标题栏

输入mhe,选择下面的。然后回车!Ctrl+s保存。效果如下:

技术分享图片

注意: 一定要保存代码,否则右边的效果是不会有的!

 

msl  图片轮播

技术分享图片

 

mgr  九宫格

技术分享图片

 

mli  图文列表图片居左

技术分享图片

 

 mta  底部选项卡

技术分享图片

 

首页效果就出来了,由于轮播图,没有图片。可以加一个图片,完整代码如下:

技术分享图片
<!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></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
          mui.init();
    </script>
</head>
<body>
    <!--###标题栏###-->
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">首页</h1>
    </header>
    <!--###图片轮播###-->
    <div id="slider" class="mui-slider" >
      <div class="mui-slider-group mui-slider-loop">
        <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img src="http://placehold.it/400x300">
          </a>
        </div>
        <!-- 第一张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="http://www.sinaimg.cn/qc/photo_auto/photo/86/40/44698640/44698640_950.jpg">
          </a>
        </div>
        <!-- 第二张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="http://placehold.it/400x300">
          </a>
        </div>
        <!-- 第三张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="http://placehold.it/400x300">
          </a>
        </div>
        <!-- 第四张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="http://placehold.it/400x300">
          </a>
        </div>
        <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img src="http://placehold.it/400x300">
          </a>
        </div>
      </div>
      <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
      </div>
    </div>
    <!--###九宫格###-->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">Home</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
            <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
            <div class="mui-media-body">Email</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">Chat</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
            <span class="mui-icon mui-icon-location"></span>
            <div class="mui-media-body">Location</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
            <span class="mui-icon mui-icon-search"></span>
            <div class="mui-media-body">Search</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <a href="#">
            <span class="mui-icon mui-icon-phone"></span>
            <div class="mui-media-body">Phone</div>
        </a>
    </li>
        </ul>
    <!--mli  图文列表图片居左-->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                <div class="mui-media-body">
                    幸福
                    <p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                <div class="mui-media-body">
                    木屋
                    <p class="mui-ellipsis">想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.</p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                <div class="mui-media-body">
                    CBD
                    <p class="mui-ellipsis">烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>
                </div>
            </a>
        </li>
    </ul>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">电话</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">邮件</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>
</body>
</html>
View Code

 

效果如下:

技术分享图片

 

二、夜深模拟器

介绍

夜神安卓模拟器(夜神模拟器),是全新一代的安卓模拟器,与传统安卓模拟器相比,基于android4.4.2,兼容X86/AMD,在性能、稳定性、兼容性等方面有着巨大优势。

官方地址:

https://www.yeshen.com/

安装

从官网下载或者从百度网盘下载

链接:https://pan.baidu.com/s/17xBT2H_p7vHe6SxCxSpJAQ 密码:bwsk

 

注意:安装的时候,路径一定要和HBuilder在同一个盘,比如D盘!

因为待会有一个bat脚本需要运行,它会调用HBuilder和夜神模拟器

 

我的夜神模拟器 安装路径是  D:\Program Files\Nox

HBuilder 安装路径是 D:\Program Files (x86)\HBuilder.9.1.13.windows\HBuilder

 

启动夜神模拟器,设置为手机模式

技术分享图片

 

模拟器访问移动APP

进入目录 D:\Program Files\Nox,新建一个adb.bat文件,内容如下:

技术分享图片
cd D:\Program Files\Nox\bin
D:
nox_adb connect 127.0.0.1:62001
nox_adb devices

cd D:\Program Files (x86)\HBuilder.9.1.13.windows\HBuilder\tools\adbs
adb connect 127.0.0.1:62001
adb devices

pause
View Code

注意:要修改 2个软件的路径。

 

右键adb.bat,以管理员身份运行

技术分享图片

出现 successfully 表示连接成功

注意:千万不要进行任何操作,这个窗口不能关闭

 

等待几秒,会出现这个提示

亲们,必须要等待至少10秒

技术分享图片

 

查看HBuilder编辑器,点击如图所示的图标,选择基座运行

技术分享图片

 

如果提示没有手机连接,请重启 HBuilder,夜神模拟器,以及adb.bat

技术分享图片

 

如果重试2遍还不行,注销电脑。再试一次,应该就可以了!

 

如果连接成功,HBuilder控制台会有提示

 

点击 基座运行后,HBuilder控制台会有提示

技术分享图片

 

此时,模拟器会自动安装HBuilder APP,并打开页面

技术分享图片

 

 那么之后页面有改动时,模拟器会同步显示!

注意:上面的九宫格显示不对称,需要将所有的mui-col-sm-3 改成mui-col-sm-4

修改index.html,完整代码如下:

技术分享图片
<!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></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
          mui.init();
    </script>
</head>
<body>
    <!--###标题栏###-->
    <header class="mui-bar mui-bar-nav">
        <h1 class="mui-title">首页</h1>
    </header>
    <!--###图片轮播###-->
    <div id="slider" class="mui-slider" >
      <div class="mui-slider-group mui-slider-loop">
        <!-- 额外增加的一个节点(循环轮播:第一个节点是最后一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img src="http://placehold.it/400x300">
          </a>
        </div>
        <!-- 第一张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="http://www.sinaimg.cn/qc/photo_auto/photo/86/40/44698640/44698640_950.jpg">
          </a>
        </div>
        <!-- 第二张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="http://placehold.it/400x300">
          </a>
        </div>
        <!-- 第三张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="http://placehold.it/400x300">
          </a>
        </div>
        <!-- 第四张 -->
        <div class="mui-slider-item">
          <a href="#">
            <img src="http://placehold.it/400x300">
          </a>
        </div>
        <!-- 额外增加的一个节点(循环轮播:最后一个节点是第一张轮播) -->
        <div class="mui-slider-item mui-slider-item-duplicate">
          <a href="#">
            <img src="http://placehold.it/400x300">
          </a>
        </div>
      </div>
      <div class="mui-slider-indicator">
        <div class="mui-indicator mui-active"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
        <div class="mui-indicator"></div>
      </div>
    </div>
    <!--###九宫格###-->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <a href="#">
            <span class="mui-icon mui-icon-home"></span>
            <div class="mui-media-body">Home</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <a href="#">
            <span class="mui-icon mui-icon-email"><span class="mui-badge mui-badge-red">5</span></span>
            <div class="mui-media-body">Email</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <a href="#">
            <span class="mui-icon mui-icon-chatbubble"></span>
            <div class="mui-media-body">Chat</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <a href="#">
            <span class="mui-icon mui-icon-location"></span>
            <div class="mui-media-body">Location</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <a href="#">
            <span class="mui-icon mui-icon-search"></span>
            <div class="mui-media-body">Search</div>
        </a>
    </li>
    <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-4">
        <a href="#">
            <span class="mui-icon mui-icon-phone"></span>
            <div class="mui-media-body">Phone</div>
        </a>
    </li>
        </ul>
    <!--mli  图文列表图片居左-->
    <ul class="mui-table-view">
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                <div class="mui-media-body">
                    幸福
                    <p class="mui-ellipsis">能和心爱的人一起睡觉,是件幸福的事情;可是,打呼噜怎么办?</p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                <div class="mui-media-body">
                    木屋
                    <p class="mui-ellipsis">想要这样一间小木屋,夏天挫冰吃瓜,冬天围炉取暖.</p>
                </div>
            </a>
        </li>
        <li class="mui-table-view-cell mui-media">
            <a href="javascript:;">
                <img class="mui-media-object mui-pull-left" src="http://placehold.it/40x30">
                <div class="mui-media-body">
                    CBD
                    <p class="mui-ellipsis">烤炉模式的城,到黄昏,如同打翻的调色盘一般.</p>
                </div>
            </a>
        </li>
    </ul>
    <nav class="mui-bar mui-bar-tab">
        <a class="mui-tab-item mui-active">
            <span class="mui-icon mui-icon-home"></span>
            <span class="mui-tab-label">首页</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-phone"></span>
            <span class="mui-tab-label">电话</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-email"></span>
            <span class="mui-tab-label">邮件</span>
        </a>
        <a class="mui-tab-item">
            <span class="mui-icon mui-icon-gear"></span>
            <span class="mui-tab-label">设置</span>
        </a>
    </nav>
</body>
</html>
View Code

 

效果如下:

技术分享图片

 

三、Webview

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

文档链接:

http://www.html5plus.org/doc/zh_cn/webview.html

 

plusReady

扩展API加载完成事件

document.addEventListener("plusready", plusreadyCallback, capture);

说明:

String 类型

为了保证扩展API的有效调用,所有应用页面都会用到的重要事件。 应用页面显示时需要首先加载扩展和API代码库,当扩展API代码库加载完成时会触发pluseready事件,当设备触发该事件后,用户就可以安全的调用扩展API。 如果程序中打开多个页面,每个都会收到此事件。

示例:

技术分享图片
<!DOCTYPE html>
<html>
    <head>
    <meta charset="utf-8">
    <title>Events Example</title>
    <script type="text/javascript" >
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener("plusready", onPlusReady, false); 
function onPlusReady(){
    // 扩展API加载完毕,现在可以正常调用扩展API
    // ...... 
}
    </script>
    </head>
    <body >
    </body>
</html>
View Code

参考链接:

http://www.html5plus.org/doc/zh_cn/events.html#plus.Events.%22plusready%22

 

事件绑定

除了可以使用addEventListener()方法监听某个特定元素上的事件外, 也可以使用.on()方法实现批量元素的事件绑定。

参考链接:

http://dev.dcloud.net.cn/mui/event/#

 

事件监听

单个元素上的事件监听,直接使用addEventListener()即可,如下:

elem.addEventListener("swipeleft",function(){
     console.log("你正在向左滑动");
});

若多个元素执行相同逻辑,则建议使用事件绑定(on())

 

Flask&&人工智能AI -- 8 HTML5+ 初识,HBuilder,夜神模拟器,Webview

标签:怎么   json   pymongo   路径   apt   hat   win   双击   实现   

原文地址:https://www.cnblogs.com/wxj1129549016/p/10282495.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!