精华内容
下载资源
问答
  • 这就引申出前端混合开发来。 前端混合开发是什么——是可以让js与安卓、ios之间相互调用方法来实现混合交互。(个人理解 最近刚好在学习一个框架,也就是一个可以让js与原生安卓相对简单通信的框架——DSBridge。 ...

    当你用网页封装一个app的时候,hbuilder的封装过于简单,对于studio封装的ui感来讲还是稍显简陋。
    这就引申出前端混合开发来。
    前端混合开发是什么——是可以让js与安卓、ios之间相互调用方法来实现混合交互。(个人理解
    最近刚好在学习一个框架,也就是一个可以让js与原生安卓相对简单通信的框架——DSBridge。

    下面是它的GitHub地址
    DSSBridge:https://github.com/wendux/DSBridge-Android/blob/master/readme-chs.md

    首先这个框架使用起来非常简单。

    你只需要在安卓加入依赖库之后

    public class JsApi{
        //同步API
        @JavascriptInterface
        public String testSyn(Object msg)  {
            return msg + "[syn call]";
        }
    
        //异步API
        @JavascriptInterface
        public void testAsyn(Object msg, CompletionHandler<String> handler) {
            handler.complete(msg+" [ asyn call]");
        }
    }
    

    就可以完成异步与同步的api

    然后加入js引用后也可以非常简单的生成js的api

    var dsBridge=require("dsbridge");
    idge.register('addValue',function(l,r){
         return l+r;
     })
    

    与此同时,相应的使用也非常简单
    安卓:

    dwebView.callHandler("addValue",new Object[]{3,4},new OnReturnValue<Integer>(){
         @Override
         public void onValue(Integer retValue) {
            Log.d("jsbridge","call succeed,return value is "+retValue);
         }
    });
    

    这里不要忘了在安卓声明jsAPI

    dWebView=(DWebView) findViewById(R.id.dwebview);
    dWebView.addJavascriptObject(new ApJsp(this),null);
    dWebView.setWebContentsDebuggingEnabled(true);
    

    js:

    //同步调用
    var str=dsBridge.call("testSyn","testSyn");
    //异步调用
    dsBridge.call("testAsyn","testAsyn", function (v) {
      alert(v);
    })
    

    当然这些只是简单回调String的API
    那么当我们真正想操作控件或其他函数时,该怎么办

    我今天学来的方法是给Activity加一个接口,这个接口是在API类里生成的,于是可以从Activity里面直接写,这么说事情就恍然大悟了,至于更深的用途,我还需要继续学习才能碰到吧。。。

    展开全文
  • 前端混合开发总结

    千次阅读 2018-12-07 10:35:04
     京东凹凸实验室开源的一款使用 React.js 开发微信小程序的前端框架。它采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用 JSX 语法,让代码具有更丰富的表现力,使用 Taro 进行开发...

            

    名称 React  Native Weex Flutter uni-app
    支持 Facebook Alibaba Google Dcloud
    编写方式 需针对iOS、Android编写2份代码(需要会Java,oc) 只需要编写一份代码,即可运行在Web、iOS、Android上 只需要编写一份代码,即可运行在iOS、Android上

    vue  框架开发即可编译出

    安卓 ,ios,H5,小程序跨平台

    JS引擎 JSCore V8 未知 APP基于Weex,小程序基于mpvue,H5基于vue框架
    框架 React.js组件化,数据绑定  Virtual DOM JSX模板学习使用有一定成本 Vue.JS 组件化,数据绑定 Virtual DOM 模板就是普通的html,数据绑定使用mustache风格,样式直接使用css 代码风格和java比较接近,个人感觉和前端标签也很像,有人说喜欢XML布局的对于Dart会比较难受 vue
    异步 提供了Promise 只支持 callback Dart 的 Event-Queue的模型 提供了Promise
    扩展 不同平台可自由扩展 为了保证各平台的一致性,一次扩展得在各个平台都实现 可扩展 可扩展
    组件 除了自带的,还有js.coach上社区贡献的,比较丰富 基本靠平台提供 依赖ReactiveX库 和weex基本一样
    性能 优秀 android 原生在内存、CPU 资源占用方面要低于 flutter,并且安装包的体积也要小于 flutter   (优) 一般
    社区 非常成熟和活跃 开源较晚,社区处于成长期 活跃 新框架,社区处于成长期
    上手难度 困难 容易 一般 容易

     

                 

              React Native

            

              优点:

    •  跨平台开发
    •   跳过App Store审核,远程更新代码,提高迭代频率和效率,既有Native的体验,又保留React的开发效率。

    缺点:

    • 对于不熟悉前端开发的人员上手比较慢;
    • 不能真正意义上做到跨平台;
    • app包体积增大明显

     

     

     

     

    H5     vue

     

    小程序

       wepy mpvue taro

     

       

    • WEPY https://tencent.github.io/wepy/document.html

      腾讯团队开源的一款类vue语法规范的小程序框架,借鉴了Vue的语法风格和功能特性,支持了Vue的诸多特征,比如父子组件、组件之间的通信、computed属性计算、wathcer监听器、props传值、slot槽分发,还有很多高级的特征支持:Mixin混合、拦截器等;WePY发布的第一个版本是2016年12月份,也就是小程序刚刚推出的时候,到目前为止,WePY已经发布了52个版本, 最新版本为1.7.2; 

      

    • MpVue http://mpvue.com/mpvue/#-html

      美团团队开源的一款使用 Vue.js 开发微信小程序的前端框架。使用此框架,开发者将得到完整的 Vue.js 开发体验,同时为 H5 和小程序提供了代码复用的能力。mpvue在发布后的几天间获得2.7k的star,上升速度飞起,截至目前为止已经有13.7k的star;

    • Taro https://taro.aotu.io/

       京东凹凸实验室开源的一款使用 React.js 开发微信小程序的前端框架。它采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时支持使用 JSX 语法,让代码具有更丰富的表现力,使用 Taro 进行开发可以获得和 React 一致的开发体验。,同时因为使用了react的原因所以除了能编译h5, 小程序外还可以编译为ReactNative;

     

        

    展开全文
  • 基于h5的混合开发 这种使用 HTML + JavaScript 来作为移动应用的应用称为混合应用,它可以兼具 Web App 的跨平台及使用 Native 应用的接口。当我们手上已经有一套 UI 组件,如 Ionic,及单页面应用框架时,要开发起...
        
    • 基于h5的混合开发

    这种使用 HTML + JavaScript 来作为移动应用的应用称为混合应用,它可以兼具 Web App 的跨平台及使用 Native 应用的接口。当我们手上已经有一套 UI 组件,如 Ionic,及单页面应用框架时,要开发起这样的应用更是手到擒来。诸如 Ionic 这样的框架,不仅封装了不同系统上的 UI,还提供了 ngCordova 的方案——封装第三方原生插件。

    相信很多人都在项目里熟练使用各种Hybrid技术,无论是使用了知名得 WebViewJavascriptBridge 框架来做自己的Hybrid Web容器,又或是自己从头着手写了一个满足自己业务需求的bridge,从而构建起自己的Hybrid Web容器,也有的干脆直接使用了cordova 这一大型Hybrid容器框架,cordova + ionic 来进行Hybrid的开发

    PhoneGap
    cordova
    reactNative
    Weex

    html
    css
    JavaScript
    JQuery
    DOM

    angularJS
    Vue

    MUI

    html5
    css3

    web标准

    响应式布局

    多浏览器兼容适配;

    • webApp
    • 混合app
    • 移动前端框架
    • Node
      Node.js® 是一个基于 Chrome V8 引擎的 JavaScript 运行时。 Node.js 使用高效、轻量级的事件驱动、非阻塞 I/O 模型。它的包生态系统,npm,是目前世界上最大的开源库生态系统。
    • 用Android Studio 编辑 react-native
    • 为啥要用react-native开发app

    React Native For Android是伟大的互联网公司Facebook与2015年9月15日发布的,该可以让我们广大开发者使用JavaScript和React开发我们的应用,该提倡组件化开发,也就是说React Native给我们提供一个个封装好的组件让开发者来进行使用,甚至我们可以相关嵌套形成新的组件。使用React Native我们可以维护多种平台(Web,Android和IOS)的同一份业务逻辑核心代码来创建原生应用。现阶段Web APP的的体验还是无法达到Native APP的体验,所以这边fackbook更加强调的是learn once,write everywhere,应用前端我们使用js和React来开发不同平台的UI,下层核心模块编写复用的业务逻辑代码,提供应用开发效率。

    支持JavaScript和React开发应用。

    • react-native

    【1】用JavaScript和React编写app
    【2】是个真正的移动app,和 "mobile web app", an "HTML5 app", or a "hybrid app"没有半毛钱关系;
    【3】调试代码重新加载快;
    【4】和用java和object-c写的代码无缝对接;

    *React 使用 JSX 来替代常规的 JavaScript。

    JSX 是一个看起来很像 XML 的 JavaScript 语法扩展。

    我们不需要一定使用 JSX,但它有以下优点:

    JSX 执行更快,因为它在编译为 JavaScript 代码后进行了优化。
    它是类型安全的,在编译过程中就能发现错误。
    使用 JSX 编写模板更加简单快速。

    • 构建UI, 利用基于javaScript的UI库, react

    • 语法都是基于javaScript

    • vue.js呢?

    • 移动前端&前端UI框架
      Ember's data binding, Angular's dirty checking, React's virtual DOM, and its relationship to immutable data structures.

    • 更进一步,MVVM 框架出现了,以 AngularJS 为代表:

    • Virtual Dom思路
      react
      vue
    • JQuery操作DOM

    怎么做呢?操作 DOM 呗。DOM 就是浏览器提供给开发者用于操作页面的模型嘛,直接通过脚本来调用 DOM 的各种接口就 OK 了。而且我们还有了像 jQuery 这样的棒棒的工具,操作 DOM 变得 so easy。

    • ionic
      【1】
      ionic是一个强大的 HTML5应用程序开发框架(HTML5 Hybrid Mobile App Framework)。
      ionic 主要关注外观和体验,以及和你的应用程序的 UI 交互,特别适合用于基于 Hybird 模式的 HTML5 移动应用程序开发。 ionic是一个轻量的手机UI库,具有速度快,界面现代化、美观等特点。

    【2】
    Ionic完美的融合下一代移动框架 AngularJS- AngularJS移动端解决方案
    Ionic可以说是AngularJS移动端解决方案,Ionic 利用 AngularJS创造出一款最适合开发丰富而强大应用的框架。 Ionic不仅如此优秀,而且它的核心架构也是为开发专业应用创建,和AngularJS完美融合。

    移动前端开发的2个方向

    【1】基于h5的
    UI通过h5搭建;
    底层运行框架有 ionic,framework7,cordova

    【2】基于JS的
    底层运行框架有:
    react-native
    “ Learn Once, Write Anywhere”

    weex
    "Write Once, Run Everywhere"
    Weex 在迭代的过程中选择了于 Vue 2.0 握手,因为该版本的 Vue 加入了 Virtual-DOM 和预编译器的设计,使得该框架在运行时能够脱离 HTML 和 CSS 解析,只依赖 JavaScript,如此,Vue 在和 Weex 合作后,便获得了使用 JS 预编译原生的组件 UI 的能力。

    脚本语言天生自带“热更新”,Weex 针对 React Native 的热更新策略做了优化,将 WeexSDK 事先绑到了客户端上,并且对 JSBundle 进行分包增量更新,大大提高了热更新的效率。

    UI框架可以采用的有
    AngularJS
    react
    vue

    基于h5的和基于js的开发框架的混合

    金融方向对c++有要求

    电商媒体类的对html5和javascript有要求

    展开全文
  • 混合开发-01 wepy框架-01 ts解说-01 小程序-02 混合开发-02 wepy-taro框架-02 ts解说-02 小程序-03 ts解说-03 taro框架-03 小程序-04 ts解说-04 taro框架-04 小程序-05 ts解说-05 taro框架-05 小程序-06 小程序-07 ...

    小程序-01
    混合开发-01
    wepy框架-01
    ts解说-01
    小程序-02
    混合开发-02
    wepy-taro框架-02
    ts解说-02
    小程序-03
    ts解说-03
    taro框架-03
    小程序-04
    ts解说-04
    taro框架-04
    小程序-05
    ts解说-05
    taro框架-05
    小程序-06
    小程序-07
    小程序-08
     

    http://www.iyx668.com/thread-3405-1-12.html

    展开全文
  • app 纷纷拥抱 flutter,目前最理想的就是完全用 flutter 开发,但是由于各自的 app 都以成型,完全抛弃以前的代码全面上 flutter ,无论是人力还是物力都是不切实际的,所以目前大多数产品的思路都是进行混合开发,...
  • 1、wifi设置代理到电脑IP,端口随便填 2、手机连接到电脑 3、使用charles抓包工具,抓取
  • hybrid(客户端【app】和前端混合开发)

    千次阅读 2019-01-14 17:19:08
    简介 移动端占大部分流量 已经远远超过pc端 ...这些APP中有很大比例的前端代码 问题 hybrid是什么 为何用hybrid 介绍下hybrid更新和上线的流程 hybrid和h5的主要区别 前端js和客户端如何通讯 ...
  •   历经多年的手机开发,最终被安卓和ios一通天下。我还记得很多年前,我特别想买的一款诺基亚塞班系统的手机,后来一个亲戚买了之后,各种app不支持,手机还是好的,还挺新,但是不好使了。还记得那些年的Windows ...
  • 仔细阅读开发规范: 开发注意点: 组件配置参数说明: iosApp下载地址: 技术栈 vue:, mint-ui:, vue-router:, , vuex:, axios: 目录结构 建立项目 # 将项目克隆到本地 复制 git clone ...
  • 2018web前端开发-----混合app项目开发实战视频教程,是专门针对某一类移动设备而生的,它们都是被直接安装到设备里,而用户一般也是通过应用商店来获取应用 。 如安装在 iOS 和 Android 设备上的客户端。
  • 需要与原生进行混合开发的时候,前端应该怎么做?如果使用原生会有一些很多方法不能使用例如:前端写的微信登录,拉起相机,扫描二维码等都需要原生来做 所以说尽量前端能做,不要与原生混合开发
  • web前端混合开发

    千次阅读 2017-08-03 00:46:09
    http://pan.baidu.com/s/1eSN8vzc f7r9
  • 搭安卓开发环境 1.下载JAVA JDK 安装 2.配置java的环境变量(网上有 ) 2.安卓开发工具android studio 一路安装next 3.配置安卓环境变量 具体的网上有。 4.gradle的版本如果有问题的话 换个版本, 然后配置gradle的...
  • 混合前端开发人员指南 如果您是开发人员: 1.谁正在尝试编写一些TVM尚不支持的初步模式,也许“混合前端语言参考”对您来说是一个更好的地方。 谁想知道这个模块的实现细节,您就在这里! 功能 软件仿真 ...
  • 首先搞清楚什么是混合APP开发(Hybrid App) HybridApp(混合模式移动应用)是指介于web-app、native-app这两者之间的app,兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势” 通俗来讲,就是...
  • 混合开发的App(Hybrid App)就是嵌一个轻量级的浏览器,一部分原生的功能改为Html5来开发,这部分功能不仅能够在不容升级的情况下动态更新,而且可以在Android或iOS上同时运行,让用户的体验更好又可以节省开发的...
  • 前端框架(混合开发框架)

    万次阅读 2018-05-16 12:00:34
    基于此框架可以实现android和ios的同时开发. 前端采用hbuilder提供的mui框架,并整合了mint-ui+iview等第三方框架 app打包使用hbuilder提供的功能进行原生打包 采用vue-router实现单页路由和路由之间的相互...
  • 92.混合开发的原理(cordova DCloud 微信JSSDK) WebViewJavacrriptBridge是移动UIView和Html交互通信的桥梁,实现native code和js 的互相调用的桥梁。 93.混合开发的优缺点 优点 1.一次编译多平台运行 2.开发速度快,...
  • Android H5混合开发前端用的vue框架,现将vue项目放线上服务器,Android手机调试可以正常访问,但是如此开发不是很便捷,尝试VScode启vue项目,Android studio 启Android项目,Android链接的是本机IP地址(pc可以...
  • 基于云智慧社区平台前端系统混合开发的设计与实现,刘颜,,随着互联网的飞速发展,与人们生活密切相关的智慧社区成为一大焦点。云智慧社区平台的初衷就是便捷人们的生活,为社区居民带来更
  • 最近根据需求需要开发新闻类业务的时候与IOS、Android进行混合开发,各种各样的分析最后得出:web提供h5的模板,后端在管理员提交文章内容的同同时向前端提供的模板中插入对应的数据。然后生成一个链接存进去,返回...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 1,496
精华内容 598
关键字:

前端混合开发