weex入門踩坑

最近在學習Weex,官方的介紹這是基於VUE實現的一套跨平臺開發方案,能以 web 的開發體驗構建高性能、可擴展的 native 應用,可以一次撰寫,多端運行。

本文章記錄學習Weex過程中所遇到的問題,後續會不斷補充。
文章從兩方面進行介紹:

一、Weex遇到的坑

二、Weex命令解析

三、使用介紹

一、Weex遇到問題

這裏寫圖片描述

按着步驟執行到這來打開http://localhost:8080/index.html卻拒絕訪問不到,百度搜了半天沒找到解決方法,最後終於用谷歌找到答案,解決方法請戳這裏,最後通過執行npm run serve解決

吐槽一下,weex的文檔寫的還是不友好啊@~@

二、Weex命令解析

1、$ weex hello.we –qr

qr 參數,表示生成二維碼,命令爲爲hello.we生成一個二維碼,此時用palyground(weex的安卓調試工具,可到官網下載),掃描可以看到這個hello.we頁面

注意:此時Playground App掃碼必須和電腦在同一個網段,局域網,不然掃碼會看不到效果!!!
*/

2、$ weex hello.we
.we 文件是不能直接運行的,需要weex-toolkit 會編譯 .we 文件,並且創建靜態服務器

這時,命令行會做幾件事:
編譯 .we 文件;
- 啓動熱加載服務;
- 啓動靜態服務器;
- 打開瀏覽器頁面,訪問 http://127.0.0.1:8081/weex_tmp/h5_render/?hot-reload_controller&page=hello.js&loader=xhr

–save-dev 安裝的插件在devDependencies
npm i babel-preset-es2015 babel-preset-stage-0 –save-dev

三、使用介紹

1、使用$weex filename命令編譯執行時,.vue後綴的可以可以在瀏覽器的頁面訪問到,而.we後綴的文件則不行,如hello.we和hello.vue的內容一樣都是:
代碼
分別執行weexsrc/hello.we weex src/hello2.vue後,瀏覽器顯示內容爲:
這裏寫圖片描述
這裏寫圖片描述

手機palyground掃描二維碼顯示爲:
這裏寫圖片描述
這裏寫圖片描述

此時如果文件內容修改了,命令行重新運行後手機直接刷新就可以了不需要重新掃描二維碼

注:
package.json參數詳解
webpack入門

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章