摘要:系列文章的目录在这里是一个使用开发的原生应用项目,可以实现同一份代码在三端中运行。项目使用了管理依赖,在启动项目之前应该配置好命令,然后进入目录执行以下脚本安装依赖项目目录和目录中存放着各自平台的原生项目,页面源码都在目录中。
系列文章的目录在 ? 这里
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
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/82538.html
摘要:全球首个使用和开发的原生应用那就是官方出了一个,是一个完整的使用的例子,并且用到了和服务端渲染。项目介绍和文章目录配置开发环境编写独立页面使用框架的特性使用平台的功能使用使用完整项目目录详解 背景介绍 Weex 和 Vue 已经互相支持,这也不是新闻了(如果你觉得是新闻,自行在网上搜相关信息……),Vue.js 也因此具备了开发原生应用的能力。 Vue 官方仓库中包含了适配 Weex ...
摘要:依旧采取传统的开发技术栈进行开发,同时在终端的运行体验不输。首先来看下前端开发框架目前与构成了三大最流行的前端开发框架,具有组件化以及三大特性,还学习的,引入了状态管理模块。 摘要: WEEX依旧采取传统的web开发技术栈进行开发,同时app在终端的运行体验不输native app。其同时解决了开发效率、发版速度以及用户体验三个核心问题。那么WEEX是如何实现的?目前WEEX已经完全开...
阅读 2400·2021-09-08 09:45
阅读 3340·2021-09-08 09:45
阅读 3097·2019-08-30 15:54
阅读 3347·2019-08-26 13:54
阅读 1404·2019-08-26 13:26
阅读 1383·2019-08-26 13:23
阅读 908·2019-08-23 17:57
阅读 2177·2019-08-23 17:14