开始你的uniapp之旅:写出你的第一个微信小程序

uniapp 是什么 ? 为何它能够写微信小程序 ?

为何uniapp能够 ?

uni-app 是一个使用 Vue.js 开发全部前端应用的框架，开发者编写一套代码，可发布到iOS、Android、H五、以及各类小程序（微信/支付宝/百度/头条/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编译的小程序由于自带 Vue Vuex 等缘由 , 会稍稍多几十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 演示模板 建立-> 导航栏中间:运行 -> 运行到小程序 , 你就能够啦~

接下来的学习能够到官方的文档去学习哦~

官方的文档