[使用 Weex 和 Vue 开发原生应用] 0 项目介绍和文章目录

news/2024/7/5 14:34:14

背景介绍

Weex 和 Vue 已经互相支持,这也不是新闻了(如果你觉得是新闻,自行在网上搜相关信息……),Vue.js 也因此具备了开发原生应用的能力。

Vue 官方仓库中包含了适配 Weex 平台的代码,Weex 也引入了 Vue Runtime 并集成进了 SDK 中,第一个支持 Vue 的 WeexSDK 版本是 v0.9.5,后续版本也都将会支持,建议保持更新。

两个框架之所以能互相适配,是因为两个框架在最初设计时就充分考虑到了扩展性,眼光深远!框架合作减少了开发者的学习负担,是个好事情,可喜可贺???。

全球首个使用 Weex 和 Vue 开发的原生应用

那就是 weex-hackernews !

Vue 官方出了一个 vue-hackernews,是一个完整的使用 Vue 2.0 的例子,并且用到了 Vuex 、 vue-router 和服务端渲染。仿照这个思路,我们也写了一个 weex-hackernews ,不仅用到了 Vue 框架的各种特性,也用到了 Vuex 和 vue-router ,在 Web 、 Android 、 iOS 上都能正常工作,一个完整的三端都有的 App !可以作为一个范例供大家参考。

weex-hackernews screen shot

这个项目实际证明了 Weex + Vue 在 Web 、Android 和 iOS 上都是完全可以运行的,Vuex 和 vue-router 也可以运行在移动端上。我是验证过的,所以我可以有底气地说:Weex + Vue 可以开发原生应用!Weex + Vue 可以开发原生应用!!Weex + Vue 可以开发原生应用!!!

为什么确认是“全球首个”,因为在写这个项目的时候,还没对外发布过支持 Vue 的 WeexSDK,没有使用 Vue 的文档,甚至还没有 Web 端的渲染器(weex-vue-render)。我当时是一边写项目,一边写 Web 渲染器,一边适配 Vue 在 Native 上运行有没有问题,最后才补的文档。。。

我是一个前端,略懂一些 Andorid 和 iOS ,可能客户端上的代码质量并不高,如果大家看哪里不顺眼,欢迎给我提 PR ~

阅读官方文档

  • 《Weex 快速上手》
  • 《Vue.js 介绍》
  • 《Weex 和 Web 平台的差异》
  • 《使用 Vue 开发 Weex 页面》
  • 《Vue.js 在 Weex 和 Web 中的差异》
  • 《在 Weex 中使用 Vuex 和 vue-router》

系列文章目录

因为这跨框架甚至跨端的技术,放在谁那里都不合适,所以官方文档都写得中立一些;这个系列的文章会比官方文档更详细一些,而且会以 weex-hackernews 为实例讲代码,讲细节。

每个人对 Weex 和 Vue 的了解程度不一样,对原生开发和前端开发的了解程度也不一样,所以没有最佳学习顺序,建议【看文档】【看代码】【写例子】交叉循环。

  • 0 《项目介绍和文章目录》
  • 1 《配置开发环境》
  • 2 《编写独立页面》
  • 3 《使用 Vue 框架的特性》
  • 4 《使用 Weex 平台的功能》
  • 5 《使用 Vuex》
  • 6 《使用 vue-router》
  • 7 《完整项目目录详解》

http://www.niftyadmin.cn/n/4115127.html

相关文章

LeetCode - 15. 3Sum

15. 3Sum Problems Link ---------------------------------------------------------------------------- Mean: 给定一个数列,找出这个数列中和为0的三元组. analyse: 时间复杂度:O(n^2) 思路很简单,注意一下去重的方法. Time complex…

easyui radio 类型的取值和赋值方法

1.HTML 文件 <tr id"client_check1"><th>委托人证件类型:</th><td><input id"certType" type"radio" name"certType"class"easyui-validatebox" checked"checked" value"身份…

happyhbase 基本操作和增量操作

2019独角兽企业重金招聘Python工程师标准>>> 创建连接&#xff08;Connection&#xff09; 非自动连接&#xff1a; connection happybase.Connection(somehost, autoconnectFalse) connection.open() 自动连接&#xff1a; connection happybase.Connection(some…

org.hibernate.AssertionFailure: null id 错误

对象属性有Blob类型&#xff1b; 而Blob需在输入流中读取&#xff1b; InputStream in new FileInputStream(url.getFile()); Blob bookPic lobHelper.createBlob(in, in.available()); book.setBookPic(bookPic); book2.setBookPic(bookPic);如对象bookPic第二次使用的时候以…

【JSON】 json对象与字符串的转化,json介绍

1.JS中json对象与字符串的转化 JSON.parse()和JSON.stringify() //JSON字符串:var str1 { "name": "cxh", "sex": "man" };//JSON对象:var str2 {"name": "cxh","sex": "man"};//JSON字符…

白浅教你CSS的垂直居中方法

placeholder: 我是一个不正经的属性.----题记 说道页面垂直居中, 在大家的思维中, 很快就能有若干个(常用/用过)解决方法, 但是在很多面试题中, 都会出现这么一个题, 写出多个垂直居中的方法, (其实掌握比较通用的, 兼容性好的方法就行了, 其他的就当看着玩, 有遗漏的欢迎补充 …

Android SDK 更新镜像服务器

搞个新的电脑&#xff0c;新环境下&#xff0c;SDK总是更新不成功。找了一下&#xff0c;发现有国内的镜像&#xff0c;记录保存一下。 Android Tools Android SDK在线更新镜像服务器 中国科学院开源协会镜像站地址: IPV4/IPV6: http://mirrors.opencas.cn 端口&…

【CSS】神奇的BFC

一、BFC是什么&#xff1f; 在解释 BFC 是什么之前&#xff0c;需要先介绍 Box、Formatting Context的概念。 Box: CSS布局的基本单位 Box盒子类别&#xff1a; block-level box&#xff1a;display 属性为 block, list-item, table 的元素&#xff0c;并且参与 block fomat…