摘要:系列文章的目錄在這里是一個使用開發的原生應用項目,可以實現同一份代碼在三端中運行。項目使用了管理依賴,在啟動項目之前應該配置好命令,然后進入目錄執行以下腳本安裝依賴項目目錄和目錄中存放著各自平臺的原生項目,頁面源碼都在目錄中。
系列文章的目錄在 ? 這里
weex-hackernews 是一個使用 Weex + Vue 開發的原生應用項目,可以實現同一份代碼在三端中運行。不僅用到了 Weex 和 Vue.js 的各種特性,也用到了 Vuex 和 vue-router ,在 Web 、 Android 、 iOS 上都能正常工作,作為一個范例供大家參考。
項目地址:weexteam/weex-hackernews
版本:v1.0
開發環境代碼倉庫中包含了三端的項目,源碼都在 src 目錄中。
執行 npm run build 可以將源碼打包成 js bundle 供三端使用。代碼是使用 Webpack 2 打包的,配置文件是 webpack.config.js,其中入口文件是 src/entry.js ,輸出的文件有兩個:一個是針對 web 平臺生成的 dist/index.web.js,可以直接通過 標簽引入;另外一個是針對 Android 和 iOS 平臺生成的 js bundle 文件,生成在 dist/index.weex.js,可以通過執行 npm run copy 將打包生成后的文件拷貝到原生項目中。
項目還使用了 babel 用于轉換 ES6 的代碼。
Web 項目Web 平臺的入口是 index.html,在安裝好依賴之后,可以通過 npm run serve 啟動監聽 1337 端口,訪問 http://127.0.0.1:1337/index.html 即可打開 Web 應用。
Android 項目Android 項目在 android 目錄中,包含了一個完整的 Android Studio 項目,可以直接用 Android Studio 打開。在打開前要確保開發環境配置正常。
iOS 項目iOS 項目在 ios 目錄中,是一個標準的 Xcode 項目,使用 Xcode 打開即可。
項目使用了 CocoaPods 管理依賴,在啟動項目之前應該配置好 CocoaPods 命令,然后進入 ios 目錄執行以下腳本安裝依賴:
pod install項目目錄
android 和 ios 目錄中存放著各自平臺的原生項目,頁面源碼都在 src 目錄中。目錄說明如下:
/src ├── components/ # 組件 ├── filters/ # 通用過濾器 ├── mixins/ # 全局混合 ├── store/ # 全局的 Store ├── views/ # 視圖(頁面) │ ├── App.vue # 根組件 ├── entry.js # 入口文件 └── router.js # 路由配置
更詳細的說明如下:
/src ├── components/ │?? ├── app-header.vue # 頁面頭部導航條 │?? ├── comment.vue # 評論框 │?? ├── external-link.vue # 外部鏈接 │?? └── story.vue # 單條新聞項 ├── filters/ │?? └── index.js # 通用過濾器 ├── mixins/ │?? └── index.js # 全局混合 ├── store/ │?? ├── actions.js # 操作數據的 Actions │?? ├── fetch.js # 封裝的網絡請求接口 │?? ├── index.js # Store 實例 │?? └── mutations.js # 數據的 Mutations ├── views/ │ ├── ArticleView.vue # 文章頁 │ ├── CommentView.vue # 評論頁 │ ├── StoriesView.vue # 新聞列表頁 │ └── UserView.vue # 用戶信息頁 │ ├── App.vue ├── entry.js └── router.js
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82538.html
摘要:全球首個使用和開發的原生應用那就是官方出了一個,是一個完整的使用的例子,并且用到了和服務端渲染。項目介紹和文章目錄配置開發環境編寫獨立頁面使用框架的特性使用平臺的功能使用使用完整項目目錄詳解 背景介紹 Weex 和 Vue 已經互相支持,這也不是新聞了(如果你覺得是新聞,自行在網上搜相關信息……),Vue.js 也因此具備了開發原生應用的能力。 Vue 官方倉庫中包含了適配 Weex ...
摘要:依舊采取傳統的開發技術棧進行開發,同時在終端的運行體驗不輸。首先來看下前端開發框架目前與構成了三大最流行的前端開發框架,具有組件化以及三大特性,還學習的,引入了狀態管理模塊。 摘要: WEEX依舊采取傳統的web開發技術棧進行開發,同時app在終端的運行體驗不輸native app。其同時解決了開發效率、發版速度以及用戶體驗三個核心問題。那么WEEX是如何實現的?目前WEEX已經完全開...
閱讀 2401·2021-09-08 09:45
閱讀 3340·2021-09-08 09:45
閱讀 3097·2019-08-30 15:54
閱讀 3348·2019-08-26 13:54
閱讀 1405·2019-08-26 13:26
閱讀 1384·2019-08-26 13:23
閱讀 909·2019-08-23 17:57
閱讀 2178·2019-08-23 17:14