uni-app的使用

帮助

uni-app官网：DCloud - HBuilder、HBuilderX、uni-app、uniapp、5+、5plus、mui、wap2app、流应用、HTML5、小程序开发、跨平台App、多端框架

阿里巴巴字体图标官网：iconfont-阿里巴巴矢量图标库

菜鸟教程:菜鸟教程 - 学的不仅是技术，更是梦想！

Vue官网：https://cn.vuejs.org/v2/guide/

微信小程序官网：微信开放文档

目录

一，HBuilderX

1.1  .安装 HBuilderX

 1.2  创建uni-app应用

1.3  运行

1.3.1  运行在浏览器中 

 1.3.2  运行在内置浏览器中

1.3.3  运行在微信小程序中

二 ，打包

2.1 打包原生App

（1） 在HX中 单击 发行 --> 原生App-云打包 

(2) 登录HBuilder 账号 （实名认证才可以使用）

 （3）查看打包状态

 2.2  发布原生App

(1) 内测发布

（2 ）线上发布平台

三 , uni-app 的 内容

3.1 uni-app的生命周期

 3.2uni-app的路由

 3.3 uni-app 常用组件

3.4 uni-app 的 API

---

一，HBuilderX

1.1  .安装 HBuilderX

HBuilderX官网下载地址：HBuilderX-高效极客技巧

 1.2  创建uni-app应用

菜单栏 “文件” --> "新建" --> "项目“

如图： 

然后选择模板并创建

 创建成功后 uni-app项目结构如下

1. pages 业务页面文件存放的目录
2. static 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
3. App.vue 应用配置，用来配置App全局样式以及监听 应用生命周期
4. main.js Vue初始化入口文件
5. manifest.json 配置应用名称、appid、logo、版本等打包信息
6. pages.json 配置页面路由、导航条、选项卡等页面类信息

1.3  运行

1.3.1  运行在浏览器中 

单击菜单栏 ”运行“ -->  "运行到浏览器" --> "配置web浏览器" 

 然后在配置中选择浏览器 和浏览器路径

最后就可以 单击菜单栏 ”运行“ -->  "运行到浏览器" --> "选择自己要的浏览器中" 

 1.3.2  运行在内置浏览器中

 单击 菜单栏 ”工具“ --> ”插件安装“ 

然后就可以在HX中运行内置浏览器了

1.3.3  运行在微信小程序中

（1）安装微信开发者工具，下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档

注意：最新版本，不支持win7系统 选择适合的版本安装

（2）安装完成 如1.3.1中 配置微信开发者工具 路径 

 （3） 打开微信开发者工具 

右上角设置按钮 安全--> "服务端口" 打开

 （4 ）如果这样不行，那就需要输入微信小程序AppID

在 manifest.json 文件中，这需要在微信开发者工具中申请

路径：微信开放文档

 

然后这些就是Hx中基础的使用方法了

二 ，打包

打包是 项目 最后关键的一步

2.1 打包原生App

（1） 在HX中 单击 发行 --> 原生App-云打包 

(2) 登录HBuilder 账号 （实名认证才可以使用）

配置打包选项 然后就可以打包了

 （3）查看打包状态

 

 2.2  发布原生App

(1) 内测发布

内测发布平台有 

蒲公英：蒲公英-免费且不限次数的App内测托管平台|iOS|Android安卓|内测托管|内测分发|应用内测

 http://fir.im   等

（2 ）线上发布平台

豌豆荚： 豌豆荚手机精灵 豌豆荚手机助手-海量安卓APP应用与游戏免费下载

App Store : App Store - Apple (中国大陆)

 手机应用等在线发布平台等

三 , uni-app 的 内容

3.1 uni-app的生命周期

 uni-app的生命周期是以小程序的生命周期为基础实现的，分为应用的生命周期、页面生命周期和组件的生命周期，其中组件生命周期就是Vue的生命周期。

参考文档：uni-app官网

 3.2uni-app的路由

uni-app页面路由由框架统一管理，开发者需要在pages.json文件中配置每个页面路由的路径。uni-app有两种页面路由的跳转方式，即使用navigator组件跳转和API跳转。

组件跳转navigator的官方参考文档：

navigator | uni-app官网

 3.3 uni-app 常用组件

需要重点掌握的几个组件：

组件名称	说明
view	类似于h5里面的div标签，用于包裹各种元素内容，是页面最常用的标签
scroll-view	(可视滚动区域)用于区域滚动，使用非常广泛，如内容溢出时滚动显示内容、横向滚动、纵向滚动、支持下拉刷新、上拉加载等
swiper	滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图
text	文本组件，用于包裹文本内容；text组件不支持嵌套其它组件或自定义组件，否则会引发在不同平台的渲染差异
rich-text	富文本组件，可以解析HTML标签，通常用于显示商品介绍、文章内容等应用场景。
button	uni-app的button组件的功能性非常强大，可以实现获取用户信息、获取手机号码、分享等功能。
。。。。	其他组件使用到时可自行查看组件的官方文档即可，这里不做过多描述

uni-app的 js API 由标准 ECMAScript 的 js API 和 uni 扩展 API 这两部分组成。

使用uni.request发起接口数据请求的实际案例：