uniapp入门 开发准备工作(0基础学习)

uni-app介绍

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

官网：https://uniapp.dcloud.io

两种搭建uni-app项目的方式

两种搭建项目的方式

1. 通过 HBuilderX 可视化界面

可视化的方式比较简单，HBuilderX内置相关环境，开箱即用，无需配置nodejs。

开始之前，开发者需先下载安装如下工具：HBuilderX：官方IDE下载地址

1. 通过vue-cli命令行

也可以使用 cli 脚手架，可以通过 vue-cli 创建 uni-app 项目。

使用vue-cli创建uni-app项目

目标

使用vue-cli创建uni-app项目

步骤

1. 全局安装vue-cli脚手架版本4（如果已经安装，可以跳过， ）。npm install -g @vue/cli@4
   2023-0619测试，如果vue-cli的版本是5，会导致安装失败。

# 查看版本, 注意-V是大写的
vue -V 
# 安装包
npm install -g @vue/cli@4

1. 执行cli ，用指定模板来创建项目

# vue create 是创建项目
# vue create -p dcloudio/uni-preset-vue 是根据指定的模板dcloudio/uni-preset-vue 来创建
# heima-ugo 是项目名称
vue create -p dcloudio/uni-preset-vue heima-ugo

1. 选择默认模版

注意：因为网速原因，下载可能会失败；关掉重新执行即可

1. 运行项目

npm run dev:%PLATFORM%

%PLATFORM% 可取值如下：

值	平台
h5	H5
mp-alipay	支付宝小程序
mp-baidu	百度小程序
mp-weixin	微信小程序
mp-toutiao	字节跳动小程序
mp-qq	qq 小程序

运行小程序

步骤：

1. 执行小程序端开发命令

npm run dev:mp-weixin

说明：运行成功之后，会自动在项目根目录下，生成小程序项目代码，如图：

 在dist/dev目录下会有一个mp-weixin的文件夹

这就是微信小程序的代码！

1. 打开小程序开发者工具，导入上一步生成的小程序项目代码

注意：填写自己的appid

1. 运行效果

总结

1. 运行：npm run dev:mp-weixin开启小程序开发服务器
2. 看效果：导入项目下dist\dev\mp-weixin目录到小程序开发者工具
3. 在项目src目录修改代码后，会自动重新打包小程序代码，实时查看最新效果

Hbuilderx创建并运行uniapp项目

创建

运行

hbuilderX会主动去打开微信开发者工具，并启动项目。

如果是第一次，需要设置微信开发者工具的安装地址。

如果不能主动开启微信开发者工具，可以在微信开发者工具中设置下

然后重试

uni-app目录结构和重点文件

目录结构

一个uni-app工程，默认包含如下目录及文件：

┌─components           # uni-app组件目录
│  └─comp-a.vue        # 可复用的a组件
├─pages                # 业务页面文件存放的目录
│  ├─index
│  │  └─index.vue      # index页面
├─static               # 存放应用引用静态资源（如图片、视频等）的目录，注意：静态资源只能存放于此
├─App.vue              # 应用配置，用来配置App全局样式以及监听 应用生命周期
├─main.js              # Vue初始化入口文件
├─manifest.json        # 配置应用名称、appid、logo、版本等打包信息
└─pages.json           # 配置页面路由、导航条、选项卡等页面类信息

App.vue

它没有template，可以写公共样式，

小程序中最外层的容器不是body，是page

main.js

入口文件，注意条件编译。

pages.json

页面配置

manifest.json

配置文件

uniapp开发规范

uni-app代码编写，基本语言包括js、vue、css。以及ts、scss等css预编译器。

在app端，还支持原生渲染的nvue，以及可以编译为kotlin和swift的uts。

DCloud还提供了使用js编写服务器代码的uniCloud云引擎。所以只需掌握js，你可以开发web、Android、iOS、各家小程序以及服务器等全栈应用。

为了实现多端兼容，综合考虑编译速度、运行性能等因素，uni-app 约定了如下开发规范：

• 页面文件遵循 Vue 单文件组件 (SFC) 规范，即每个页面是一个.vue文件
• 组件标签靠近小程序规范，详见uni-app 组件规范
• 接口能力（JS API）靠近小程序规范，但需将前缀 wx、my 等替换为 uni，详见uni-app接口规范
• 数据绑定及事件处理同 Vue.js 规范，同时补充了应用生命周期及页面的生命周期
• 如需兼容app-nvue平台，建议使用flex布局进行开发

开发方式：vue + 原生小程序部分用法

uniapp生命周期

uni-app框架的生命周期结合了vue和微信小程序的生命周期，具体如下：

应用级别：使用小程序的规范（App.vue）  

onLanch

uni-app官网

页面级别: 使用小程序的规范

onShow, onLoad

页面简介 | uni-app官网

组件级别：与vue的组件相同

页面简介 | uni-app官网

created, destoryed

uniappapi

uni-app官网

原则1：小程序中能用的，改个前缀就可以用。

wx.request → uni.request

原则2：uni的api基本上都支持promise

小程序的api是部分支持promise，还有些不支持的。

wx.showToast(Object object) | 微信开放文档

RequestTask | 微信开放文档

uni.request方法的使用

文档：https://uniapp.dcloud.io/api/request/request?id=request

onLoad() {
  uni.request({
    url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"
  }).then(res => {
    console.log("结果：", res);
  })
}

async onLoad() {
  const res = await uni.request({
    url: "https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"
  })
  console.log(res)
}

注意：uni.request是异步的方法。如果不传入 success、fail、complete 等 callback 参数，将以 Promise 返回数据

uni.getStorageSync()

案例： 点击按钮：保存token，页面打开时：读取token

uni.showLoading()

uni.hideLoading()

uniapp中的组件-内置组件

类似于小程序的组件

uni-app官网

例如:

swiper

uniapp中的组件-自定义组件

使用vue的规范，通过4步： 定义，引入，注册，使用

uniapp中的组件-easycom模式

默认开启的easycom

定义，引入，注册，使用

固定格式： components/组件名/组件名.vue

组件使用的入门教程 | uni-app官网

直接使用组件: ugo-search

自定义的easycom

如果你的目录结构不符合easycom的要求，则需要自己定义一下

1. 自定义esycom

   

1. 正常使用组件

<my-com/>

uniapp第三方组件库之uview

uniapp是跨端的，那就要求它对应的组件库也要是跨端的，市面上用的比较多的uview

安装

安装 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架

配置步骤

#1. 引入uView主JS库

在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from '@/uni_modules/uview-ui'
Vue.use(uView)

#2. 在引入uView的全局SCSS主题文件

在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import '@/uni_modules/uview-ui/theme.scss';

#3. 引入uView基础样式

注意！

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "@/uni_modules/uview-ui/index.scss";
</style>

#4. 开始使用组件

去官网上CV使用