学习记录：No.1

【安卓】
1. 安装APK记得考虑兼容7.0，Uri不能直接从Uri.parse()中构建，要使用FileProvider构建Uri。

<provider
    android:name="android.support.v4.content.FileProvider"
    android:authorities="${applicationId}.fileprovider"
    android:exported="false"
    android:grantUriPermissions="true">
    <meta-data
        android:name="android.support.FILE_PROVIDER_PATHS"
        android:resource="@xml/file_path" />
</provider>

<paths xmlns:android="http://schemas.android.com/apk/res/android">
    <!-- /storage/emulated/0/Download/下的文件可以访问 -->
    <external-path
        name="beta_external_path"
        path="Download/" />

    <!--/storage/emulated/0/Android/data/下的文件可以访问 -->
    <external-path
        name="beta_external_files_path"
        path="Android/data/" />
</paths>

public static void installAPK(Context context, String apkPath) {
    Intent intent = new Intent();
    intent.setAction(Intent.ACTION_VIEW);
    intent.addFlags(Intent.FLAG_ACTIVITY_NEW_TASK);
    // 7.0以上要这样把文件提供给外部应用程序
    Uri uri = FileProvider.getUriForFile(context, context.getApplicationContext().getPackageName() + ".fileprovider", new File(apkPath));
    // 7.0以上不能像下面那样访问文件了（注释）
    // intent.setDataAndType(Uri.parse("file://" + apkPath), "application/vnd.android.package-archive");
    intent.setDataAndType(uri, "application/vnd.android.package-archive");
    intent.addFlags(Intent.FLAG_GRANT_READ_URI_PERMISSION);
    context.startActivity(intent);
}

2. FLAG_ACTIVITY_NEW_TASK与taskAffinity的配合使用（规则要谨记：直接将任务栈移到前台显示，任务栈状态不变）

任务栈1：
ActivityA > ActivityB

任务栈2：
ActivityC > ActivityD

1. 如果ActivityB启动了ActivityC，任务栈2直接回到前台显示，显示的是ActivityD。
2. 如果ActivityB启动了ActivityE（ActivityE的taskAffinity属于任务栈2），任务栈2回到前台，ActivityE创建并显示。

【前端】
1. table-cell的使用，table-cell内有浮动元素和普通inline-block元素在垂直居中的特点（是整体居中不是每个元素居中，参考下面代码在浏览器显示效果）。

<!DOCTYPE html>
<html>
    <head>
        <style type="text/css">
        .root {
            background-color: gray;
            height: 80px;
            width: 200px;
            display: table-cell;
            vertical-align: middle;
            font-size: 0px;
        }

        .left {
            float: left;
            height: 30px;
            width: 50px;
            background-color: red;
            position: relative;
            font-size: medium;
        }

        .left-text {
            width: 20px;
            height: 20px;
            background-color: pink;
            position: absolute;
            transform: translate(-50%, -50%);
            top: 50%;
            left: 50%;
            line-height: 20px;
            text-align: center;
        }

        .right {
            display: inline-block;
            height: 40px;
            width: 40px;
            line-height: 40px;
            text-align: center;
            background-color: green;
            font-size: medium;
        }

        </style>
    </head>

    <body>
        <div id="root" class="root">
            <div id="left" class="left">
                <div class="left-text">
                    a
                </div>
            </div>
            <div class="right">
                b
            </div>
        </div>
    </body>
</html>

2. Vue实例、ref的使用：一个组件就是一个Vue实例，一个应用由一个根Vue组成，每个Vue实例构建的时候接收一个配置参数，在Vue模板中ref可以引用到DOM元素或者Vue组件实例。

<template>
    <div>
        <!--  vue中通过this.$refs.left访问DOM元素 -->
        <div ref="left">
           
        </div>

        <!--  vue中通过this.$refs.right访问Vue实例，可以调用它的方法 -->
        <vue-button ref="right">

        </vue-button>

    </div>
</template>

3. v-on：使用要注意三个不同点，v-on:click里面的$event参数是DOM元素，v-on:eventName的自定义事件中$event参数是子组件触发事件传递过来的数据，记得v-on中没有this（暂时没去了解为什么）。

<template>
    <div class="root">
        <!-- 1：div单击的时候直接调用Vue实例的方法 -->
        <div v-on:click="clear"></div>

        <!-- 2：效果与1一样 -->
        <div v-on:click="clear($event)"></div>

        <!-- 3：$event是子组件传递的参数 -->
        <vue-select v-on:changeData="change($event)"></vue-select>

        <!-- 4：效果与3一样-->
        <vue-select v-on:changeData="change"></vue-select>
    </div>
</template>


methods: {
    clear(e){
        alert(e.target.innerText)
    },
    change(v){
         alert(v)
    }
}

4. JQuery是个老古董了，以后用到的机会不多：

(1) 了解一下$()返回的是JQuery对象，实际上他是个类数组（因为有length属性），通过eq(index)会创建一个新的jQuery对象表示该位置的元素进行操作，如果不通过eq()方法指定操作元素就是就是所有元素都进行操作。

(2) 看看一段官方对eq()的说明：Given a jQuery object that represents a set of DOM elements, the .eq() method constructs a new jQuery object from one element within that set.

猜你喜欢