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