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

来源：互联网发布：火龙果软件培训编辑：程序博客网时间：2024/06/05 17:12

从本地加载

参考
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>weexUsage: 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 projectweex  <command> --help      help on <command>C:\Users\aaron>weex F:\0Develop\workspace_AS\WeexAndroid\app\src\main\assets\src\hello.weinfo Wed Feb 22 2017 09:19:42 GMT+0800 (中国标准时间)WebSocket  is listening on port 8082info Wed Feb 22 2017 09:19:42 GMT+0800 (中国标准时间)http  is listening on port 8081info 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.vueERR! [webpack errors]./.weex_tmp/app.js?entry=trueModule 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_tmpresolve 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 existresolve 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-121info weex JS bundle saved at C:\Users\aaron\.weex_tmpC:\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

0 0