如何快速將axure生成的原型放到手機上演示

人都是產品經理旗下【起點學院】推出產品經理“365天”成長計劃，BAT大牛帶你學產品！

之前Axure官方有一個原型在線分享演示的平臺，用戶可以直接生成原型到Axure官方平臺，方便用戶提供演示：http://share.axure.com（你需要注冊一個賬號）

但是在移動端上如何演示Axure原型呢？一直以來都很蛋疼，需要要靠一些第三方軟件的方法。

如今局面有了改善，Axure公司于2015-5-22日發布了一個移動端原型演示的客戶端：AxShare，目前已經支持iOS和安卓手機，大家可以直接下載使用。

官方博客介紹：http://www.axure.com/c/blog/135-axshare-app-ios-android.html

使用方法：

1. 把你的rp文檔，上傳到http://share.axure.com（Axure軟件里工具欄有按鈕可以直接上傳到share.axure.com）

2. 然后用你的帳戶在手機AxShare中登錄。

3. 可以查看你上傳的項目原型演示，也可以把項目文件下載到手機本地。

使用要求：

1，你需要運行iOS 8或Android設備是4.4版本以上；

2，需要注冊一個axshare賬號；

心動不如行動，有需要的小伙伴趕緊下載體驗吧。

者：Mino

1.針對加載webView中的資源時加快加載的速度優化（主要是針對圖片）

原因：html代碼下載到WebView后，webkit開始解析網頁各個節點，發現有外部樣式文件或者外部腳本文件時，會異步發起網絡請求下載文件，但如果在這之前也有解析到image節點，那勢必也會發起網絡請求下載相應的圖片。在網絡情況較差的情況下，過多的網絡請求就會造成帶寬緊張，影響到css或js文件加載完成的時間，造成頁面空白loading過久。

解決方法：告訴WebView先不要自動加載圖片，等頁面finish后再發起圖片加載。

//設置是否開啟密碼保存功能，不建議開啟，默認已經做了處理，存在盜取密碼的危險
WebView.setSavePassword(false);

2.WebView硬件加速導致頁面渲染閃爍

原因：4.0以上的系統我們開啟硬件加速后，WebView渲染頁面更加快速，拖動也更加順滑。但有個副作用就是，當WebView視圖被整體遮住一塊，然后突然恢復時（比如使用SlideMenu將WebView從側邊滑出來時），這個過渡期會出現白塊同時界面閃爍。

解決方法：是在過渡期前將WebView的硬件加速臨時關閉，過渡期后再開啟。

/**
 * 請求網絡出現error
 * @param view                              view
 * @param errorCode                         錯誤
 * @param description                       description
 * @param failingUrl                        失敗鏈接
 */
@Override
public void onReceivedError(WebView view, int errorCode, String description, String
        failingUrl) {
    super.onReceivedError(view, errorCode, description, failingUrl);
    if (errorCode==404) {
        //用javascript隱藏系統定義的404頁面信息
        String data="Page NO FOUND！";
        view.loadUrl("javascript：document.body.innerHTML=\"" + data + "\"");
    } else {
        if (webListener!=null){
            webListener.showErrorView();
        }
    }
}

// 向主機應用程序報告Web資源加載錯誤。這些錯誤通常表明無法連接到服務器。
// 值得注意的是，不同的是過時的版本的回調，新的版本將被稱為任何資源（iframe，圖像等）
// 不僅為主頁。因此，建議在回調過程中執行最低要求的工作。
// 6.0 之后
@Override
public void onReceivedError(WebView view, WebResourceRequest request, WebResourceError error) {
    super.onReceivedError(view, request, error);
    if (Build.VERSION.SDK_INT >=Build.VERSION_CODES.M) {
        X5WebUtils.log("服務器異常"+error.getDescription().toString());
    }
    //ToastUtils.showToast("服務器異常6.0之后");
    //當加載錯誤時，就讓它加載本地錯誤網頁文件
    //mWebView.loadUrl("file:///android_asset/errorpage/error.html");
    if (webListener!=null){
        webListener.showErrorView();
    }
}

/**
 * 這個方法主要是監聽標題變化操作的
 * @param view  view
 * @param title 標題
 */
@Override
public void onReceivedTitle(WebView view, String title) {
    super.onReceivedTitle(view, title);
    if (title.contains("404") || title.contains("網頁無法打開")){
        if (webListener!=null){
            webListener.showErrorView();
        }
    } else {
        // 設置title
    }
}

3.可以提前顯示加載進度條

原因：WebView.loadUrl("url") 不會立馬就回調 onPageStarted 或者 onProgressChanged 因為在這一時間段，WebView 有可能在初始化內核，也有可能在與服務器建立連接，這個時間段容易出現白屏，白屏用戶體驗是很糟糕的。

解決方法：提前顯示進度條雖然不是提升性能，但是對用戶體驗來說也是很重要的一點。

/**
 * 在加載資源時通知主機應用程序發生SSL錯誤
 * 作用：處理https請求
 * @param view   view
 * @param handler  handler
 * @param error   error
 */
@Override
public void onReceivedSslError(WebView view, SslErrorHandler handler, SslError error) {
    super.onReceivedSslError(view, handler, error);
    if (error!=null){
        String url=error.getUrl();
    }
    //https忽略證書問題
    if (handler!=null){
        //表示等待證書響應
        handler.proceed();
        // handler.cancel();      //表示掛起連接，為默認方式
        // handler.handleMessage(null);    //可做其他處理
    }
}

4.WebView密碼明文存儲漏洞優化

原因：WebView 默認開啟密碼保存功能 mWebView.setSavePassword(true)，如果該功能未關閉，在用戶輸入密碼時，會彈出提示框，詢問用戶是否保存密碼，如果選擇”是”，密碼會被明文保到 /data/data/com.package.name/databases/webview.db 中，這樣就有被盜取密碼的危險。

解決方法：通過 WebSettings.setSavePassword(false) 關閉密碼保存提醒功能。

@Override
protected void onDestroy() {
    try {
        //有音頻播放的web頁面的銷毀邏輯
        //在關閉了Activity時，如果Webview的音樂或視頻，還在播放。就必須銷毀Webview
        //但是注意：webview調用destory時,webview仍綁定在Activity上
        //這是由于自定義webview構建時傳入了該Activity的context對象
        //因此需要先從父容器中移除webview,然后再銷毀webview:
        if (webView !=null) {
            ViewGroup parent=(ViewGroup) webView.getParent();
            if (parent !=null) {
                parent.removeView(webView);
            }
            webView.removeAllViews();
            webView.destroy();
            webView=null;
        }
    } catch (Exception e) {

    }
    super.onDestroy();
}

5.自定義加載異常error的狀態頁面，比如下面這些方法中可能會出現error

原因：當WebView加載頁面出錯時（一般為404 NOT FOUND,Android WebView會默認顯示一個出錯界面。當WebView加載出錯時，會在WebViewClient實例中的onReceivedError()，還有onReceivedTitle方法接收到錯誤。

解決方法：自定義錯誤頁面樣式。

@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
    super.onPageStarted(view, url, favicon);
    String host=Uri.parse(url).getHost();
    if (!BuildConfig.IS_DEBUG) {
        if (Arrays.binarySearch(domainList, host) < 0) {
            //不在白名單內，非法網址，這個時候給用戶強烈而明顯的提示
        } else {
            //合法網址
        }
    }
}

6. WebView加載證書錯誤

原因：webView加載一些別人的url時候，有時候會發生證書認證錯誤的情況。

解決方法：要將正常的呈現頁面給用戶，我們需要忽略證書錯誤，需要調用WebViewClient類的onReceivedSslError方法，調用handler.proceed()來忽略該證書錯誤。

 //在onResume里面設置setJavaScriptEnabled(true)。
    @Override
    protected void onResume() {
        super.onResume();
        if (mWebView !=null) {
        mWebView.getSettings().setJavaScriptEnabled(true);
        }
    }
//在onStop里面設置setJavaScriptEnabled(false);
    @Override
    protected void onStop() {
        super.onStop();
        if (mWebView !=null) {
        mWebView.getSettings().setJavaScriptEnabled(false)
       }
  }

7.WebView音頻播放銷毀后還有聲音

原因：WebView頁面中播放了音頻,退出Activity后音頻仍然在播放。

解決方法：需要在Activity的onDestory()中從父容器中移除WebView。

@Override
protected void onDestroy() {
    try {
        //有音頻播放的web頁面的銷毀邏輯
        //在關閉了Activity時，如果Webview的音樂或視頻，還在播放。就必須銷毀Webview
        //但是注意：webview調用destory時,webview仍綁定在Activity上
        //這是由于自定義webview構建時傳入了該Activity的context對象
        //因此需要先從父容器中移除webview,然后再銷毀webview:
        if (webView !=null) {
            ViewGroup parent=(ViewGroup) webView.getParent();
            if (parent !=null) {
                parent.removeView(webView);
            }
            webView.removeAllViews();
            webView.destroy();
            webView=null;
        }
    } catch (Exception e) {

    }
    super.onDestroy();
}

8.如何設置白名單操作

原因：客戶端內的WebView都是可以通過客戶端的某個schema打開的，而要打開頁面的URL很多都并不寫在客戶端內，而是可以由URL中的參數傳遞過去的。上面4.0.5 使用scheme協議打開鏈接風險已經說明了scheme使用的危險性。

解決方法：設置運行訪問的白名單，或者當用戶打開外部鏈接前給用戶強烈而明顯的提示。設置白名單操作其實和過濾廣告是一個意思，這里你可以放一些合法的網址允許訪問。

@Override
public void onPageStarted(WebView view, String url, Bitmap favicon) {
    super.onPageStarted(view, url, favicon);
    String host=Uri.parse(url).getHost();
    if (!BuildConfig.IS_DEBUG) {
        if (Arrays.binarySearch(domainList, host) < 0) {
            //不在白名單內，非法網址，這個時候給用戶強烈而明顯的提示
        } else {
            //合法網址
        }
    }
}

9.Android后臺無法釋放js導致發熱耗電

原因：有些手機你如果webView加載的html里，有一些js一直在執行比如動畫之類的東西，如果此刻webView 掛在了后臺這些資源是不會被釋放用戶也無法感知。導致一直占有cpu 耗電特別快。

解決方法：WebView在后臺的時候，會調用onStop方法，即此時關閉js交互，回到前臺調用onResume再開啟js交互。

 //在onResume里面設置setJavaScriptEnabled(true)。
    @Override
    protected void onResume() {
        super.onResume();
        if (mWebView !=null) {
        mWebView.getSettings().setJavaScriptEnabled(true);
        }
    }
//在onStop里面設置setJavaScriptEnabled(false);
    @Override
    protected void onStop() {
        super.onStop();
        if (mWebView !=null) {
        mWebView.getSettings().setJavaScriptEnabled(false)
       }
  }

10.WebView加載網頁不顯示圖片

原因：WebView從Lollipop(5.0)開始webView默認不允許混合模式, https當中不能加載http資源, 而開發的時候可能使用的是https的鏈接，但是鏈接中的圖片可能是http的,所以顯示圖片失敗。

解決方案：需要設置開啟。

戶端架構設計

客戶端設計目的是整體設計客戶端App，架構上打好鋪墊.

Android客戶端架構設計

主要從以下幾個方面進行設計：MVP設計風格、整體架構、日志系統、網絡系統、本地存儲、Test模塊.

MVP設計風格

MVP即“Model —— Presenter —— View”，應用在Android中可以實現Activity和業務邏輯的解耦，簡化Activity的規模。現在Gitbub上暫時沒有合適的通用的MVP框架，我們可以基于Gitbub: Android MVP Demo 開源項目實現MVP模式。也可參考MVP開源項目Simple_news: MVP新聞客戶端。

基本原理：

View：接口，聲明所有的View相關的操作，包括GetValue、SetValue、Progress、Navigator等。MVP思想的核心，通過提取View接口，實現了Activity和Presenter的解耦。

Activity： View接口的實現，初始化界面，初始化View中的控件，調用Presenter完成業務邏輯

Model：涉及到的數據對象，以及對數據的操作，比如可以把IO操作放到Model層

Presenter：業務邏輯的實現，業務邏輯處理完成之后通過View接口操作UI，作用的數據是Model.

整體架構

依賴注入型框架：

Dagger

阿里手淘項目推薦使用項目地址：https://github.com/square/dagger原理剖析文檔：http://square.github.io/dagger/

ButterKnife視圖注入型框架項目地址：https://github.com/JakeWharton/butterknife文檔介紹：http://jakewharton.github.io/butterknife/

Butterknife的具體用法參考文檔說明，這里簡單介紹其特性。

支持Activity的View注入，比如簡化Activity中的findViewById()
支持View中的View注入，比如簡化View.findViewById()
支持View的事件回調

注入示例代碼如下,更多注入示例請參考文檔：

public class ExampleActivity extends Activity {
    @Bind(R.id.title) TextView title;
    @Bind(R.id.subtitle) TextView subtitle;
    @Bind(R.id.footer) TextView footer;

    @Override 
    public void onCreate(Bundle savedInstanceState) {
      super.onCreate(savedInstanceState);
      setContentView(R.layout.simple_activity);
      ButterKnife.bind(this);
      // TODO Use fields...
    }

    @OnClick(R.id.submit)
    public void submit(View view) {
      // TODO submit data to server...
    }

    @OnClick(R.id.submit)
    public void sayHi(Button button) {
       button.setText("Hello!");
    }
 }

日志系統

日志系統要完成以下幾個功能：

Debug時的日志需求
日志寫入文件的需求，方便上線查看
日志上報
日志加密
系統日志監控：日志奔潰信息監控

修改醫行者中的日志系統可以達到需求, 也可以修改Github開源項目格式化日志輸出項目： Logger 和日志收集項目：Log 達到要求。

網絡系統

Gitbub: OkHttphttps://github.com/square/okhttp

OkHttp封裝：HttpGet、HttpPost、File Upload，OKHttp的使用要求創建Request，填寫RequestBody。參照醫行者Messaage的封裝形式，將創建Request的過程進行封裝，由最簡單的請求信息和回調接口構成一個Message，并對Message進行統一處理。

本地存儲

本地存儲要解決的問題：

數據庫存儲

數據庫的版本管理：版本升級、數據遷移等

參考：Hibernate的ORM思想

第三方框架：

GreenDAO

Android Sqlite orm 的 db 工具類

項目地址：https://github.com/greenrobot/greenDAO

文檔介紹：http://greendao-orm.com/documentation/

官網網址：http://greendao-orm.com/

GreenDao使用方式

創建 "Green Dao Generation Project" 來生成 entities and core classes( DaoMaster, DaoSession .etc);
在Android Project中使用生成的Dao，

GreenDao生成：

public class ExampleDaoGenerator {

    public static void main(String[] args) throws Exception {、

        // 這兩個參數是：數據庫版本號和schema名稱

        Schema schema=new Schema(1000, "de.greenrobot.daoexample");

        addNote(schema);

        //addCustomerOrder(schema);

        // 生成類，同時可以指定java文件位置

        new DaoGenerator().generateAll(schema, "../DaoExample/src/main/java");

    }

    private static void addNote(Schema schema) {

        Entity note=schema.addEntity("Note");

        note.addIdProperty();

        note.addStringProperty("text").notNull();

        note.addStringProperty("comment");

        note.addDateProperty("date");

    }
}

針對版本升級的問題，GreenDao也有合適的解決方式：

數據庫版本升級問題：

/** WARNING: Drops all table on Upgrade! Use only during development. */

public static class DevOpenHelper extends OpenHelper {

    public DevOpenHelper(Context context, String name, CursorFactory factory) {

        super(context, name, factory);

}

@Override
public void onUpgrade(SQLiteDatabase db, int oldVersion, int newVersion) {

    Log.i("greenDAO", "Upgrading schema from version " + oldVersion + " to " + newVersion + " by dropping all tables");

    //dropAllTables(db, true);

    //onCreate(db);

    // to do update database

}

Android Project和Java Generate整合可參考：整合 http://www.open-open.com/lib/view/open1438065400878.html

以上是從官方文檔上大致看下來的結果，該開源項目在業界評價甚高，使用的人也不在少數。

Test模塊

Android單元測試

robolectric

項目地址：https://github.com/robolectric/robolectricDemo 地址：https://github.com/robolectric/robolectricsample文檔介紹：http://robolectric.org/

特點：(1). 不需要模擬器在一般 JVM 就可以運行測試用例(該框架在Java層實現了一套接口模擬Android，所以可以直接在JVM上跑Android Unit Test)(2). 能完成在真機上的大部分測試包括感應器

其他的測試用例及相關模塊 Mock 可見：android-mock, mockito, easy-mock

robolectric

舉個例子:

Andorid中的代碼

public class MainActivity extends AppCompatActivity {

    @Override

    protected void onCreate(Bundle savedInstanceState) {

        super.onCreate(savedInstanceState);

        setContentView(R.layout.activity_main);

        TextView textView=      (TextView)findViewById(R.id.textView1);

        textView.setOnClickListener(new OnClickListener() {

            @Override

            public void onClick(View v) {

                  startActivity(new Intent(MainActivity.this, SecondActivity.class));
            }

        });
    }
}

對應的測試類，MainActivityTest的代碼：

@RunWith(RobolectricGradleTestRunner.class)

@Config(constants=BuildConfig.class, sdk=21)

public class MainActivityTest {

    @Test

    public void testMainActivity() {

        MainActivity mainActivity=Robolectric.setupActivity(MainActivity.class);

        mainActivity.findViewById(R.id.textView1).performClick();

        Intent expectedIntent=new Intent(mainActivity, SecondActivity.class);

        ShadowActivity shadowActivity=Shadows.shadowOf(mainActivity);

        Intent actualIntent=shadowActivity.getNextStartedActivity();

        Assert.assertEquals(expectedIntent, actualIntent);

    }
}

使用方式http://segmentfault.com/a/1190000002904944

robolectric-demohttps://github.com/ChrisZou/robolectric-demo

Monkey

Monkey是Android中的一個命令行工具，可以運行在模擬器里或實際設備中，基于adb shell命令還控制程序包進行測試。它向系統發送偽隨機的用戶事件流(如按鍵輸入、觸摸屏輸入、手勢輸入等)，實現對正在開發的應用程序進行壓力測試。Monkey測試是一種為了測試軟件的穩定性、健壯性的快速有效的方法。Monkey測試對象是應用程序包。

Monkey測試的步驟：1、#adb shell2、#monkey -p com.android.calculator2 -v 500 （-p packageName -v LogLevel 500即偽隨機事件個數）

更多地命令組合和參數可以查看：Google Monkey官網：http://developer.android.com/tools/help/monkey.htmlAndroid-Monkey-Test：http://ihongqiqu.com/2015/12/24/Android-Monkey-Test/

第三方測試工具

Tencent APT

APT 是騰訊開源的一個 Android 平臺高效性能測試組件，提供豐富實用的功能，適用于開發自測、定位性能瓶頸；測試人員完成性能基準測試、競品對比測試

項目地址：https://github.com/stormzhang/APT

文章不易，如果大家喜歡這篇文章，或者對你有幫助希望大家多多點贊轉發關注哦。文章會持續更新的。絕對干貨！！！

在線咨詢

上一篇：實用！WinForm界面開發時，功能區表單美化操作指
下一篇：北美地區留學文書寫作指南(7)-RL寫作教程（內附C

您的項目需求

*請認真填寫需求信息，我們會在24小時內與您取得聯系。

整合營銷服務商