html5 做app引导页怎么做

H5edu教育Html5开发为您解答：

1、制作html5引导页面。

2、把做好的页面放入Android工程中assets文件夹下。

3、利用WebView加载asset文件夹下的html文件。

4、在引导页最后一页的按钮上捕捉点击事件，结束引导页，进入程序。

App的引导页是当用户第一次打开一款App时所展示的3-5精美的图片，用于告知用户产品的功能及特点。好的引导页会促使用户对产品增加更多的兴趣，当然这是UI设计的能力体现了，尽管很多人都会快速的滑过。对于开发人员怎么去添加这几张图片只有在用户第一次打开app时展示呢。

以uniapp开发的项目为例：在onLaunch函数中，检查flag是否为false，如果为false,则跳转到引导页面，在引导页中可设置跳转到首页。注意，最好用reLaunch，避免，用户物理按键返回；为true，则存储flag到本地。原理既是如此；但是实际开发时，会发现，存在闪屏现象，这样用户的体验就不太好，所以比较关键的地方就在于这块，还是以uniapp为例，需要在uniapp的源码视图下将splashscreen的设置进行修改，将autoclose改为false，在onLaunch中通过设置延迟时间调用plus.navigator.closeSplashscreen方法来关闭启动图。delay设置为0。这样启动图的设置就ok了。

以下封装了检查是否进入引导页的方法，仅供参考下：

Tip:在多次的应用中发现，如果在手机本身比较卡的情况下，用户在第一次开启app时，还是会存在首页在引导页之前出现，这种情况的处理方式是将引导页默认设置为主页，即在路由管理中，将引导页写在第一个，然后通过flag去判断是否跳转到首页；

以上的引导页开发只是提供一种思路，还有很多其他的方式，比如后端去控制是否展示引导页，引导页的动态变化。当然问题本身不难实现，关键在于实际应用时所存在的问题。

欢迎页：这个在我们的微信里面就有这个，我们每一次打开微信的时候都有一个地球，那么这样就是欢迎页。欢迎页具有良好的数据缓存作用。

引导页：就是我们没次安装一个app的时候，前面都有几个图片。那么这个引导页有哪些作用，第一：它有教我们怎么使用这个app和接受这app。第二：有宣传的作用。

我们在这个功能中用到的知识点有ViewPage、ViewPage的适配器PageAdapter、ViewPage的滑动改变事件、、RadioGroupRadioButton的点击事件。

好，现在我们接下来上代码了。

这个就是我的项目结构。其中WActivity.class是欢迎页、FActivity.class是引导页、MyAdapter.class是ViewPage的适配、BasePageListen实现页面滑动的接口。

第一个我们先写WActivity这个类。

package com.example.office.startapp

import android.content.Context

import android.content.Intent

import android.content.SharedPreferences

import android.os.Handler

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

public class WActivity extends AppCompatActivity {

private SharedPreferences sp

private boolean isFirst

//欢迎页面

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_w)

//获得共享参数对象

sp=getSharedPreferences("first", Context.MODE_PRIVATE)

//参数二 如果sp文件中没有记录的话 返回的默认值

isFirst=sp.getBoolean("isFirst",true)

//这里面的判断就是 如果是第一次进入app 那就跳转引导页

//不是第一次就跳到主页面

new Handler().postDelayed(new Runnable() {

SharedPreferences.Editor editor

Intent intent

@Override

public void run() {

if(isFirst){

intent =new Intent(WActivity.this,FActivity.class)

startActivity(intent)

WActivity.this.finish()

//把数据保存到sp里面

//获取可以向sp里面写入数据的对象

editor=sp.edit()

editor.putBoolean("first",false)

//提交我们的数据

editor.commit()

}else {

intent=new Intent(WActivity.this,MainActivity.class)

startActivity(intent)

WActivity.this.finish()

}

}

},1500)

}

}

下面我们就写MyAdpter这个类

import android.content.Context

import android.support.v4.view.PagerAdapter

import android.view.View

import android.view.ViewGroup

import android.widget.ImageView

import java.util.List

/**

* Created by OFFICE on 2016/8/9.

*/

public class MyAdapter extends PagerAdapter{

private List<ImageView >list

private Context context

public MyAdapter(Context context, List<ImageView>list) {

this.context = context

this.list = list

}

@Override

public int getCount() {

return list.size()

}

@Override

public boolean isViewFromObject(View view, Object object) {

return view==object

}

@Override

public Object instantiateItem(ViewGroup container, int position) {

container.addView(list.get(position))

return list.get(position)

}

//里面有一个方法必须删除super.不删除会报错

@Override

public void destroyItem(ViewGroup container, int position, Object object) {

container.removeView((View)object)

}

}

我们写BasePageListen这个类

import android.support.v4.view.ViewPager

/**

* Created by OFFICE on 2016/8/9.

*/

public class BasePageListen implements ViewPager.OnPageChangeListener{

@Override

public void onPageScrolled(int position, float positionOffset, int positionOffsetPixels) {

}

@Override

public void onPageSelected(int position) {

}

@Override

public void onPageScrollStateChanged(int state) {

}

}

最后我们写FActivit

import android.content.Intent

import android.support.v4.view.ViewPager

import android.support.v7.app.AppCompatActivity

import android.os.Bundle

import android.view.View

import android.widget.ImageView

import android.widget.RadioButton

import android.widget.RadioGroup

import java.util.ArrayList

import java.util.List

//引导页

public class FActivity extends AppCompatActivity {

private List<ImageView>list

private RadioGroup radioGroup

private ViewPager viewPager

private ImageView imageView1

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState)

setContentView(R.layout.activity_f)

viewPager= (ViewPager) findViewById(R.id.viewPage)

radioGroup= (RadioGroup) findViewById(R.id.radiogroup)

imageView1= (ImageView) findViewById(R.id.image)

initView()

imageView1.setOnClickListener(new View.OnClickListener() {

@Override

public void onClick(View v) {

Intent intent = new Intent(FActivity.this, MainActivity.class)

startActivity(intent)

FActivity.this.finish()

}

})

MyAdapter myAdapter=new MyAdapter(this,list)

viewPager.setAdapter(myAdapter)

//viewPage变动RadioButton也在变动

viewPager.addOnPageChangeListener(new BasePageListen(){

@Override

public void onPageSelected(int position) {

RadioButton radioButton= (RadioButton) radioGroup.getChildAt(position)

radioButton.setChecked(true)

if(position==list.size()-1){

imageView1.setVisibility(View.VISIBLE)

}else {

imageView1.setVisibility(View.GONE)

}

}

})

//当点击RadioButton的时候，viewpage也在改变

radioGroup.setOnCheckedChangeListener(new RadioGroup.OnCheckedChangeListener() {

@Override

public void onCheckedChanged(RadioGroup group, int checkedId) {

viewPager.setCurrentItem(checkedId)

}

})

}

private void initView(){

int [] images={R.mipmap.yd1,R.mipmap.yd2,R.mipmap.yd3}

list=new ArrayList<ImageView>()

for(int i=0i<images.lengthi++){

ImageView imageView=new ImageView(this)

imageView.setImageResource(images[i])

list.add(imageView)

RadioButton radioButton=new RadioButton(this)

//设置radioButton的id

radioButton.setId(i)

//把ReaioButton放在group

radioGroup.addView(radioButton)

}

//设置默认选中的第一个按钮

//获得下标为0的按钮对象

RadioButton radioButton= (RadioButton) radioGroup.getChildAt(0)

radioButton.setChecked(true)

}

}

好了，复制上去就可以实现上面的效果。

---