weex服務項目搭建

[轉載]weex服務項目搭建

原文: http://blog.csdn.net/dfskhgalshgkajghljgh/article/details/52776277

// 這篇文章講解了weex-toolkit的使用. 也體現出了weex類似熱更新的優點.

1. 前言

前面介紹了app本地調用js的方式（js檔案放在assert目錄下面），其實大部分都是調用遠程js，本篇介紹app如何調用遠程js檔案。 2.服務項目搭建步驟

前提需要安裝好weex環境，具體參見前面文章：環境搭建地址 
接下來講解如何使用weex-toolkit構建項目：

1）建立項目： 
命令列到任意檔案夾，輸入如下指令

weex init 

1 1

執行指令後，會看到如圖所示的資訊： 
 
此時你會在你的檔案夾下面看到如下所示的目錄結構： 

2）安裝npm依賴 //這個過程會非常慢.
命令列下面繼續輸入如下指令

// 安裝依賴包，安裝成功後，會增加一個node_modules包npm install

1 2 1 2

3）啟動serve 
我們首先看一下package.json下的指令

"build": "webpack",// build 配置 "dev": "webpack --watch",// webpack 監聽，可以自動監聽修改"serve": "serve -p 8080",// 啟動服務"test": "echo \"Error: no test specified\" && exit 1"

1 2 3 4 1 2 3 4

執行，如下指令：

npm run build

1 1

npm run serve

1 1

成功後，日誌如下圖所示 
 
我們在瀏覽器中輸入localhost：8080查看效果吧。 

很明顯，在瀏覽器中正確展示了，但是最終要在手機中展現。 3.app中遠程調用該js

調用代碼改成如下所示

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

1 1

運行app程式，介面如下圖所示： 
 
接下來就是要體驗動態改變的功能了，很簡單，改變服務項目中的.we檔案 
執行如下指令：

npm run build

1 1

npm run serve

1 1

成功後，在開啟app，你會發現如圖所示： 
 
是不是很強，類似動態部署。