Weex开发之指定项目第一次启动的页面(四)
2018-06-18 本文已影响49人
AR7_
前言
- 本文主要讲解怎么设置项目第一次启动时是自己指定的页面。
开始
-
在项目开始的时候,我遇到这样的一种情况,因为在Web端的话,都是可以显示所有vue页面的,所以可以很好的显示所写页面的效果,如下图所示:
如上图所示,在浏览器上显示了项目所有的vue页面,包括HelloWorld、Home、index和Login页面,这样只要切换,就可以知道所写的页面效果,可是在Android端却不可以这样,而且说回到Android本身,它指定Android启动页面是通过在AndroidManifest.xml里面设置的,比如Weex项目在Android端第一次启动时的页面就是这样设置的:
<activity
android:name="com.weex.app.SplashActivity"
android:configChanges="orientation|keyboardHidden|screenSize"
android:label="@string/app_name"
android:screenOrientation="portrait"
android:theme="@style/FullscreenTheme">
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
</activity>
其中,下面所示就是关键代码,想要设置哪个是启动页,就在哪个Activity下面添加即可。
<intent-filter>
<action android:name="android.intent.action.MAIN"/>
<category android:name="android.intent.category.LAUNCHER"/>
</intent-filter>
但是在Weex项目中,我刚开始并不知道怎么设置Android端第一次(按理说SplashActivity才是第一次启动的页面)出现的是自己想指定的页面,比如登录页面。因为当时我还不明白Weex的跳转机制,并不知道怎么从登陆页面跳转到注册页面,而我如果写好了注册页面,不从登录页面跳转过去,就不能在Android端看到注册页面显示的效果,所以只能通过手动设置项目第一次启动时的页面这个方法来解决。
指定Weex项目第一次启动的页面
- 我们一般将登录页面作为项目第一次启动时的页面,所以,当我们在Weex项目中的src包下写好登录页面Login.vue后,只需在index.vue中通过如下几个步骤设置即可。
步骤一:
<script>
// 1、引入Login.vue页面
import Login from './Login.vue'
export default {
......
}
</script>
步骤二:
<script>
// 1、引入Login.vue页面
import Login from './Login.vue'
export default {
components: {
// 2、注册组件
Login
}
......
}
</script>
步骤三:
<template>
<!-- 3、使用组件 -->
<Login></Login>
</template>