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>