uniapp 是什么 ? 为什么它可以写微信小程序 ?
为什么uniapp可以 ?
uni-app是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉）等多个平台。
引用官方介绍 , 为什么它可以做到这点 ? uniapp内置了 Vue.js 如果你熟悉 Vue.js , 就知道 Vue 的核心只是完成的只是在数据变更后 , 自动帮你把用到这个数据的 " 对象 " 中的数据进行更新 , 在浏览器器上它对应着浏览器dom , 在不同的平台上它可以对应不同的东西 , 这就赋予了 Vue.js 的跨平台能力
刚刚说的"对象"并不是
Javascript中 的Object, 理解成 面向对象编程中的对象更为合适 , 无论它是虚拟的还是现实中的东西 , 它都可以被描述为对象 . 你可以想象吗, 有人已经把Vue移植到了带有显示屏的底层硬件上 , 每当Vue代码中的数据更新时 , 显示屏上的数据也会被通知更新 .
你知道这点就行了 : uniapp 编译时 , 把Vue template中的基础组件对应不同平台上的基础组件 ,完成了跨平台的工作 .
uniapp 跨平台是不是很多坑?
你一定会怀疑 unipp 的能力 . 是的 , 必然是有坑的 . 但是坑的层面不是数据层面 , Javascript 引擎在不同平台上的解析都是符合规范的 ,一般是 css 样式 或者 api层面的 , 每个平台对css和api 的支持不同 ,这个必须你自己去做兼容 , 再好的编译也不可能完全消除原生上带来的差距 . 因此 , 它的坑并不是因为自身的原因 , 而是你对这个平台本身不是很了解 , 写出了不兼容的代码 .
如果你不考虑兼容的话 , 我可以说它写小程序是没有坑的 . 你最后写起来会感觉与小程序基本一致 , 甚至更爽 .
为什么我一定推荐你用uniapp写微信小程序?
微信小程序用它的语法写不好吗 ? 为什么一定要用uniapp 呢 .
uniapp有几大优势
- 可以用浏览器进行调试
Vue的几乎所有语法的支持- 内置
Vuex和Vue-router - 微信的所有api都可以用
其他类似于css动画 , vue单文件的优势就不一一说了 .
加粗的每一点都值得你去使用 uniapp .
第一点: 如果你调试过微信小程序就知道, 每次修改完后编译是多慢 ,展开dom是多么麻烦 , 查看数据只能一个 console.log或者 debugger 来调试 . 但是用 chrome来调试就完全不同了 , 它编译很快 , 可以用 Vue 官方插件 dev-tool 来 查看 v-node 树 , 数据状态和 Vuex , 这个真的是在开发体验和效率上是降维打击. 现在 , 虽然我只开发微信小程序 , 但是我一般也不打开那恶心的开发者工具 (疯狂吐槽微信开发者工具,每次都把我内存撑爆),只用chrome来调试样式和数据,只会在调试特定api和提交小程序代码前检查一下样式是否正确
第二点:用Vue来写程序 , 你的 Vue 水平和了解程度也会上升不少 , 将来写网页或者其他东西时候 , 用Vue也是胸有成竹 .
第三点: 微信小程序没有内置 类似较为完善的 Vuex的功能 , 导致跨页面 , 跨多级组件的共享数据会非常麻烦.
版本较新的浏览器对 css 的支持是一个超集 , 在小程序中的能使用的样式在 chrome 完全兼容, 调试效率也会高一些 , 不过自定义组件要注意一下 , 它的宽高只能由内部撑起 .
uniapp来写小程序有没有缺点呢?
有 .
- 微信限制小程序包的大小为
2mb, 但是uniapp编译的小程序因为自带VueVuex等原因 , 会稍稍多几十kb(具体不知道多少 , 发行版不会特别多) 不过不是特别大的问题 . - 首次渲染页面速度不如小程序 . 毕竟是要多一层
Vue的传递所以, 首次加载不如原生 . 但是后续的数值更新 , 特别是大量数据的更新 , 因为Vue中有diff算法使渲染的效率大大提升 . - 虽然我没真正写过原生微信小程序 , 但是我看过不少代码 , 发现微信小程序在模板上的写法是有许多创新的 , 比如微信小程序可以动态绑定事件 , 而vue的模板只是
@+ 事件名无法 ,动态绑定 . 还有微信小程序的字符串写法类似于模板字符串 , 但是uniapp中vue是不支持在模板上写es6的模板字符串的写法 . 小程序有自定义事件冒泡的概念 , vue中是无法冒泡事件的等等一些细微的缺陷 .
但瑕不掩瑜 , 细微的缺陷完全无法掩饰uniapp在开发效率上的优点 .
开启 uniapp 的学习
第一步:首先下载安装 hbuiderx(标准版)和 微信开发者工具
第二步:hbuilderx安装完后
安装uniapp插件 , 其他的插件 比如 scss 编译 等等也可以安装一下 , 全装也没问题哈
第三步:微信开发者工具和uniapp都安装完后打开微信开发者工具 , 登录账号等等操作
设置服务端口 , 先打开你的微信开发者工具 -> 上栏 -> 设置 -> 安全设置 -> 服务端口 -> 开启
接着 hbuilderx导航栏 工具 -> 设置 -> 源码视图 这里可以看到右边有设置的json 找到最后一行->"weApp.devTools.path":"" 这里填上微信开发者工具的绝对路径 比如我的 : "weApp.devTools.path":"E:/微信web开发者工具"
第四步:两个都设置完后 , hbuilderx导航栏左上角:文件 -> 新建 -> 项目 -> 选择uniapp ->选择模板 : Hello uniapp 演示模板 创建-> 导航栏中间:运行 -> 运行到小程序 , 你就可以啦~
接下来的学习可以到官方的文档去学习哦~
