目录
1.开发入门
2.uniapp开发进阶
3.unicloud云开发平台
4.uniapp开发实战
一、开发入门
-
1.1 uni-app的简介与环境搭建
-
1.1.1 uni-app简介
-
uni-app概述：uni-app 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可发布到iOS、Android、Web（响应式）、以及各种小程序（微信/支付宝/百度/头条/飞书/QQ/快手/钉钉/淘宝）、快应用等多个平台。
uni-app由来：是为了解决跨平台开发的问题。在移动应用开发中，不同平台（如iOS、Android）有不同的开发语言和技术栈，这导致开发者需要针对不同平台开发多套代码，增加了开发和维护的成本。DCloud公司正是看到了这些问题，因此决心打造一款终极的跨平台解决方案，此时，uni-app就应运而生，Uni-app的出现使得开发者可以使用同一套代码，快速地部署到多个平台，提高了开发效率和降低了开发成本。
uni-app特点：
1、跨更多平台
2、一套代码，多平台运行
3、运行体验好，性能高
4、开发生态、周边生态丰富（组件丰富）
5、通用技术栈，学习/开发成本低，
-
1.1.2 uni-app环境搭建
-
环境搭建步骤：
一、下载HBuilderX，官网下载地址：HBuilderX-高效极客技巧
选择对应的版本下载即可：
二、下载安装微信开发者工具，下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档
选择合适的版本下载，一步步默认安装即可。安装完成之后，要使用uni-app开发，需要打开微信小程序开发者工具的服务端口，进行微信小程序开发者工具，选择"设置"-->"安全设置"命令，将"服务端口"改完打开状态，如图所示：
三、打开HBuilderX工具，选择【工具】-->【设置】-->【运行设置】，在微信开发者工具路径输入框中填入微信开发者工具的安装路径。
微信开发者工具安装路径可通过此方式快速查找：
-
1.1.3 uni-app项目的创建和运行
-
通过HBuilderX可视化界面创建第一个uni-app项目并运行在h5(浏览器)端：
第一步：打开HBuilderX，点击工具栏里的文件 -> 新建 -> 项目
第二步：选择
uni-app类型，输入工程名，选择模板，点击创建，即可成功创建
项目运行到
-
选择“运行”-->"运行到小程序模拟器“-->"微信开发者工具“命令，即可在微信开发者工具中体验uni-app，如图：
PS:如果想要把小程序运行到真机的微信小程序当中，则需要在微信公众平台申请小程序账号，流程为：
申请小程序账号：
① 进入微信公众平台官网，然后点击右上角的“立即注册”链接（如果已经注册了可以直接登录，登录方式可以选择账号密码登录或者微信扫码登录）。
② 点击“立即注册”链接进入注册页面，此页面提供了四种类型的账号注册，分别为：订阅号、服务号、小程序、企业微信。我们选择小程序进行注册。
③ 进入小程序注册页面，填写相关信息，账号信息填写完毕后，点击下方的“注册”按钮，进入邮箱激活页面，此时需要登录上一步中的邮箱，查收腾讯官方发送的小程序账号激活邮件，点击激活链接。（注意：每个邮箱只能申请一个小程序。并且，已经绑定了其他的公众号、小程序、个人号的邮箱，不能重新注册新的小程序）
④ 点击激活链接后，继续下一步的注册流程，选择注册的主体类型，并完善主体信息和管理员信息。（主体类型选择个人即可）
最后，小程序账号申请成功，就可以再次进入进入微信公众平台官网页面进行登录，登录成功之后进入小程序管理界面中的 "开发"-->"开发管理"-->"开发设置"，可以看到此页面有一个AppID(小程序ID)，记住这个id的获取方式，后期需要用到。
-
最后：项目创建完成之后即可运行，打开项目的任意文件，如App.vue，选择“运行”-->"运行到浏览器“命令，选择浏览器，即可在浏览器中体验uni-app的H5版。
-
1.1.4 uni-app项目的打包发布
-
uni-app项目开发的最后一步就是对项目进行打包发布。打包发布主要分为几种类型：
1、打包为原生App（云端）
2、打包为原生App（离线）
3、发布为h5，操作流程如下：
4、发布为微信小程序
点击【发行】按钮之后，会自动启动微信开发者工具，点击【上传】按钮
出现此截图说明打包上传成功：
此时登录微信公众平台官网。
等待审核通过之后，点击【提交发布】即可发布成功。
PS:如果在提交审核的过程中，弹出弹窗提示需要设置主营类目的话，根据指引前往设置即可。
参考网址：设置
注意：
1、主营类目有且只有一个，选择即生效，不可删除；
2、主营类目每年有 5 次修改机会，修改即生效，请谨慎修改；
3、完成主营类目设置后才可提交代码审核；
4、主营类目选择错误可能影响代码审核结果，请正确选择。
-
-
1.2 uni-app基础知识
-
1.2.1 uni-app开发规范
-
uni-app开发规范遵循以下原则：
-
1、页面文件遵循Vue单文件组件
2、组件标签规范类似于微信小程序规范。
3、接口能力（JS API）规范类似微信小程序规范，但需要将wx前缀改为uni。
4、数据绑定及事件处理同Vue.js规范，同时额外补充了uniapp本身的App及页面的生命周期的规范。
5、为了更好的兼容多端运行，建议使用Flex布局进行开发。
更多详细可参考课表：P26~P31
除此以外，uni-app项目的开发还需遵循以下规范：
1、目录结构规范
-
-
-
-
-
建议按照 uni-app 默认的目录结构组织项目，以保持统一性和易读性。
-
将不同功能和模块的文件放置在对应的目录下，如 pages 存放页面，components 存放组件等。
-
-
-
-
-
2、命名规范
-
-
-
-
-
文件名、组件名、变量名等统一使用小写字母，多个单词之间可以使用中划线连接，例如：my-page.vue、login.vue等等
-
-
-
-
-
3、代码规范
-
-
-
-
遵循 Vue.js 官方的代码规范，保持代码风格的统一性。
-
注意代码的缩进和格式，提高代码的可读性。
-
避免在模板中直接编写过多逻辑，尽量将逻辑处理移到 JS 部分。
-
合理使用生命周期函数，避免在页面加载时做过多的初始化操作。
-
-
-
-
4、样式规范
-
-
-
-
推荐使用预处理器编写样式，如 Less、Sass 等，以提高样式代码的可维护性。
-
统一使用 rpx 作为尺寸单位，以便在不同设备上进行适配。
-
避免在样式中直接使用颜色值和尺寸值，建议提取出来作为变量统一管理
-
-
-
-
-
-
-
在关键代码和复杂逻辑处添加必要的注释，方便其他开发者理解代码意图。
-
注释应该清晰简洁，描述代码的功能、参数和返回值等信息。
-
-
-
-
5、注释规范
-
1.2.2 uni-app文件目录结构
-
-
-
1.3 uni-app的基础配置
-
1.3.1 全局配置
-
概述：全局配置主要在page.json文件里进行配置，可以配置页面路径、窗口样式、导航显示、底部tabBar的显示等等。
配置项列表
属性 类型 必填 描述 globalStyle Object 否 设置默认页面的窗口表现 pages Object Array 是 设置页面路径及窗口表现 tabBar Object 否 设置底部 tab 的表现 condition Object 否 启动模式配置 easycom Object 否 组件自动引入规则 subPackages Object Array 否 分包加载配置 -
1.3.2 应用配置
-
概述：应用配置主要在manifest.json文件里进行配置，用于指定应用的名称、图标、权限等。HBuilderX 创建的工程此文件在根目录，CLI 创建的工程此文件在 src 目录。
配置项列表
属性 类型 默认值 描述 name String 无 应用名称 appid String 新建 uni-app 项目时，DCloud 云端分配。 应用标识 description String 无 应用描述 versionName String 无 版本名称，例如：1.0.0。详见下方Tips说明 versionCode Number 无 版本号，例如：36 -
1.3.3 页面配置
-
ges属性表
属性 类型 默认值 描述 path String 无 配置页面的路径 style Object 无 配置页面的窗口表现（样式）
-
-
1.4 uni-app内置组件
-
1.4.1 外部资源的引入
-
在进行uni-app项目开发时，通常需要引入一些外部资源，如图片、视频、js脚本、CSS样式等等，以下讲解各种资源的引入方式。
1、本地图片或视频的引入
-
绝对路径,需提供完整的 URL 地址，包括协议、域名和资源路径。
-
例如：<image src="https://example.com/images/image.jpg">
-
相对路径，需提供相对于当前文件的路径
-
例如：<image src="../../static/images/image.jpg">
或者
<image src="@/static/images/image.jpg"> 但是要注意，这种写法既不是传统意义上的绝对路径，也不是严格意义上的相对路径，而是 uni-app 框架提供的路径别名方式，用来指向特定目录中的资源文件。
2、js文件的引入
例如：import "../../common/js/index.js"
或者：（以下写法需要js文件里面有export 导出关键字才需要这样引入）
写法一： import common from '@/utils/common.js'
写法二： import common from '../../utils/common.js' 具体相对路径请根据实际文件夹情况来设置
3、css文件的引入
写法一： @import "@/styles/common.css"
写法二： @import "../../styles/common.css" 具体相对路径请根据实际文件夹情况来设置
-
1.4.2 uni-app组件基础信息
-
概述：组件是页面的基本组成单位，类似原HTML页面的标签，主要用于进行页面结构的搭建。
组件的组成结构：开始/结束标签、内容、属性、属性值。
基础结构如下图所示：
常用组件
属性 描述 view 类似于h5里面的div标签，用于包裹各种元素内容，是页面最常用的标签 scroll-view (可视滚动区域)用于区域滚动，使用非常广泛，如内容溢出时滚动显示内容、横向滚动、纵向滚动、支持下拉刷新、上拉加载等 swiper 滑块视图容器。一般用于左右滑动或上下滑动，比如banner轮播图 text 类似于h5里面的span标签，文本组件，用于包裹文本内容；text组件不支持嵌套其它组件或自定义组件，否则会引发在不同平台的渲染差异 button uni-app的button组件的功能性非常强大，可以实现获取用户信息、获取手机号码、分享 -
1.4.3 uni-app的页面样式与布局
-
一、uni-app尺寸单位
在 uni-app 中，可以使用以下几种尺寸单位来定义页面元素的大小：
1、px : 像素（Pixel）是最常见的尺寸单位，表示固定大小的像素值。在 uni-app 中，1px 相当于设备上的一个物理像素。
2、rpx : rpx（Responsive Pixel）是相对长度单位，可以根据屏幕宽度进行自适应缩放。在不同密度的屏幕上，1rpx 会被转换成不同的物理像素数，保证在不同屏幕下的显示效果一致。通常在 uni-app中推荐使用rpx来定义长度单位，特别是用于移动端小程序和 App 的开发。
3、百分比（%）: 百分比是相对长度单位，基于父元素的大小来定义元素的大小。可以使用百分比来实现响应式布局，让页面元素根据父元素的大小进行自适应调整。
二、设置背景图片注意事项
-
支持base64格式的图片，网址
-
支持网络路径图片。
-
支持小于40KB的图片。
-
使用本地背景图需注意：在线压缩图片
-
-
若背景图小于40KB,uni-app编译到不支持本地背景图片的平台时，会自动将其转换为base64格式。
-
若背景图大于40KB,不建议使用，若执意使用的话，需要手动将其转换为base64格式使用，或最好将其上传到服务器上面，通过网络路径来引用。
本地背景图引用路径建议使用"~@"格式来引用，例如：
-
C/C++
.test{background: url("~@/static/img1.png");}
-
-
-
三、使用字体图标
uni-app支持各种字体图标的使用，以下讲解几种使用字体图标的方式：
-
方式一：使用网络路径字体图标（以阿里巴巴矢量图标库为例）
-
1、注册登录阿里巴巴矢量图标库，找到自己想要的图标，加入购物车，然后新建一个项目，把购物车的图标加入项目中，然后进入自己的项目图标，复制css代码
-
2、在项目的App.vue中引入刚刚复制的代码
-
3、在页面中通过class使用字体图标
-
-
方式二：使用本地路径的字体图标（以阿里巴巴矢量图标库为例）
-
1、下载字体图标
-
2、把下载的字体图标放置到uni-app项目的static目录中
-
3、修改iconfont.css的引入路径
-
4、在App.vue中引入iconfont.css
-
5、在页面中通过class使用字体图标
-
-
-
-
-
1.5 uni-app扩展组件和自定义组件
-
1.5.1 uni-ui扩展组件
-
概述：uni-app的内置组件只能满足基础的需求，当需要更多场景时，则需要用到uni-app的扩展组件来实现，扩展组件是对内置组件进行了二次封装，是官方提供的uni-ui扩展组件。
uni-ui扩展组件的使用方式：
方式一：在创建项目的时候，直接选择包含uni-ui模板进行创建的项目。
方式二：在已有项目的基础上进行下载使用，网址。
uni-ui扩展包安装成功之后，找到自己项目所需要的组件，直接复制到页面使用即可，此操作类似vue的element-ui框架的使用：
-
1.5.2 自定义组件使用
-
一、自定义组件使用的步骤：
1、在components新增一个自定义组件，如custom-button
2、编写组件内容
3、在页面引入、注册、使用组件
Tip 小技巧：
如果在新建自定义组件的时候，起名字的时候以uni-开头，即可直接在页面使用，不需要引入和注册，例如：
-
1.5.3 第三方UI库的使用
-
概述：uni-app有自己的内置组件，内置组件基本适配了手机的风格。但有时候内置组件只能满足基础需求，当需要更多场景时，就要使用到扩展组件。从性能上面来说，扩展组件的性能略低于内置组件，因此开发者切勿抛弃内置组件，直接使用全套的第三方UI组件库。
uni-app官方对组件的使用建议如下：
1、优先使用内置组件
2、然后使用uni-ui扩展组件
3、其他需求依靠插件市场的其他组件灵活补充。以下介绍其中一款第三方插件的使用流程，以uView为例：
1、前往uView插件市场，下载相关插件到项目中，下载网址为：网址
2、进行项目的基础配置
2.1 main.js中添加如下配置：
Plain Text
//按照自己项目的实际路径引入import uView from '@/uni_modules/uview-ui'Vue.use(uView)2.2 引入uView样式文件
App.vue 文件
Plain Text
<style lang="scss"> @import "@/uni_modules/uview-ui/index.scss"; </style>uni.scss
Plain Text
@import '@/uni_modules/uview-ui/theme.scss';3、在页面开始使用uView的相关组件
-
二、uniapp 开发进阶
-
2.1 uni-app的路由和生命周期
-
2.1.1 uni-app的路由操作
-
概述：uni-app项目的路由由框架统一管理，每新增一个页面，都需要在page.json里面进行配置，uni-app路由的跳转有2种方式，以下对这两种方式进行讲解：
方式一：使用navigator组件进行跳转，该组件的属性说明如下：
属性名 类型 默认值 描述 url String 无 应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加.vue后缀 open-type String navigate 跳转方式 delta Number 无 当 open-type 为 'navigateBack' 时有效，表示回退的层数 方式二：使用路由API进行跳转：
API 描述 uni.navigateTo()
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。 uni.redirectTo()
关闭当前页面，跳转到应用内的某个页面 uni.switchTab()
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 uni.reLaunch()
关闭所有页面，打开到应用内的某个页面 uni.navigateBack()
关闭当前页面，返回上一页面或多级页面 -
页面传参
-
概述：uni-app项目的路由由框架统一管理，每新增一个页面，都需要在page.json里面进行配置，uni-app路由的跳转有2种方式，以下对这两种方式进行讲解：
方式一：使用navigator组件进行跳转，该组件的属性说明如下：
属性名 类型 默认值 描述 url String 无 应用内的跳转链接，值为相对路径或绝对路径，如："../first/first"，"/pages/first/first"，注意不能加.vue后缀 open-type String navigate 跳转方式 delta Number 无 当 open-type 为 'navigateBack' 时有效，表示回退的层数 更多详细参考此链接：navigator
方式二：使用路由API进行跳转：
API 描述 uni.navigateTo()
保留当前页面，跳转到应用内的某个页面，使用uni.navigateBack可以返回到原页面。 uni.redirectTo()
关闭当前页面，跳转到应用内的某个页面 uni.switchTab()
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面 uni.reLaunch()
关闭所有页面，打开到应用内的某个页面 uni.navigateBack()
关闭当前页面，返回上一页面或多级页面
2.1.2 uni-app的生命周期
-
概述：uni-app完全支持Vue实例的生命周期，同时还新增了应用的生命周期和页面的生命周期。
应用生命周期列表
函数名 描述 onLaunch 应用初始化完成时触发（全局只触发一次） onShow 应用启动，或从后台进入前台触发 onHide 应用从前台进入后台触发 onError 应用报错时触发 更多详细参考此链接：应用生命周期
页面生命周期列表
函数名 描述 onInit 监听页面初始化，其参数同 onLoad 参数，为上个页面传递的数据，参数类型为 Object（用于页面传参），触发时机早于 onLoad onLoad 监听页面加载，该钩子被调用时，响应式数据、计算属性、方法、侦听器、props、slots 已设置完成，其参数为上个页面传递的数据，参数类型为 Object（用于页面传参） onShow 监听页面显示，页面每次出现在屏幕上都触发，包括从下级页面点返回露出当前页面 onHide 监听页面隐藏 组件生命周期列表
函数名 描述 beforeCreate 实例初始化之后被调用 created 实例创建之后被调用 beforeMount 实例挂载之前被调用 mounted 实例挂载之后被调用
-
-
2.2 常用API
-
2.2.1 数据的缓存
-
概念：在Uni-app中，数据缓存是指将应用程序中的数据存储在本地设备上，以便在应用程序关闭后或用户重新打开应用程序时保留数据。这对于提高应用程序性能、减少网络请求和改善用户体验非常有用。
常用的数据缓存列表
API 描述 uni.setStorage（）
将数据存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个异步接口。 uni.setStorageSync（）
将 data 存储在本地缓存中指定的 key 中，会覆盖掉原来该 key 对应的内容，这是一个同步接口。 uni.getStorage()
从本地缓存中异步获取指定 key 对应的内容 uni.getStorageSync()
从本地缓存中同步获取指定 key 对应的内容。 uni.removeStorage() 从本地缓存中异步移除指定 key。 -
2.2.2 网络请求 API
-
一、uni.request 是一个在uni-app框架中用来发起网络请求的API。通过这个API，开发者可以在uni-app中实现向服务器端发送HTTP请求并获取响应数据的功能。uni.request允许开发者指定请求的URL、请求方法、请求头部信息、请求数据等内容，以及定义请求成功和失败时的处理逻辑。开发者可以利用uni.request来实现与服务器端进行数据交互的功能，例如获取远程数据、上传文件等操作。 在uni-app中，uni.request是一种常用的实现网络请求的方法，开发者可以根据自己的需求灵活运用该API来实现网络请求功能。
使用uni.request发起接口数据请求的实际案例：
描述：接口文档提供了一个get请求的接口，需要把接口的分类数据请求回来并渲染到页面当中。
具体步骤如下：
1、在method里面定义一个用于请求分类数据的方法 ，方法名为getClassifyList
2、在getClassifyList方法里面使用uni.request API请求接口的数据
3、把请求回来的数据渲染到页面上。
实际操作的代码案例如下：
-
-
2.3 运行环境的判断
-
2.3.1 开发环境和生产环境的判断
-
概述：uni-app 可通过process.env.NODE_ENV 判断当前环境是开发环境还是生产环境，一般用于连接测试服务器或者生产服务器的动态切换。在HBuilderX中，单击[运行]按钮编译出来的代码是开发环境，单击[发行]按钮编译出来的代码是生产环境。
例如：
-
2.3.2 当前运行平台的判断
-
概述：在 uni-app 中，可以通过判断运行平台的方式来实现特定平台下的逻辑处理。uni-app支持多个平台，包括H5、App（包括iOS和Android）、小程序（包括微信小程序、百度小程序、支付宝小程序、头条小程序等）等。判断平台主要有两种方式：编译期判断、运行期判断。
一、编译期判断，即条件编译，通过编译期判断可以在不同平台的代码包构建阶段针对不同平台编写不同的代码，以优化应用程序在不同平台上的运行效果。
以下代码是在js、template 组件和css中的具体写法
JavaScript
// #ifdef H5此处的js代码只对h5端有效果// #endif<!-- #ifdef MP-WEIXIN --><view>此处的标签只在微信端有效</view><!-- #endif -->/* #ifdef H5 */此处样式只对H5有效果/* #endif */取反，代码除了某个端，其他端都有效果<!-- #ifndef H5 --><view>以上标签除了H5端都显示</view><!-- #endif -->输入以上代码的快捷方式：输入：ifdef 选择对应的平台，回车即可 或者 ifn 选择对应的平台，回车即可
参考链接：条件编译处理多端差异
二、运行期判断：通过运行期判断可以在应用程序运行时动态地识别当前所处的平台，从而根据不同平台执行相应的逻辑处理。主要通过在代码中调用相应的 API 来获取当前的平台信息来实现判断。
Plain Text
//在js里面获取到当前代码运行的平台，比如：ios、android、h5、mp-weixin等等 var platform = uni.getSystemInfoSync().platform; //结合判断语句判断不同的平台执行不同的代码： switch(platform) { case 'android': // 安卓平台逻辑处理 console.log('运行在安卓平台'); break; case 'ios': // iOS平台逻辑处理 console.log('运行在iOS平台'); break; case 'h5': // H5平台逻辑处理 console.log('运行在H5平台'); break; case 'mp-weixin': // 微信小程序平台逻辑处理 console.log('运行在微信小程序平台'); // 获取微信版本信息 const wxVersion = uni.getSystemInfoSync().SDKVersion; console.log('微信版本:', wxVersion); break; default: console.log('未知平台'); }三、unicould云开发
-
3.1 uniCloud简介
-
概述：uniCloud是DCloud联合阿里云和腾讯云推出的基于serverless服务的、跨全端的、用JS开发服务端的云产品。
-
3.2 uniCloud的使用
-
以下讲解uniCloud的使用步骤：
1、创建uniCloud项目
2、创建云服务空间
3、右键选择-->【云服务空间初始化向导】，进行关联云空间
通过以上操作，uniCloud的环境即配置完成，接下来就可以正常去使用了。
-
3.3 云数据库
-
概述：云数据库是被优化或部署到一个虚拟计算环境中的数据库，可以实现按需付费、按需扩展，具有可用性高及存储整合等优势。
云数据库使用步骤：
1、创建云数据
2、添加云数据，如需添加多条数据重复多遍即可
3、在云函数中操作云数据库，并获取、返回user表中的数据
4、在页面调用云函数，获取数据并打印在控制台里面
-
3.4 云函数
-
概述：云函数即在云端（服务器端）运行的函数，开发者无须购买、搭建服务器，只需编写函数代码并部署到云端即可在客户端（App、H5、小程序等）调用，同时云函数之间也可以相互调用。
一个云函数的写法与一个在本地定义的JavaScript方法无异，当云函数被客户端调用时，定义的代码会被放在Node.js运行环境中执行。
开发者可以和在Node.js环境中使用JavaScript一样在云函数中进行网络请求等操作，而且还可以通过云函数服务端SDK搭配使用多种服务，如使用云函数SDK中提供的数据库和存储API操作数据库和存储。
云函数使用步骤：
1、创建云函数
2、编写云函数文件
3、在页面调用云函数
-
3.5 分包优化
-
概述：在实际开发过程中，伴随着项目的业务量不断增大，功能越来越复杂，项目的体积会变得越来越大，此时就需要对项目进行分包优化。不然项目在微信小程序当中是有大小限制，是无法正常进行真机调试的。
小程序分包大小限制如下：
-
整个小程序所有分包大小不超过 20M
-
单个分包/主包大小不能超过 2M
-
在进行项目分包之前，先查看项目目前的体积大小情况：
微信小程序分包优化的具体步骤：
1、配置manifest.json 开启分包功能
JavaScript
"optimization": {"subPackages": true}2、配置pages.json
2.1 新建分包文件夹，把需要分包的页面存入对应的分包文件夹里面
2.2 在pages.json 新增subPackages配置项，进行分包设置
2.3 删除原来的 pages/login/login等其他被分包的页面路径。 -
四、uniapp开发实战
-
4.1 实战部分代码
-
<template>
<view class="content">
<image class="logo" src="/static/logo.png"></image>
<view class="text-area">
<text class="title">{{title}}</text>
</view>
</view>
</template>
<script>
export default {
data() {
return {
title: 'Hello',
}
},
onLoad() {
this.getTestData()
},
methods: {
getTestData(){
uniCloud.callFunction({
name:"getTestData",
data:{
//这里你可以输入参数，比如 id:123 name:"test"等等
},
success: (result) => {
console.log("调用云函数成功后返回的结果",result);
this.title = result.result.data[0].name
},
fail: (result) => {
console.log("调用云函数失败后返回的结果",result);
},
complete: (result) => {
console.log("调用云函数无论成功与否都会执行该complete函数",result);
}
})
}
}
}
</script>
<style>
.content {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.logo {
height: 200rpx;
width: 200rpx;
margin-top: 200rpx;
margin-left: auto;
margin-right: auto;
margin-bottom: 50rpx;
}
.text-area {
display: flex;
justify-content: center;
}
.title {
font-size: 36rpx;
color: #8f8f94;
}
</style>
-
-
1513
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
