当前位置: 首页 > 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 能够显著提高检索效率…...

椭圆曲线密码学(ECC)

一、ECC算法概述 椭圆曲线密码学&#xff08;Elliptic Curve Cryptography&#xff09;是基于椭圆曲线数学理论的公钥密码系统&#xff0c;由Neal Koblitz和Victor Miller在1985年独立提出。相比RSA&#xff0c;ECC在相同安全强度下密钥更短&#xff08;256位ECC ≈ 3072位RSA…...

使用分级同态加密防御梯度泄漏

抽象 联邦学习 &#xff08;FL&#xff09; 支持跨分布式客户端进行协作模型训练&#xff0c;而无需共享原始数据&#xff0c;这使其成为在互联和自动驾驶汽车 &#xff08;CAV&#xff09; 等领域保护隐私的机器学习的一种很有前途的方法。然而&#xff0c;最近的研究表明&…...

镜像里切换为普通用户

如果你登录远程虚拟机默认就是 root 用户&#xff0c;但你不希望用 root 权限运行 ns-3&#xff08;这是对的&#xff0c;ns3 工具会拒绝 root&#xff09;&#xff0c;你可以按以下方法创建一个 非 root 用户账号 并切换到它运行 ns-3。 一次性解决方案&#xff1a;创建非 roo…...

Neo4j 集群管理:原理、技术与最佳实践深度解析

Neo4j 的集群技术是其企业级高可用性、可扩展性和容错能力的核心。通过深入分析官方文档,本文将系统阐述其集群管理的核心原理、关键技术、实用技巧和行业最佳实践。 Neo4j 的 Causal Clustering 架构提供了一个强大而灵活的基石,用于构建高可用、可扩展且一致的图数据库服务…...

Java 加密常用的各种算法及其选择

在数字化时代&#xff0c;数据安全至关重要&#xff0c;Java 作为广泛应用的编程语言&#xff0c;提供了丰富的加密算法来保障数据的保密性、完整性和真实性。了解这些常用加密算法及其适用场景&#xff0c;有助于开发者在不同的业务需求中做出正确的选择。​ 一、对称加密算法…...

Springcloud:Eureka 高可用集群搭建实战(服务注册与发现的底层原理与避坑指南)

引言&#xff1a;为什么 Eureka 依然是存量系统的核心&#xff1f; 尽管 Nacos 等新注册中心崛起&#xff0c;但金融、电力等保守行业仍有大量系统运行在 Eureka 上。理解其高可用设计与自我保护机制&#xff0c;是保障分布式系统稳定的必修课。本文将手把手带你搭建生产级 Eur…...

华为云Flexus+DeepSeek征文|DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建

华为云FlexusDeepSeek征文&#xff5c;DeepSeek-V3/R1 商用服务开通全流程与本地部署搭建 前言 如今大模型其性能出色&#xff0c;华为云 ModelArts Studio_MaaS大模型即服务平台华为云内置了大模型&#xff0c;能助力我们轻松驾驭 DeepSeek-V3/R1&#xff0c;本文中将分享如何…...

蓝桥杯3498 01串的熵

问题描述 对于一个长度为 23333333的 01 串, 如果其信息熵为 11625907.5798&#xff0c; 且 0 出现次数比 1 少, 那么这个 01 串中 0 出现了多少次? #include<iostream> #include<cmath> using namespace std;int n 23333333;int main() {//枚举 0 出现的次数//因…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

基于 TAPD 进行项目管理

起因 自己写了个小工具&#xff0c;仓库用的Github。之前在用markdown进行需求管理&#xff0c;现在随着功能的增加&#xff0c;感觉有点难以管理了&#xff0c;所以用TAPD这个工具进行需求、Bug管理。 操作流程 注册 TAPD&#xff0c;需要提供一个企业名新建一个项目&#…...