• 自定义cordova插件;Android studio环境下将CordovaLib作为依赖导入;自定义Cordova插件;cordova自定义java类中的一些问题;在CordovaActivity中添加原生View组件;在Fragment里使用CordovaWebView;Fragment拦截...

    一 安装node.js

    下载地址:https://nodejs.org/en/

    安装完成后,cmd执行 npm install -g cordova ,全局安装Cordova。

    注意:可能会有点慢,请耐心等待!


    二 cmd创建Android项目

    • 1.新建一个项目:
      路径名>cordova create 文件名 包名 工程名
    • 2.添加Android平台:cordova platform add android

    三 导入工程 运行一下

    • 1.导入工程

    • 2.运行一下,如果出现以下界面,恭喜你,Cordova环境集成成功,你可以开始下一步操作了。


    四 调用插件

    • 1.cmd添加摄像机插件:android路径名>cordova plugin add cordova-plugin-camera
    • 2.查看已安装的插件列表

      备注:懒得进行以上步骤的朋友,可以点击以下链接直接下载,对于开发使用没有影响。

      1. 基于node.js4.47无插件下载
      2. 基于node.jd4.4.7全插件下载
    • 3.编写index.html文件

    在head里加入:

    <head>
    <meta http-equiv="Content-type" content="text/html; charset=utf-8">
    <script type="text/javascript" charset="utf-8" src="cordova.js"></script>
     <script type="text/javascript" charset="utf-8">
    
                var destinationType;
    
                document.addEventListener("deviceready",onDeviceReady,false);
    
                //Cordova加载完成会触发
                function onDeviceReady() {
                    destinationType=navigator.camera.DestinationType;
                }
    
                //拍照
                function capturePhoto() {
                    if(!navigator.camera){
                        alert('camera:')
                    }
                    //拍照并获取Base64编码的图像(quality : 存储图像的质量,范围是[0,100])
                    navigator.camera.getPicture(onPhotoDataSuccess, onFail, { quality: 50,
                                                destinationType: destinationType.DATA_URL }
                                                );
                }
    
                //拍照成功
                function onPhotoDataSuccess(imageData) {
                    console.log(imageData);
                    var smallImage = document.getElementById('smallImage');
                    smallImage.style.display = 'block';
                    smallImage.src = "data:image/jpeg;base64," + imageData;
                }
    
                //拍照失败
                function onFail(message) {
                    alert('拍照失败: ' + message);
                }
            </script>
    </head>

    在body里加入:

     <body style="padding-top:50px">
            <button style="font-size:23px;" onclick="capturePhoto();">拍摄照片</button> <br>
            <img style="display:none;width:240px;height:320px;" id="smallImage" src="" />
     </body>
    • 4.调用相机插件:

    1.将CordovaLib作为Library引入到项目中;
    2.把示例demo中的src目录下的org文件夹、assets文件夹下内容、res文件夹下xml文件夹下的config.xml、AndroidManifest.xml中权限服务考到自己项目中。
    3.写代码:
    (1).创建一个activity extends CordovaActivity;
    (2).loadUrl(“file:///android_asset/www/index.html”);
    (3).将步骤3写好的index.html考到assets/www/目录下;
    (4).运行到手机上,应该据可以调用摄像头功能了。

    添加插件一览:

    1.Device(设备)获取一些设备信息。

    cordova plugin add cordova-plugin-device

    2.Connection(网络连接)用来判断网络连接类型(2G、3G、4G、Wifi、无连接等)。

    cordova plugin add cordova-plugin-network-information

    3.Battery(电池)可以获取电池状态信息。

    cordova plugin add cordova-plugin-battery-status

    4.Accelerometer(加速计)让应用在三维空间(使用笛卡尔三维坐标系统)中决定设备方向。

    cordova plugin add cordova-plugin-device-motion

    5.Compass(指南针)可以让开发者读取移动设备的朝向。

    cordova plugin add cordova-plugin-device-orientation

    6.Geolocation(地理定位)让应用判断设备的物理位置。

    cordova plugin add cordova-plugin-geolocation

    7.Camera(相机)用相机获取图像。

    cordova plugin add cordova-plugin-camera

    8.MediaCapture(媒体捕获)与Camera API相比,不仅能获取图像,还可以录视频或者录音。

    cordova plugin add cordova-plugin-media-capture

    9.Media(播放/记录媒体文件)让应用能记录或播放媒体文件。用它可以在手机后台播放音频文件或玩桌面视频游戏。

    cordova plugin add cordova-plugin-media

    10.file(文件访问操作类)提供对设备上的文件进行读取和写入的功能支持。

    cordova plugin add cordova-plugin-file

    11.fileTransfer(文件传输)实现文件上传、下载及共享等功能。

    cordova plugin add cordova-plugin-file-transfer

    12.VisualNotification(可视化消息提醒)不同于js的alert()、confirm()和prompt()方法是同步的。Cordova的alert()、confirm()和prompt()方法是异步的,并且对显示内容有更大的控制权限。

    cordova plugin add cordova-plugin-dialogs

    13.HardwareNofifications(硬件消息提醒)让设备蜂鸣或振动。

    cordova plugin add cordova-plugin-vibration

    14.Contacts(联系人)读取联系人列表并在应用中使用联系人数据,或使用应用数据向联系人列表中写新的联系人。

    cordova plugin add cordova-plugin-contacts

    15.Globalization(全球化)允许应用查询操作系统的当前设置,判断用户使用的语言。

    cordova plugin add cordova-plugin-globalization

    16.Splashscreen(闪屏)用来在Cordova应用启动时显示自定义的闪屏。

    cordova plugin add cordova-plugin-splashscreen

    17.InAppBrowser(内置浏览器)允许在在单独的窗口中加载网页。例如要向应用用户展示其他网页。当然可以很容易地在应用中加载网页内容并管理,但有时候需要不同的用户体验,InAppBrowser加载网页内容,应用用户可以更方便的直接返回到主应用。

    cordova plugin add cordova-plugin-inappbrowser

    18.Console(调试控制台)让程序可以在控制台中打印输出日志。

    cordova plugin add cordova-plugin-console

    19.exitApp(退出应用)让 Android 或者 Windows Phone 8 上的APP关闭退出(iOS系统不支持)

    cordova plugin add cordova-plugin-exitapp

    20.barcodeScanner(条形码/二维码扫描)不仅可以通过摄像头识别二维码/条形码,还能生成二维码。

    cordova plugin add cordova-plugin-barcodescanner

    命令一览:

    1.查看所有已经安装的插件

    cordova plugin ls

    2.安装插件(以camera插件为例)

    cordova plugin add cordova-plugin-camera

    3.删除插件(以camera插件为例)

    cordova plugin rm cordova-plugin-camera

    4.更新插件

    cordova plugin update


    五 Android studio环境下将CordovaLib作为依赖导入

    环境:Android Studio 2.2
    - 1.将CordovaLib作为module导入


    - 2.添加依赖


    六 自定义插件

    • 1.自定义你的java类

    1.1.包名,等下会用到。
    1.2.集成的父类。
    1.3.重写的方法。
    1.4.传递的参数。
    1.5.action匹配。

    • 2.在config.xml文件中添加配置

    2.1.js文件名
    2.2.java类路径名(详见1.1)

    • 3.在assets/www/plugins文件夹下新建文件夹cordova-plugin-xxxx文件夹,并在此文件夹下新建xxxx.js文件。

    3.1.js的文件夹名.文件名
    3.2.方法名
    3.3.与config.xml文件下一致
    3.4.方法名==2(与java文件下action一致)
    3.5.成功回调函数
    3.6.失败回调函数 [content,type]是传递的参数

    • 4.在cordova_plugins.js中添加必要配置

    4.1.file:js路径名
    4.2.id:js的文件夹名.文件名
    4.3.html文件中方法名的前缀 在module.exports.metadata中添加
    4.5. js的文件夹名
    4.6.版本号

    • 5.在index.html中调用
    function Toast(){
        navigator.Toast.getTost("Toast测试",0,onSuccess,onError);
        function onSuccess(Data){
            alert(JSON.stringify(Data));
        }
        function onError(Data){
            alert(JSON.stringify(Data));
        }
     }

    七 java类中的一些问题

    • 1.startActivityForResult

      查看CordovaActivty源码:

      查看CordovaPlugin源码:

      在webView的CordovaActivity获取到Result后,会调用cordovaInterface.onActivityResult(requestCode, resultCode, intent)方法通知CordovaPlugin。如果使用cordova.getActivity().startActivityForResult(intent,CORDOVA_SPEEN)方式,并没有将CordovaPlugin传进去,在webView的CordovaActivity获取到Result后,结果只会返回到的webView的CordovaActivity当中,并不会进行下一步。

    • 2.回调

    mCallbackContext.success(JSONObject);
    mCallbackContext.error(JSONObject);


    八 在CordovaActivity中添加原生View组件 #

    原因:继承CordovaActivity的子类中默认只有一个WebView,实际开发中不能满足需求。
    解决方案:可以使用setContentView设置XML布局,需要重写的两种方法:makewebview 和createviews。(亲测通过extends Activity implements CordovaInterface方法实现时,cordova.startActivityForResult不回调,具体原因尚不明)
    - makewebview() : 很重要,它使用R.id.cordovawebview,会定义在XML布局文件。
    - createViews() : 它会默认使用setContentView,想使用自己定义的布局,需要重写该方法。

    实现功能:在WebView上增加TitleBar。
    - 1.布局文件(R.layout.activity_cordova_title)

    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    
        <RelativeLayout
            android:layout_width="fill_parent"
            android:layout_height="45dip"
            android:background="#25C28B" >
    
            <ImageButton
                android:id="@+id/cordova_back"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:background="#00FFFFFF"
                android:paddingLeft="10dp"
                android:paddingRight="20dp"
                android:src="@drawable/back" />
    
            <TextView
                android:id="@+id/cordova_title"
                android:layout_width="wrap_content"
                android:layout_height="wrap_content"
                android:layout_centerInParent="true"
                android:text="原生头部"
                android:textColor="#FFFFFF"
                android:textSize="20sp" />
    
            <Button
                android:id="@+id/cordova_close"
                android:layout_width="wrap_content"
                android:layout_height="match_parent"
                android:layout_alignParentRight="true"
                android:background="#00FFFFFF"
                android:paddingLeft="10dp"
                android:paddingRight="20dp"
                android:text="关闭"
                android:textColor="#FFFFFF"
                android:textSize="20sp" />
        </RelativeLayout>
    
           <org.apache.cordova.engine.SystemWebView
            android:id="@+id/cordovaWebView"
            android:layout_width="match_parent"
            android:layout_height="match_parent" />
    
    </LinearLayout>
    • 2.自定义CordovaActivity类(CordovaTitleActivity)

    参照源码copy过来的,因为要使用自定义布局,所以setContentView相关代码注掉

    public class CordovaTitleActivity extends CordovaActivity {
    
        @Override
        public void onCreate(Bundle savedInstanceState) {
            super.onCreate(savedInstanceState);
            setContentView(R.layout.activity_cordova_title);
            loadUrl(launchUrl);
    
        }
    
        @Override
        protected CordovaWebView makeWebView() {
            SystemWebView webView = (SystemWebView) findViewByI(R.id.cordov_webView);
            CordovaWebView cordovaWebView = new CordovaWebViewImpl(new SystemWebViewEngine(webView));
            return cordovaWebView;
        }
        @Override
        protected void createViews() {
            //因为要使用自定义布局,此处setContentView需要注掉
    //      appView.getView().setId(100);
    //      appView.getView().setLayoutParams(new FrameLayout.LayoutParams(
    //              ViewGroup.LayoutParams.MATCH_PARENT,
    //              ViewGroup.LayoutParams.MATCH_PARENT));
    //      setContentView(appView.getView());
    
          if (preferences.contains("BackgroundColor")) {
              int backgroundColor = preferences.getInteger("BackgroundColor", Color.BLACK);
              // Background of activity:
              appView.getView().setBackgroundColor(backgroundColor);
          }
          appView.getView().requestFocusFromTouch();
        }
    }
    • 3.使用Cordova需要注意的问题
    1. 在Activity的onCreate方法中,loadUrl(launchUrl)调用之后,CordovaLib中的WebView对象appView才有值,因此使用appView时,必须写在loadUrl的后面。
    2. 在Cordova中,appView是不能直接调用addJavascriptInterface()方法的,在调用该方法之前,需要加上一行代码: 
       WebView Wv = (WebView) appView.getEngine().getView();
       调用WebView的其他方法类似。

    九 在Fragment里使用CordovaWebView

    • 1.Fragment的布局文件(cordova_fragmrnt.xml)
    <?xml version="1.0" encoding="utf-8"?>
    <LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
        android:layout_width="match_parent"
        android:layout_height="match_parent"
        android:orientation="vertical" >
    
         <org.apache.cordova.engine.SystemWebView
            android:id="@+id/cordov_webView"
            android:layout_width="match_parent"
            android:layout_height="match_parent"/>
    
    </LinearLayout>

    -2.Fragment

    public class MyFragmentNew extends BaseFragment implements CordovaInterface {
    
        public static MyFragmentNew newInstance() {
            MyFragmentNew fragment = new MyFragmentNew();
            return fragment;
        }
    
        private String TAG = "MyFragmentNew";
    
        private CordovaWebView myCordovaWebView;
    
        private Context mContext;
    
        // Plugin to call when activity result is received
        protected CordovaPlugin activityResultCallback = null;
        protected boolean activityResultKeepRunning;
        // Keep app running when pause is received. (default = true)
        // If true, then the JavaScript and native code continue to run in the
        // background
        // when another application (activity) is started.
        protected boolean keepRunning = true;
    
        private final ExecutorService threadPool = Executors.newCachedThreadPool();
    
        @Override
        public View onCreateView(LayoutInflater inflater, ViewGroup container,
                Bundle savedInstanceState) {
            mContext = inflater.getContext();
            View thisView = inflater.inflate(R.layout.home_pager_fragment_new,
                    container, false);
            SystemWebView homeWebView = (SystemWebView) thisView
                    .findViewById(R.id.cordov_webView_home);
            ConfigXmlParser parser = new ConfigXmlParser();
            parser.parse(getActivity());// 这里会解析res/xml/config.xml配置文件
            myCordovaWebView = new CordovaWebViewImpl(new SystemWebViewEngine(
                    homeWebView));// 创建一个cordovawebview
            myCordovaWebView.init(new CordovaInterfaceImpl(getActivity()),
                    parser.getPluginEntries(), parser.getPreferences());// 初始化
            myCordovaWebView.loadUrl("file:///android_asset/www/index.html");// 加载网页
    
            return thisView;
        }
    
        @Override
        public void startActivityForResult(CordovaPlugin command, Intent intent,
                int requestCode) {
            this.activityResultCallback = command;
            this.activityResultKeepRunning = this.keepRunning;
            // If multitasking turned on, then disable it for activities that return
            if (command != null) {
                this.keepRunning = false;
            }
            // Start activity
            super.startActivityForResult(intent, requestCode);
    
        }
    
        @Override
        public void setActivityResultCallback(CordovaPlugin plugin) {
            this.activityResultCallback = plugin;
    
        }
    
        @Override
        public void onDestroy() {
            super.onDestroy();
            if (myCordovaWebView != null) {
                myCordovaWebView.handleDestroy();
            }
        }
    
        @Override
        public Object onMessage(String id, Object data) {
            return null;
        }
    
        @Override
        public ExecutorService getThreadPool() {
            return threadPool;
        }
    
        @Override
        public void requestPermission(CordovaPlugin plugin, int requestCode,
                String permission) {
            // TODO Auto-generated method stub
    
        }
    
        @Override
        public void requestPermissions(CordovaPlugin plugin, int requestCode,
                String[] permissions) {
            // TODO Auto-generated method stub
    
        }
    
        @Override
        public boolean hasPermission(String permission) {
            // TODO Auto-generated method stub
            return false;
        }
    
    }
    • 3.需要在Fragment所在的Activity中重写onActivityResult()方法,将结果通知给自定义插件
    public static CordovaPlugin mCordovaPlugin;
    
        /**
         * 为了将回调结果回传给Cordova插件
         */
        @Override
        protected void onActivityResult(int requestCode, int resultCode, Intent data) {
            // TODO Auto-generated method stub
            CordovaPlugin cordovaPlugin = this.mCordovaPlugin;
            if(cordovaPlugin != null){
                cordovaPlugin.onActivityResult(requestCode,resultCode,data);
            }
            super.onActivityResult(requestCode, resultCode, data);
        }
    • 4.在自定义插件类里给步骤3里的mCordovaPlugin赋值
    public boolean execute(String action, JSONArray args,
            CallbackContext callbackContext) throws JSONException {
            // TODO Auto-generated method stub
            mCallbackContext = callbackContext;
    
            /*给fragment所在activity里的mCordovaPlugin赋值,否则fragment所在activity里onActivityResult()
             * 无法将结果传给插件的onActivityResult()。*/
            MyFragmentActivity.mCordovaPlugin = (CordovaPlugin) this;
    
           // 语音识别
            if ("getSpeechData".equals(action)) {
                RequestData = args.getJSONObject(0);
                Intent intent = new Intent(cordova.getActivity(),
                        SpeechActivity.class);
                intent.putExtra("flag", RequestData.getInt("flag"));
                this.cordova.startActivityForResult((CordovaPlugin) this, intent,
                        CORDOVA_SPEEN);
    
            return true;
    }

    十 Fragment拦截返回键

    • 1.原理:利用Fragment的生命周期,在Fragment显示时通知到Activity,并由Activity保持。当用户按下物理返回键时,首先将back键请求交给Fragment处理,如果处理返回true,未处理时返回false。如果Fragment没有处理则由Activity处理。为保证Fragment存在嵌套的情况下也能正常使用,可以使用FragmentManager去管理持有的子Fragment,FragmentManager使用递归方式处理。

    • 2.定义FragmentBackHandler接口

    public interface FragmentBackHandler {
        //用于判断子fragment是否对返回键做处理
        boolean onGoBack();
    }
    • 3.定义一个BackHandlerHelper工具类,用于实现分发back事件,Fragment和Activity的外理逻辑是一样,所以两者都需要调用该类的方法。
    public class BackHandlerHelper {
    
        /**
         * 将back事件分发给 FragmentManager 中管理的子Fragment,如果该 FragmentManager
         * 中的所有Fragment都 没有处理back事件,则尝试 FragmentManager.popBackStack()
         * 
         * @param fragmentManager
         * @return
         */
        public static boolean handleBackPress(FragmentManager fragmentManager) {
            List<Fragment> fragments = fragmentManager.getFragments();
    
            if (fragments == null)
                return false;
    
            for (int i = fragments.size() - 1; i >= 0; i--) {
                Fragment child = fragments.get(i);
    
                if (isFragmentBackHandled(child)) {
                    return true;
                }
            }
    
            if (fragmentManager.getBackStackEntryCount() > 0) {
                fragmentManager.popBackStack();
                return true;
            }
            return false;
        }
    
        public static boolean handleBackPress(Fragment fragment) {
            return handleBackPress(fragment.getChildFragmentManager());
        }
    
        public static boolean handleBackPress(FragmentActivity fragmentActivity) {
            return handleBackPress(fragmentActivity.getSupportFragmentManager());
        }
    
        public static boolean isFragmentBackHandled(Fragment fragment) {
            return fragment != null
                    && fragment.isVisible()
                    && fragment.getUserVisibleHint() // for ViewPager
                    && fragment instanceof FragmentBackHandler
                    && ((FragmentBackHandler) fragment).onGoBack();
    
        }
    }
    • 3.在Fragment里实现FragmentBackHandler接口
    public class MyFragmentNew extends BaseFragment implements FragmentBackHandler{
    
        @Override
        public boolean onGoBack() {
            if(myCordovaWebView.canGoBack()){
                myCordovaWebView.getEngine().goBack();
                return true;
            }
            //return BackHandlerHelper.handleBackPress(this);
            //当确认没有子Fragmnt时可以直接return false
            return false;
        }
    }
    • 4.在宿主Activity覆盖onBackPressed方法
    public class MyActivity extends FragmentActivity {
        //.....
        @Override
        public void onBackPressed() {
            //子Fragment没有做拦截处理
            if (!BackHandlerHelper.handleBackPress(this)) {
                super.onBackPressed();
            }
        }
    }
    展开全文
  • 创建Cordova项目

    2016-07-23 14:33:03
    告别了原生开发,公司上个app应用就是使用Cordova集成开发,算是webApp了,调用了原生插件,主要Angularjs完成逻辑,H5写的界面。  自己封装过插件,调原生控件;学习Angularjs,写逻辑。整体来说,对Cordova开发...

        告别了原生开发,公司上个app应用就是使用Cordova集成开发,算是webApp了,调用了原生插件,主要Angularjs完成逻辑,H5写的界面。

        自己封装过插件,调原生控件;学习Angularjs,写逻辑。整体来说,对Cordova开发App也不算陌生了,但是一直没有自己进行练手,独立开发整个项目。想想也是惭愧啊。

        但是感觉自己学的也只是皮毛,差点还远那。


        (先前自己也试过配置环境安装运行Cordova,那时候一直出问题后来就撂那了,然后......)

        由于没有安装神器‘VS2015’,开发过程中,每次打包都需要领导打包,有什么问题自己只能在studio中调试,甚是不爽,奈何听闻至少得60G控件,感觉有点坑爹啊。

        这段时间不是太忙,搞了一段时间RN,前几天领导科普Cordova相关知识,顺便自己就用命令行试试,生成项目,捯饬捯饬。


        下面是简单的练手过程:

        1.npm install -g cordova   (安装过RN,所以node.js环境什么的都配置过了,没有安装的需要下载安装node.js)

        2.cordova create MyApp    找合适位置,创建原始项目

        3.cd MyApp   进入项目目录下,可以自行添加平台支持,cordova platform add <platform name>. 。

           eg:cordova platform add browser 浏览器支持  然后 cordova run browser,可以在浏览器上调试。

           这里使用    cordova platform add android    

        4.cordova plugin add  xxx  ,添加插件支持,用到什么添加什么,网上一大堆。(这一步可以略过)

        5.cordova build  构建应用

        6.cordova  run android   运行  (前提:连接真机或者模拟器)


        Over,随意修改www下的index,也可以把现成的工程拷进来,运行试试。

         下面是一个哥们写的小项目(什么前段自动化),我直接拖进来完美运行。

          工程运行方法:cordova  run android

         源码



    展开全文
  • 如果不是 JDK8,Cordova 将会在打包过程中报 Java 版本不符的错误。 配置环境变量,在系统变量中,添加 JAVA_HOME 的变量 [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eifCl...

    环境安装

    • Node.js (此处不作介绍)
    • Java
    • Android SDK
    • Gradle

    Java

    根据 Cordova 的环境要求,请务必安装 JDK8。如果不是 JDK8,Cordova 将会在打包过程中报 Java 版本不符的错误。

    配置环境变量,在系统变量中,添加 JAVA_HOME 的变量
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-eifClzL4-1587104715419)(https://s2.ax1x.com/2019/10/11/uHDQZ8.png)]

    在 PATH 中添加 bin 目录
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-YF6VtotE-1587104715437)(https://s2.ax1x.com/2019/10/11/uHrghQ.png)]

    如果在命令行中输入 java 命令,可以看到以下内容,则 Java 安装成功
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-WBzjh3P6-1587104715443)(https://s2.ax1x.com/2019/10/11/uHrzB6.png)]

    Android SDK

    Android SDK 目前都已经集成到了 Android Studio 中,下载 Android Studio 就可以在里面下载对应的 SDK。

    下载安装完 Android Studio 之后,在 setting 中管理下载对应的 SDK,此处安装了 10.0 和 9.0 版本
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-rX0qaU7F-1587104715452)(https://s2.ax1x.com/2019/10/11/uH6xun.png)]

    在 AVD Manage 中添加一台 Android 虚拟设备
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-uyVanPKq-1587104715456)(https://s2.ax1x.com/2019/10/11/uHgCqI.png)]

    点击 Actions 中的绿色箭头,启动 Android 虚拟设备,出现如下设备界面,说明成功
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-ovebZ89E-1587104715458)(https://s2.ax1x.com/2019/10/11/uHgfeI.png)]

    Gradle

    Gradle 是一个基于Apache Ant和Apache Maven概念的项目自动化构建开源工具。

    下载 Gradle 的 binary-only 包(此处为 5.6.2 版本),因为该网站被公司屏蔽,所以如果碰到无法下载的情况,请自行连接到自己的手机 Wi-Fi 进行下载。

    将 Gradle 添加到系统的环境变量
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-kMTPNKTs-1587104715461)(https://s2.ax1x.com/2019/10/11/uHflX4.png)]

    在命令行中执行 gradle 指令,如果出现以下内容,则说明配置成功
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-xWMcSnze-1587104715464)(https://s2.ax1x.com/2019/10/11/uHfg4P.png)]

    创建项目

    使用 npm 全局安装 Cordova

    npm i -g cordova
    

    创建 Cordova 项目文件夹

    mkdir cordova-project
    
    cd cordova-project
    cordova create cordova-app # 创建 cordova 项目
    

    此时可以使用

    cd cordova-app
    cordova requirements
    

    来检查当前的 cordova 项目的环境是否满足构建条件,如果均满足,则可以看到以下结果
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-vU9nlV6Z-1587104715467)(https://s2.ax1x.com/2019/10/11/ubiGtI.png)]

    构建 apk

    cordova platform add android # 添加安卓
    
    cordova build android # 构建 android 包
    

    在构建的过程中,如果出现网络报错,是因为 Gradle 回去下载相关的依赖,但是 Gradle 的下载网址被公司屏蔽,所以请自行连接到手机 Wi-Fi,然后重新执行 build 命令。

    打包完成之后,就可以在以下目录中找到 Android 的 apk 安装包

    ...\cordova-project\cordova-app\platforms\android\app\build\outputs\apk\debug\app-debug.apk
    

    将 apk 安卓包直接拖拽到 Android 虚拟设备中,就可以进行安装和预览项目,例如下图
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-AAczUAwM-1587104715471)(https://s2.ax1x.com/2019/10/11/ub9plD.png)]

    创建 Vue 项目

    在 cordova-project 文件夹根目录下,创建 Vue 项目

    vue create vue-mobile-project
    
    # 或
    
    # 后续的教程将会基于 sweet-ui-mobile-pro 进行
    # sweet-ui-mobile-pro 是一个现成的 Vue Mobile demo
    # 仓库地址:https://gitlab.geely.com/C-SWEET-FRONTEND/sweet-ui-mobile-pro
    # 你也可以使用 git clone 来体验现成的案例
    git clone https://gitlab.geely.com/C-SWEET-FRONTEND/sweet-ui-mobile-pro.git
    

    修改 vue.config.js 文件(如果没有 vue.config.js 文件,则在 Vue 项目的根目录下创建),并写入一下配置

    module.exports = {
      publicPath: './', // 部署应用包时的基本 URL。此处应该设置为相对路径,否则构建的 APP会变成空白,无法获取的对应的资源
      outputDir: '../cordova-app/www', // 项目直接打包输出到 cordova-app 的 www 目录中
    };
    

    对 Vue 项目进行构建

    npm run build
    

    对 Cordova 项目进项构建

    #切换到 cordova-app 目录
    cordova build android
    

    重新安装打包后的 apk 在 Annroid 虚拟机上进行安装和预览,如下图
    [外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-b00JmFdS-1587104715473)(https://s2.ax1x.com/2019/10/11/ubCzse.png)]

    如果要构建 release 包,则需要加上 –release参数

    cordova build android --release
    

    首次构建 release 包, Cordova 会下载相关依赖,公司内会导致下载失败,请链接到自己的手机 Wi-Fi 进行下载。

    展开全文
  • UI Awesome-MaterialDesign – MaterialDesignCenter改名为Awesome-MaterialDesign,优化了布局,新增了不少库。 awesome-android-ui – ui库,非常多的ui及特效。 ChipsLibrary – 在Android EditText中实现...

    UI

    卫星菜单

    • android-satellite-menu – 点击主按钮,会弹出多个围绕着主按钮排列的子按钮,从而形成一个弹出式菜单。子按钮弹出和消失的动画效果都很棒。这种弹出式菜单按钮应用在Path app中。
    • ArcMenu – 实现弹出式按钮群(菜单)。点击主按钮,会在住按钮旁边弹出多个按钮(菜单)。弹出的按钮有两种排列形式,一种是围绕着主按钮成圆弧形排列,一种是和主按钮并排成一字型排列, 仿Path 2.0 (for iOS)。
    • Radial Menu Widget – 实现各种圆形或者半圆形菜单,以及圆形进度条。
    • android-circlebutton – 圆形按钮,有动画点击效果。
    • CircularFloatingActionMenu – 卫星菜单。
    • ElasticDownload – 挺酷的下载进度条。
    • android-snake-menu – 仿 Tumblr 的 Android 可拖拽蛇形动画菜单。

    节选器

    • SegmentView – 类似iOS的Segment Control控件,第一种方式是使用 RadioGroup 实现,O网页链接。
    • SHSegmentControl – 类似iOS的Segment Control控件,此种方式的可定制化更好。
    • android-segmentedradiobutton – 在Android中实现类似iOS的分段单选按钮(segmented control),本人以前项目一直使用,值得拥有。
    • android-segmented-control – RadioGroup实现类似ios的分段选择(UISegmentedControl)控件。

    下拉刷新

    • Android-Ptr-Comparison – Android 下拉刷新开源库对比,非常nice!!
    • Android-PullToRefresh – 最经典、最多人用的下拉刷新、加载更多。
    • PullDownListView – 一个下拉刷新的控件,实现了仿微信下拉中眼睛动画的效果。
    • DragTopLayout – 实现整个layout下拉刷新。
    • ZrcListView – 一个顺滑又漂亮的Android下拉刷新与加载更多列表组件,增加下拉刷新及滚动到底部自动加载的功能;增加越界回弹效果;增加自定义列表项动画的功能。
    • TwitterCover-Android – Twitter Android客户端的下拉封面模糊效果。
    • android-Ultra-Pull-To-Refresh – 实现整个layout下拉刷新,没有加载更过,Demo,  源码分析
    • StikkyHeader – 【Android控件源码:头部固定的控件列表效果】这是一个可以支持头部固定的控件列表功能,源码StikkyHeader,StikkyHeader是一个可以在滚动的时候将头部固定的控件,还可以将动画效果和StikkyHeader一起使用,api非常简单, 支持ListView,RecyclerView,ScrollView。支持2.3一下设备使用的StikkyHeader
    • PullDownListView – 实现了模仿微信眼睛下拉效果,源码PullDownListView,下拉刷新,上拉加载,模仿微信眼睛。
    • CircleRefreshLayout – 又一个下拉刷新的实现,水滴效果。
    • BGARefreshLayout-Android – 多种下拉刷新效果、上拉加载更多、可配置自定义头部广告位,目前已经实现了四种下拉刷新效果:新浪微博下拉刷新风格、慕课网下拉刷新风格、美团下拉刷新风格、类似qq好友列表黏性下拉刷新风格。
    • Pull-to-Refresh.Rentals-Android – 提供一个简单可以自定义的下拉刷新实现。
    • Pull-to-Refresh.Tours – Taurus,很精美的下拉刷新。
    • ParallaxListView – 模仿Path的下拉刷新,Head头部图片下拉放大。
    • WaveRefreshForAndroid – 下拉刷新水波纹动画。
    • CoordinatorLayoutDemos – 收集了不少资源写了一个基于CoordinatorLayout实现的下拉刷新效果。
    • Android_PullToRefreshLibrary_Collection – 下拉刷新开源库集锦 。
    • HitBlockRefresh – 下拉刷新:打砖块和打坦克。

    模糊效果

    进度条

    • easyloadingbtn – 模仿了一个Dribbble上的Material Design效果,环形loading, 进度条、进度圈。
    • android-square-progressbar – 一个不错的方形进度条。
    • Radial Menu Widget – 实现各种圆形或者半圆形菜单,以及圆形进度条。
    • AnimatedCircleLoadingView – 一个有限/无限加载动画效果。基于Nils Banner的android-watch-loading-animation设计图。该设计本来是针对智能手表的。
    • circular-progress-button – 带动态效果的Button(按钮)可要比静态的按钮炫酷的多了,大家看到效果图就知道了。
    • CircularBarPager – Android实现的动态效果,一个数字圆圈进度效果,源码CircularBarPager,material 风格的数字圆圈进度显示库(api10 +)。
    • dotted-progress-bar – 一个小清新的进度条。
    • WhorlView – 一个炫酷的漩涡加载效果自定义View。
    • AVLoadingIndicatorView – AVLoadingIndicatorView整合了一些漂亮的 Android 动画加载效果。
    • MagicProgressWidget – 渐变的圆形进度条与轻量横向进度条。
    • GBSlideBar – GBSlideBar类似uber/滴滴等app的滑动选择工具条。
    • GifLoadingView – 一些好看的 loadingview。
    • HouseLoading – 一个有趣的android加载loading动画。实现原理

    UI其他

    • MixtureTextView – 富文本,支持Android图文混排、文字环绕图片等效果。
    • android-ActionQueue – Action Queue 用于执行有次序的队列操作,比如按次序弹出对话框,这在 Android 中尤其有用。
    • WheelView-Android – WheelView-Android 是一款开源的 Android 滚动选择控件, 适用于不少应用场景。
    • Android Wheel – 带有刻度的旋转器:日历、三级联动。
    • CharacterPickerView – 可实现三级联动的选择器,高仿iOS的滚轮控件,可实现单项选择,并支持一二三级联动效果。
    • Highlight – Highlight一款可应用于 Android 应用上的指向性功能高亮的库, 可以快速的给应用添加上应用引导的效果。
    • HeaderAndFooterRecyclerView – 支持addHeaderView、 addFooterView、分页加载的RecyclerView解决方案 。
    • CleverRecyclerView – 是一个基于RecyclerView的扩展库,提供了与ViewPager类似的滑动效果并且添加了一些有用的特性。
    • drag-select-recyclerview – 实现了类似 Google Photos 风格的图片多选效果。
    • FlycoTabLayout – 一个Android TabLayout库,目前有两个TabLayout:SlidingTabLayout、CommonTabLayout。
    • AndroidChangeSkin – 一种完全无侵入的 Android 应用换肤方式,支持插件式和应用内换肤,无需重启 Activity。
    • Lobsterpicker – Lobsterpicker 为 Android 开发者提供了满足 Material Design 风格的颜色选择器。
    • FlycoRoundView – 一个扩展原生控件支持圆角矩形框背景的库,可以减少相关shape资源文件使用。
    • FlowingDrawer – FlowingDrawer 一个弹性效果的抽屉菜单,图片是概念图,实际效果实现了70%(侧滑菜单)。
    • TextSurface -是用 Java 写的一款借助酷炫的动画效果来完成消息展示的微型动画框架。
    • android-animate-RichEditor -android-animate-RichEditor是一款支持图片插入动画效果的 Android 富文本编辑器。
    • FlycoPageIndicator – android-animate-RichEditor是一款支持图片插入动画效果的 Android 富文本编辑器。
    • AndroidMosaicLayout – 马赛克效果 Layout,磁片风格View 自适应大小。
    • DropDownMenu – 一个实用的多条件筛选菜单,在很多App上都能看到这个效果,如美团,爱奇艺电影票等。
    • Swipe-Deck – 仿 Tinder 的可以左右滑动消除卡片效果的自定义控件。
    • IntlPhoneInput – 一个支持国际化的电话号码输入的自定义控件。
    • AndroidUI4Web – AndroidUI4Web是一个高性能的WebApp框架, 在移动浏览器上有与原生App一致的体验。
    • SmoothCheckBox – SmoothCheckBox带有切换动画的CheckBox。
    • AndroidTimelineViewx – AndroidTimelineViewx仿微信朋友圈 时间轴。
    • CityPicker – CityPicker仿美团等选择城市列表。
    • material-intro – Material Design 风格的引导页。
    • EmphasisTextView – 支持部分文字高亮的 TextView。
    • greedo-layout-for-android – 深度定制的 LayoutManager,在显示网格布局的时候会考虑屏幕宽高比。
    • Rosie – 可以让你创建遵循 Clean Architecture 的应用的框架。
    • CreditCardView – 一个交互很赞的信用卡自定义 View。
    • android-md-core – Material风格bootstrap的框架。
    • SwipeCardView – 一个带渐变层叠动画的左右滑动效果(类似于探探左右刷脸)。
    • SwipeSelector – 可以左右滑动切换 item 的 Selector。
    • ForegroundViews – 类似于 FrameLayout 的支持的前景自定义 View。
    • android-material-chips – Material Design 的 Chips 控件实现。
    • XhsEmoticonsKeyboard – 表情键盘解决方案。
    • JKeyboardPanelSwitch – 一套 Android 键盘面板冲突, 布局闪动的处理方案。
    • GestureLibray – 九宫格解锁。
    • RecyclerItemDecoration – RecyclerView相关的ItemDecorstion仍然保持高度定制性,易用性。
    • materiallogindemo – 一个炫酷的Material Design 风格的登录和注册页面 。教程

    动画

    • Android应用开发之所有动画使用详解 – Android应用开发之所有动画使用详解。
    • 动画特效大全 – Android 动画特效大全。
    • SwitchLayout – 国内开发者, Android的Activity切换动画特效库SwitchLayout,视图切换动画库,媲美IOS。
    • ActivityOptionsICS – 一个低版本activity动画兼容库——ActivityOptionsICS,可以很好的实现MD的动画效果。
    • SwipeBack – 一个可以通过手势返回到上一个Activity的开源库,支持上下左右四个方向返回,支持多个View为Child。
    • SpringIndicator – 模仿Morning Routine的引导页效果SpringIndicator;基于模仿红点拖拽的Demo实现:BezierDemo;sample中使用到 快速创建ViewPager和ListView等的第三方库:MultipleModel
    • XhsWelcomeAnim – 国内开发者, 华丽酷炫欢迎引导界面 动画没有之一。
    • Material-Animations – Material风格动画,可以定义两个Activity之间的动画。
    • android-shapeLoadingView – android-shapeLoadingView实现高仿新版58 加载动画,loading。
    • 一个绚丽的loading – 一个绚丽的loading动效分析与实现。
    • TransitionPlayer – 一个 Transition 动画控制控制库,可以让你很轻松的创建一个可交互的动画。
    • loading-balls – loading-balls 一款支持高度配置的 Android 加载进度球。
    • SogoLoading – 仿搜狗浏览器加载动画,实现说明
    • ExplosionField – Android中View 炸裂特效的实现分析
    • AZExplosion – AZExplosion:模仿ExplosionField的粒子破碎效果。
    • BrokenView -玻璃碎裂动画效果。
    • SwipeCardView – SwipeCardView一个带渐变层叠动画的左右滑动效果(类似于探探左右刷脸)。类似SwipeCard
    • CRAudioVisualizationView – 水波纹效果的声音可视化自定义 View。
    • LoadingDrawable – 一些酷炫的加载动画, 可以与任何View配合使用,作为加载动画或者Progressbar, 此外很适合与RecyclerRefreshLayout 配合使用作为刷新的loading 动画。
    • Depth-LIB-Android- – 一款酷炫的 Android 界面过渡动画效果。

    网络相关

    • ion – 一个异步网络请求和图片加载的库,一个库能搞定几乎所有的网络请求。
    • 多线程下载 – Android 实现多线程下载 完美代码。
    • opandroid – android p2p的开源实现。
    • okio – square出的Okio这个库,尤其擅长处理二进制数据。如果觉得Java的输入输出流实在太复杂啰嗦,不妨试试Okio。
    • okhttp – square出的okhttp库。
    • OkHttpPlus – OkHttp 的一个工具类开源项目OkHttpPlus——支持GET、POST、UI线程回调、JSON格式解析、链式调用、文件上传下载 ,OkHttpPlus介绍
    • Android-Download-Manager-Pro – 一个下载管理库,如果你的 App 有大量的下载工作,这个库能帮到你。
    • FileDownloader – 文件下载引擎,稳定、高效、简单易用。
    • jchat-android – 一个聊天 App,具有完备的即时通讯功能,JChat 的功能基于极光 JMessage SDK 来开发。

    网络测试

    • augmented-traffic-control – Facebook宣布开源移动网络测试工具ATC,该工具支持利用Wi-Fi网络模拟2G、2.5G、3G以及LTE 4G移动网络环境,让测试工程师们能够快速对智能手机和App在不同国家地区和应用环境下的性能表现进行测试。

    图像获取

    响应式编程

    地图

    • 百度地图 – Android百度地图 线路规划,模拟运动轨迹,及全景效果。
    • AirMapView – 支持多个本地地图提供者包括谷歌地图V2和亚马逊地图V2。如果设备没有任何受支持的本地地图提供者,AirMapView会回退到基于web的地图提供者(目前谷歌地图)。

    数据库

    • ORMLite – ORMLite做的最棒但是学习成本有点儿高,ORMLite的文档有点儿烂。
    • SugarORM – SugarORM比较轻便, 支持Has a 和 Has many映射,但无法保存集合,没有映射关系。
    • GreenDAO – GreenDAO要先建立一个java项目来生成对应的表,一变动又要生成,很不方便。
    • ActiveDriod – ActiveDriod也不错 官网
    • ORMDroid – ormdroid 。
    • sqlbrite – 良心企业Square的又一开源项目,当你不想给用ContentProvider,只想简单监听SQLite表增删改的数据变更时可以试试它。
    • sqlbrite – DBExecutor android ORM数据库 1.使用了读写锁,支持多线程操作数据。 2.支持操作多个数据库 3.支持事务 4.缓存Sql,缓存表结构。
    • Iron – 一个快速和易用的 NoSQL 数据存储框架。
    • hawk – 一个快速和易用的键值对数据存储框架,支持AES加密,支持SharedPreferences或Sqlite存储,支持Gson解析。
    • AndroidKeyValueStore – 一个基于 SQLite 的 Key/Value 存储框架。
    • DBFlow – 一个速度极快,功能强大,而且非常简单的 Android 数据库 ORM 库,为你编写数据库代码,DBFlow 已被证明是最好的解决方案。5 个顶级 Android 开源库

    图像浏览及处理

    • MPAndroidChart – MPAndroidChart是一个功能强大的图表开源类库:曲线图、柱形图、环形图。
    • XCL-Charts – (国人开发)基于Android Canvas来绘制各种图表,使用简便,定制灵活。
    • WilliamChart – 绘制图表的库,支持LineChartView、BarChartView和StackBarChartView三中图表类型,并且支持 Android 2.2及以上的系统。
    • CropImageView – 原生ImageView只支持centerCrop,这里有支持9个方向裁剪的ImageView。
    • SimpleCropView – 一个Android的图片裁剪库,使用简单,易于定制。
    • DrawableView – DrawableView实现画板功能,可以改变画笔粗细,颜色,支持撤销功能。
    • ImageCoverFlow – ImageCoverFlow效果不错的画廊控件 可以设置画廊一次可见图片的张数,和其他第三方Gallery控件不同的是,该控件直接继承自View,而不是sdk中的Gallery控件。
    • FancyCoverFlow – 支持Item切换动画效果的类似Gallery View。改进版本可以无限轮播,可以选择自动轮播或者 手动滑动。
    • BGABanner-Android – demo中演示了引导页、以及通过fresco、android-async-http、gson实现广告条的自动轮播效果(splash 、 ViewPager切换动画) 。
    • RecyclerViewPager – 重写后的 RecyclerViewPager 完全继承自RecyclerView,可以自定义触发翻页的距离,可自定义翻页速度,支持VerticalViewPager,支持Fragment。
    • StickerCamera – 可以说是一个完整的相机、图片编辑的 APP,集成了大部分市面上有的同类 APP 的功能,裁剪、滤镜、贴纸应有尽有。
    • demo6_PhotoRiver – 图片流动显示的demo,可以点击流动中的图片放大显示,双击空白处图片以九宫格排列。
    • glide-transformations – 一个基于Glide的transformation库,拥有裁剪,着色,模糊,滤镜等多种转换效果。
    • ColoringLoading – 一个用纯代码实现自动绘画效果动画的项目。
    • SmartDrawing – 一个轻量级的手绘板,加入了一点截图功能。这只是一个Demo。并不能作为类库,也不是完整的项目工程,仅供学习或参考使用。
    • SlidingCard – 漂亮的卡片滑动翻页特效。
    • LargeImage – 加载大图 可以高清显示10000*10000像素的图片。
    • GalleryFinal – 自定义相册,实现了拍照、图片选择(单选/多选)、 裁剪(单/多裁剪)、旋转、ImageLoader无绑定任由开发者选 择、功能可配置、主题样式可配置。GalleryFinal为你定制相册。
    • AndroidAlbum – AndroidAlbum图片选择器:1、MVP结构设计;2、工厂模式对载图框架进行封装抽象,方便替换其他载图框架;3、闪退日志的搜集,方便揪BUG。
    • uCrop – uCrop 是 Yalantis 推出的又一款力作, 用于裁剪 Android 系统上的图片, 致力于打造最佳的图片裁剪体验。
    • crop-image-layout – crop-image-layout:图片裁切布局。
    • RenderscriptHistogramEqualization – RenderScript :简单而快速的图像处理

    视频音频处理

    • ijkplayer – B站开源的视频播放器,支持Android和iOS。
    • DanmakuFlameMaster – 这里是Android上最好的开源弹幕引擎·烈焰弹幕使。
    • YouTubePlayerActivity – 一个可以播放YouTube视频的Activity,支持屏幕旋转、声音控制、播放失败处理、可以自定义Activity关闭动画以及在横屏播放的时候自动隐藏status bar。
    • AndroidVideoPlayer – 开源的 Android 视频播放器,支持 DLNA。
    • Hide-Music-Player – Hide音乐播放器。
    • JamsMusicPlayer – 是一个功能强大的 Android 开源播放器, 作者将原本收费的项目拿出来开源, 实在令人敬佩。
    • RxAndroidAudior – RxAndroidAudior目前最鲁棒的Android声音录制和播放封装库了,说明
    • Timber – 一款遵循了Material Design并且设计精美的播放器 Timber Music Player,已经在google play上架。
    • LandscapeVideoCamera – 一款功能强大的 Android 视频录制库, 仅允许横屏录制, 提供细粒度控制视频的质量与文件大小。

    测试及调试

    • DevelopQuickSetting – 快速开启关闭开发者设置的工具,提供了app界面和桌面widget,能快速打开关闭overdraw,layout border,gpu rendering,adb wifi,不保存activity实例等功能。
    • decompileandroid – 在线反编译apk文件。
    • jadx – 一个Android反编译神器,不同于常见的dex2jar,这个反编译器生成代码的try/catch次数更少,View也不再是数字id了,可读性更高。
    • Androguard – Androguard使用Python写的一系列逆向工具集,功能很强大哦,对逆向工程感兴趣的小伙伴可以这个系列,教程
    • logger – 一个简单、漂亮、功能强大的Android日志程序。
    • stf – WEB 端批量移动设备管理控制工具 STF 的环境搭建和运行,使用说明 。
    • DecompileApk – 一键反编译 APK,输出所有反编译后的代码、资源,使用方便。
    • AppCrashTracker – 一个异常追踪器,可以生成一个 JSON 格式的日志并可以上传到服务器。

    动态更新热更新

    消息推送与及时通讯

    客户端

    • SuesNews新闻客户端 – 腾飞新闻,一个符合 Google Material Design 的 Android 校园新闻客户端 ,新闻客户端说明 。
    • 新闻客户端 – Android应用源码比较不错的新闻客户端,本项目启动引导登录注册用户中心列表显示文章分页下拉刷新文章收藏更新反馈等新闻客户端常见的功能都有,项目分层合理,代码质量较高。
    • materialistic – Material Desgin风格的Hacker News客户* 端。
    • Telegram – Telegram 是一款专注于速度、安全的短信息应用,快速、简单、免费。Telegram 支持群组聊天,最高200人,最高支持分享1GB的视频,其它图片等等更是不在话下。而且所有信息全部支持同步。由于频发的隐私问题,所以 Telegram 也很注重通信安全。
    • SuZhouTong-client-for-android – 苏州通android客户端,非常多的UI效果。
    • ele_demo – 仿【饿了么】订餐软件的一个demo。
    • MD-BiliBili – Material Design 版 BiliBili Android 客户端。
    • AisenWeiBo – Aisen微博是新浪微博的第三方客户端,UI遵循Material Design:遵循Material Design、发布多图、离线下载、私信(触屏版、颜色主题切换、手势返回,4.4、5.0状态栏变色、离线编辑,定时发布多图、gif、长微博预览。FrescoDemo 。
    • 快递查询 – 使用了爱查快递www.ickd.cn的api接口,可以查询申通、EMS、顺风、圆通、中通、韵达、天天、汇通、全锋、德邦、宅急送等11种快递的单号信息,支持手动输入单号和扫描单号(红米测试的时候扫描单号有点问题),可以保存单号查询记录方便下次查询,,另外还包括了网络状态判断、快递自动更新、软件更新等功能,项目完美运行,有很详细的中文注释和逻辑分层。
    • SmartCall – SmartCall Android 企业通讯录。
    • Android-高仿大众点评客户端源码 – Android-高仿大众点评客户端源码。
    • 八个Android项目源码 – 八个Android项目源码,大部分功能相信可以在实战项目中直接使用,供大家下载学习,大部分项目是基于Android Studio开发,IDE为Eclipse的童鞋可通过网上教程自行转换,这里就不多说了。大家可以下载下来学习看看! 百度云盘下载地址
    • minicat – 一个简洁的饭否App,支持Android 4.0以上版本。
    • SimplifyReader – 一款基于Google Material Design设计开发的Android客户端,包括新闻简读,图片浏览,视频爽看 ,音乐轻听以及二维码扫描五个子模块。
    • GithubTrends – 是一个用来看查看 GitHub 热门项目的 Android App, 遵循 Material Design, 支持订阅 50 多种编程语言, 9 种颜色主题切换, 可在上面收藏喜欢的项目。
    • jianshi – jianshi简诗是国人开发的一个用于记录文字信息的 Android 完整应用, 作者仅用了一天便将其开发出来, 并将开发的流程记录成文放到了简书上。
    • BuildingBlocks – 积木: 一个以知乎日报作为数据展现内容;以抽屉菜单作为功能扩展入口;依循 Material Design 作为主导设计 UI 的应用。
    • Douya – 开源的 Material Design 豆瓣客户端。
    • TranslateApp – 一个实现『划词翻译』功能的 Android 开源应用。

    插件

    • Android Studio 插件和工具 – 5个 推荐几个有用的 Android Studio 插件和工具(ButterKnife、selectorChapek、GsonFormat、ParcelableGenerator、LeakCanary)。
    • 8 个最优秀的 Android Studio 插件 – 8 个最优秀的 Android Studio 插件(H.A.X.M(硬件加速执行管理器)、Genymotion、Android Drawable Importer、Android ButterKnife Zelezny、Android Holo Colors Generator、Robotium Recorder、jimu Mirror、Strings-xml-tools)。
    • smalidea – 一款 IntelliJ IDEA/Android Studio 的 smali 插件~ ,Smalidea 无源码调试 Android 应用
    • gradle-fir-plugin – 一个上传apk到fir的gradle插件,使用说明
    • android-butterknife-zelezny – 一个ButterKnife的Android Studio插件, 该插件可以让你手动生成上述注入代码。
    • GradleDependenciesHelperPlugin – Gradle 依赖自动补全插件。
    • android-selector-intellij-plugin – 可以根据指定颜色生成Selector Drawable的插件。
    • 7个最佳的Android模拟器 – 7个最佳的Android模拟器。
    • gradle-android-javadoc-plugin – 可以生成 java doc 的 Gradle 插件。
    • gradle-android-junit-jacoco-plugin – 可以生成代码单元测试覆盖率报告的 Gradle 插件。
    • gradle-android-apk-size-plugin – 可以将 Apk 大小记录到 CSV 文件的 Gradle 插件。
    • 几款实用的Android Studio 插件 – 几款实用的Android Studio 插件:1、android-butterknife-zelezny;2、Gsonformat:可根据json数据快速生成java实体类;3、Android Postfix Completion;4、AndroidAccessors;5、Lifecycle Sorter:根据Activity或者fragment的生命周期对其生命周期方法位置进行先后排序,快捷键Ctrl + alt + K;6、JsonOnlineViewer;7、CodeGlance;8、findBugs-IDEA:帮你一起找bug的;9、ADB WIFI:使用wifi无线调试你的app,无需root权限。
    • Leisure – 闲暇(Leisure)是一款集”知乎日报”、“果壳科学人”、“新华网新闻”以及“豆瓣图书”于一体的阅读类Android应用。 果壳、知乎和豆瓣在国内拥有大量用户,这些社区的用户每天都产生很多高质量内容。闲暇以其简介的风格将这几大社区 的优质内容整合于一体,使得用户能有效地获取这些内容,大大节省了用户的时间。酷安下载地址.
    • LayoutFormatter插件 – 可自动将乱序的布局文件进行重新属性排序并格式化,比如 style 和 android:id 必须排在前面,紧接着 layout、padding,而值设定如 text 只能排在最后。

    出名框架

    • xUtils – xUtils 包含了很多实用的android工具。支持大文件上传,更全面的http请求协议支持(10种谓词),拥有更加灵活的ORM,更多的事件注解支持且不受混淆影响。最低兼容android 2.2 (api level 8)。目前xUtils主要有四大模块:DbUtils模块、ViewUtils模块、HttpUtils模块、BitmapUtils模块。
    • afinal – Afinal是一个android的ioc,orm框架,内置了四大模块功能:FinalAcitivity,FinalBitmap,FinalDb,FinalHttp。
    • ButterKnife – ButterKnife是一个专注于Android系统的View注入框架,让你从此从这些烦人臃肿的代码中解脱出来,ButterKnife–View注入框架5 个顶级 Android 开源库
    • EventBus – EventBus是一款针对Android优化的发布/订阅事件总线。主要功能是替代Intent,Handler,BroadCast在Fragment,Activity,Service,线程之间传递消息.优点是开销小,代码更优雅。以及将发送者和接收者解耦。xBus – xBus – 简洁的EventBus实现。
    • Small – 做最轻巧的跨平台插件化框架,目前已支持Android、iOS以及html5插件。并且三者之间可以通过同一套javascript接口进行通信。
    • LayoutCast – LayoutCast可以在应用不重启的情况下,将res文件夹下的改动直接同步到手机上。使用LayoutCast,可以节约Android开发者的大量编译等待时间,非常适合真机调试界面的时候使用,推荐每一位开发者安装该利器。BUCK很快,但入侵性强,项目改动大,LayoutCast对项目改动小。
    • retrofit – retrofit将 REST API 转换为 Java 接口。5 个顶级 Android 开源库
    • Dagger2 – Dagger 2 是著名的依赖注入库 Dagger 的继承者,我们强烈推荐它。文档5 个顶级 Android 开源库

    其他

    • java-zhconverter – java-zhconverter是一个简繁体中文互换的Java开源类库。
    • joda-time-android – 一个超赞的时间处理的库,Joda-Time ! 他能帮你轻松处理时区,处理时间加减,计算到期时间等等场景下的问题。java版本
    • AssistiveTouch – 配合Android手机沉浸式隐藏虚拟按键后快捷操作 (Nexus5屏幕变大了)。
    • S-Tools – S-Tools一个可以实时查看的CPU状态和手机各类传感器数据,还有一些例如颜色选择、指南针和设备信息等功能。
    • JsBridge – 模仿微信webview的JsBridge,安全方便的实现js和Java的互相调用,主要通过loadUrl和shouldOverrideUrl实现。
    • Sample Of All Samples – 提供大部分Android5.0组件的示例应用。
    • Android-Package-Channel – 美团网做的把Android多渠道打包工具,打包时间缩短到一分钟,python脚本。
    • fast-apk-packaging – Android不需要重新编译打渠道包。
    • android_gradle_script – gradle批量打包脚本,用txt配置一下,就可以支持多个渠道打包,适合国内这种动不动上百个渠道包的环境。目前有个问题,一次打包脚本超过80个就会GC问题。
    • BatchPackApk – 免签名直接打包工具。
    • Android多渠道打包工具Gradle插件 – Android多渠道打包工具Gradle插件。
    • Gradle-Plugin-User-Guide-Chinese-Verision – Gradle插件使用指南中文版。
    • gradle-guide.books – Android Gradle 插件中文指南(GitBook)。
    • Android-package_tool – 该工程用于编译多渠道Android应用,替换相应的标签,然后重新打包,用perl脚本实现。
    • 兰贝壳儿 – Android多渠道打包解决方案(兰贝壳儿),eclipse插件。
    • Algorithms – 常见算法问题的Java实现。
    • java-design-patterns – 一个常见设计模式的java实现。
    • PreferenceInjector – SharedPreference注入开源库,SharedPreference key与某个变量绑定、监听key变化、初始化key都可以通过注解完成。
    • prettytime – 一个实用的人性化的时间显示,比如:几分钟前,几天前。
    • Material-Movies – Material Design 下的Movie App(电影展示),可供学习,或者直接二次开发。
    • Clean-Contacts – 充满技术含量的一个 Contact App(联系人)。
    • RedEnvelopeAssistant – 完全免费开源的抢红包软件、做这个软件纯粹是发现Android的模拟点击十分好玩,然后顺道写了一个,有此基础,可以再扩展其他的很多模拟点击程序 。
    • superCleanMaster – 一键清理开源版,包括内存加速,缓存清理,自启管理,软件管理等。
    • LoadViewHelper – 切换加载中,加载失败,加载成功布局,定义一个LoadViewHelper所有界面通用。
    • android-best-practices – android最佳实践
    • Android最佳实践 – 安卓最佳实践(1):安卓开发–中文。
    • Android最佳实践 – 从Futurice公司Android开发者中学到的经验。 遵循以下准则,避免重复发明轮子。若您对开发iOS或Windows Phone 有兴趣, 请看iOS Good Practices 和 Windows client Good Practices 这两篇文章。
    • 如何安装ACRA – 如何安装ACRA-一个Android应用Crash跟踪系统—在自己的服务器上。
    • Android ocr识别文字介绍 – Android ocr识别文字介绍 。
    • DaVinci – DaVinci是一个适用于Android Wear平台的图片下载和缓存library。
    • Point-of-Android – Android 一些重要知识点解析整理 。
    • AppStoreLibrary – 检测是否在appstore安装了应用,搜索应用。
    • LeakCanary – 利用此类库,排查内存泄露变得非常简单,LeakCanary 中文使用说明,* * LeakCanary: 让内存泄露无所遁形 。
    • anko – 快速开发框架。
    • CommonAdapter – 通过对于原生Adapter的封装,产生了支持ListView,GridView,RecyclerView的简单通用的Adapter。这种方式将item变成独立的“视图”对象,方便操作,又增加了可扩展性。
    • MVPAndroidBootstrap – 一个Android MVP 模式实例项目。
    • json2notification – 一个多功能方便好用的notification通知栏通知开源库。
    • barcodescanner – 一个封装好的基于zxing二维码扫描库。
    • BGAQRCode-Android – 一个可高度定制二维码扫描界面、生成二维码、识别图片二维码库。
    • mqtt – MQTT 协议 3.1.1 中文翻译版。
    • Droid Plugin – DroidPlugin 是360手机助手在Android系统上实现了一种新的插件机制:它可以在无需安装、修改的情况下运行APK文件,此机制对改进大型APP的架构,实现多团队协作开发具有一定的好处。
    • JsonAnnotation – 利用注解自动生成Gson‘s Model的库。
    • WeChatLuckyMoney – 微信抢红包插件。
    • android-support-23.2-sample – support 库在 23.2 版本新增内容示例项目。
    • Sunoath – 基于MVP+Retrofit+Material Design的Demo。
    • ActivityRouter – 一个url打开activity的Router库,支持指定参数类型,支持参数transfer,支持callback。

    好的文章

    交互篇

    • 1、SlidingUpPanelLayout 项目介绍:他的库提供了一种简单的方式来添加一个可拖动滑动面板(由谷歌音乐推广,谷歌地图和Rdio)你的Android应用程序。 项目地址:github.com/umano/Andro…
    • 2、FoldableLayout 项目介绍:折叠展开点击的ITEM 项目地址:github.com/alexvasilko…
    • 3、android-flip 项目介绍:折叠翻页效果 项目地址:github.com/openaphid/a…
    • 4、SwipeBackLayout 项目介绍:拖动关闭当前活动窗体 项目地址:github.com/ikew0ng/Swi…
    • 5、AndroidImageSlider 项目介绍:一个漂亮的Slider,可以通过自定义达到更好的效果 项目地址:github.com/daimajia/An…
    • 6、Android-ParallaxHeaderViewPager 项目介绍:栏目展示动画,自动播放,滚动下方列表时候,收缩效果 项目地址:github.com/kmshack/And…
    • 7、FragmentTransactionExtended 项目介绍: 漂亮的图标加载动画。
      项目地址:github.com/DesarrolloA…
    • 8、FragmentTransactionExtended 项目介绍:Android按钮可以化身进度 项目地址:github.com/dmytrodanyl…
    • 9、floatlabelededittext 项目介绍:简单的实现浮动标签EditText:Android视图使用EditText之上,并提示EditText时填充文本。 项目地址:github.com/wrapp/float…
    • 10、QuickReturn 项目介绍:Showcases QuickReturn view as a header, footer, and both header and footer. 给几乎所有可以滑动的 View 加上快速返回的 Header 或者 Footer,使用非常方便。 项目地址:github.com/lawloretien…
    • 11、VNTNumberPickerPreference 项目介绍:这是一个易于使用的自定义偏好,打开一个对话框中有许多选择。的值被自动保存,你可以设置默认,min -和maxValue方便地在XML。 项目地址:github.com/vanniktech/…
    • 12、CircularFloatingActionMenu 项目介绍:动画,可定制的圆形浮动菜单为Android, 项目地址:github.com/oguzbilgene…
    • 13、NiftyDialogEffects 项目介绍:Dialog的各种打开动画,Nifty Modal Dialog Effects look like this(Nifty Modal Window Effects) 项目地址:github.com/sd6352051/N…
    • 14、material-menu 项目介绍:变形安卓菜单,返回和删除按钮 项目地址:github.com/balysv/mate…
    • 15、AndroidViewHover 项目介绍:我们需要一个悬停视图,显示菜单,显示消息。 项目地址:github.com/daimajia/An…
    • 16、PagedHeadListView 项目介绍:图片轮转切换
      项目地址:github.com/JorgeCastil…
    • 17、android-movies-demo 项目介绍:电影列表3级联动,交互 项目地址:github.com/dlew/androi…
    • 18、NiftyNotification 项目介绍:提示通知栏的各种动画
      项目地址:github.com/sd6352051/N…
    • 19、SwipeBack 项目介绍:拖动关闭,模范:kicker app(play.google.com/store/apps/… 项目地址:github.com/sockeqwe/Sw…
    • 20、AndroidSwipeLayout 项目介绍:类似微信的测拉菜单
      项目地址:github.com/daimajia/An…
    • 21、SnackBar 项目介绍: 项目地址:github.com/MrEngineer1…
    • 22、Swipecards 项目介绍:A Tinder-like cards effect as of August 2014. You can swipe left or right to like or dislike the content. The library creates a similar effect to Tinder’s swipable cards with Fling animation. 项目地址:github.com/Diolor/Swip…
    • 23、LDrawer 项目介绍:Android抽屉与材料设计动画图标 项目地址:github.com/keklikhasan…

    视觉篇

    UI资源

    • fontawesome – Font-Awesome图标。
    • material-design-responsive-design – 深聊Material Design复杂响应式设计,comprehensive-material-design-note – 帮你全面彻底搞定Material design的学习笔记。
    • Iconics – 这是一个可以让你在你的项目中使用几乎任何字体图标的库。默认包含 FontAwesome 和 Material Design Icons 还包含 Meteocons 插件。你甚至可以添加任何你自定义的字体图标(typeface)。

    开发资源

    • awesome-java – java库列表,中文版
    • material design 的android开源代码整理 – material design 的android开源代码整理。
    • Android开源项目分类汇总 – Trinea 国内最多好的开源库总结。 Android 开源库获取途径整理
    • Android开源库源码分析 – Trinea 我们从 Android 开始建了了协作项目,从简介、总体设计、流程图、详细设计全方面分析开源库源码。目前第一期完成,包括10个开源库及5个公共技术点的全面介绍。 在线网页
    • 年薪30万的Android程序员必须知道的帖子 – Android开源项目汇总,带效果gif图。
    • Android官方培训课程中文版 – Google Android官方培训课程中文版。
    • GitHub优秀Android开源项目 – GitHub 优秀的 Android 开源项目,很多中文现成项目。
    • Android开发工具及文档 – androiddevtools,收集整理Android开发所需的Android SDK、开发中用到的工具、Android开发教程、Android设计规范,免费的设计素材等。
    • material_design – eoeAndroid Material Design 中文协同翻译。
    • Android Design Support Library – Android Design Support Library 的 代码实验——几行代码,让你的 APP 变得花俏。
      Android-Open-Sourse-Library – eoeAndroid 开源组件深度剖析: 1.Http请求组件:Volley\android-async-http\okhttp 2.json数据解析组件:Gson\fast-json\json-smart\Jackson。
    • wiki-eoeandroid – wiki-eoeandroid : Android Develop – 开发技术、Android Design – 设计规范、Android Distribute – 软件发布。
    • Java资源大全 – 国外程序员整理的Java资源大全。
    • Android开发技术前线 – Android开发技术前线 ( android-tech-frontier ),一个定期翻译、发布国内外Android优质的技术、开源库、软件架构设计、测试等文章的开源项目,让我们的技术跟上国际步伐。
    • 10个常用工具类 – Android快速开发系列 10个常用工具类:1、日志工具类L.java;2、Toast统一管理类;3、SharedPreferences封装类SPUtils;4、单位转换类 DensityUtils;5、SD卡相关辅助类 SDCardUtils;6、屏幕相关辅助类 ScreenUtils;7、App相关辅助类;8、软键盘相关辅助类KeyBoardUtils;9、网络相关辅助类 NetUtils;10、Http相关辅助类 HttpUtils。
    • 19个Android开发工具 – 19个Android 开发工具:1、XAppDbg;2、ChkBugReport;3、APKAnalyser;4、AppXplore;5、Memory Analyzer(MAT);6、Eclipse插件SQLiteManger;7、Robotium;8、ACRA;9、Android Layout Binder;10、Spoon;11、Android Content Provider代码生成器;12、AndroidKickStartR;13、Android Holo颜色生成器;14、ActionBar风格生成器;15、Asset Studio;16、little eye labs;17、Droid Inspector;18、Android Button Maker;19、jsonschema2pojo。
    • apkbus – code4app 与 apkbus整理的Android开源资源分类, Android源代码
    • open-source-android-apps – 他人收集的开源代码:Android Wear、Communication 、Education、Finance、Game、Multi-Media、News & Magazines、Personalization、Productivity、Social Network、Tools、Travel & Local。
    • android-developer-tools-list – Android 常用开发工具 (Android Studio 插件、Android 网站、Android 系统性能调优工具、Android测试工具)。
    • Android平台上最好的几款免费的代码编辑器 – Android平台上最好的几款免费的代码编辑器:Quoda、DroidEdit、AWD、AIDE、CppDroid。
    • androidweekly – android技术开发周报,干货很多。
    • awesome-rails-gem – 收集了很多在平时使用 Rails 开发网站时经常会使用到的 Gem, 当中包括的有用户认证系统, API 接口开发, 文件上传, 站内搜索等优秀的 Gem 源。
    • Android_Data – 一份旨在帮助 Android 初学者快速入门以及找到适合自己学习的资料。
    • Android通用流行框架大全 – Android通用流行框架大全。

    中文开发博客列表

    展开全文
  • 如果有接触过angular,就几乎没有什么学习成本了简单易用强大的CLI,start->platform->serve->build->emulate->run,全套服务命令行完成,不用写配置文件,不用F5组件多而强大提供了很多强大的现成组件,很容易实现...

    ionic是一个用来快速开发跨平台应用的框架,亮点不少:


    • 学习成本低
    • 对前端开发者来说,学习成本不是很高,如果有接触过angular,就几乎没有什么学习成本了
    • 简单易用
    • 强大的CLI,start->platform->serve->build->emulate->run,全套服务命令行完成,不用写配置文件,不用F5
    • 组件多而强大
    • 提供了很多强大的现成组件,很容易实现流行的交互效果,比如下拉刷新(ion-refresher)、上拉加载/瀑布流(ion-infinite-scroll)、tabs(ion-tabs)、侧边栏菜单(ion-side-menu)等等,只需要写一点点代码,就能实现这些流行效果,比native开发速度快太多了
    • 支持cordova插件
    • 打开了这扇门,意味着我们可以使用大量的原生功能,比如调用相机拍照、响应返回按钮、打电话发短信发邮件……都只要几行代码就能搞定
    • 更新速度快
    • 已经是v1.2.4了,快速更新意味着有人维护,bug能被迅速修复


    当然,也有缺陷,否则就没有这篇笔记了,如下:


    • 新版本不完全向后兼容
    • 不兼容没关系,给个详细文档说明下也行啊,没有
    • bug难以定位
    • angular+cordova+ionic+javascript,发现问题后,很难确定是哪块的问题
    • 性能优化难
    • 动画卡顿,低端机体验更差,而优化措施一般都是建议少用动画少用阴影少用渐变……但是,不用实在太丑,而且与native应用体验差太多
    • 其它
    • 奇奇怪怪的问题找不到答案,大半夜的翻stackoverflow……


    一.jsonp跨域,php服务怎么写


    P.S.这是angular的问题,当时没整理笔记,后来就忘记了遇到过这么个问题


    angular的$http可以发送jsonp请求,用法类似于jQuery,如下:


    
    
    // 请求数据
    $http.jsonp(sUrl).success(function(res){
        // ...
    }).error(function(err){
        // ...
    });
    
    


    sUrl有特殊要求,必须带上callback参数,而且参数值只能JSON_CALLBACK,angular文档:


    Relative or absolute URL specifying the destination of the request. The name of the callback should be the string JSON_CALLBACK.


    例如:


    
    
    var sUrl = http://www.ayqy.net/app/rsshelper/index.php?callback=JSON_CALLBACK
    
    


    而问题是:php服务怎么写?直接返回用JSON_CALLBACK()包裹的json数据?


    不对,因为真正请求的url中callback !== JSON_CALLBACK,被angular偷偷(文档没有说明)替换掉了,所以后台需要这样写:


    
    
    <?php
    if (strpos($_SERVER["REQUEST_URI"], 'callback')) {
        $res = json_encode($res);
        // echo $_SERVER["REQUEST_URI"];
        // /angular/test/http/main.php?callback=angular.callbacks._0
        // $res = 'JSON_CALLBACK('.$res.')';
        // 错的
        $res = $_GET['callback'].'('.$res.')';
    }
    ?>
    
    


    当然,这是get的情况,比较简单,如果是post,还需要通过别的方式取callback,完整例子如下:


    
    
    <?php
    // get
    if ($_SERVER['REQUEST_METHOD'] === 'GET') {
        $res = '{';
    
        // arg
        if (isset($_GET['arg'])) {
            $res .= '"arg": "'.$_GET['arg'].'", ';
        }
        // method
        if (strpos($_SERVER["REQUEST_URI"], 'callback')) {
            // echo $_SERVER["REQUEST_URI"];
            // /angular/test/http/main.php?callback=angular.callbacks._0
            $res .= '"arg": "'.$_GET['arg'].'", ';
            $res .= '"method": "jsonp"}';
            // $res = 'JSON_CALLBACK('.$res.')';
            // 错的
            $res = $_GET['callback'].'('.$res.')';
        }
        else {
            $res .= '"method": "get"}';
        }
    
        echo $res;
    }
    // post
    else if ($_SERVER['REQUEST_METHOD'] === 'POST') {
        // 直接拿拿不到,因为传过来的是json串
        // echo $_POST['arg'];
        $jsonArg = file_get_contents('php://input');
        if (isset($jsonArg)) {
            echo substr($jsonArg, 0, strlen($jsonArg) - 1).', "method": "post"}';
        }
        else {
            echo '{"method": "post"}';
        }
    }
    ?>
    
    


    二.ion-content的阻尼回弹效果没了


    ionic v1.2取消了ion-content默认的阻尼回弹效果,明明一模一样的代码,就是没有回弹效果,后来发现是版本更新的锅,翻了很久后,在官方博客的评论里找到了答案:


    Great news, thank you! It seems that the “has-bouncing=’true'” does not work with the native scroll, is it correct? I managed though to have it again by going to back go js scroll (overflow-scroll=”false”)

    I only checked in the browser so if any one can confirm that with native scrolling removes bouncing that would be great.

    I need this feature for a custom ‘pull refresh’ method I had.


    也就是说,v1.2之后想要有阻尼回弹效果,需要这么做:


    
    
    <ion-content overflow-scroll="false" has-bouncing="true"></ion-content>
    
    


    三.多个view之间的数据共享


    也就是多个controller之间的数据共享(一般不同view对应不同controller)问题,当然,最简单的方法是用全局变量($rootScope),但这样不好,更合理的方式是自己写个service或者factory,提供数据存取接口,在需要的地方依赖注入即可,比如:


    
    
    .service('DataServ', ['$http', 'UIServ', function($http, UIServ) {
        // ...
        // 字典
        var oDir = {
            // key: value
        };
    
        function save(val) {
            var sKey = Date.now() + '';
            oDir[sKey] = val;
            return sKey;
        }
    
        function get(sKey) {
            return oDir[sKey];
        }
    
        return {
            // ...
            save: save,
            get: get
        };
    }]);
    
    


    然后通过url传递sKey即可实现数据共享,很干净


    四.通知视图更新


    在模板中写好了数据展示,但如果打开页面后数据还没到,模板解析完了,由于没有数据显示空白页,过了一会儿数据到了,发现视图没有更新,仍然是一片空白,比如:


    
    
    <!-- html -->
    <p ng-cloak>{{data}}</p>
    
    // js
    app.controller('MainCtrl', ['$scope', 'DataServ', function($scope, DataServ) {
        // ...
        setTimeout(function() {
            // ...
            $scope.data = 'data';
        })
    }]);
    
    


    因为给data赋值的操作跑到了controller作用域外,此时需要手动通知视图更新,如下:


    
    
    // ...
    $scope.data = 'data';
    $scope.$apply();
    
    


    当然,一般不需要手动通知,即便是异步返回的数据,因为这里只与作用域有关,总之,如果发现视图需要手动更新,添上$apply就好了


    五.php原生xml扩展如何获取里的内容


    rss格式中会有<content: encoded>标签,直接取content取不到,需要特殊的方式:


    
    
    $content = (string)$item->children("content", true);
    // $encodedContent = $content->encoded;
    // $content->encoded返回转义过的html,比如把&amp;转成&,一般用于<pre>直接展示
    
    


    当然,前提是使用原生xml扩展($xml = simplexml_load_file($url);)解析xml才会遇到这个问题,更多用法请查看php – How to parse CDATA HTML-content of XML using SimpleXML? – Stack Overflow


    六.在浏览器中打开外部页面


    需要使用一个cordova插件,cd进项目文件夹,然后:


    
    
    ionic plugin add cordova-plugin-inappbrowser
    
    


    安装完成后就可以调用了,不用修改配置文件,不用引入其他js,如下:


    
    
    // openInBrowser
    window.open(‘http://example.com’, ‘_system’);   Loads in the system browser
    window.open(‘http://example.com’, ‘_blank’);    Loads in the InAppBrowser
    window.open(‘http://example.com’, ‘_blank’, ‘location=no’); Loads in the InAppBrowser with no location bar
    window.open(‘http://example.com’, ‘_self’); Loads in the Cordova web view
    // test
    window.open(url, '_system'); // 系统默认浏览器
    // window.open(url, '_blank');  // 很丑的安卓内置浏览器
    // window.open(url, '_self');  // 同上
    
    

    一般都用_system,另外两个实在太丑,更多内容请查看Cordova InAppBrowser Plugin Example using ionic framework

    最近新发现 修改后的浏览器插件,可以用图片自定义部分样式
    github地址:https://github.com/initialxy/cordova-plugin-themeablebrowser
    cordova plugin add cordova-plugin-themeablebrowser


    七.splash screen黑屏白屏


    P.S.黑屏白屏其实是同一个问题,但这个问题相当难解决,笔者花了快1天才搞定


    ionic默认集成了splashscreen插件,这个cordova插件效果不是很完美,默认配置只在首次打开app时显示splash screen,但实际效果是:


    When the app starts the splash screen shows for a few seconds as expected, and then the screen goes black for @1 second and then white for @2 seconds and then the main app page appears.

    Is there any way to prevent the black and white pages appearing? I read somewhere that a black page appears when there is no splash page but I do have a splash page and it appears fine.


    在stackoverflow找到了这个问题描述,简直太贴切了,但是单靠问题下面的回答无法解决白屏问题,还需要改配置文件


    最初发现的现象是黑屏(把上面英文描述里的white换成黑),后来找到了原因:主视图容器ion-nav-view是空的,而它的背景色是#000,所以修复方法是给里面塞个ion-view


    
    
    <!-- 内容 -->
    <ion-nav-view>
        <!-- 防止启动时黑屏 -->
        <ion-view></ion-view>
    </ion-nav-view>
    
    


    或者添css,把ion-nav-view的背景色改成白色。但问题还没解决,黑屏问题变成白屏问题了,解决方案比较麻烦


    1. 把splashscreen插件降级到v2.0.0

      v2.0.0之后的版本有bug,目前(2016/1/9)自带的版本是v3.0.0。先cd到项目文件夹,然后命令行:

      
      
      // 删掉现有版本
      cordova plugin rm cordova-plugin-inappbrowser
      // 安装v2.0.0
      cordova plugin add cordova-plugin-inappbrowser
      
      


    2. 改配置文件MyApp/config.xml

      
      
      <preference name="SplashScreen" value="screen"/>
      <preference name="AutoHideSplashScreen" value="false"/>
      <preference name="auto-hide-splash-screen" value="false"/>
      <preference name="ShowSplashScreenSpinner" value="false"/>
      <preference name="SplashMaintainAspectRatio" value="true" />
      <preference name="SplashShowOnlyFirstTime" value="false"/>
      <preference name="SplashScreenDelay" value="10000"/>
      
      


      取消自动隐藏(改为代码控制隐藏),把持续时间改为较大的值(10秒),设置每次打开应用都显示splash screen

      P.S.默认只有SplashScreenSplashScreenDelay,需要把其它的(SplashMaintainAspectRatio可选)都添上

    3. 改app.js

      手动隐藏splash screen,在run里面添上

      
      
      .run(['$rootScope', function($rootScope) {
              // init
              // $rootScope.isLoading = false;
      
              // hide splash immediately
              if(navigator && navigator.splashscreen) {
                  navigator.splashscreen.hide();
              }
          });
      }])
      
      


      这样就好了,不要延时调用hide,否则仍然会出现白屏(有些解决方案要求$timeout 50毫秒hide,仍然会出现白屏,不要这样做)


    最怨念的问题结束了,看似简单的功能,想要有完美的原生体验却很难,奇奇怪怪的问题很难解决,目前可行的解决方案可能过段时间就不行了,可以查看White page showing after splash screen before app load感受一下


    八.安卓版本签名发布


    各种签名方法都过时了,目前(2016/1/9)可以用的签名方法如下:


    1. 在MyApp\platforms\android创建keystore

      具体步骤请查看:Ionic toturial for building a release.apk

    2. 创建release-signing.properties文件

      具体步骤请查看:How to automatically sign your Android apk using Ionic framework and Crosswalk

    3. build

      cd到项目文件夹,然后命令行ionic build --release android,成功后会生成2个东西,在MyApp\platforms\android\build\outputs\apk下,分别是android-armv7-release.apk和android-x86-release.apk,一般平板和PC用x86,手机用arm7,如果要上传google play的话,2个都要传,下载时有自动识别



    至于crosswalk,提供了chrome内核,能让低端机支持高端东西,但会让apk变大很多(3.5M->23M),添上crosswalk后,感觉。。。嗯,变卡了,但为了支持低端机用户,一般都会添上crosswork 
    展开全文
  •   自从项目上采用敏捷开发的流程以后,我们的开发任务中出现了不少“联调”的任务,而所谓的“联调”任务,完全是拜前后端分离所赐。通常来讲,按照前后端分离的思想,我们的团队会被分成前端和后端两个组,前端...
  • Cordova App 打包全揭秘【原文链接】 TensorFlow on Android:物体识别【原文链接】 TensorFlow on Android:训练模式【原文链接】 图解敏捷教练和 ScrumMaster【原文链接】 [运营专题]零预算引爆个人和企业品牌...
  •  前后端分离这个词刚在毕业(15年)那会就听说过,但是直到17年前都没有接触过前后端分离的项目。怎么理解前后端分离?直观的感觉就是前后端分开去做,即功能和职责上的一种划分,前端负责页面的渲染,部分页面交互...
  • 337commits 1branch 0releases 3contributors Clone or download Find file Branch:master New pull request ...Latest commit12af738on 28 MayTim9Liu9好的文章:使用 CheckStyle 检查代码… ...
  • 如果一个网站已经有现成的网页及业务逻辑,那么使用WebView将其内嵌到app中,省去了app重画页面与http通信的事情,无疑是更经济的做法。WebView就是Android上的一个浏览器内核,可自动展示web页面,并且实现js代码的...
  • GitHub中Android开源项目及库汇总 ,GitHub库整理,Android学习整理,
  • apache基金会开源项目简介 项目名称 描述 HTTP Server 互联网上首屈一指的HTTP服务器 Abdera Apache Abdera项目的目标是建立一个功能完备,高效能的IETF Atom联合格式(RFC4287)和Atom发布协议(RFC5023)规范的...
  • Apache基金会项目介绍

    2017-09-12 00:14:32
    项目名称 描述 HTTP Server 互联网上首屈一指的HTTP服务器 Abdera Apache Abdera项目的目标是建立一个功能完备,高效能的IETF Atom联合格式(RFC4287)和Atom发布协议(RFC5023)...
  • android开源库汇总

    2019-05-16 23:20:17
    ion– 一个异步网络请求和图片加载的库,一个库能搞定几乎所有的网络请求。 多线程下载– Android 实现多线程下载 完美代码。 opandroid– android p2p的开源实现。 okio– square出的Okio这个库,尤其擅长处理二...
  • 如今,Angular和React这两个JavaScript框架可谓红的发紫,同时针对这两个框架的选择变成了当下最容易被问及或者被架构设计者考虑的问题,本文或许无法告诉你哪个框架更优秀,但尽量从更多的角度去比较两者,尽可能的...
  • 有感 Visual Studio 2015 RTM 简介 - 八年后回归 Dot Net,终于迎来了 Mvc 时代,盼走了 Web 窗体时代
  • 一些优秀的开源项目

    2018-09-13 13:11:55
    最近抽了一些时间,搜罗了网上一些开源库,很全,希望有大家想用的,我会持续搜集的。 github排名: ... ... UI Awesome-MaterialDesign - MaterialDesignCenter改名为Awesome-MaterialDesign,优化了布局...
  •   前言 React Native 诞生于 2015 年,名副其实的富二代,主要使命是为父出征,与 Apple 和 Google 抗衡,为开发者带去一套跨平台、动态更新的 Javascript 框架,口号是:Learn once, write anywhere:Build
  • 自己总结的Android开源项目及库。  github排名https://github.com/trending,  github搜索:https://github.com/search UI Awesome-MaterialDesign- MaterialDesignCenter改名为Awesome-MaterialDesign,...
1 2 3 4 5 ... 10
收藏数 188
精华内容 75