如何快速将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小时内与您取得联系。

整合营销服务商