【前端每日基础】day31——uni-app

uni-app 开发详细介绍

  1. 基本概念
    uni-app:uni-app 是一个使用 Vue.js 开发多端应用的框架,可以编译到微信小程序、支付宝小程序、百度小程序、字节跳动小程序、H5、App等多个平台。
    跨平台:一次开发,多端部署。通过条件编译实现多端差异化处理。
  2. 开发环境设置
    HBuilderX:DCloud 提供的一款开发工具,支持 uni-app 的创建、开发、调试和发布。
    Vue CLI:可以通过命令行工具创建 uni-app 项目。
    安装 HBuilderX
    下载并安装 HBuilderX。
    打开 HBuilderX,选择 新建 -> uni-app 项目,按照向导创建项目。
    使用 Vue CLI
    安装 Vue CLI:
npm install -g @vue/cli

创建 uni-app 项目:

vue create -p dcloudio/uni-preset-vue my-project
  1. 项目结构
    uni-app 项目的基本结构如下:
├── components       # 组件目录
├── pages            # 页面目录
│   ├── index        # 示例页面
│   │   ├── index.vue
│   │   ├── index.json
│   │   ├── index.scss
│   │   └── index.js
├── static           # 静态资源目录
├── main.js          # 入口文件
├── App.vue          # 应用配置
├── manifest.json    # 应用配置文件
├── pages.json       # 页面配置文件
└── uni.scss         # 全局样式
  1. 常用组件和 API
    uni-app 提供了丰富的基础组件和 API,用于构建用户界面和调用系统能力。

常用组件
视图容器:< view>、< scroll-view>、< swiper>。
基础内容:< text>、< icon>、< rich-text>。
表单组件:< button>、< input>、< textarea>、< picker>。
导航组件:< navigator>。
媒体组件:< image>、< audio>、< video>。
示例代码

<template><view><text>{{ message }}</text><button @click="handleClick">点击我</button></view>
</template><script>
export default {data() {return {message: 'Hello uni-app'}},methods: {handleClick() {this.message = 'Button clicked!';}}
}
</script><style>
button {padding: 10px;background-color: #007AFF;color: white;border-radius: 5px;
}
</style>
  1. 生命周期
    uni-app 的生命周期与 Vue.js 的生命周期类似,但在不同平台上会有所不同。主要分为应用生命周期和页面生命周期。

应用生命周期
onLaunch:应用初始化时触发,全局只触发一次。
onShow:应用启动或从后台进入前台时触发。
onHide:应用从前台进入后台时触发。
页面生命周期
onLoad:页面加载时触发。
onShow:页面显示时触发。
onReady:页面初次渲染完成时触发。
onHide:页面隐藏时触发。
onUnload:页面卸载时触发。
6. 网络请求
使用 uni.request 进行 HTTP 请求。

uni.request({url: 'https://example.com/api/data',method: 'GET',success: res => {console.log(res.data);},fail: err => {console.error(err);}
});
  1. 条件编译
    uni-app 通过条件编译实现多端差异化处理,使用 #ifdef 和 #endif 进行代码片段的条件编译。
// #ifdef MP-WEIXIN
console.log('微信小程序');
// #endif// #ifdef APP-PLUS
console.log('App');
// #endif
  1. 路由与页面跳转
    使用 uni.navigateTo 进行页面跳转。
uni.navigateTo({url: '/pages/detail/detail?id=123&name=test'
});

在目标页面获取参数:

onLoad(options) {console.log(options.id); // 输出:123console.log(options.name); // 输出:test
}
  1. 数据缓存
    使用 uni.setStorage 和 uni.getStorage 对数据进行本地存储和读取。
// 存储数据
uni.setStorage({key: 'userInfo',data: { name: 'John', age: 30 },success: () => {console.log('数据存储成功');}
});// 读取数据
uni.getStorage({key: 'userInfo',success: res => {console.log(res.data); // 输出:{ name: 'John', age: 30 }}
});
  1. 常见问题和解决方案
    如何实现跨平台兼容?

使用条件编译(#ifdef 和 #endif)来处理不同平台的差异化代码。
如何处理表单数据提交?

使用表单组件(如 、 等),并通过 @submit 事件监听表单提交,使用 uni.request 发送数据到后台。
如何处理用户登录?

使用 uni.login 获取用户登录凭证,通过后台接口验证用户身份并获取用户信息。

uni.login({provider: 'weixin',success: loginRes => {if (loginRes.code) {// 发送 loginRes.code 到后台换取 openid, sessionKey, unioniduni.request({url: 'https://example.com/login',method: 'POST',data: {code: loginRes.code},success: res => {console.log('登录成功:', res.data);}});} else {console.error('登录失败!' + loginRes.errMsg);}}
});

如何使用自定义组件?

在 components 目录下创建自定义组件文件,并在页面中引入和注册组件。

<!-- 自定义组件 my-component.vue -->
<template><view><text>{{ text }}</text></view>
</template><script>
export default {props: {text: {type: String,default: ''}}
}
</script><style>

/* 组件样式 */

在页面中使用自定义组件:

<template><view><my-component text="Hello from component"></my-component></view>
</template><script>
import MyComponent from '@/components/my-component.vue';export default {components: {MyComponent}
}
</script>

总结
uni-app 是一个功能强大的跨平台开发框架,通过一次开发即可部署到多个平台。掌握其基本概念、项目结构、常用组件和 API、生命周期以及常见问题和解决方案,可以帮助你快速上手并开发出高质量的应用。在实际开发中,熟练使用 HBuilderX 和 Vue.js,将大大提高你的开发效率。希望这些内容对你的 uni-app 开发有所帮助。祝你面试成功!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/web/19421.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

【漏洞复现】DT-高清车牌识别摄像机 任意文件读取漏洞

0x01 产品简介 DT-高清 车牌识别摄像机是一款先进的安防设备&#xff0c;采用高清图像传感器和先进的识别算法&#xff0c;能够精准、快速地识别车牌信息。其高清晰该摄像机结合了智能识别技术&#xff0c;支持实时监宴图像质量确保在各种光照和天气条件下都能准确捕捉车牌信息…

【面试八股总结】MySQL事务:事务特性、事务并行、事务的隔离级别

参考资料&#xff1a;小林coding 一、事务的特性ACID 原子性&#xff08;Atomicity&#xff09; 一个事务是一个不可分割的工作单位&#xff0c;事务中的所有操作&#xff0c;要么全部完成&#xff0c;要么全部不完成&#xff0c;不会结束在中间某个环节。原子性是通过 undo …

CSS-in-JS学习

CSS-in-JS CSS-in-JS 是一种将样式直接写入JavaScript代码中的方法,它通常与React、Vue等现代前端框架结合使用。 1. 什么是CSS-in-JS? CSS-in-JS 是一种编写样式的方法,它允许开发者在JavaScript组件内部定义样式,通常使用类似于CSS的语法。这种方式提高了代码的可复用…

C#根据数据量自动排版标签的样例

这是一个C#根据数据量自动排版标签的样例 using System; using System.Collections.Generic; using System.Data.SqlClient; using System.Drawing; using System.Text; using System.Threading; using System.Threading.Tasks; using System.Windows.Forms; using HslCommuni…

go mongo 唯一索引创建

1. 登录mongo&#xff0c;创建数据库 mongosh -u $username -p $password use test 2. 查看集合索引 db.$collection_name.getIndexes() 为不存在的集合创建字段唯一索引 package mainimport ("context""fmt""log""time""go…

代码随想录算法训练营第四十五天 | 1049. 最后一块石头的重量 II、494. 目标和、474.一和零

1049. 最后一块石头的重量 II 视频讲解&#xff1a; 动态规划之背包问题&#xff0c;这个背包最多能装多少&#xff1f;LeetCode&#xff1a;1049.最后一块石头的重量II_哔哩哔哩_bilibili 代码随想录 解题思路 直接将这一些石头&#xff0c;分为两堆&#xff0c;让他们尽可能…

假如Redis⾥面有1亿个key,其中有10w个key是以某个固定的已知的前缀开头的,如何将它们全部找出来?

使⽤用 keys 指令可以扫出指定模式的 key 列列表。但是要注意 keys 指令会导致线程阻塞⼀一段时间&#xff0c;线上服务会停 顿&#xff0c;直到指令执⾏行行完毕&#xff0c;服务才能恢复。这个时候可以使⽤用 scan 指令&#xff0c; scan 指令可以⽆无阻塞的提取出指定模式 的…

C语言 | Leetcode C语言题解之第120题三角形最小路径和

题目&#xff1a; 题解&#xff1a; int minimumTotal(int** triangle, int triangleSize, int* triangleColSize) {int f[triangleSize];memset(f, 0, sizeof(f));f[0] triangle[0][0];for (int i 1; i < triangleSize; i) {f[i] f[i - 1] triangle[i][i];for (int j …

SQL语句来实现不使用子查询的方式,直接通过JOIN和MAX函数来筛选出每个主表关联的最新子表记

除了使用JOIN和子查询的方式外&#xff0c;还可以使用窗口函数来实现不带子查询的方式来筛选出每个主表关联的最新子表记录。 以下是使用窗口函数的SQL语句示例&#xff1a; sql SELECT r.*, t.* FROM (SELECT r.*, t.*,ROW_NUMBER() OVER (PARTITION BY r.id ORDER BY t.creat…

latex中对目录的处理

文章目录 设置目录的章节编号宽度和章节标题的缩进设置条目的间距设置章节标题与页码之间的连接线 设置目录的章节编号宽度和章节标题的缩进 \usepackage{tocloft} \setlength{\cftsubsecnumwidth}{4cm} % 设置子章节编号的宽度为4cm \setlength{\cftsubsecindent}{1cm} % 设置…

【excel】设置二级联动菜单

文章目录 【需求】在一级菜单选定后&#xff0c;二级菜单联动显示一级菜单下的可选项【步骤】step1 制作辅助列1.列转行2.在辅助列中匹配班级成员 之前做完了 【excel】设置可变下拉菜单&#xff08;一级联动下拉菜单&#xff09;&#xff0c;开始做二级联动菜单。 【需求】在…

python实现——综合类型数据挖掘任务(无监督的分类任务)

综合类型数据挖掘任务 航空公司客户价值分析。航空公司客户价值分析。航空公司客户价值分析。航空公司已积累了大量的会员档案信息和其乘坐航班记录&#xff08;air_data.csv&#xff09;&#xff0c;以2014年3月31日为结束时间抽取两年内有乘机记录的所有客户的详细数据。利用…

万界星空科技MES系统功能介绍

制造执行系统或MES 是一个全面的动态软件系统&#xff0c;用于监视、跟踪、记录和控制从原材料到成品的制造过程。MES在企业资源规划(ERP) 和过程控制系统之间提供了一个功能层&#xff0c;为决策者提供了提高车间效率和优化生产所需的数据。 万界星空科技MES 系统基础功能&am…

Spark基础:Scala变量与数据类型

在Scala中&#xff0c;变量和数据类型是编程的基础。Scala作为一种强大的静态类型语言&#xff0c;支持多种数据类型&#xff0c;并提供了可变&#xff08;var&#xff09;和不可变&#xff08;val&#xff09;两种类型的变量声明方式。以下是在Scala中变量和数据类型的基础知识…

【全开源】Java短剧系统微信小程序+H5+微信公众号+APP 源码

打造属于你的精彩短视频平台 一、引言&#xff1a;为何选择短剧系统小程序&#xff1f; 在当今数字化时代&#xff0c;短视频已经成为人们日常生活中不可或缺的一部分。而短剧系统小程序源码&#xff0c;作为构建短视频平台的强大工具&#xff0c;为广大开发者提供了快速搭建…

03-树1 树的同构(浙大数据结构PTA习题)

03-树1 树的同构 分数 25 作者 陈越 单位 浙江大学 给定两棵树 T1​ 和 T2​。如果 T1​ 可以通过若干次左右孩子互换就变成 T2​&#xff0c;则我们称两棵树是“同构”的。例如图1给出的两棵树就是同构的&#xff0c;因为我们把其中一棵树的结点A、B、G…

CSPM.pdf

PDF转图片 归档&#xff1a;

.NET与C#和PLC交互的例子

要读取PLC中指定数据块&#xff08;DB&#xff09;内连续的多个字节&#xff0c;可以使用HSLCommunication库的Read方法。这个方法允许你一次性读取多个字节&#xff0c;然后再根据需要解析这些字节。 下面是修改后的代码&#xff0c;示范如何从指定数据块的起始地址读取30个字…

c与web前端:编程语言与前端技术的深度交融

c与web前端&#xff1a;编程语言与前端技术的深度交融 在编程领域&#xff0c;C语言和Web前端技术各自扮演着举足轻重的角色。C语言以其高效、灵活的特性&#xff0c;成为底层编程和系统级开发的利器&#xff1b;而Web前端技术则以其直观、交互的特点&#xff0c;为用户提供了…

跨境电商多店铺:怎么管理?风险如何规避?

跨境电商的市场辽阔&#xff0c;有非常多的商业机会。你可能已经在Amazon、eBay、Etsy等在线平台向潜在客户销售产品了。为了赚更多的钱&#xff0c;你可能还在经营多个店铺和品牌。 但是&#xff0c;像Amazon、eBay、Etsy等知名平台会有自己的规则&#xff0c;他们开发了很多…