精华内容
下载资源
问答
  • Hybrid APP 即混合开发APP,今天胡哥和大家一起认识Hybrid App。 目前APP的开发方式有三种:原生APP、Web App、Hybrid APP(混合开发APP) 一、原生APP 即IOS(Objective-C等)、Andriod(Java语言)使用原生语言...

    前言

    Hybrid APP 即混合开发APP,今天胡哥和大家一起认识Hybrid App。

    目前APP的开发方式有三种:原生APP、Web App、Hybrid APP(混合开发APP)

    一、原生APP

    即IOS(Objective-C等)、Andriod(Java语言)使用原生语言开发的应用。

    • 优点:具备了调用设备的各种能力(如摄像头、短信、GPS、蓝牙、文件)以及优秀的性能体验。
    • 缺点:开发周期较长,需要多个平台的APP单独开发(Andriod和IOS),开发成本较高

    二、Web APP

    即使用H5(HTML、CSS、JavaScript)开发的APP应用,使用浏览器访问的方式,打开APP应用。

    • 优点:兼容多种设备,支持跨平台开发和访问,具备快速开发、迭代、快速上线。
    • 缺点:不能调用手机所有的功能,很大部分能力权限受限。不支持在各大软件平台下载。尤其是在性能体验方面,较原生APP大打折扣。

    三、Hybrid APP

    混合开发APP,兼备原生APP和WebAPP的优秀能力,二者通过JSBridge相互进行通信。

    • 优点:在开发层面实现“一次开发,多平台运行”,在兼容性和开发速度、成本上占优。能够调用手机设备的各种权限能力。在性能体验方面有了较大提升。支持在各大软件平台(AppStrore/google play商店)下载。
    • 缺点:在性能体验方面较原生APP还有一定的差距。

    胡哥一分钟课堂,带你认识IT互联网。

    长按扫码关注,更帅更漂亮呦!关注胡哥有话说公众号,与胡哥深入交流!

    胡哥有话说

    展开全文
  • 混合开发APP,不得不知manifest.json.新建项目后,工程中会有一个文件,manifest.json。以下说明,比较重要:1. 应用信息,描述App应用的基本信息,应用名称,版本号,页面入口(一般是index.html,就是打开App后的...

    混合开发APP,不得不知manifest.json.

    新建项目后,工程中会有一个文件,manifest.json。


    以下说明,比较重要:

    1. 应用信息,描述App应用的基本信息,应用名称,版本号,页面入口(一般是index.html,就是打开App后的第一个页面)


    2. App图标配置,就是App安装到手机后显示的图标。技巧,可在选择源图片的地方上传1024*1024像素的图片,点击【自动生成所有图标并替换】按钮,生成要求版本所有尺寸的图标。


    3. 启动图片,需要提前做好相应尺寸的图片,对号入座。


    4. SDK配置,根据app业务需求,申请对应模块要求的参数,并做好配置。笔者的项目中用到了支付宝支付,微信消息和朋友圈分享。


    5. 模块权限配置根据app业务需求,配置对应的模块。比如,要使用支付功能,选择左侧【未选模块】中对应模块,点击添加.如果模块未添加,而程序中需要调起失败,需要关注下此处。



    懂Html就能开发App,博文持续更新,博主QQ:260737830!

    展开全文
  • 混合开发app中,页面之间的参数传递方式,主要使用一下两种。 1. 新建页面的参数传递 传递参数: //获取商品分类id var id = '121212'; //直接打开产品分类页面,传递参数pid mui.openWindow({ url:'products....

    混合开发app中,页面之间的参数传递方式,主要使用以下两种。


    1. 新建页面的参数传递

    传递参数:

    //获取商品分类id
    var id = '121212';
    
    //直接打开产品分类页面,传递参数pid
    mui.openWindow({
       url:'products.html',
       id:'products.html',
       extras:{
           pid:id
       }
    });

    获取参数:
    products.html页面获取参数需要写在mui.plusReady中,如下:

     mui.plusReady(function(){
        var self = plus.webview.currentWebview();     //获取当前页面webview
        var pid = self.pid == null ? "" : self.pid;   //获取传递给当前页面的参数pid
     });

    2. 预加载页面参数传递

    传递参数:

    //预加载页面
    var detailPage = mui.preload({
        url:'productdetail.html',
        id:'productdetail.html'
    });
    
    //获取商品id
    var id ='12222';  
    
    //触发详情页自定义事件,传递参数id
    mui.fire(detailPage,'productInfo',{id:id});
    
    //打开详情页面
    mui.openWindow({
         id:"productdetail.html"
     });

    获取参数:
    productdetail.html中获取参数方式,在自定义事件productInfo中,

    //自定义事件,获取参数id
    window.addEventListener('productInfo',function(event){
            var id = event.detail.id;  //获取传递的id值,event.detail.xx获取xx的值
    });

    懂Html就能开发App,博文持续更新,博主QQ:260737830!

    展开全文
  • 开发工具:Hbuilder,前端框架:mui,类型:混合开发App. 1. 商城app效果图: 商城首页 商城分类页 商品详情页 商品兑换页 2. 代码部分 2.1 商城首页shop.html,部分代码说明: ...

    结合以前的知识点,做一个商城App的几个页面。
    开发工具:Hbuilder,前端框架:mui,类型:混合开发App.

    1. 商城app效果图:


    商城首页


    商城分类页


    商品详情页


    商品兑换页


    2. 代码部分

    2.1 商城首页shop.html,部分代码说明:

    页面布局:

    <!DOCTYPE html>
    <html>
        <body class="white">
            <!-- 主界面菜单同时移动 -->
            <!-- 侧滑导航根容器 -->
                    <div class="box">
                    <!-- 主页面标题 -->
                    <header class="mui-bar mui-bar-nav header_q">
    
                        <span class="mui-pull-right sousuoab"><a data-href="searchproduct.html" id="sousuo"><i class="iconfont icon-sousuo sousuo"></i></a></span>
                        <h1 class="mui-title">积分商城</h1>
                    </header>
                    <!-- 主页面内容容器 -->
                        <div class="mui-scroll mui-scroll2">
                            <div class="banner-1">
                                <img src="img/tu1.jpg">
                            </div>
    
                            <ul class="mui-table-view mui-grid-view mui-grid-9" id="ul2">
                                <li id="more" class="mui-table-view-cell mui-table-view-cell-2 mui-media mui-col-xs-4 mui-col-sm-3">
                                    <a data-id="">
                                        <div class="beijing beijingq beijing9"><i class="iconfont icon-gengduo"></i></div>
                                        <div class="mui-media-body mui-media-bodym">更多</div>
                                    </a>
                                </li>
                            </ul>
    
    
                            <div class="mui-slider-item mui-slider-item2">
                            <div class="remen remen5">
                                <div class="remen2"></div>
                                <h4>热门推荐</h4>
                            </div>
                            <ul class="mui-table-view mui-grid-view jiahengx" id="ul3">
                            </ul>
                        </div>
                </div>
            </div>
        </body>
    </html>

    函数定义:

    <script>
        var detailPage = null;  //商品详情页面
        mui.init(); //mui初始化
    
        //mui加载完毕事件
        mui.plusReady(function(){
    
            //预加载产品详情页面
            if(!detailPage){
                detailPage = mui.preload({
                    url:'productdetail.html',
                    id:'productdetail.html'
                });
            }
    
            //点击header回到顶部
            document.querySelector('header').addEventListener('tap',function () {
                window.scroll(0, 0);
            });
            console.log("shop.html加载完毕");
        });
    
        //自定义的刷新事件
        window.addEventListener("refreshShop",function(event){      
    
            //产品分类列表
            getClassification();
    
            //获取推荐商品
            getRecommand();
        });
    
        //bind:绑定商品分类点击事件
        mui("#ul2").on('tap','a',function(){
            //获取商品分类id
            var id = this.getAttribute("data-id");
    
            //直接打开产品分类页面
            mui.openWindow({
                url:'products.html',
                id:'products.html',
                extras:{
                    pid:id
                }
            });
        });
    
        //function:获取推荐商品
        function getRecommand(){
            $("#ul3").empty();
            mui.post(shoprecommandURL,{},function(data){
                if(data.success){
                    //依次放入推荐商品
                    $.each(data.list,function(i,v){                
                        var li ='<li class="mui-table-view-cell mui-media mui-col-xs-6" data-id="'+v.id+'">xxxx</li>';
                        $("#ul3").append(li);
                    });
    
                    //推荐商品的点击事件
                    mui("#ul3").on('tap','li',function(){
                        //获取商品id
                        var id = this.getAttribute("data-id");  
                        //触发详情页自定义事件
                        mui.fire(detailPage,'productInfo',{id:id});
                        //打开详情页面
                        mui.openWindow({
                            id:"productdetail.html"
                        });
                    });
                }
            },'json');
        }
    </script>

    懂Html就能开发App,博文持续更新,博主QQ:260737830!

    展开全文
  • WEB开发者,直接入手app原生开发的门槛较高,但是找到优秀的app混合开发工具,再加上详细丰富的文档说明,则可以相对容易的开发出高质量的app,性能堪比原生app性能。 开发工具来自dcloud官网,...
  • 基于ionic移动混合开发APP项目的创建、编译、运行、测试和打包 1.下载安装JDK环境,添加到环境变量中 Android ADT环境的搭建 -**添加环境变量 2.安装项目依赖环境 (1)npm install -g ionic ...
  • Qt+JAVA混合开发App

    千次阅读 2019-02-20 20:17:58
    JHApp是一款用QT+JAVA混合编写的Android; QT和JAVA 互调; JAVA和JS互调; 端应用程序; 1.集成【讯飞】语音识别/语音合成; 2.集成【百度】语音识别/语音合成/语音唤醒; 3.集成【腾讯】X5浏览器/X5打开doc/ppt/...
  • 没有使用中间件,传统上是有同名策略的,会遇到跨域问题; 但是,混合开发时,如何是的本地网页能够发送http请求?
  • 新建项目,APP开发,请选择【移动App】。2. 视图,常用的显示控制台,搜索等视图。3. 人性化视觉主题设置。4. 发行,可打包原生App,云打包后自动下载到本地,可打包Android apk, iOS ipa。打包成功后,5. 真机...
  • APP上线发现重大bug,需要开发人员修改bug,重新打包,上传应用市场,等待审核,上架,这样浪费了很多时间、人力、物力。应对这个问题,使用热更新技术,及时修复问题,降低更新代价。 首先通过易动平台创建一个...
  • 压缩App,ionic build android为打包生成App,--prod参数是ionic的打包方式,使用之后.map.js会压缩变小,打包的App变小了,而且启动加快,--release 参数是Cordova的打包参数,使用之后App也会变小。记住apk文件的...
  • 谈谈App混合开发

    千次阅读 2017-12-22 09:27:44
    混合开发App(Hybrid App)就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发,这部分功能不仅能够在不升级App的情况下动态更新,而且可以在Android或iOS的App上同时运行,让用户的体验更...
  • 快速实现APP混合开发(Hybrid App开发)攻略

    千次阅读 热门讨论 2020-12-11 10:43:23
    首先对比原生APP开发,混合开发有以下优缺点 优点: (1)开发成本低 (2)相对原生web界面版本更新快,维护相对简单 (3)一套代码可以支持Android端和iOS端 (4)能够调用原生功能、API (5)稳定性相对较好...
  • 混合开发Ionic+angular快速开发App

    千次阅读 2019-06-21 17:48:49
    Hybrid App混合应用程序(混合App) Hybrid App兼具了Native App良好用户体验的优势,也兼具了Web App使用HTML5跨平台开发低成本的优势。目前已经有众多Hybrid App开发成功应用,比如美团、爱奇艺、...
  • 混合开发APP(Hybrid APP)简单说就是将原生功能封装成JS接口,前端通过调用接口实现功能。前端使用html来开发APP,可以实现自动更新,一套代码同时生成Android和iOS两端安装包,开发速度快,用户体验好。 如何...
  • 混合开发APP

    千次阅读 2019-03-04 00:30:35
    1.由于混合开发,(登录app负责),那么在页面完成后对接接口的时候需要传一个token值,都知道token是登录时生成的,此时就需要APP将该值传给我,app大佬表示在url中有给传,截取token传值后token为null,绑到input...
  • Android App混合开发

    千次阅读 2019-03-19 13:36:12
    混合开发App(Hybrid App)就是在一个App中内嵌一个轻量级的浏览器,一部分原生的功能改为Html 5来开发,这部分功能不仅能够在不升级App的情况下动态更新,而且可以在Android或iOS的App上同时运行,让用户的体验更...
  • 各行各业都已经转型进入互联网发展,面对这个必然趋势,普通行业线下销售模式已经是走不通了,眼看大家都在往互联网上转型、也都有了自己的网上平台店铺或APP,自己想开发一款APP,...原生开发APP混合开发的区别 ...
  • app混合开发基本理论

    万次阅读 多人点赞 2019-05-28 15:57:52
    app开发分三种,第一种纯原生,第二混合,第三,纯html。...2.为什么选择混合开发,而不是纯原生也不是纯页面,主要是为了让大家都活下去。(这个是开玩笑了),那为啥呢,就是有些硬件功能还是原...
  • 移动端app开发,原生开发与混合开发的区别

    万次阅读 多人点赞 2019-09-26 18:47:01
    目前市场上主流的APP分为三种:原生APP、Web APP(即HTML5)和混合APP三种,相对应的定制开发就是原生开发、H5开发和混合开发。那么这三种开发模式究竟有何不同呢?下面我们就分别从这三者各自的优劣势来区分比较吧...
  • 通常大家想要开发app的时候,一些app开发公司都会报两个价,一个价格比较高,一个价格就很实惠。这时他们会告诉你价格高的开发模式是原生app开发,价格低的是混合模式的app开发。那么什么是原生开发和混合开发呢?...
  • 需要与原生进行混合开发的时候,前端应该怎么做? 1.先引入js unfile.js 下载unifile.js的链接 2.调用方法,在要使用原生技术的页面进行引入 import bridge from '../../common/unfile.js' 3.就可以使用了 //调用...
  • 混合app开发介绍

    千次阅读 2018-06-02 18:51:35
    混合app开发介绍application(应用)用前端的知识(html,css,js)开发出来手机App的方式就叫做混合App开发App开发的三种类型WebApp:跑在手机浏览器中运行的web应用(微信公众号,微信小程序)NativeApp:用android和...
  • h5混合开发app 交互方法

    万次阅读 2020-04-16 12:28:50
    安卓 安卓相对简单 因为 安卓可以获取到我们h5页面内的window对象 所以 // h5 调用安卓方法 window.discovery.gotoLogin(); // window.x.y (x类名,y方法名) // 安卓调用h5方法 h5 只需要在 js中声明 方法即可 ...
  • React Nactive混合APP开发

    千人学习 2016-10-27 14:25:24
    React Nactive混合APP开发教程,该课程主要教大家如何利用react Nactive 构建一个APP,详细介绍各个APP中各个组件的用法及使用。

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 58,109
精华内容 23,243
关键字:

混合开发APP