精华内容
参与话题
问答
  • 扫码APP下载: m端: http://m.himygirl.cn 源码地址: https://gitee.com/venfu/modules https://gitee.com/venfu/mygirl-c-web https://gitee.com/venfu/mygirl-b-web ...

    一文一言: 想要有保障,买再大的水桶也比不上挖一口井,说明:渠道很重要

    扫码APP下载(安卓端):
    扫码APP下载

    一 web客户端 http://c.himygirl.cn 测试账户密码:user & 123456

    web端首页

    二 运营后台 http://m.himygirl.cn默认只读账户

    M段

    M端首页

    这里写图片描述

    统计demo

    类别设定

    运营后台源码地址

    https://github.com/lingqibaobei/hg_b_web/

    技术栈

    web端:
    	vue+axios+vuex+vroute+veditor+elementui+echarts+baidu-map+等相关组件
    
    服务端:
    	sping,springboot,springdata,springsecurity等sping系列子框
    +jms+activeMq+events+Aspectj+RestTemplate+websocket+PLSQL等等
    
    

    组件化模块化简介:

    客户模块
    运营后台模块
    权限模块
    资源模块
    通信模块
    社区模块
    商品模块
    数据源模块
    邮件模块
    日志模块等等
    

    部署方式

    docker,dockerfile,dockercompose…

    唠唠嗑?

    公众号搜索: DeanKano
    企鹅群号: 561932405

    展开全文
  • 混编app_demo

    2016-08-29 07:53:37
    app混编代码
  • 技术选型——混编APP应用概述

    千次阅读 2016-03-23 08:57:58
    本文主要是针对**APP进行开发之前的技术选型准备文档,现在share出来,希望在做同类开发的您留下宝贵意见。=============================分割线=====================================一, 主要应用技术 Node.Js ...



    本文主要是针对**APP进行开发之前的技术选型准备文档,现在share出来,希望在做同类开发的您留下宝贵意见。


    =============================分割线=====================================


    一, 主要应用技术


     Node.Js

        Node.js 是一个基于ChromeV8 引擎的 JavaScript 运行环境。Node.js 使用了一个事件驱动、非阻塞式 I/O 的模型,使其轻量又高效。Node.js 的包管理器 npm,是全球最大的开源库生态系统。


     Cordova

        Cordova是一款开放源代码的App开发框架,旨在让开发者使用HTML、Javascript、CSS等WebAPIs开发跨平台的移动平台 应用程序,其原名称之为PhoneGap,Adobe收购Nitobi公司后,PhoneGap商标保留,代码贡献给了Apache基金会,而 Apache将其命名为ApacheCallback,其后发布新版本时,定名为ApacheCordova。

    Cordova是一个行动设 备的API接口集,利用JavaScript存取这些接口可以调用诸如摄影机、罗盘等硬件系统资源。配合上一些基于HTML5、CSS3技术的UI框架, 如jQueryMobile、DojoMobile或SenchaTouch,开发者得以快速地开发跨平台App而不需要编写任何的原生代码。

    注意到因为Cordova本身仍是一个原生程式,为App打包时依然需要用到这些系统平台的SDK。

     

       Ionic

         Ionic是一个新的、可以使用HTML5构建混合移动应用的用户界面框架,它自称为是“本地与HTML5的结合”。该框架提供了很多基本的移动用户界面范例,例如像列表(lists)、标签页栏(tabbars)和触发开关(toggleswitches)这样的简单条目。它还提供了更加复杂的可 视化布局示例,例如在下面显示内容的滑出式菜单。

    Ionic宣称他们极度强调性能,并且通过限制DOM交互、完全移除jQuery以及使用像translate(z)这种特定的硬件加速的CSS滤镜触发移动设备上GPU——与由动力不足的移动浏览器提供的交互相比这种方式提供了硬件加速的交互——等方式使速度最大化。


    PS:Ionic的npm安装需要Python环境的支持,建议使用2.7的版本。


      Angular.Js

         AngularJS是建立在这样的信念上的:即声明式编程应该用于构建用户界面以及编写软件构建,而指令式编程非常适合来表示业务逻辑。[1]框架 采用并扩展了传统HTML,通过双向的数据绑定来适应动态内容,双向的数据绑定允许模型和视图之间的自动同步。因此,AngularJS使得对DOM的操 作不再重要并提升了可测试性。

    设计目标:


    • 将应用逻辑与对DOM的操作解耦。这会提高代码的可测试性。
    • 将应用程序的测试看的跟应用程序的编写一样重要。代码的构成方式对测试的难度有巨大的影响。
    • 将应用程序的客户端与服务器端解耦。这允许客户端和服务器端的开发可以齐头并进,并且让双方的复用成为可能。
    • 指导开发者完成构建应用程序的整个历程:从用户界面的设计,到编写业务逻辑,再到测试。

       Angular 遵循软件工程的MVC模式,并鼓励展现,数据,和逻辑组件之间的松耦合。通过依赖注入(dependencyinjection),Angular为客户 端的Web应用带来了传统服务端的服务,例如独立于视图的控制。因此,后端减少了许多负担,产生了更轻的Web应用。

     

    二, 开发概述

        混编APP主要是在Cordova的基础上,加入移动端组件Ionic,因为Ionic是基于Angular.Js编写的,所以,要求页面前端使用Angular.JS取代Jquery。


    三,前期Demo&概述


    1,NodeJs

             http://blog.csdn.net/lhc1105/article/details/50614046

             http://blog.csdn.net/lhc1105/article/details/50644830

    2,Cordova

             http://blog.csdn.net/lhc1105/article/details/50614604

             http://blog.csdn.net/lhc1105/article/details/50614452

    3,AngularJs

             http://blog.csdn.net/lhc1105/article/details/50662088

     

    4,Ionic官网

             http://www.ionic.wang/js_doc-index.html

     

     


    展开全文
  • WebViewClient中,重写 public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) { return super.shouldOverrideKeyEvent(view, event); } } 重写此方法才能够处理在浏览器中的按键事件 ...

    WebViewClient中,重写

    	@Override
        public boolean shouldOverrideKeyEvent(WebView view, KeyEvent event) {
            if (event.getAction() == KeyEvent.ACTION_DOWN) {
                LogUtils.d("shouldOverrideKeyEvent()");
                if (event.getKeyCode() == KeyEvent.KEYCODE_0) {
                    view.loadUrl("javascript:onkeydown("+KEY_ZERO+")");
                }else if (event.getKeyCode() == KeyEvent.KEYCODE_1) {
                    view.loadUrl("javascript:onkeydown("+KEY_ONE+")");
                }
            }
            return super.shouldOverrideKeyEvent(view, event);
        }
    

    重写此方法才能够处理在浏览器中的按键事件

    展开全文
  • 本篇文章主要总结一下现在APP当中使用的js、webView混编架构和技术。 什么是 js 混编? js混编简单说就是使用JavaScript开发APP程序。 android应用使用的是java,Kotlin 、c/c++ 为主的语言开发,ios使用的object-...

    本篇文章主要总结一下现在APP当中使用的js、webView混编架构和技术。

    什么是 js 混编?

    js混编简单说就是使用JavaScript开发APP程序。


    android应用使用的是java,Kotlin 、c/c++ 为主的语言开发,ios使用的object-c 、 swift、c/c++ 为主语言开发,由于市场是基本都是android和ios手机,所以一般公司开发什么项目android和ios的APP都必须开发。android和ios都提供一个库webkit浏览器引擎的支持,android提供了一个组件webView用于显示网页,相当于一个内置浏览器,ios也有类似一个组件UIWebView;webView和UIWebView也都支持js bridge的模式,就是js与java或者object-c进行交互,那么就产生一种开发模式就是hybrid APP开发模式。

    hybrid 应用

    hybrid APP开发模式由于可以使用HTML5 、css、js进行大量UI开发得到了飞速的发展,到后面这类开发也出现很多优秀的框架例如:cordova(phoneGap) ionic 等,他们基本架构都是使用浏览器组件(webView,UIWebView)渲染UI,使用js调用原生代码执行手机功能。那么随后发展中hybrid应用也暴露很多问题。

    hybrid 应用缺点

    • UI渲染性能差,例如加载白屏,渲染卡顿
    • 内存消耗高,主要是没有优秀的回收复用机制,例如原生recyclerView
    • 用户交互差,用户触摸反应迟钝等
    • UI渲染失真

    那么为了解决hybrid APP中的鸡肋痛点,那么也产生除了很多记得新js 混编开发框架,例如react native(facebook 公司出品), Xamarin(微软公司出品,c#阵营,干的也是跨平台这档子事);这种框架已经不再是hybrid模式,应该叫做js native APP 开发模式。

    js native 应用(react native ,Xamarin )

    js native 应用克服了很hybrid的缺点,他是通过js开发使用自定义封装UI控件进行开发,最终打包成原生应用。

    1、优点

    • 原生级别的UI渲染
    • 没有通过webView来进行桥接,减少内存消耗
    • 用户体验迅速,触摸流畅
    • 提供原生方法调用自定义接口,和自定义UI组件的封装使用,可以无缝对接你现在应用
    • android和ios端高度UI一致性

    其实缺点也是比较明显,例如:

    1、缺点

    • 一定的学习成本,相当于学习新的开发技术
    • 项目避免不了封装自定义方法和UI控件,桥接代码多
    • 项目维护成变高了

    常用混编框架对比表

    项目 cordova(phoneGap) react native Xamarin ionic
    是否使用webView交互
    是否具备自有UI组件
    开源
    是否打包成原生
    具备定制IDE工具
    开发语言 js js c# js
    推荐理由 前身phoneGap,历史悠久 facebook大厂背景,使用react js开发,提供了良好的调用原生api和UI组件机制 强烈推荐,超级大厂微软支持,mono是后台,导出平台不止是android 、iOS, 还有windows桌面程序 具备独立js UI,建立在cordova之上

    总体而言优点还是跨平台,如果选择js混编框架还是推荐使用react native。


    react native整合进入android应用 ,加入js开发模式

    操作步骤:

    配置好React Native依赖和项目结构。
    创建js文件,编写React Native组件的js代码。
    在应用中添加一个RCTRootView。这个RCTRootView正是用来承载你的React Native组件的容器。
    启动React Native的Packager服务,运行应用。
    验证这部分组件是否正常工作。

    开始前我们必须使用react native脚手架搭建出一个可以运行的hello world 项目,本文介绍主要是集成react native框架进入现有应用重点不是环境搭建,所以你可以自行百度react native官网的初始化项目文章。

    假设你现在已经有了环境了和一个可以运行hello world 项目了 那么我们可以开始接入现有应用了。

    hello world 项目项目目录如图:

    在这里插入图片描述

    复制node_modules目录和package.json进入你android项目跟目录如图:

    在这里插入图片描述

    创建index.android.js 文件放入android根目录,写入代码:

    'use strict';
    import React from 'react';
    import {
        AppRegistry,
        StyleSheet,
        Text,
        View,
        TouchableOpacity,
        NativeModules,
        ToastAndroid,
        requireNativeComponent,
        DeviceEventEmitte,
        Alert
    } from 'react-native';
    
    class HelloWorld extends React.Component {
    
        constructor(props) {
            super(props);
        }
    
        componentWillMount() {
        }
    
    
        render() {
            return (
                <View style={styles.container}>
                    <Text style={{alignItems:'flex-start', backgroundColor:'red', height:49, textAlign:'right'}}>
                        作者jason 李
                    </Text>
                </View>
            )
        }
    
    }
    
    var styles = StyleSheet.create({
        container: {
            flex: 1,
            justifyContent: 'center',
            flexDirection: 'column',
        },
        hello: {
            fontSize: 20,
            textAlign: 'center',
            margin: 10,
        },
    });
    
    AppRegistry.registerComponent('HelloWorlds', () => HelloWorld);
    
    

    接下是android部分了:

    在入口gradle文件加入代码:

    allprojects {
        repositories {
            google()
            jcenter()
            maven {
                url "$rootDir/node_modules/react-native/android"  //加入这句
            }
        }
    }
    

    在项目gradle文件中加入依赖:

    compile "com.facebook.react:react-native:0.55.3"
    

    创建Application程序:

    public class MyApplication extends Application implements ReactApplication {
    
        private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
            @Override
            public boolean getUseDeveloperSupport() {
                return BuildConfig.DEBUG;
            }
    
            @Override
            protected List<ReactPackage> getPackages() {
                return Arrays.<ReactPackage>asList(
                        new MainReactPackage()
                );
            }
    
        };
        @Override
        public ReactNativeHost getReactNativeHost() {
            return mReactNativeHost;
        }
    }
    

    创建react activity:

    public class MyReactActivity extends Activity implements DefaultHardwareBackBtnHandler {
        private ReactRootView mReactRootView;
        private ReactInstanceManager mReactInstanceManager;
    
        @Override
        protected void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
    
            mReactRootView = new ReactRootView(this);
            mReactInstanceManager = ReactInstanceManager.builder()
                    .setApplication(getApplication())
                    .setBundleAssetName("index.android.bundle")
                    .setJSMainModulePath("index")
                    .addPackage(new MainReactPackage())
                    .setUseDeveloperSupport(BuildConfig.DEBUG)
                    .setInitialLifecycleState(LifecycleState.RESUMED)
                    .build();
            // 注意这里的MyReactNativeApp必须对应“index.js”中的
            // “AppRegistry.registerComponent()”的第一个参数
            mReactRootView.startReactApplication(mReactInstanceManager, "HelloWorlds", null);
    
            setContentView(mReactRootView);
        }
    
        @Override
        public void invokeDefaultOnBackPressed() {
            super.onBackPressed();
        }
    }
    

    加入权限:

    <uses-permission android:name="android.permission.INTERNET" />
    

    至此所有的配置结束!!!

    运行测试

    在目录打开cmd:输入

    yarn start

    然后用Android studio运行你的项目!!

    在这里插入图片描述

    展开全文
  • 1.创建app项目 打开hb–文件–新建–移动app–输入项目名字–勾选mui项目–点击完成即可 2.修改manifest.json文件 找到项目—选择manifest.json文件–按住ctrl+f检索plus–添加如下代码 "launchwebview...
  • 许多客户在选择开发APP时,都会被开发者问到一个,你是选择原生开发,还是混编开发。对于外行客户而言,不是很能理解原生和混编的区别。下面简单介绍一下两者的区别,企业在开发的时候能够根据自身情况从多重角度...
  • 混编,web APP

    2017-02-28 17:15:00
    使用框架Cordova,H5+JS语言,可以尝试下混编web APP 是怎样做到, Cordova 转载于:https://www.cnblogs.com/mojiewei/p/6479789.html
  • 通过js编写RN界面,使用前端的nodejs的npm工具打包RN开发出来的模块,生成bundle文件,预先存放到原生指定的目录,原生层面在RN引擎初始化时载入并读取bundle并进行渲染
  • 99美元开发帐号,生成IPA到上架的教程!图文并茂!
  • 使用MUI做的模仿豆瓣电影的移动开发。从此告别原生开发。
  • Hybrid APP --- OC,JS 混编

    千次阅读 2016-01-15 15:37:13
    基于原生app的更新复杂的弊端,现在很多app使用Hybrid方式,来实现更快的更新速度以及更好的灵活性。 那么native与JS的相互调用需要解决。 方式: 1.原生调用JS 使用webView的原生方法: [webView ...
  • OC与Swift混编后,感觉吊吊地,但某一天要发布应用时,心情就纠结了。本地AD hoc打包30.4M,发布应用到商店并且成功上线,发现APP体积为48.8M,心情非常惊讶。同事产品需求要把APP体积降到10M,一阵....。那么,APP...
  • 前言:之前使用MUI做过一个APP的开发,学习的时候仅限于官方API,前端开发也是一知半解,抽空把仿豆瓣电影是MUI视频看了一下,部分内容跟官网已经不一样了,但是开发的思路值得学习。 1.获取ajax数据 使用的是mui....
  • 文章目录5.CSS样式6.页面显示加载中7.plus.webview.currentWebview()8.详情页面跳转及数据传递9.获取接口数据及加载 5.CSS样式 overflow-x: 裁剪 div 元素中内容的左/右边缘 - 如果溢出元素的内容区域的话 ...
  • 文章目录10.搜索历史记录11.清除缓存12.页面主动加载 10.搜索历史记录 1.通过plus.storage实现本地数据存储 2.通过plus.storage.setItem实现存 3.JavaScript:splice() 4.搜索记录中没有则直接添加到第一个元素,有...
  • 简介 笔者当初为了学习JAVA,收集了很多经典源码,源码难易程度分为初级、中级、高级等,详情看源码列表,需要的可以直接下载! 这些源码反映了那时那景笔者对未来的盲目,对代码的热情、执着,对IT的憧憬、向往!...
  • 目前《闲鱼》客户端已经在商品详情页使用纯Flutter编写了,单页面纯Flutter写是没有问题的,在这里... 切回APP 以《闲鱼》商品列表页和商品详情页为例: 商品列表页和商品详情页 接下来我们打开布局边界显示,可...

空空如也

1 2 3 4 5 ... 12
收藏数 232
精华内容 92
热门标签
关键字:

混编app