PhoneGap + JQueryMobile + HTML5

此文章仅是为了给自己做个备注，或是提供给和我一样初学的、碰到相同问题的人们，高手请勿吐槽...

 

最近自己搞了一个PhoneGap + JQueryMobile + HTML5做Android的小应用，安装在手机上后，发现在转场的过程中，页面会有非常强列的闪屏，这对于用户体验来说是非常不爽的，这个硬伤必须克服。

所以就找资料，网上说的最多的无非就是两种方式：

1）官方提供的修改css

.ui-page { -webkit-backface-visibility: hidden; }

这是我现在试下来最没有效果的，不知道会不会根据各版本不同而有不同的效果，我使用的JQueryMobile版本是1.4.2

2）修改JQueryMobile的默认配置

$(document).bind("mobileinit", function(){
  $.extend(  $.mobile , {
   　　defaultPageTransition: 'none'
  });
});

这个确实有些效果，至少闪屏抖动不像原来那么大，但还是没彻底解决，体验还是不佳

 

终于在某一天，被我找到一个第三种可尝试的方法，Oh my god，原来这就是我想要的

在AndroidManifest.xml中设置

<application android:debuggable="true"   
android:hardwareAccelerated="false"  
android:icon="@drawable/icon"  
android:label="@string/app_name">
        <activity android:configChanges="orientation|keyboardHidden|keyboard|screenSize|locale" 
android:label="@string/app_name"
android:name="CST" android:theme="@android:style/Theme.Black.NoTitleBar">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />
                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
    </application>

以上代码第二行，默认为[ android:hardwareAccelerated="true" ]，把它改成false，意思是关闭Android的硬件加速