uni-app入门文档

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

二. 新建项目

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.点击左上方小三角进行选择运行环境，选择微信开发者工具

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

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

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

五. 开发相关

组件

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.点击云打包，选择使用公共测试证书。

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

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