weex頁面跳轉(zhuǎn)方案

針對初入門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)試。
最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時請結(jié)合常識與多方信息審慎甄別。
平臺聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點,簡書系信息發(fā)布平臺,僅提供信息存儲服務。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容