Weex入门教程之7，从本地加载js、从服务器加载js文件显示

从本地加载

参考
http://blog.csdn.net/u013474104/article/details/56284201
或
http://blog.csdn.net/u013474104/article/details/54964977#t6

关键代码：

mWXSDKInstance.render("WXSample", WXFileUtils.loadAsset("build/mainTest.js", WXPageActivity.this), null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);

从服务器加载

参考
http://blog.csdn.net/u013474104/article/details/56284201

关键代码：

    private void loadWXfromService(final String url) {
        mProgressBar.setVisibility(View.VISIBLE);
        if (mWXSDKInstance != null) {
            mWXSDKInstance.destroy();
        }
        RenderContainer renderContainer = new RenderContainer(this);
        mContainer.addView(renderContainer);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.setRenderContainer(renderContainer);
        mWXSDKInstance.registerRenderListener(this);
        mWXSDKInstance.setBundleUrl(url);
        mWXSDKInstance.setTrackComponent(true);
        RequestParams params = new RequestParams(url);
        x.http().get(params, new Callback.CommonCallback<String>() {
            @Override
            public void onSuccess(String result) {
                Toast.makeText(x.app(), result, Toast.LENGTH_LONG).show();
                Log.i(TAG, "into--[http:onSuccess] url:" + url);
                mWXSDKInstance.render("WXSample", result, null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
            }

            @Override
            public void onError(Throwable ex, boolean isOnCallback) {
                mProgressBar.setVisibility(View.GONE);
                Toast.makeText(x.app(), ex.getMessage(), Toast.LENGTH_LONG).show();
            }

            @Override
            public void onCancelled(CancelledException cex) {
                Toast.makeText(x.app(), "cancelled", Toast.LENGTH_LONG).show();
            }

            @Override
            public void onFinished() {
            }
        });
    }

部署远程Weex服务

启动服务，单个.we或.vue文件

目前，只能启动.we文件.vue文件貌似还不支持。

.we

看命令操作

Microsoft Windows [版本 10.0.10586]
(c) 2015 Microsoft Corporation。保留所有权利。

C:\Users\aaron>weex

Usage: weex <foo/bar/we_file_or_dir_path>  [options]
Usage: weex init [projectName]

Options:
  --port    http listening port number ,default is 8081          [default: 8081]
  --wsport  websocket listening port number ,default is 8082     [default: 8082]
  --output  to build the js bundle to the specify a path
                                                 [default: "no JSBundle output"]

Usage:weex <command>

where <command> is one of:

       debug               start weex debugger
       compile             compile we/vue file
       run                 run your project

weex  <command> --help      help on <command>


C:\Users\aaron>weex F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.we
info Wed Feb 22 2017 09:19:42 GMT+0800 (中国标准时间)WebSocket  is listening on port 8082
info Wed Feb 22 2017 09:19:42 GMT+0800 (中国标准时间)http  is listening on port 8081
info http://172.16.20.72:8081/?hot-reload_controller&page=hello.js&loader=xhr&wsport=8082&type=we

ok，已启动成功，这时会自动打开默认的浏览器，并跳转到以下链接
http://172.16.20.72:8081/?hot-reload_controller&page=hello.js&loader=xhr&wsport=8082&type=we

图示：

.vue

Microsoft Windows [版本 10.0.10586]
(c) 2015 Microsoft Corporation。保留所有权利。

C:\Users\aaron>weex F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue
ERR! [webpack errors]
./.weex_tmp/app.js?entry=true
Module not found: Error: Cannot resolve 'file' or 'directory' C:\Users\aaron\F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue in C:\Users\aaron\.weex_tmp
resolve file
  C:\Users\aaron\F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue.webpack.js doesn't exist
  C:\Users\aaron\F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue.js doesn't exist
  C:\Users\aaron\F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue doesn't exist
  C:\Users\aaron\F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue.web.js doesn't exist
  C:\Users\aaron\F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue.json doesn't exist
resolve directory
  C:\Users\aaron\F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue doesn't exist (directory default file)
  C:\Users\aaron\F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue\package.json doesn't exist (directory description file)
[C:\Users\aaron\F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue.webpack.js]
[C:\Users\aaron\F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue.js]
[C:\Users\aaron\F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue]
[C:\Users\aaron\F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue.web.js]
[C:\Users\aaron\F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.vue.json]
 @ ./.weex_tmp/app.js?entry=true 7:13-121
info weex JS bundle saved at C:\Users\aaron\.weex_tmp

C:\Users\aaron>

报错啦，等往后版本，再尝试吧!

安卓远程调用服务js

我们已经成功启动了.we服务，接下来我们用app远程加载看看效果。

关键代码：
详情可参考http://blog.csdn.net/u013474104/article/details/56284201

    private void loadWXfromService(final String url) {
        mProgressBar.setVisibility(View.VISIBLE);
        if (mWXSDKInstance != null) {
            mWXSDKInstance.destroy();
        }
        RenderContainer renderContainer = new RenderContainer(this);
        mContainer.addView(renderContainer);
        mWXSDKInstance = new WXSDKInstance(this);
        mWXSDKInstance.setRenderContainer(renderContainer);
        mWXSDKInstance.registerRenderListener(this);
        mWXSDKInstance.setBundleUrl(url);
        mWXSDKInstance.setTrackComponent(true);
        RequestParams params = new RequestParams(url);
        x.http().get(params, new Callback.CommonCallback<String>() {
            @Override
            public void onSuccess(String result) {
                Toast.makeText(x.app(), result, Toast.LENGTH_LONG).show();
                Log.i(TAG, "into--[http:onSuccess] url:" + url);
                mWXSDKInstance.render("WXSample", result, null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);
            }

            @Override
            public void onError(Throwable ex, boolean isOnCallback) {
                mProgressBar.setVisibility(View.GONE);
                Toast.makeText(x.app(), ex.getMessage(), Toast.LENGTH_LONG).show();
            }

            @Override
            public void onCancelled(CancelledException cex) {
                Toast.makeText(x.app(), "cancelled", Toast.LENGTH_LONG).show();
            }

            @Override
            public void onFinished() {
            }
        });
    }

调用关键代码方法：

 loadWXfromService("http://172.16.20.72:8081/hello.js");

效果图示：

启动服务，多个.we或.vue文件

.vue暂时不行，先不理，这里针对.we做下示例

我们可以留意到这条命令行：

Usage: weex <foo/bar/we_file_or_dir_path>  [options]

we_file_or_dir_path，文件或目录，可以想得到，以目录运行，就可以启动多个.we文件啦。

C:\Users\aaron>weex F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\
ERR! Not a ".vue" or ".we" file

不知道什么原因，以目录编译，失败，可以还不完善，等后期版本了

ERR! Not a “.vue” or “.we” file