当前位置: 首页 > news >正文

陪诊小程序之uniapp(从入门到精通)

1.uniapp如何使用vue3编写页面

<template><view class="content"><navbar name="navbar组件"></navbar><image class="logo" src="/static/logo.png"></image><view class="text-area"><text class="title">{{title}}</text></view><view class="">11111</view><button @click="handleClick">点我</button><text>总共购买的水果数量{{totalNum}}</text><my-component></my-component><aComponent></aComponent><navbar></navbar><view v-for="item in list" :key="item.name"><view>1111</view><text>{{item.name}}</text><text>{{item.num}}</text></view></view>
</template><script setup>import  aComponent  from '../../../project/component/component.vue';import{ref,reactive,computed} from 'vue'import{onLoad} from '@dcloudio/uni-app'const title=ref('Hello')const list=reactive([{name:'apple',num:1},{name:'orange',num:2},{name:'banana',num:3}])const handleClick=()=>{list.forEach(item=>{item.num++})}onLoad(()=>{console.log('onLode生命周期')})const totalNum=computed(()=>{return list.reduce((total,cur)=>total+cur.num,0)})
</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>

引入组件的三种方式

全局引入

1.引入

 import componentVue from './component/component.vue'

 2.全局注册

export function createApp() {
const app = createSSRApp(App)
app.component('my-component',componentVue)
  return {
    app
  }
}

3.页面中引入

<my-component></my-component>

局部引入

<script setup>
    import  aComponent  from '../../../project/component/component.vue';
    
    import{ref,reactive,computed} from 'vue'
    import{onLoad} from '@dcloudio/uni-app'
    const title=ref('Hello')
    const list=reactive([
        {name:'apple',num:1},
        {name:'orange',num:2},
        {name:'banana',num:3}
    ])
    const handleClick=()=>{
        list.forEach(item=>{
            item.num++
        })
    }
    onLoad(()=>{
        console.log('onLode生命周期')
    })
    const totalNum=computed(()=>{
        return list.reduce((total,cur)=>total+cur.num,0)
    })
</script>

<aComponent></aComponent>

自动引入

新建文件夹然后新建组件

组件引入

	<navbar></navbar>

2.uniapp组件通信props和$emit和插槽语法

 props

组件

<template><view>navbar组件</view>
</template><script setup>
import { defineProps } from 'vue';
defineProps(['name','content'])</script><style></style>

组件引入数据

<navbar name="navbar组件" :content="data"></navbar>

父组件(页面)向子组件传值,如果没传就用默认值

<template><view>navbar组件<view>组件的name属性{{name}}</view><view>组件的content属性{{content}}</view></view>
</template><script setup>
import { defineProps } from 'vue';
// defineProps(['name','content'])
defineProps({
name:String,	content:{type:String,default:()=>{return '默认值';}}	
})</script><style></style>

$emit

navbar.vue

<template>
    <view>
        navbar组件
        <view>组件的name属性{{name}}</view>
        <view>组件的content属性{{content}}</view>

        <button @click="handleChange">修改content</button>
    </view>
</template>

<script setup>
import { defineProps,defineEmits } from 'vue';
// defineProps(['name','content'])
defineProps({
name:String,    
    content:{
        type:String,
        default:()=>{
            return '默认值';
        }
    }
    
})
const emit=defineEmits(['changeData'])
const handleChange=()=>{
    emit('changeData','修改后的数据')
}

</script>

<style>

</style>

    <navbar :name="navbar组件" :content="data" @changeData="changeData"></navbar>

插槽语法

<navbar :name="navbar组件" :content="data" @changeData="changeData">
            <view>我是插槽的内容</view>
        </navbar>

<template>
        <view>组件</view>
        <view>组件的name属性{{name}}</view>
        <view>组件的content属性{{content}}</view>
        <slot></slot>
        <button @click="handleChange">修改content</button>
</template>

<script setup>
import { defineProps,defineEmits } from 'vue';
// defineProps(['name','content'])
defineProps({
name:String,    
    content:{
        type:String,
        default:()=>{
            return '默认值';
        }
    }
    
})
const emit=defineEmits(['changeData'])
const handleChange=()=>{
    emit('changeData','修改后的数据')
}

</script>

<style>

</style>

3.系统参数获取和navBar组件样式动态设计

<template><view class="nav"><view :style="'height:'+status+'rpx;'+containerStyle"></view><view class="navbar" :style="'height:'+navHeight+'rpx;'+containerStyle"></view></view>
</template><script setup>import { ref,onBeforeMount,defineProps } from 'vue';const props=defineProps({background:{type:String,default:'rgba(255,255,255,1)'},color:{type:String,default:'rgba(0,0,0,1)'},fontSize:{type:String,default:32},icoWidth:{type:String,default:116},iconHeight:{type:String,default:38}})onBeforeMount(()=>{setNavSize()setStyle()})//状态栏高度const status=ref(0)//内容高度const navHeight=ref(0)//背景颜色const containerStyle=ref('')//字体样式const textStyle=ref('')//图标的样式const iconStyle=ref('')//计算状态栏高度const setNavSize=()=>{const {system,statusBarHeight}=uni.getSystemInfoSync()status.value=statusBarHeight*2// console.log(res)const isiOS=system.indexOf('iOS')>-1if(!isiOS){navHeight.value=96}else{navHeight.value=88}// console.log(res)	}const setStyle=()=>{containerStyle.value=['background:'+props.background].join(";")	textStyle.value=['color:'+props.color,'font-size'+props.fontSize+'rpx'].join(';')iconStyle.value=['width:'+props.icoWidth+'rpx','height:'+props.iconHeight+'rpx'].join(';')}</script><style>.nav{position: fixed;width: 100%;top: 0;left: 0;z-index: 2;}</style>

4.页面栈获取和navBar跳转逻辑实现

index.vue

<template><view class="content"><navbar titleText="首页"></navbar>	<button style="margin-top: 130rpx;" @click="navigateTo">跳转</button></view>
</template><script setup>import  aComponent  from '../../../project/component/component.vue';import{ref,reactive,computed} from 'vue'import{onLoad} from '@dcloudio/uni-app'const data=ref("动态数组")const title=ref('Hello')const list=reactive([{name:'apple',num:1},{name:'orange',num:2},{name:'banana',num:3}])const handleClick=()=>{list.forEach(item=>{item.num++})}const changeData=(val)=>{data.value=val}onLoad(()=>{console.log('onLode生命周期')})const totalNum=computed(()=>{return list.reduce((total,cur)=>total+cur.num,0)})const navigateTo=()=>{console.log(1111)uni.navigateTo({url:'/pages/search/index'})	}</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>

navbar.vue

<template><view class="nav"><view :style="'height:'+status+'rpx;'+containerStyle"></view><view class="navbar" :style="'height:'+navHeight+'rpx;'+containerStyle"><view class="back-icon" @click="backOrHome"><image v-if="pages>1" src="../../static/resource/navbar/ic_back.png" mode=""></image><image v-else src="../../static/resource/navbar/ic_home.png" mode=""></image></view><view class="nav-title" v-if="titleText"><view :style="'height:'+navHeight+'rpx;line-height:'+navHeight+'rpx;'+textStyle">{{titleText}}</view>	</view></view></view>
</template><script setup>import { ref,onBeforeMount,defineProps } from 'vue';const props=defineProps({background:{type:String,default:'rgba(255,255,255,1)'},color:{type:String,default:'rgba(0,0,0,1)'},fontSize:{type:String,default:32},icoWidth:{type:String,default:116},iconHeight:{type:String,default:38},titleText:{type:String,default:''}})onBeforeMount(()=>{setNavSize()setStyle()// const pages = getCurrentPages().length;//     console.log('当前页面栈的长度:', pages);})//状态栏高度const status=ref(0)//内容高度const navHeight=ref(0)//背景颜色const containerStyle=ref('')//字体样式const textStyle=ref('')//图标的样式const iconStyle=ref('')//页面栈的数量const pages=ref(getCurrentPages().length)console.log(pages.value,'page')//计算状态栏高度const setNavSize=()=>{const {system,statusBarHeight}=uni.getSystemInfoSync()status.value=statusBarHeight*2// console.log(res)const isiOS=system.indexOf('iOS')>-1if(!isiOS){navHeight.value=96}else{navHeight.value=88}// console.log(res)	}const setStyle=()=>{containerStyle.value=['background:'+props.background].join(";")	textStyle.value=['color:'+props.color,'font-size'+props.fontSize+'rpx'].join(';')iconStyle.value=['width:'+props.icoWidth+'rpx','height:'+props.iconHeight+'rpx'].join(';')}const backOrHome=()=>{if(pages.value>1){uni.navigateBack();}else{uni.switchTab({url:'/pages/index/index'})}}</script><style>.nav{position: fixed;width: 100%;top: 0;left: 0;z-index: 2;}.back-icon{display: flex;align-items: center;width: 64rpx;height: 100%;margin-left:20rpx ;}.back-icon image{width: 64rpx;height: 64rpx;	}.navbar{position:relative;}.nav-title{position: absolute;top: 0;left: 50%;transform: translate(-50%);}</style>

5.胶囊位置计算和首页navBar显示效果

相关文章:

陪诊小程序之uniapp(从入门到精通)

1.uniapp如何使用vue3编写页面 <template><view class"content"><navbar name"navbar组件"></navbar><image class"logo" src"/static/logo.png"></image><view class"text-area"&…...

深度学习(一)基础:神经网络、训练过程与激活函数(1/10)

深度学习基础&#xff1a;神经网络、训练过程与激活函数 引言&#xff1a; 深度学习作为机器学习的一个子领域&#xff0c;近年来在人工智能的发展中扮演了举足轻重的角色。它通过模仿人脑的神经网络结构&#xff0c;使得计算机能够从数据中学习复杂的模式和特征&#xff0c;…...

源代码加密技术的一大新方向!

在当今这个信息爆炸的时代&#xff0c;企业所面临的数据安全挑战日益严峻。传统的文档加密方法已经无法满足日益复杂的安全需求。幸运的是&#xff0c;SDC沙盒加密系统以其革命性的安全理念和先进技术&#xff0c;为企业提供了一个更可靠、更高效的数据保护方案。 传统加密方案…...

SVN——常见问题

基本操作 检出 提交 更新 显示日志 撤销本地修改 撤销已提交内容 恢复到指定版本 添加忽略 修改同一行 修改二进制文件...

JavaCV 图像灰度化处理

&#x1f9d1; 博主简介&#xff1a;历代文学网&#xff08;PC端可以访问&#xff1a;https://literature.sinhy.com/#/literature?__c1000&#xff0c;移动端可微信小程序搜索“历代文学”&#xff09;总架构师&#xff0c;15年工作经验&#xff0c;精通Java编程&#xff0c;…...

基于Multisim三极管B放大系数放大倍数测量电路设计(含仿真和报告)

【全套资料.zip】三极管B放大系数放大倍数测量电路电路设计Multisim仿真设计数字电子技术 文章目录 功能一、Multisim仿真源文件二、原理文档报告资料下载【Multisim仿真报告讲解视频.zip】 功能 1.用三个数码管显示B的大小&#xff0c;分别显示个位、十位和百位。 2.显示范围…...

Molmo模型实战

安装pip文件 conda install pytorch==2.3.1 torchvision==0.18.1 torchaudio==2.3.1 pytorch-cuda=11.8 -c pytorch -c nvidiapip install ...

免费开源的微信开发框架

近年来&#xff0c;随着人工智能技术的快速发展&#xff0c;聊天机器人在各个领域得到了广泛的应用。在社交媒体中&#xff0c;自动回复成为了一个流行的功能&#xff0c;让用户可以方便地与机器人进行互动。gewe框架&#xff0c;一个开源的微信聊天机器人框架&#xff0c;实现…...

波形的变化和信号的产生1+multisim仿真

目录 1.正弦波振荡电路 1.1RC正弦波振荡电路 1.1.1RC串并联选频网络 1.1.2RC桥式正弦波振荡电路 1.1.4LC正弦波振荡电路 1.1.3石英晶体正弦波振荡电路 2.电压比较器 2.1概述 2.1.1基本概念 2.2电压比较器的种类 2.2.1过零比较器 2.2.2一般单限比较器 2.2.3滞回比较…...

【FAQ】HarmonyOS SDK 闭源开放能力 —Map Kit(3)

1.问题描述&#xff1a; compatibleSdkVersion升级到5.0.0&#xff08;12&#xff09;之后&#xff0c;调用坐标系转换API&#xff1a;map.convertCoordinate(mapCommon.CoordinateType.WGS84, mapCommon.CoordinateType.GCJ02, { longitude: location.longitude, latitude:…...

电脑微信多开方法,保姆级教学,超简单!

文章目录 前言方法教学 前言 大家在日常生活中一般都会有多个微信号或QQ号&#xff0c;但大部分人只有一部手机和一台电脑&#xff0c;这就导致每次都需要来回切换不同的账号&#xff0c;非常麻烦&#xff1b;QQ还好&#xff0c;在电脑上可以登陆多个账号&#xff0c;但微信只能…...

【Mysql】-锁,行级锁

Mysql mysql中的行锁 在 MySQL 的 InnoDB 存储引擎中&#xff0c;行级锁通常是加在索引上的&#xff0c;而不是直接加在数据行上。这种机制是基于索引的锁定策略&#xff0c;具体来说&#xff1a; 主键索引&#xff1a;如果查询更新使用了主键进行查找&#xff0c;InnoDB 会直…...

手机功耗技术领域

手机功耗技术领域 器件 器件-电池 提升电池能量密度 提升正极电压、升级负极材料正极电压方面&#xff0c;目前行业还是以4.5V体系为主&#xff1b;4.53V体系预计24-25年落地&#xff1b;负极材料方面&#xff0c;石墨体系每年2%能量密度提升迭代&#xff1b; 掺硅方案目前…...

Golang | Leetcode Golang题解之第493题翻转对

题目&#xff1a; 题解&#xff1a; type fenwick struct {tree []int }func newFenwickTree(n int) fenwick {return fenwick{make([]int, n1)} }func (f fenwick) add(i int) {for ; i < len(f.tree); i i & -i {f.tree[i]} }func (f fenwick) sum(i int) (res int)…...

linux笔记(yum本地源仓库搭建)

一、准备工作 安装必要的软件包 在大多数 Linux 发行版中&#xff0c;Yum 已经默认安装。如果系统中没有安装&#xff0c;可以根据发行版的包管理器进行安装。 准备本地源文件 可以是光盘镜像&#xff08;如果是从光盘安装系统&#xff09;&#xff0c;或者是已经下载好的系…...

K8S系列-Kubernetes网络

一、Kubernetes网络模型 ​ Kubernetes网络模型设计的一个基础原则是&#xff1a;每个Pod都拥有一个独立的IP地址&#xff0c;并假定所有Pod都在一个可以直接连通的、扁平的网络空间中&#xff0c;不管它们是否运行在同一个Node&#xff08;宿主机&#xff09;中&#xff0c;都…...

Excel 对数据进行脱敏

身份证号脱敏&#xff1a;LEFT(A2,6)&REPT("*",6)&RIGHT(A2,6) 手机号脱敏&#xff1a;LEFT(B2,3)&REPT("*",5)&RIGHT(B2,3) 姓名脱敏&#xff1a;LEFT(C2,1)&REPT("*",1)&RIGHT(C2,1) 参考&#xff1a; excel匹配替换…...

OJ-1014田忌赛马

示例1&#xff1a; 输入 11 8 20 10 13 7 输出 1 示例2&#xff1a; 输入 11 12 20 10 13 7 输出 2 示例3&#xff1a; 输入 1 2 3 4 5 6 输出 6 解题思路&#xff1a; 问题的关键在于调整数组a的顺序,使得尽可能多的a[i] > b[i]。为了达到最优结果,我们可以采用贪心的策…...

Excel重新踩坑3:条件格式;基本公式运算符;公式中的单元格引用方式;公式菜单栏其他有用的功能说明;

0、前言&#xff1a;以下内容是学习excel公式的基础内容。 1、需求&#xff1a;将表格特定区域中数值大小大于等于30&#xff0c;小于等于80的单元格&#xff0c;颜色填充为红色&#xff0c;大于80的&#xff0c;颜色填充为黄色。 新建规则之后也可以通过该功能清除规则。 2、基…...

【AI知识点】FAISS如何提高检索效率?

【AI论文解读】【AI知识点】【AI小项目】【AI战略思考】 FAISS&#xff08;Facebook AI Similarity Search&#xff09; 是一个高效的相似度搜索库&#xff0c;专门设计用于处理大规模的向量检索任务&#xff0c;尤其是在稠密向量的检索中表现出色。FAISS 能够显著提高检索效率…...

在软件开发中正确使用MySQL日期时间类型的深度解析

在日常软件开发场景中&#xff0c;时间信息的存储是底层且核心的需求。从金融交易的精确记账时间、用户操作的行为日志&#xff0c;到供应链系统的物流节点时间戳&#xff0c;时间数据的准确性直接决定业务逻辑的可靠性。MySQL作为主流关系型数据库&#xff0c;其日期时间类型的…...

Spark 之 入门讲解详细版(1)

1、简介 1.1 Spark简介 Spark是加州大学伯克利分校AMP实验室&#xff08;Algorithms, Machines, and People Lab&#xff09;开发通用内存并行计算框架。Spark在2013年6月进入Apache成为孵化项目&#xff0c;8个月后成为Apache顶级项目&#xff0c;速度之快足见过人之处&…...

简易版抽奖活动的设计技术方案

1.前言 本技术方案旨在设计一套完整且可靠的抽奖活动逻辑,确保抽奖活动能够公平、公正、公开地进行,同时满足高并发访问、数据安全存储与高效处理等需求,为用户提供流畅的抽奖体验,助力业务顺利开展。本方案将涵盖抽奖活动的整体架构设计、核心流程逻辑、关键功能实现以及…...

macOS多出来了:Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用

文章目录 问题现象问题原因解决办法 问题现象 macOS启动台&#xff08;Launchpad&#xff09;多出来了&#xff1a;Google云端硬盘、YouTube、表格、幻灯片、Gmail、Google文档等应用。 问题原因 很明显&#xff0c;都是Google家的办公全家桶。这些应用并不是通过独立安装的…...

鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序

一、开发环境准备 ​​工具安装​​&#xff1a; 下载安装DevEco Studio 4.0&#xff08;支持HarmonyOS 5&#xff09;配置HarmonyOS SDK 5.0确保Node.js版本≥14 ​​项目初始化​​&#xff1a; ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...

微服务商城-商品微服务

数据表 CREATE TABLE product (id bigint(20) UNSIGNED NOT NULL AUTO_INCREMENT COMMENT 商品id,cateid smallint(6) UNSIGNED NOT NULL DEFAULT 0 COMMENT 类别Id,name varchar(100) NOT NULL DEFAULT COMMENT 商品名称,subtitle varchar(200) NOT NULL DEFAULT COMMENT 商…...

【Zephyr 系列 10】实战项目:打造一个蓝牙传感器终端 + 网关系统(完整架构与全栈实现)

🧠关键词:Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者:希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数:约 5200 字 ✨ 项目总览 在物联网实际项目中,**“终端 + 网关”**是…...

安全突围:重塑内生安全体系:齐向东在2025年BCS大会的演讲

文章目录 前言第一部分&#xff1a;体系力量是突围之钥第一重困境是体系思想落地不畅。第二重困境是大小体系融合瓶颈。第三重困境是“小体系”运营梗阻。 第二部分&#xff1a;体系矛盾是突围之障一是数据孤岛的障碍。二是投入不足的障碍。三是新旧兼容难的障碍。 第三部分&am…...

LLMs 系列实操科普(1)

写在前面&#xff1a; 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容&#xff0c;原视频时长 ~130 分钟&#xff0c;以实操演示主流的一些 LLMs 的使用&#xff0c;由于涉及到实操&#xff0c;实际上并不适合以文字整理&#xff0c;但还是决定尽量整理一份笔…...

MinIO Docker 部署:仅开放一个端口

MinIO Docker 部署:仅开放一个端口 在实际的服务器部署中,出于安全和管理的考虑,我们可能只能开放一个端口。MinIO 是一个高性能的对象存储服务,支持 Docker 部署,但默认情况下它需要两个端口:一个是 API 端口(用于存储和访问数据),另一个是控制台端口(用于管理界面…...