uniapp评价应用_uniapp学习笔记（一）uniapp简介

uni-app入门uni, 从这个单词的意思&＃xff0c;就能看的出来&＃xff0c;Dcoud社区的野心

这个试图统治整个前端界的技术&＃xff0c;到底有没有那么好呢&＃xff1f;

科普Dcloud是干嘛的&＃xff1f;

著名的国产开源开发工具&＃xff0c;Hbuilder&＃xff0c;就是他们家的产品之一他们家另外一款重量级产品&＃xff0c;就是H5&＃43;App技术

简单的说&＃xff0c;一个前端&＃xff0c;可以利用他们提供的开发环境&＃xff0c;以及【MUI】 框架

轻轻松松的就可以用JS写出 安卓 和 IOS应用

(好吧&＃xff0c;其实也没那么轻松&＃xff0c;学习成本还是挺高的)

尽管现在已经有了 react-native 和Flutter这样的 优秀的技术

但个人认为H5&＃43;技术&＃xff0c;更加接近手机端原生规范。H5&＃43;并没能满足他们的野心&＃xff0c;于是又推出了uni-app

这是一个多端的开发框架。简单的说&＃xff1a;

你写出一套代码&＃xff0c;然后可以根据需要

打包出 web应用、安卓app、IOSapp、微信小程序、支付宝小程序、头条小程序、百度小程序......

赶紧去官网看一下介绍&＃xff0c;感受一下它牛逼的气息。关于uni-app的由来

建议大家去看一下这个链接

https://uniapp.dcloud.io/history

关于小程序&＃xff0c;微信并不是鼻祖&＃xff0c;Dcloud才是

学习成本高吗如果你熟悉微信小程序开发

如果你熟悉vue框架

那么学习成本 ~~ 基本等于0

因为它采用了小程序的项目架构&＃xff0c;同时结合vue框架技术来编写

参考这个链接即可 (mpvue)

http://mpvue.com/

注意事项为了实现多端兼容&＃xff0c;综合考虑编译速度、运行性能等因素&＃xff0c;uni-app 约定了如下开发规范&＃xff1a;页面文件遵循 Vue 单文件组件 (SFC)&＃xff0c;

也就是必须单文件组件的形式编写页面组件

标签靠近小程序规范&＃xff0c;详见uni-app 文档

也就是用小程序的组件写页面标签

接口能力(JS API)靠近微信小程序规范&＃xff0c;详见文档

例如 uni.request(...)

数据绑定及事件处理同 Vue.js 规范&＃xff0c;同时补充了App及页面的生命周期

例如 onLoad、onShow、onHide等

为兼容多端运行&＃xff0c;建议使用flex布局进行开发

一个uni-app工程&＃xff0c;默认包含如下目录及文件&＃xff1a;

uni-app 在发布到H5时支持所有vue的语法&＃xff1b;

发布到App和小程序时&＃xff0c;由于平台限制&＃xff0c;无法实现全部vue语法&＃xff0c;但uni-app仍是是对vue语法支持度最高的跨端框架。

相比Web平台&＃xff0c; Vue.js 在 uni-app 中使用差异主要集中在两个方面&＃xff1a;新增&＃xff1a;uni-app除了支持Vue实例的生命周期&＃xff0c;还支持应用启动、页面显示等生命周期

受限&＃xff1a;相比web平台&＃xff0c;在小程序和App端部分功能受限&＃xff0c;具体参见文档。

https://uniapp.dcloud.io/use

uni-app App 端内置 HTML5&＃43; 引擎我们用 js 可以直接调用丰富的手机端原生能力。

使用H5&＃43; API的时候&＃xff0c;需要注意一些内容&＃xff0c;详见文档

https://uniapp.dcloud.io/use-html5plus

作为一个跨了这么多端的集大成者&＃xff0c;没有点坑是不可能的详情参见文档&＃xff0c;实际的坑&＃xff0c;尤其是app端&＃xff0c;其实远不止这么多

不过uni-app发展迅速&＃xff0c;相信这些问题很快会得到解决

https://uniapp.dcloud.io/matter

动手尝试一下

1、下载hubuildX工具

2、在点击工具栏里的文件 -> 新建 -> 项目&＃xff1a;

3、选择uni-app&＃xff0c;输入工程名&＃xff0c;如&＃xff1a;hello-uniapp&＃xff0c;点击创建&＃xff0c;即可成功创建 uni-app。点击模板里的 Hello uni-app 即可体验官方示例。

4、运行方式一&＃xff0c;浏览器运行&＃xff1a;进入hello-uniapp项目&＃xff0c;点击工具栏的运行 -> 运行到浏览器 -> 选择浏览器&＃xff0c;即可在浏览器里面体验uni-app 的 H5 版。

5、运行方式二&＃xff0c;真机运行&＃xff1a;连接手机&＃xff0c;开启USB调试&＃xff0c;进入hello-uniapp项目&＃xff0c;点击工具栏的运行 -> 真机运行 -> 选择运行的设备&＃xff0c;即可在该设备里面体验uni-app。

6、运行方式三&＃xff0c;在微信开发者工具里运行&＃xff1a;进入hello-uniapp项目&＃xff0c;点击工具栏的运行 -> 运行到小程序模拟器 -> 微信开发者工具&＃xff0c;即可在微信开发者工具里面体验uni-app。

7、在HBuilderX工具栏&＃xff0c;点击发行&＃xff0c;选择原生app-云端打包&＃xff0c;如下图&＃xff1a;

8、发布为H5网页应用在 manifest.json 的可视化界面&＃xff0c;进行如下配置(发行在网站根目录可不配置应用基本路径)&＃xff0c;此时发行网站路径是 http://www.xxx.com/h5&＃xff0c;如&＃xff1a;https://uniapp.dcloud.io/h5。在HBuilderX工具栏&＃xff0c;点击发行&＃xff0c;选择网站-H5手机版&＃xff0c;如下图&＃xff0c;点击即可生成 H5 的相关资源文件&＃xff0c;保存于 unpackage 目录。

这里是一些官方示例和第三方案例

https://uniapp.dcloud.io/case千锋HTML5学院&＃xff1a;微信小程序学习笔记(五)-- 小程序UI组件库​zhuanlan.zhihu.com千锋HTML5学院&＃xff1a;uni-app学习笔记(二)-- uni-app详解​zhuanlan.zhihu.com