針對初入門weex的小白,詳細的介紹如何創(chuàng)建項目,如何實現(xiàn)頁面跳轉(zhuǎn)。還有附贈源碼,喜歡的點個贊吧。
先參考weex環(huán)境搭建,確保版本一致。
vue-router
此方案是單頁面架構(gòu),通過vue-router控制路由跳轉(zhuǎn)。源碼戳我
優(yōu)點:
適合單頁面,與單頁面應用開發(fā)流程相似,容易上手
支持web端,調(diào)試方便
缺點:
在移動端跳轉(zhuǎn)生硬
詳細步驟:
- 創(chuàng)建項目
## 初始化weex項目
weex create project-name
- 修改webpack.config.js文件
修改入口文件
## 原始
const entry = {};
const weexEntry = {};
## 修改后
const entry = './src/xxx.js';
const weexEntry = './src/xxx.js';
最后編譯好的dist目錄中,main.js是入口文件
注釋 walk()
// walk()
原因分析:
配置文件中walk()會遍歷src目錄,生成的entry是多個,即多個入口,類似多頁面應用,而我們需要一個入口就足夠了。
HtmlWebpackPlugin插件是將JSBundle注入到html模板中,雖然entry是多個,但是只有最后一個JS Bundle文件被注入到模板中,這導致每次打開頁面都是最后一個頁面。
- 在src目錄下開發(fā)
新建router.js 控制路由
新建main.js 入口文件
新建APP.vue 根組件
注意:
weex內(nèi)置了vue,所以不需要引入vue
在根組件創(chuàng)建時,要設(shè)置默認路由,否則頁面空白
navigator
此方案是多頁面架構(gòu),通過weex內(nèi)置組件navigator控制路由跳轉(zhuǎn)。源碼戳我
優(yōu)點:
適合多頁面,在移動端跳轉(zhuǎn)比較流暢
缺點:
不支持web端,僅限真機調(diào)試
詳細步驟:
- 創(chuàng)建項目
## 初始化weex項目
weex create project-name
在src目錄下直接寫項目即可
調(diào)試頁面
## 調(diào)試目錄,并指定入口頁面
weex debug src -e index.vue
該命令會喚起Chrome瀏覽器打開調(diào)試頁面,而且會監(jiān)聽頁面的變化,但是需要手動刷新
這個調(diào)試主頁上會有兩個二維碼,一個二維碼是連接調(diào)試,使用Playground App 掃這個二維碼開啟 Playground 調(diào)試;一個二維碼是index.js對應的url。
這個命令會編譯你指定目錄下所有的vue文件,并把編譯好的 JS Bundle 部署到 debug 服務器,他們的地址會映射到http://localhost:8080/weex/下
開啟調(diào)試后,設(shè)備列表中會出現(xiàn)您的設(shè)備,根據(jù)提示進行后續(xù)的調(diào)試操作。
- 使用Playground App 。
先掃描第一個二維碼,連接調(diào)試;
再掃描第二個二維碼開始調(diào)試。