uni-app 介绍

uni-app 介绍

1、什么是uni-app?

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

即使不跨端，uni-app同时也是更好的小程序开发框架。

2、uni-app适用于哪些人员？

所有的前端开发人员，尤其是app和小程序开发人员。

有vue和微信小程序基础的人员，能快速上手uni-app。

不推荐无前端基础的直接学。

3、uni-app的开发工具

毫无疑问，首选uni-app官方推荐工具：https://www.dcloud.io/hbuilderx.html

如果需要开发微信小程序也要下载微信开发者工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

4、uni-app首选学习通道

毋庸置疑，首选uni-app官方文档：https://uniapp.dcloud.io

如何学习：https://uniapp.dcloud.io/resource

uni-app功能框架

二.新建项目

1.点击文件>新建>项目

2.选择uni-app项目

三.文件目录介绍

pages 页面文件夹

static静态资源目录

App.vue vue根文件

main.js vue入口文件

manifest.json打包配置文件

pages.json页面配置文件

uni.scss scss全局变量

配置文件介绍

pages.json文件中

globalStyle:全局样式配置

pages:所有页面相关配置

page>style单独页面配置,和globalStyle里面的属性一样

更多api配置相关查看官方文档介绍：https://uniapp.dcloud.io/collocation/pages

manifest.json文件中

基础配置

应用标识：应用唯一标识,需要登录hbuilderx账号进行获取

H5配置

启用https协议：默认勾选，只允许请求https的域名，如果项目中有请求http域名接口需要把这个勾选去掉。

微信小程序配置

配置AppID

四.运行调试

1.点击左上方小三角进行选择运行环境，选择微信开发者工具

如果是第一次调试需要配置一下微信开发者工具安装目录

配置好以后再运行到微信开发者工具，这时候可能会报一个错误，需要把微信开发者工具的服务端口打开就好了。

然后就可以在微信开发者中看到了

五.开发相关

组件

uni-app中的组件其实就是微信小程序的组件，然后uni-app自己的扩展组件整合

具体组件见官方组件文档：https://uniapp.dcloud.io/component/README

API

uni-app的Api大部分都是以ui开头，其实也是微信小程序的那些Api，大部分都是把前面的wx换成了uni。

具体API详细见官方API文档：https://uniapp.dcloud.io/api/README

六．判断平台

<view class="text-area">

    <text class="title">{{title}}</text>

    #<!-- #ifdef APP-PLUS -->

     在App里面才会展示这里内容

    <!-- #endif -->

    <!-- #ifdef MP-WEIXIN -->

     在微信小程序中会显示这里内容

    <!-- #endif -->

</view>

七．生命周期

生命周期具体相关查看官方文档：https://uniapp.dcloud.io/use?id=%E7%94%9F%E5%91%BD%E5%91%A8%E6%9C%9F

八.打包发行

在打包之前需要在manifest.json中配置好对应的打包信息

必须配置基础配置中的应用标识，不然不能打包

然后点击菜单栏中的发行，可以选择云打包或者本地打包，云打包是打包后需要下载到本地，本地打包是直接打包到本地打包

1.点击云打包，选择使用公共测试证书。

打包可能会慢一些，耐心等待一下，打包成功后会有成功提示信息，然后稍等在控制台就会出现打包后的下载地址

九．下载到电脑以后传到手机直接安装即可