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

uniapp的配置和使用

①安装环境和编辑器

注册小程序账号

微信开发者工具下载

uniapp 官网

HbuilderX 下载

首先先下载Hbuilder和微信开发者工具 (都是傻瓜式安装),然后注册小程序账号:

拿到appid:

②简单通过demo使用微信开发者工具和Hbuilder

打开Hbuilder创建一个项目:

简单配置一下:将第一步获得的appid输入在此

打开微信开发者工具进行配置:

 打开服务端口(不然项目无法通过微信开发者工具打开):

 运行项目:

成功界面:

 在page右键新建页面,所需页面如图:

 

打开uniapp官网:

 

下载这两个组件:

 

创建默认样式:

global.css :

*{box-sizing: border-box;
}
page{background-color: #f5f5f5;color: #333;
}

在main.js引入:

import './static/css/global.css'

修改pages.json:

{"pages": [ //pages数组中第一项表示应用启动页,参考:https://uniapp.dcloud.io/collocation/pages{"path": "pages/index/index","style": {"navigationBarTitleText": "首页"//这里如果不写会采用项目名}},{"path" : "pages/category/category","style" : {"navigationBarTitleText" : "","enablePullDownRefresh" : false}},{"path" : "pages/user/user","style" : {"navigationBarTitleText" : "","enablePullDownRefresh" : false}}],"globalStyle": {"navigationBarTextStyle": "white","navigationBarTitleText": "uni-app",//项目名"navigationBarBackgroundColor": "#3cb371","backgroundColor": "#F8F8F8"},"uniIdRouter": {},"condition" : { //模式配置,仅开发期间生效"current": 0, //当前激活的模式(list 的索引项)"list": [{"name": "", //模式名称"path": "", //启动页面,必选"query": "" //启动参数,在页面的onLoad函数里面得到}]},"tabBar": {//配置导航栏"selectedColor": "#FFD700","list": [{"pagePath": "pages/index/index","iconPath": "static/logo.png","selectedIconPath": "static/logo.png","text": "首页"},{"pagePath": "pages/category/category","iconPath": "static/logo.png","selectedIconPath": "static/logo.png","text": "分类"},{"pagePath": "pages/user/user","iconPath": "static/logo.png","selectedIconPath": "static/logo.png","text": "我的"}]}
}

index.vue:

<template><view><view><swiper circular autoplay :interval="3000" :duration="500" indicator-dots style="height: 350rpx;"indicator-color="rgba(255, 255, 255, 0.6)" indicator-active-color="#3CB371"><swiper-item v-for="item in imgs" :key="item" ><image :src="item" alt="" mode="widthFix" style="width: 100%;" /></swiper-item></swiper></view><view style="margin: 10px;"><view style="padding: 5px;background-color: white;font-size: 12px;border-radius: 5px;display: flex;align-items: center;"><uni-icons type="sound" size="20"></uni-icons><view>{{notice}}</view></view></view><view style="background-color: white; margin: 5px 0; border-radius: 10px;"><uni-row><uni-col :span="6"><view class="grid-item-box"><image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image><text style="font-size: 13px; margin-top: 5px;">时令水果</text></view></uni-col><uni-col :span="6"><view class="grid-item-box"><image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image><text style="font-size: 13px; margin-top: 5px;">品质肉禽</text></view></uni-col><uni-col :span="6"><view class="grid-item-box"><image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image><text style="font-size: 13px; margin-top: 5px;">新鲜水产</text></view></uni-col><uni-col :span="6"><view class="grid-item-box"><image mode="widthFix" style="width: 50%;" src="../../static/logo.png"></image><text style="font-size: 13px; margin-top: 5px;">蔬菜蛋品</text></view></uni-col></uni-row></view><view style="margin: 5px 0; font-size: 12px;"><uni-row :gutter='10'><uni-col :span='12' v-for="item in goodsList" :key="item.name"><view style="margin-bottom: 5px; background-color: white; padding: 10px; border-radius: 10px;"><image :src="item.img" mode="widthFix" style="width: 100%;"></image><view class="lineEllipsis">{{ item.name }}</view><view style="color: red; margin-top: 5px; font-weight: bold; font-size: 14px;">¥{{ item.price }}</view><view style="text-align: right;"><uni-icons type="plus" size="25" style="color: #666;" @click="addCart(item)"></uni-icons></view></view></uni-col></uni-row></view></view>
</template><script>export default {data() {return {imgs:[require('../../static/logo.png'),require('../../static/logo.png'),require('../../static/logo.png'),],notices: [{content: "亲哥哥哥今晚电商直播真的很棒棒噢"},{content: "啊真的是 uniapp有手就会啊"},{content: "真的吗?这么easy?"},{content: "不信你去看看青哥哥的教程呗"},],notice:'',goodsList: [{ name: '固伦天原 农家土鸡蛋现捡新鲜谷物虫草柴鸡蛋初生蛋简装 20枚装', price: 19.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/147254/20/37798/87316/6458689bF5bb085ce/f1177ea39ce03322.jpg' },{ name: '大口鲜 熟冻帝王蟹礼盒装 海鲜礼包 整只 3.2-3.6斤现货 海产礼盒', price: 79.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/210206/31/4285/246694/61614b6bE8e495865/1b801854736d9736.jpg' },{ name: '仙泉湖三去星洲红 500g*1条 净膛冷冻罗非鱼海鲜食材 刺少', price: 99.9,img: 'https://m11.360buyimg.com/babel/s522x456_jfs/t1/139489/10/25554/185007/61d68c23Eef30e5c7/86fac8623b27de32.jpg' },{ name: '洛川苹果80mm大果 净重4.2斤 陕西延安红富士新鲜时令生鲜水果', price: 19.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/206463/33/3190/152008/6155d86eE00924ef0/8e955e07ea8d1942.jpg' },{ name: '妙果樱广西青芒新鲜水果大青芒果当季时令生鲜芒果 3斤大果(单果250g+)', price: 29.9,img: 'https://m11.360buyimg.com/babel/s561x561_jfs/t1/142695/20/37414/69619/64b8d41bF0e06aea0/8961fde6fe2b619b.jpg' },]}},onLoad() {this.loadnotince()},methods: {loadnotince(){let i=0this.notice=this.notices[0].contentsetInterval(()=>{this.notice=this.notices[i++].contentif(i==this.notices.length){i=0}},5000)}}}
</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;}.grid-item-box {display: flex;flex-direction: column;align-items: center;justify-content: center;},.lineEllipsis {word-break: break-all;text-overflow: ellipsis;display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;/* 超出几行省略 */overflow: hidden;}
</style>

最终效果:

相关文章:

uniapp的配置和使用

①安装环境和编辑器 注册小程序账号 微信开发者工具下载 uniapp 官网 HbuilderX 下载 首先先下载Hbuilder和微信开发者工具 &#xff08;都是傻瓜式安装&#xff09;&#xff0c;然后注册小程序账号&#xff1a; 拿到appid&#xff1a; ②简单通过demo使用微信开发者工具和…...

【ES】--Elasticsearch的分词器深度研究

目录 一、问题描述及分析二、analyze分析器原理三、 multi-fields字段支持多场景搜索(如同时简繁体、拼音等)1、ts_match_analyzer配置分词2、ts_match_all_analyzer配置分词3、ts_match_1_analyzer配置分词4、ts_match_2_analyzer配置分词5、ts_match_3_analyzer配置分词6、ts…...

【Langchain Agent研究】SalesGPT项目介绍(三)

【Langchain Agent研究】SalesGPT项目介绍&#xff08;二&#xff09;-CSDN博客 上节课&#xff0c;我们介绍了salesGPT项目的初步的整体结构&#xff0c;poetry脚手架工具和里面的run.py。在run.py这个运行文件里&#xff0c;引用的最主要的类就是SalesGPT类&#xff0c;今天我…...

Java安全 URLDNS链分析

Java安全 URLDNS链分析 什么是URLDNS链URLDNS链分析调用链路HashMap类分析URL类分析 exp编写思路整理初步expexp改进最终exp 什么是URLDNS链 URLDNS链是Java安全中比较简单的一条利用链&#xff0c;无需使用任何第三方库&#xff0c;全依靠Java内置的一些类实现&#xff0c;但…...

【网站项目】026校园美食交流系统

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…...

使用raw.gitmirror.com替换raw.githubusercontent.com以解决brew upgrade python@3.12慢的问题

MacOS系统上&#xff0c;升级python3.12时&#xff0c;超级慢&#xff0c;而且最后还失败了。看了日志&#xff0c;发现是用curl从raw.githubusercontent.com上下载Python安装包超时了。 解决方案一&#xff1a;开启翻墙工具&#xff0c;穿越围墙 解决方案二&#xff1a;使用…...

深度学习的进展

#深度学习的进展# 深度学习的进展 深度学习是人工智能领域的一个重要分支&#xff0c;它利用神经网络模拟人类大脑的学习过程&#xff0c;通过大量数据训练模型&#xff0c;使其能够自动提取特征、识别模式、进行分类和预测等任务。近年来&#xff0c;深度学习在多个领域取得…...

[高性能] - 缓存架构

对于交易系统来说&#xff0c;低延时是核心业务的基本要求。因此需要对业务进行分级&#xff0c;还需要对数据按质量要求进行分类&#xff0c;主要包含两个维度&#xff1a;重要性&#xff0c;延时要求&#xff0c;数据质量。共包含以下三种场景&#xff1a; 1. 重要 延时性要…...

django实现外键

一&#xff1a;介绍 在Django中&#xff0c;外键是通过在模型字段中使用ForeignKey来实现的。ForeignKey字段用于表示一个模型与另一个模型之间的多对一关系。这通常用于关联主键字段&#xff0c;以便在一个模型中引用另一个模型的相关记录。 下面是一个简单的例子&#xff0…...

飞天使-k8s知识点14-kubernetes散装知识点3-Service与Ingress服务发现控制器

文章目录 Service与Ingress服务发现控制器存储、配置与角色 Service与Ingress服务发现控制器 在 Kubernetes 中&#xff0c;Service 和 Ingress 是两种不同的资源类型&#xff0c;它们都用于处理网络流量&#xff0c;但用途和工作方式有所不同。Service 是 Kubernetes 中的一个…...

任务调度

1.学习目标 1.1 定时任务概述 1.2 jdk实现任务调度 1.3 SpringTask实现任务调度 1.4 Spring-Task 分析 1.5 Cron表达式 https://cron.qqe2.com/ 2. Quartz 基本应用 2.1 Quartz 基本介绍 2.2 Quartz API介绍 2.3 入门案例 <dependency> <groupId>org.springframe…...

深刻反思现代化进程:20世纪与21世纪的比较分析及东西方思想家的贡献

深刻反思现代化进程&#xff1a;20世纪与21世纪的比较分析及东西方思想家的贡献 摘要&#xff1a;随着人类社会的快速发展&#xff0c;现代化已成为全球范围内的普遍追求。然而&#xff0c;20世纪至21世纪的现代化进程并非一帆风顺&#xff0c;它伴随着环境破坏、社会不平等和文…...

【FTP讲解】

FTP讲解 1. 介绍2. 工作原理3. 传输模式4. 安全5. 设置FTP服务器6. FTP命令 1. 介绍 FTP&#xff08;File Transfer Protocol&#xff09;是“文件传输协议”的英文缩写&#xff0c;它是用于在网络上进行数据传输的一种协议。FTP是因特网上使用最广泛的协议之一&#xff0c;它…...

java面试题整理

2023.2.14&#xff08;第二天&#xff09; 数组是不是对象&#xff1f; 在Java中&#xff0c;数组是对象。数组是一种引用类型&#xff0c;它可以存储固定大小的相同类型的元素序列。在Java中&#xff0c;数组是通过new关键字创建的&#xff0c;它们在内存中被分配为对象&…...

探索NLP中的N-grams:理解,应用与优化

简介 n-gram[1] 是文本文档中 n 个连续项目的集合&#xff0c;其中可能包括单词、数字、符号和标点符号。 N-gram 模型在许多与单词序列相关的文本分析应用中非常有用&#xff0c;例如情感分析、文本分类和文本生成。 N-gram 建模是用于将文本从非结构化格式转换为结构化格式的…...

JAVA-数组乱序

实现步骤 假设有一组数组numbers从数组中最后一个元素开始遍历设置一个随机数作为循环中遍历到的元素之前的所有元素的下标&#xff0c;即可从该元素之前的所有元素中随机取出一个每次将随机取出的元素与遍历到的元素交换&#xff0c;即可完成乱序 实例如下&#xff1a; im…...

Stable Diffusion 模型下载:majicMIX reverie 麦橘梦幻

本文收录于《AI绘画从入门到精通》专栏,专栏总目录:点这里。 文章目录 模型介绍生成案例案例一案例二案例三案例四案例五案例六案例七案例八案例九案例十...

Java开发四则运算-使用递归和解释器模式

使用递归和解释器模式 程序结构设计具体实现1. 先上最重要的实现类&#xff1a;ExpressionParser&#xff08;最重要&#xff09;2. 再上上下文测试代码&#xff1a;Context&#xff08;程序入口&#xff0c;稍重要&#xff09;3. 使用到的接口和数据结构&#xff08;不太重要的…...

[NSSCTF]-Web:[SWPUCTF 2021 新生赛]easyrce解析

先看网页 代码审计&#xff1a; error_reporting(0); &#xff1a;关闭报错&#xff0c;代码的错误将不会显示 highlight_file(__FILE__); &#xff1a;将当前文件的源代码显示出来 eval($_GET[url]); &#xff1a;将url的值作为php代码执行 解题&#xff1a; 题目既然允许…...

5.深入理解箭头函数 - JS

什么是箭头函数&#xff1f; 箭头函数是指通过箭头函数表达式创建的函数&#xff0c;是匿名函数。 箭头函数表达式的语法更简洁&#xff0c;但语义有差异&#xff0c;所以用法上也有一些限制。尽管如此&#xff0c;箭头函数依旧被广泛运用在需要执行“小函数”的场景。 箭头…...

MOSSE算法在无人机视频跟踪中的应用:一个被低估的轻量级选择?

MOSSE算法&#xff1a;无人机视觉跟踪中未被充分利用的高效解决方案 当你在树莓派或Jetson Nano这样的边缘设备上部署无人机视觉系统时&#xff0c;是否经常面临这样的困境&#xff1a;既需要实时性能&#xff0c;又受限于计算资源和功耗&#xff1f;在众多目标跟踪算法中&…...

新手指南:掌握3MF格式实现Blender高效3D打印工作流

新手指南&#xff1a;掌握3MF格式实现Blender高效3D打印工作流 【免费下载链接】Blender3mfFormat Blender add-on to import/export 3MF files 项目地址: https://gitcode.com/gh_mirrors/bl/Blender3mfFormat 副标题&#xff1a;从格式解析到自动化处理的完整应用方案…...

MATLAB实战:用BEMD算法分解图像并提取特征(附完整代码)

MATLAB实战&#xff1a;二维经验模态分解(BEMD)在图像特征提取中的创新应用 当我们需要从一张X光片中识别微小病灶&#xff0c;或是从卫星图像中提取城市道路网络时&#xff0c;传统图像处理方法往往力不从心。二维经验模态分解(BEMD)就像给图像做"CT扫描"&#xff0…...

告别PS!用WPS宏批量改图片尺寸的隐藏技巧(附JSA API避坑指南)

告别PS&#xff01;用WPS宏批量改图片尺寸的隐藏技巧&#xff08;附JSA API避坑指南&#xff09; 在电商运营、教育培训等日常工作中&#xff0c;批量处理图片是刚需。传统做法要么依赖Photoshop等专业软件&#xff08;学习成本高&#xff09;&#xff0c;要么手动逐个调整&…...

终极指南:使用Rust工具uesave轻松编辑虚幻引擎游戏存档

终极指南&#xff1a;使用Rust工具uesave轻松编辑虚幻引擎游戏存档 【免费下载链接】uesave 项目地址: https://gitcode.com/gh_mirrors/ue/uesave uesave-rs是一款基于Rust语言开发的专业工具&#xff0c;专门用于读取和写入虚幻引擎的GVAS格式游戏存档文件。这款强大…...

避开这3个坑!MIPI走线设计如何减少对GSM信号的干扰(含阻抗匹配计算)

避开这3个坑&#xff01;MIPI走线设计如何减少对GSM信号的干扰&#xff08;含阻抗匹配计算&#xff09; 在消费电子硬件设计中&#xff0c;MIPI接口与射频信号的共存问题一直是工程师面临的棘手挑战。特别是当设备需要同时支持高清显示和GSM通信功能时&#xff0c;MIPI信号对GS…...

Surface硬盘不够用?教你用cfadisk把SD卡变本地硬盘(附详细图文)

Surface硬盘扩容实战&#xff1a;用cfadisk将SD卡完美变身本地存储 每次打开Surface的存储设置&#xff0c;看到那根触目惊心的红色容量条&#xff0c;相信不少用户都会感到焦虑。作为微软旗下最受欢迎的移动生产力工具&#xff0c;Surface系列在便携性和性能上表现出色&#x…...

机器人手臂相机 vs 抓手相机:5个关键区别与选型指南(附避坑技巧)

机器人手臂相机 vs 抓手相机&#xff1a;5个关键区别与选型指南&#xff08;附避坑技巧&#xff09; 在工业自动化领域&#xff0c;视觉引导系统如同机器人的"眼睛"&#xff0c;而相机安装位置的选择往往决定了整个系统的精度与可靠性。当工程师面对手臂相机&#xf…...

从镜像到实战:星图OpenClaw+Qwen3-32B完整链路

从镜像到实战&#xff1a;星图OpenClawQwen3-32B完整链路 1. 为什么选择OpenClawQwen3-32B组合 去年冬天&#xff0c;当我第一次尝试用AI自动化处理周报时&#xff0c;发现公有云方案总在数据隐私和功能定制上让我束手束脚。直到遇见星图平台的OpenClaw镜像与Qwen3-32B组合&a…...

S7-200 PLC与组态王称重配料生产线自动控制系统:后继产品包含梯形图、接线图、原理图及I...

S7-200 PLC和组态王称重配料生产线自动控制系统配料 我们主要的后发送的产品有&#xff0c;带解释的梯形图接线图原理图图纸&#xff0c;io分配&#xff0c;组态画面上周刚结了个小单子&#xff0c;给本地一家饲料厂改了套半自动的称重配料线&#xff0c;用的就是S7-200 PLC加…...