weex服务项目搭建


本期六篇文章目录(可点击跳转)

一. 阿里Weex框架快速体验与环境搭建

二. weex sdk集成到Android工程

三. weex服务项目搭建

四. Weex优雅的“降级”到 HTML5

**五. weex项目实战篇(一) **

**六. weex项目实战篇(二) **


  1. 前言

前面介绍了app本地调用js的方式(js文件放在assert目录下面),其实大部分都是调用远程js,本篇介绍app如何调用远程js文件。

2.服务项目搭建步骤

前提需要安装好weex环境,具体参见前面文章:环境搭建地址
接下来讲解如何使用weex-toolkit构建项目:

1)创建项目:
命令行到任意文件夹,输入如下指令

weex init 

执行指令后,会看到如图所示的信息:
这里写图片描述
此时你会在你的文件夹下面看到如下所示的目录结构:
这里写图片描述

2)安装npm依赖
命令行下面继续输入如下指令

// 安装依赖包,安装成功后,会增加一个node_modules包
npm install

3)启动serve
我们首先看一下package.json下的指令

"build": "webpack",// build 配置 
"dev": "webpack --watch",// webpack 监听,可以自动监听修改
"serve": "serve -p 8080",// 启动服务
"test": "echo \"Error: no test specified\" && exit 1"

执行,如下指令:

npm run build
npm run serve

成功后,日志如下图所示
这里写图片描述
我们在浏览器中输入localhost:8080查看效果吧。
这里写图片描述
很明显,在浏览器中正确展示了,但是最终要在手机中展现。

3.app中远程调用该js

调用代码改成如下所示

mWXSDKInstance.renderByUrl("MyApplication","http://10.25.52.72:8080/dist/main.js",null, null, -1, -1, WXRenderStrategy.APPEND_ASYNC);

运行app程序,界面如下图所示:
这里写图片描述
接下来就是要体验动态改变的功能了,很简单,改变服务项目中的.we文件
执行如下指令:

npm run build
npm run serve

成功后,在打开app,你会发现如图所示:
这里写图片描述
是不是很强,类似动态部署。


欢迎一起交流讨论
群号:469890293


关注我的公众号,更多优质文章将通过公众号推送。
微信扫一扫下方二维码即可关注:
在这里插入图片描述

发布了76 篇原创文章 · 获赞 329 · 访问量 49万+

猜你喜欢

转载自blog.csdn.net/dfskhgalshgkajghljgh/article/details/52776277