uniapp

一、公司背景

DCloud从2013年开始做HBuilder，目前900万前端开发者在使用DCloud的开发工具，HBuilder百度指数超过sublime、webstorm等全球知名工具。是中国唯一一家成功的开发工具厂商。

DCloud公司产品

• HBuilderX 开发工具
• uniapp 开发框架
• uniCloud 云服务器
• uniMPsdk SDK

二、uniapp简介

uni-app是一个使用 Vue.js开发所有前端应用的框架。开发者编写一套代码，即可发布到iOS、Android、H5、以及各种小程序（微信/支付宝/百度/头条/QQ/钉钉/淘宝）、快应用等多个平台。
简单来说，就是一套代码，多端运行

优势

• 永久免费（它的盈利方式：流量变现和云服务）
• 跨平台开发。开发效率高
• 学习成本低(vue+小程序)
• 在保持规范、跨平台的前提下，还可以实现每个平台特有的平台能力
• 开发的小程序性能比大多原生小程序还要好相关链接

详情

三、uniapp使用

快速上手

1、安装HBuilderX

下载地址

注意：将解压之后的文件夹，存放到纯英文的目录中（且不能包含括号等特殊字符）

2、安装相关插件

工具 -> 插件安装 -> 安装新插件 -> 直接安装或前往插件市场

3、项目搭建

1. 导入项目：文件 -> 导入
2. 创建新项目：文件 -> 新建 -> 项目 -> 填写项目基本信息 -> 创建成功
3. 下载模板：插件市场 -> uni-app前端模板 -> 下载

4、项目运行

1）浏览器运行

运行 -> 运行到浏览器 -> 选择浏览器
运行 -> 运行到内置浏览器

2）小程序运行

1. 填写自己的微信小程序的 AppID：

   

2. 在 HBuilderX 中，配置“微信开发者工具”的安装路径：

   

3. 在微信开发者工具中，通过 设置 -> 安全设置 面板，开启“微信开发者工具”的服务端口：

   

4. 在 HBuilderX 中，点击菜单栏中的 运行 -> 运行到小程序模拟器 -> 微信开发者工具，将当前 uni-app 项目编译之后，自动运行到微信开发者工具中，从而方便查看项目效果与调试：

   

5. 初次运行成功之后的项目效果：

   

3）app真机运行

​确保你的手机与电脑是在同一个局域网下面

1. 手机设置，找到开发者模式并开启
2. usb端口连接手机 -> 开启USB调试 -> 允许调试
3. 运行 -> 运行到手机或模拟器 -> 运行到xxx App基座

4）IOS模拟器运行

1. Xcode下载
2. 定义版本进行模拟器运行

5、项目发布

官网详情

1）发布为原生APP

发行 -> 原生app-云打包 -> 使用公共测试证书 -> 打包

2）发布为H5

发行 -> 网站H5手机版

3）发布为小程序

1. 申请小程序AppId教程
2. 发行 -> 小程序-微信（其他参考官网）

6、语法规范

详情
简单来说，就是vue语法 + 小程序api

• 组件/标签的不同，div改成view, span改成text, img改成image
• 新增一些内置组件，如icon、scroll-view等
• api不同 ajax改成uni.request、localStorage改成uni.storage
• 其他