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

人都是產(chǎn)品經(jīng)理旗下【起點(diǎn)學(xué)院】推出產(chǎn)品經(jīng)理“365天”成長計(jì)劃，BAT大牛帶你學(xué)產(chǎn)品！

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

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

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

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

使用方法：

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

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

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

使用要求：

1，你需要運(yùn)行iOS 8或Android設(shè)備是4.4版本以上；

2，需要注冊一個(gè)axshare賬號(hào)；

心動(dòng)不如行動(dòng)，有需要的小伙伴趕緊下載體驗(yàn)吧。

者：Mino

1.針對加載webView中的資源時(shí)加快加載的速度優(yōu)化（主要是針對圖片）

原因：html代碼下載到WebView后，webkit開始解析網(wǎng)頁各個(gè)節(jié)點(diǎn)，發(fā)現(xiàn)有外部樣式文件或者外部腳本文件時(shí)，會(huì)異步發(fā)起網(wǎng)絡(luò)請求下載文件，但如果在這之前也有解析到image節(jié)點(diǎn)，那勢必也會(huì)發(fā)起網(wǎng)絡(luò)請求下載相應(yīng)的圖片。在網(wǎng)絡(luò)情況較差的情況下，過多的網(wǎng)絡(luò)請求就會(huì)造成帶寬緊張，影響到css或js文件加載完成的時(shí)間，造成頁面空白loading過久。

解決方法：告訴WebView先不要自動(dòng)加載圖片，等頁面finish后再發(fā)起圖片加載。

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

2.WebView硬件加速導(dǎo)致頁面渲染閃爍

原因：4.0以上的系統(tǒng)我們開啟硬件加速后，WebView渲染頁面更加快速，拖動(dòng)也更加順滑。但有個(gè)副作用就是，當(dāng)WebView視圖被整體遮住一塊，然后突然恢復(fù)時(shí)（比如使用SlideMenu將WebView從側(cè)邊滑出來時(shí)），這個(gè)過渡期會(huì)出現(xiàn)白塊同時(shí)界面閃爍。

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

/**
 * 請求網(wǎng)絡(luò)出現(xiàn)error
 * @param view                              view
 * @param errorCode                         錯(cuò)誤
 * @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隱藏系統(tǒng)定義的404頁面信息
        String data="Page NO FOUND！";
        view.loadUrl("javascript：document.body.innerHTML=\"" + data + "\"");
    } else {
        if (webListener!=null){
            webListener.showErrorView();
        }
    }
}

// 向主機(jī)應(yīng)用程序報(bào)告Web資源加載錯(cuò)誤。這些錯(cuò)誤通常表明無法連接到服務(wù)器。
// 值得注意的是，不同的是過時(shí)的版本的回調(diào)，新的版本將被稱為任何資源（iframe，圖像等）
// 不僅為主頁。因此，建議在回調(diào)過程中執(zhí)行最低要求的工作。
// 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("服務(wù)器異常"+error.getDescription().toString());
    }
    //ToastUtils.showToast("服務(wù)器異常6.0之后");
    //當(dāng)加載錯(cuò)誤時(shí)，就讓它加載本地錯(cuò)誤網(wǎng)頁文件
    //mWebView.loadUrl("file:///android_asset/errorpage/error.html");
    if (webListener!=null){
        webListener.showErrorView();
    }
}

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

3.可以提前顯示加載進(jìn)度條

原因：WebView.loadUrl("url") 不會(huì)立馬就回調(diào) onPageStarted 或者 onProgressChanged 因?yàn)樵谶@一時(shí)間段，WebView 有可能在初始化內(nèi)核，也有可能在與服務(wù)器建立連接，這個(gè)時(shí)間段容易出現(xiàn)白屏，白屏用戶體驗(yàn)是很糟糕的。

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

/**
 * 在加載資源時(shí)通知主機(jī)應(yīng)用程序發(fā)生SSL錯(cuò)誤
 * 作用：處理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){
        //表示等待證書響應(yīng)
        handler.proceed();
        // handler.cancel();      //表示掛起連接，為默認(rèn)方式
        // handler.handleMessage(null);    //可做其他處理
    }
}

4.WebView密碼明文存儲(chǔ)漏洞優(yōu)化

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

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

@Override
protected void onDestroy() {
    try {
        //有音頻播放的web頁面的銷毀邏輯
        //在關(guān)閉了Activity時(shí)，如果Webview的音樂或視頻，還在播放。就必須銷毀Webview
        //但是注意：webview調(diào)用destory時(shí),webview仍綁定在Activity上
        //這是由于自定義webview構(gòu)建時(shí)傳入了該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的狀態(tài)頁面，比如下面這些方法中可能會(huì)出現(xiàn)error

原因：當(dāng)WebView加載頁面出錯(cuò)時(shí)（一般為404 NOT FOUND,Android WebView會(huì)默認(rèn)顯示一個(gè)出錯(cuò)界面。當(dāng)WebView加載出錯(cuò)時(shí)，會(huì)在WebViewClient實(shí)例中的onReceivedError()，還有onReceivedTitle方法接收到錯(cuò)誤。

解決方法：自定義錯(cuò)誤頁面樣式。

@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) {
            //不在白名單內(nèi)，非法網(wǎng)址，這個(gè)時(shí)候給用戶強(qiáng)烈而明顯的提示
        } else {
            //合法網(wǎng)址
        }
    }
}

6. WebView加載證書錯(cuò)誤

原因：webView加載一些別人的url時(shí)候，有時(shí)候會(huì)發(fā)生證書認(rèn)證錯(cuò)誤的情況。

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

 //在onResume里面設(shè)置setJavaScriptEnabled(true)。
    @Override
    protected void onResume() {
        super.onResume();
        if (mWebView !=null) {
        mWebView.getSettings().setJavaScriptEnabled(true);
        }
    }
//在onStop里面設(shè)置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頁面的銷毀邏輯
        //在關(guān)閉了Activity時(shí)，如果Webview的音樂或視頻，還在播放。就必須銷毀Webview
        //但是注意：webview調(diào)用destory時(shí),webview仍綁定在Activity上
        //這是由于自定義webview構(gòu)建時(shí)傳入了該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.如何設(shè)置白名單操作

原因：客戶端內(nèi)的WebView都是可以通過客戶端的某個(gè)schema打開的，而要打開頁面的URL很多都并不寫在客戶端內(nèi)，而是可以由URL中的參數(shù)傳遞過去的。上面4.0.5 使用scheme協(xié)議打開鏈接風(fēng)險(xiǎn)已經(jīng)說明了scheme使用的危險(xiǎn)性。

解決方法：設(shè)置運(yùn)行訪問的白名單，或者當(dāng)用戶打開外部鏈接前給用戶強(qiáng)烈而明顯的提示。設(shè)置白名單操作其實(shí)和過濾廣告是一個(gè)意思，這里你可以放一些合法的網(wǎng)址允許訪問。

@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) {
            //不在白名單內(nèi)，非法網(wǎng)址，這個(gè)時(shí)候給用戶強(qiáng)烈而明顯的提示
        } else {
            //合法網(wǎng)址
        }
    }
}

9.Android后臺(tái)無法釋放js導(dǎo)致發(fā)熱耗電

原因：有些手機(jī)你如果webView加載的html里，有一些js一直在執(zhí)行比如動(dòng)畫之類的東西，如果此刻webView 掛在了后臺(tái)這些資源是不會(huì)被釋放用戶也無法感知。導(dǎo)致一直占有cpu 耗電特別快。

解決方法：WebView在后臺(tái)的時(shí)候，會(huì)調(diào)用onStop方法，即此時(shí)關(guān)閉js交互，回到前臺(tái)調(diào)用onResume再開啟js交互。

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

10.WebView加載網(wǎng)頁不顯示圖片

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

解決方案：需要設(shè)置開啟。

戶端架構(gòu)設(shè)計(jì)

客戶端設(shè)計(jì) 目的是整體設(shè)計(jì)客戶端App，架構(gòu)上打好鋪墊.

Android客戶端架構(gòu)設(shè)計(jì)

主要從以下幾個(gè)方面進(jìn)行設(shè)計(jì)：MVP設(shè)計(jì)風(fēng)格、整體架構(gòu)、日志系統(tǒng)、網(wǎng)絡(luò)系統(tǒng)、本地存儲(chǔ)、Test模塊.

MVP設(shè)計(jì)風(fēng)格

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

基本原理：

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

Activity： View接口的實(shí)現(xiàn)，初始化界面，初始化View中的控件，調(diào)用Presenter完成業(yè)務(wù)邏輯

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

Presenter：業(yè)務(wù)邏輯的實(shí)現(xiàn)，業(yè)務(wù)邏輯處理完成之后通過View接口操作UI，作用的數(shù)據(jù)是Model.

整體架構(gòu)

依賴注入型框架：

Dagger

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

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

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

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

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

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!");
    }
 }

日志系統(tǒng)

日志系統(tǒng)要完成以下幾個(gè)功能：

Debug時(shí)的日志需求
日志寫入文件的需求，方便上線查看
日志上報(bào)
日志加密
系統(tǒng)日志監(jiān)控：日志奔潰信息監(jiān)控

修改醫(yī)行者中的日志系統(tǒng)可以達(dá)到需求, 也可以修改Github開源項(xiàng)目格式化日志輸出項(xiàng)目： Logger 和日志收集項(xiàng)目：Log 達(dá)到要求。

網(wǎng)絡(luò)系統(tǒng)

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

OkHttp封裝：HttpGet、HttpPost、File Upload，OKHttp的使用要求創(chuàng)建Request，填寫RequestBody。參照醫(yī)行者M(jìn)essaage的封裝形式，將創(chuàng)建Request的過程進(jìn)行封裝，由最簡單的請求信息和回調(diào)接口構(gòu)成一個(gè)Message，并對Message進(jìn)行統(tǒng)一處理。

本地存儲(chǔ)

本地存儲(chǔ)要解決的問題：

數(shù)據(jù)庫存儲(chǔ)

數(shù)據(jù)庫的版本管理：版本升級、數(shù)據(jù)遷移等

參考：Hibernate的ORM思想

第三方框架：

GreenDAO

Android Sqlite orm 的 db 工具類

項(xiàng)目地址：https://github.com/greenrobot/greenDAO

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

官網(wǎng)網(wǎng)址：http://greendao-orm.com/

GreenDao使用方式

創(chuàng)建 "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 {、

        // 這兩個(gè)參數(shù)是：數(shù)據(jù)庫版本號(hào)和schema名稱

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

        addNote(schema);

        //addCustomerOrder(schema);

        // 生成類，同時(shí)可以指定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也有合適的解決方式：

數(shù)據(jù)庫版本升級問題：

/** 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

以上是從官方文檔上大致看下來的結(jié)果，該開源項(xiàng)目在業(yè)界評價(jià)甚高，使用的人也不在少數(shù)。

Test模塊

Android單元測試

robolectric

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

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

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

robolectric

舉個(gè)例子:

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));
            }

        });
    }
}

對應(yīng)的測試類，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中的一個(gè)命令行工具，可以運(yùn)行在模擬器里或?qū)嶋H設(shè)備中，基于adb shell命令還控制程序包進(jìn)行測試。它向系統(tǒng)發(fā)送偽隨機(jī)的用戶事件流(如按鍵輸入、觸摸屏輸入、手勢輸入等)，實(shí)現(xiàn)對正在開發(fā)的應(yīng)用程序進(jìn)行壓力測試。Monkey測試是一種為了測試軟件的穩(wěn)定性、健壯性的快速有效的方法。Monkey測試對象是應(yīng)用程序包。

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

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

第三方測試工具

Tencent APT

APT 是騰訊開源的一個(gè) Android 平臺(tái)高效性能測試組件，提供豐富實(shí)用的功能，適用于開發(fā)自測、定位性能瓶頸；測試人員完成性能基準(zhǔn)測試、競品對比測試

項(xiàng)目地址：https://github.com/stormzhang/APT

文章不易，如果大家喜歡這篇文章，或者對你有幫助希望大家多多點(diǎn)贊轉(zhuǎn)發(fā)關(guān)注哦。文章會(huì)持續(xù)更新的。絕對干貨！！！

在線咨詢

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

您的項(xiàng)目需求

*請認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。

整合營銷服務(wù)商