用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 查看内容

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

Rolan 2019-11-18 00:07

uni-app是一个使用Vue.js开发所有前端应用的框架,开发者编写一套代码,可发布到iOS、Android、H5、以及各种小程序(微信/支付宝/百度/头条/QQ/钉钉)等多个平台。引用官方介绍 , 为什么它可以做到这点 ?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有几大优势

  • 微信的所有api都可以用
  • Vue 的几乎所有语法的支持
  • 内置 Vuex 和 Vue-router
  • 可以用浏览器调试

其他类似于css动画 , vue单文件的优势就不一一说了 .  加粗的每一点都值得你去使用 uniapp .

第一点:用 Vue 来写程序 , 你的 Vue 水平和了解程度也会上升不少 , 将来写网页或者其他东西时候 , 用 Vue 也是胸有成竹 .

第二点: 微信小程序没有内置 类似 Vuex 的功能 , 导致跨页面 , 跨多级组件的共享数据会非常麻烦 .

第三点: 如果你调试过微信小程序就知道 , 每次修改完后编译是多慢 ,展开 dom 是多么麻烦 , 查看数据只能一个 console.log 或者 debugger 来调试 . 但是用 chrome来调试就完全不同了 , 它编译很快 , 可以用 Vue 官方插件 dev-tool 来 查看 v-node 树 , 数据状态和 Vuex , 这个真的是在开发体验和效率上是**降维打击 . **

版本较新的浏览器对 css 的支持是一个超集 , 在小程序中的能使用的样式在 chrome 完全兼容, 调试效率也会高一些 , 不过自定义组件要注意一下 , 它的宽高只能由内部撑起 .

uniapp 来写小程序有没有缺点呢?

有 .

  1. 微信限制小程序包的大小为 2mb , 但是 uniapp 编译的小程序因为自带 Vue Vuex 等原因 , 会稍稍多几十kb

不过不是特别大的问题 . 2. 首次渲染页面速度不如小程序 . 毕竟是要多一层 Vue 的传递所以, 首次加载不如原生 .

但是后续的数值更新 , 特别是大量数据的更新 , 因为 Vue 中有 diff 算法使渲染的效率大大提升 .

开启 uniapp 的学习

第一步:首先下载安装 hbuiderx(标准版) 和 微信开发者工具

第二步: hbuilderx 安装完后

安装 uniapp 插件 , 其他的插件 比如 scss 编译 等等也可以安装一下 , 全装也没问题哈

第三步:微信开发者工具和 uniapp 都安装完后打开微信开发者工具 , 登录账号等等操作

设置服务端口 , 先打开你的微信开发者工具 -> 上栏 -> 设置 -> 安全设置 -> 服务端口 -> 开启

接着 hbuilderx导航栏 工具 -> 设置 -> 源码视图 这里可以看到右边有设置的json 找到最后一行-> "weApp.devTools.path":"" 这里填上微信开发者工具的绝对路径 比如我的 : "weApp.devTools.path":"E:/微信web开发者工具"

第四步:两个都设置完后 , hbuilderx 导航栏左上角:文件 -> 新建 -> 项目 -> 选择 uniapp ->选择模板 : Hello uniapp 演示模板 创建-> 导航栏中间:运行 -> 运行到小程序 , 你就可以啦~

接下来的学习可以到官方的文档去学习哦~

官方的文档

鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏
原作者: 前端小星星o一闪一闪亮晶晶 来自: 掘金