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

微信小程序基础工作模板

1.轮播图

点击跳转官方文档

简单例子 

<!-- 顶部轮播图 -->
<swiper indicator-dots="true" class="banner" autoplay="true" interval="2000"><swiper-item><image src="../../images/轮播图1.jpg" ></image></swiper-item><swiper-item><image src="../../images/轮播图2.jpg" ></image></swiper-item><swiper-item><image src="../../images/轮播图3.jpg" ></image></swiper-item>
</swiper>

 `<swiper>` 组件通常用于实现轮播图效果。

1. indicator-dots="true":
    * `indicator-dots` 属性用于控制是否显示面板指示点。
    * `true` 表示显示指示点,即在轮播图的下方显示一些小的圆点,每个圆点代表一个轮播项,当前激活的轮播项对应的圆点会被高亮显示。

2. autoplay="true"(通常配合interval使用):
    * `autoplay` 属性用于控制是否自动切换轮播项。
    * `true` 表示自动切换,即轮播图会自动滚动到下一个轮播项。
3. interval="2000":
    * `interval` 属性用于设置自动切换时间间隔,单位是毫秒(ms)。
    * 在这个例子中,`interval="2000"` 表示每过 2000 毫秒(即 2 秒)轮播图会自动滚动到下一个轮播项。

2.导航

<!-- 导航图 -->
<view class="body">
<navigator url="../spring/index" class="body-item"><image src="../../images/荠菜(野荠).png" class="pic" ></image><view class="text">春</view>
</navigator>
<navigator url="../summer/index" class="body-item"><image src="../../images/薄荷.png" class="pic"></image><view class="text">夏</view>
</navigator>
<navigator url="../autumn/index" class="body-item"><image src="../../images/苋菜.png" class="pic"></image><view class="text">秋</view>
</navigator>
<navigator url="../winter/index" class="body-item"><image src="../../images/白菜.png" class="pic"></image><view class="text">冬</view>
</navigator>
</view>

样式

下面是对这段代码的详细解释:

  1. .body

    • display: flex;:将.body元素的显示方式设置为Flexbox布局。Flexbox允许你以简单、直观的方式来设计和对齐内容。
    • flex-wrap: wrap;:这是一个flex容器的属性,它决定了当子元素的总大小超过容器的大小时,子元素应该如何换行。wrap值意味着子元素将在必要时换行到下一行。
    • width: 100%;:设置.body元素的宽度为其父元素宽度的100%。
    • background-color: #ffffff;:设置.body元素的背景颜色为白色。
    • padding-top: 25rpx;:在.body元素的顶部添加25个rpx(responsive pixel,响应式像素,常用于微信小程序等环境)的内边距。
  2. .body-item

    • display: flex;:同样,将.body-item元素的显示方式设置为Flexbox布局。
    • flex-direction: column;:这是flex容器的属性,它决定了子元素在主轴上的排列方向。column值意味着子元素将垂直堆叠(从上到下)。
    • justify-content: center;:这是flex容器的属性,用于在主轴(对于.body-item来说,主轴是垂直的)上对齐子元素。center值意味着子元素将在垂直方向上居中对齐。
    • align-items: center;:这是flex容器的属性,用于在交叉轴(对于.body-item来说,交叉轴是水平的)上对齐子元素。center值意味着子元素将在水平方向上居中对齐。
    • width: 25%;:设置.body-item元素的宽度为其父元素宽度的25%。假设.body元素有4个.body-item子元素,并且.body元素的宽度足够大,那么这四个.body-item元素将并排显示,每个占据一行宽度的四分之一。
    • margin-bottom: 20rpx;:在.body-item元素的底部添加20个rpx的外边距。这有助于在垂直方向上分隔不同的.body-item元素。

简而言之,这段代码创建了一个名为.body的flex容器,该容器中的子元素将自动换行,并且每个子元素都将垂直和水平居中对齐,占据父容器宽度的25%,并在底部有20rpx的外边距。

3.卡片类(新闻,知识等相似性较强的)

1.在miniprogram创建两个文件夹

一个文件夹,如data,存储数据,一个文件夹,如templates,在里面做组件

2.data:存储封面和详情页的数据

var list = [{id:'34','imgUrl':"../../images/炮仗花.jpg",'imgUrl2':"../../images/炮仗花 (2).jpg",title:"名称:炮仗花",test:"炮仗花",viceTest:"别名:鞭炮花",account:"科类:紫葳科",value:"药用价值:炮仗花有清喉利咽,润肺止咳的功效,治疗肺痨,咽红肿痛和不论新旧的咳嗽",precautions:"注意事项:食用要适量",cooking:"烹饪方式:采摘下来的炮仗花,洗净,去掉花茎,加入面粉、鸡蛋进行煎炸"
}]var summerList = [{id:'100','imgUrl':"../../images/水性杨花.jpg",'imgUrl2':"../../images/水性杨花 (2).jpg",title:"名称:水性杨花",test:"水性杨花",viceTest:"别名:海菜花",value:"食用价值:水性杨花菜具有辅助中和多余胃酸、促进肠道蠕动、调控自身血脂水平的功效",precautions:"注意事项:不宜同猪肝同食 脾胃虚寒、久泄泻者少食",cooking:"烹饪方式:可以凉拌、清炒、煮汤"
}]var autumnList = [{id:'201','imgUrl':"../../images/白茅根.jpg",title:"名称:白茅根",test:"白茅根",viceTest:"别名:毛草根、丝茅根",value:"食用价值:白毛的花苞可以食用,根可入药。有凉血止血,清热通淋的作用",precautions:"注意事项:对于脾胃虚寒,阳虚寒,肾虚寒出血或呕血以及阴寒吐泻等人群不能吃白茅根,容易引发或加重机体的不适症状",cooking:"烹饪方式:洗净即可,可以生食、炖汤,煮水喝"
}]var winterList = [{id:'301','imgUrl':"../../images/刺老包.jpg",title:"名称:刺老包",test:"刺老包",viceTest:"别名:楤木、雀不踏、虎阳刺、通刺、黄龙苞",value:"食用价值:刺老包具有祛风除湿,利水和中,活血解毒等功效,对于风湿关节痛,腰酸背痛,肾虚水肿,消渴,吐血,疟疾,深部脓疡也有一定效果",precautions:"注意事项:注意适量食用,不要食用过量",cooking:"烹饪方式:刺老包的吃法也多种多样,可以炒食、做汤、腌菜、裹面糊油炸等等"
}]module.exports.list = list;
module.exports.summerList = summerList;
module.exports.autumnList = autumnList;
module.exports.winterList = winterList;

 module.exports.list = list; 

  • 创建一个名为 list 的属性在 module.exports 对象上。
  • 将 list 变量(或对象的值)分配给 module.exports.list

3. 制造一个名为card的组件

<template name="card"><view class="card"><view class="img"><image src='{{item.imgUrl}}' class="image"></image></view><view class="text"><view>{{item.title}}</view><view class="ViceText">{{item.viceTest}}</view><view class="ViceText">{{item.account}}</view></view></view>
</template>

4.引入模板

<!--wxml引入模板-->
<import src='../../templates/KnowledgeCards/KnowledgeCards.wxml'/>
<view wx:for="{{list}}" wx:key="index" bindtap="tiao" data-mark="{{item.id}}"><template is = 'card' data='{{item}}'></template>
</view>

* `wx:for="{{list}}"`: 这是一个列表渲染指令。它告诉小程序遍历`list`数组,并为数组中的每个元素创建一个`<view>`组件的副本。 * `wx:key="index"`: 当使用`wx:for`时,最好为每一个循环的项指定一个唯一的标识符,以便小程序可以更有效地更新视图。在这里,我们使用了数组的索引作为键。

/* wxss引入模板 */
@import '../../templates/KnowledgeCards/KnowledgeCards.wxss';
// pages/spring/index.js
//引入其他模块
var list = require('../../data/cardList.js')
Page({data: {list:list.list},/*** 生命周期函数--监听页面加载*/onLoad(options) {console.log(list);},//跳转页面---详情页tiao:function(e) {console.log(e.currentTarget.dataset.mark)wx.navigateTo({url: '../detail/detail?mark=' + e.currentTarget.dataset.mark,})},
})

5.详情页 ,点击封面达到跳转对应数据的效果,只需做一个detail设计

<!--wxml引入模板-->
<import src='../../templates/KnowledgeCards/KnowledgeCards.wxml'/>
<view wx:for="{{list}}" wx:key="index" bindtap="tiao" data-mark="{{item.id}}"><template is = 'card' data='{{item}}'></template>
</view>

* `bindtap="tiao"`: 当用户点击这个`<view>`组件时,会触发一个名为`tiao`的事件处理函数。 * `data-mark="{{item.id}}"`: 这是一个自定义数据属性。它的值设置为当前遍历到的数组元素的`id`属性。这可以在事件处理函数`tiao`中通过`e.currentTarget.dataset.mark`访问。  

  tiao:function(e) {console.log(e.currentTarget.dataset.mark)wx.navigateTo({url: '../detail/detail?mark=' + e.currentTarget.dataset.mark,})},
<!--pages/detail/detail.wxml-->
<!-- 标题 -->
<view class="title">{{dataList.test}}</view>
<image src = '{{dataList.imgUrl}}' class="image"></image>
<view class="subTitle"><view>{{dataList.viceTest}}</view><view class="value">{{dataList.account}}</view>
</view>
<view class="value">{{dataList.value}}</view>
<view class="value">{{dataList.precautions}}</view>
<view class="value">{{dataList.cooking}}</view>
<image src = '{{dataList.imgUrl2}}' class="image2"></image>

 

 

 

 

 

相关文章:

微信小程序基础工作模板

1.轮播图 点击跳转官方文档 简单例子 <!-- 顶部轮播图 --> <swiper indicator-dots"true" class"banner" autoplay"true" interval"2000"><swiper-item><image src"../../images/轮播图1.jpg" >…...

简单说一下STL中的map容器的特点、底层实现和应用场景【面试】

特点&#xff1a; 基于红黑树&#xff1a;std::map利用红黑树的自平衡特性&#xff0c;确保操作的平衡性。有序容器&#xff1a;元素根据键的顺序自动排序&#xff0c;排序依据是预定义的键比较函数。唯一键值&#xff1a;容器保证每个键的唯一性&#xff0c;不允许重复键存在…...

Ubuntu22.04之有道词典无法画词翻译替代方案(二百四十九)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…...

AnythingLLM 的 Docker 使用

AnythingLLM是使用大语言模型LLM的一站式简便框架。官网的介绍如下&#xff1a; AnythingLLM is the easiest to use, all-in-one AI application that can do RAG, AI Agents, and much more with no code or infrastructure headaches. 1. 使用官方docker 最方便的方法是使…...

数组还可以这样用!常用但不为人知的应用场景

哈喽&#xff0c;各位小伙伴们&#xff0c;你们好呀&#xff0c;我是喵手。运营社区&#xff1a;C站/掘金/腾讯云&#xff1b;欢迎大家常来逛逛 今天我要给大家分享一些自己日常学习到的一些知识点&#xff0c;并以文字的形式跟大家一起交流&#xff0c;互相学习&#xff0c;一…...

C++模板元编程:编译时的魔法

1. 引言 在C的世界中&#xff0c;模板元编程是一种在编译时执行计算的强大技术。它允许开发者编写高度灵活和高效的代码&#xff0c;这些代码可以在不牺牲性能的前提下&#xff0c;根据类型和值的不同而变化。本文将深入探讨模板元编程的奥秘&#xff0c;并展示如何在现代C开发…...

SQL进阶day10————多表查询

目录 1嵌套子查询 1.1月均完成试卷数不小于3的用户爱作答的类别 1.2月均完成试卷数不小于3的用户爱作答的类别 ​编辑1.3 作答试卷得分大于过80的人的用户等级分布 2合并查询 2.1每个题目和每份试卷被作答的人数和次数 2.2分别满足两个活动的人 3连接查询 3.1满足条件…...

debug调试_以Pycharm为例

文章目录 作用步骤打断点调试调试窗口 作用 主要是检查逻辑错误&#xff0c;而非语法错误。 步骤 打断点 在需要调试的代码行前打断点&#xff0c;执行后会停顿在断点位置&#xff08;不运行&#xff09; 调试 右键“debug”&#xff0c;或者直接点击右上角的小虫子 调试…...

wms第三方海外仓系统:如何为中小型海外仓注入新活力

对于中小型海外仓来说&#xff0c;想在大型集团海外仓同台竞争中获得优胜&#xff0c;提升其管理效率是非常关键的一环。 我们所熟知的wms系统&#xff0c;也就是第三方成熟海外仓系统&#xff0c;正是这些海外仓企业提升管理水平、降低成本的重要工具。 1、wms第三方海外仓系…...

html是什么?http是什么?

html Html是什么&#xff1f;http是什么&#xff1f; Html 超文本标记语言&#xff1b;负责网页的架构&#xff1b; http(&#xff08;HyperText Transfer Protocol&#xff09;超文本传输协议&#xff1b; https&#xff08;全称&#xff1a;Hypertext Transfer Protocol …...

L1-007 念数字js实现

异步解法 const readline require("readline"); const rl readline.createInterface({input: process.stdin,output: process.stdout, }); const input_arr [];//储存数据 rl.on(line, function (line) {input_arr.push(line); } ); rl.on(close, function () {/…...

Perl 运算符

Perl 运算符 Perl 是一种功能强大的编程语言&#xff0c;广泛应用于系统管理、网络编程、GUI 创建、数据库访问等众多领域。Perl 的语法灵活&#xff0c;支持多种编程范式&#xff0c;包括过程式、面向对象和函数式编程。在 Perl 中&#xff0c;运算符扮演着重要的角色&#x…...

语法04 C++ 标准输入语句

标准输入 使用格式&#xff1a;cin >> 输入的意思就是把一个值放到变量里面去&#xff0c;也就是变量的赋值&#xff0c;这个值是由我们自己输入的。 (注意:输入变量前要先定义&#xff0c;输入完之后要按Enter键。) 输入多个变量&#xff0c;与输出类似&#xff0c;…...

python数据分析--- ch6-7 python容器类型的数据及字符串

python数据分析---ch6-7 python容器类型的数据及字符串 1. Ch6--容器类型的数据1.1 序列1.1.1 序列的索引操作1.1.2 加和乘操作1.1.3 切片操作1.1.4 成员测试 1.2 列表1.2.1 创建列表1.2.2 追加元素1.2.3 插入元素1.2.4 替换元素1.2.5 删除元素1.2.6 列表排序&#xff08;1&…...

【Linux取经路】守护进程

文章目录 一、前台进程和后台进程二、Linux 的进程间关系三、setsid——将当前进程设置为守护进程四、daemon——设置为守护进程五、结语 一、前台进程和后台进程 Linux 中每一次用户登录都是一个 session&#xff0c;一个 session 中只能有一个前台进程在运行&#xff0c;键盘…...

Nginx之文件下载服务器

1.概述 在对外分享文件时&#xff0c;利用Nginx搭建一个简单的下 载文件管理服务器&#xff0c;文件分享就会变得非常方便。利 用Nginx的诸多内置指令可实现自动生成下载文件列表 页、限制下载带宽等功能。配置样例如下&#xff1a; server {listen 8080;server_name localhos…...

OpenCV学习(4.11) OpenCV中的图像转换

1. 目标 在本节中&#xff0c;我们将学习 使用OpenCV查找图像的傅立叶变换利用Numpy中可用的FFT功能傅立叶变换的一些应用我们将看到以下函数&#xff1a;**cv.dft()** &#xff0c;**cv.idft()** 等 理论 傅立叶变换用于分析各种滤波器的频率特性。对于图像&#xff0c;使用…...

2024.6.13每日一题

LeetCode 子序列最大优雅度 题目链接&#xff1a;2813. 子序列最大优雅度 - 力扣&#xff08;LeetCode&#xff09; 题目描述 给你一个长度为 n 的二维整数数组 items 和一个整数 k 。 items[i] [profiti, categoryi]&#xff0c;其中 profiti 和 categoryi 分别表示第 i…...

Linux命令详解(2)

文本处理是Linux命令行的重要应用之一。通过一系列强大的命令&#xff0c;用户可以轻松地对文本文件进行编辑、查询和转换。 cat&#xff1a; 这个命令用于查看文件内容。它可以一次性显示整个文件&#xff0c;或者分页显示。此外&#xff0c;cat 还可以用于合并多个文件的内容…...

iOS ReactiveCocoa MVVM

学习了在MVVM中如何使用RactiveCocoa&#xff0c;简单的写上一个demo。重点在于如何在MVVM各层之间使用RAC的信号来更方便的在各个层之间进行响应式数据交互。 demo需求&#xff1a;一个登录界面(登录界面只有账号和密码都有输入&#xff0c;登录按钮才可以点击操作)&#xff0…...

图文解析ASN.1中BER编码:结构类型、编码方法、编码实例

本文将详细介绍ASN.1中的BER编码规则&#xff0c;包括其编码机制、数据类型表示、以及如何将复杂的数据结构转换为二进制数据。通过本文的阅读&#xff0c;读者将对ASN.1中的BER编码有一个全面的理解。 目录 一.引言 二.BER编码基本结构 ▐ 1. 类型域&#xff08;Type&#…...

jQuery如何停止动画队列

在jQuery中&#xff0c;你可以使用.stop()方法来停止动画队列。.stop()方法有几个可选的参数&#xff0c;可以用来控制停止动画的方式。 以下是.stop()方法的基本用法和一些参数选项&#xff1a; 无参数&#xff1a;立即停止当前动画&#xff0c;并跳到最后的状态。后续的动画…...

vue3+electron搭建桌面软件

vue3electron开发桌面软件 最近有个小项目, 客户希望像打开 网易云音乐 那么简单的运行起来系统. 前端用 Vue 会比较快一些, 因此决定使用 electron 结合 Vue3 的方式来完成该项目. 然而, 在实施过程中发现没有完整的博客能够记录从创建到打包的流程, 摸索一番之后, 随即梳理…...

oracle常用经典SQL查询

oracle常用经典SQL查询(转贴) oracle常用经典SQL查询 常用SQL查询&#xff1a; 1、查看表空间的名称及大小 select t.tablespace_name, round(sum(bytes/(1024*1024)),0) ts_size from dba_tablespaces t, dba_data_files d where t.tablespace_name d.tablespace_name grou…...

Android shell 常用 debug 命令

目录 1、查看版本2、am 命令3、pm 命令4、dumpsys 命令5、sed命令6、log定位查看APK进程号7、log定位使用场景 1、查看版本 1.1、Android串口终端执行 getprop ro.build.version.release #获取Android版本 uname -a #查看linux内核版本信息 uname -r #单独查看内核版本 1.2、…...

Unity3D Shader数据传递语法详解

在Unity3D中&#xff0c;Shader是用于渲染图形的一种程序&#xff0c;它定义了物体在屏幕上的外观。Shader通过接收输入数据&#xff08;如顶点位置、纹理坐标、光照信息等&#xff09;并计算像素颜色来工作。为了使得Shader能够正确运行并产生期望的视觉效果&#xff0c;我们需…...

计算机组成原理(五)

一、链式查询方式 接口的优先级固定不变 在链式查询的情况下&#xff0c;设备的优先级通常与其在链中的位置有关。具体来说&#xff0c;越靠近查询链的起始位置的设备通常具有较高的优先级&#xff0c;而越靠近链的末尾位置的设备优先级较低。 优点&#xff1a; 简单实现&am…...

后端项目实战--瑞吉外卖项目软件说明书

瑞吉外卖项目软件说明书 一、项目概述 瑞吉外卖项目是一个外卖服务平台&#xff0c;用户可以通过该平台浏览餐厅菜单、下单、支付以及追踪订单状态。产品原型就是一款产品成型之前的一个简单的框架&#xff0c;就是将页面的排版布局展现出来&#xff0c;使产品得初步构思有一…...

LeetCode | 27.移除元素

这道题的思路和26题一模一样&#xff0c;由于要在元素组中修改&#xff0c;我们可以设置一个index表示目前要修改原数组的第几位&#xff0c;由于遍历&#xff0c;访问原数组永远会在我们修改数组之前&#xff0c;所以不用担心数据丢失的问题&#xff0c;一次遍历数组&#xff…...

为什么要选择AWS?AWS的优势有哪些?

亚马逊云服务器&#xff08;Amazon Web Services&#xff0c;AWS&#xff09;是全球领先的云计算服务提供商之一&#xff0c;其提供的云服务器是在全球范围内可用的弹性计算服务。对于很多用户来说&#xff0c;他们可能会担心亚马逊云服务器是否会对服务器的使用进行限制。以下…...

驻马店 网站建设/企业内训课程

关于HTTP/2&#xff0c;最近你可能没少听到过他&#xff0c;首先&#xff0c;如果你了解过Java 9的特性&#xff0c;那么你会发现在Java9中&#xff0c;提供了新的方式来处理HTTP调用&#xff0c;提供了新的HTTP Client&#xff0c;将替代HttpURLConnection&#xff0c;并提供对…...

wordpress+文章输出/百度做推广一般要多少钱

命令模式&#xff08;commandPattern&#xff09;是一种数据驱动的设计模式。请求以命令的形式包裹在对象中&#xff0c;并传给调用对象。调用对象寻找可以处理该命令合适的对象&#xff0c;并把该命令传给相应的对象&#xff0c;该对象执行命令。 1. 介绍 意图&#xff1a;将…...

想建个图片网站/网络营销平台名词解释

out_sa()函数报文封装思想讲解 1. out_sa前言 我已经在上一篇文章中将in_struct函数的基本原理进行了阐述&#xff0c;而out_struct()的实现基本是相同的&#xff0c;如果能理解in_struct&#xff08;&#xff09;函数&#xff0c;那么自己再去看out_struct、out_raw、out_ge…...

锦州网站建设预订/网页设计个人主页

一个整数总能够拆分为2的幂的和。比如&#xff1a; 7124 71222 71114 711122 7111112 71111111 总共同拥有6种不同的拆分方式。 再比方&#xff1a;4能够拆分成&#xff1a;4 4&#xff0c;4 1 1 1 1&#xff0c;4 2 2&#xff0c;4112。用f(n)表示n的不同拆分的种…...

专门做网站的公司与外包公司/seo搜索引擎优化培训班

昨天公司的ip进行了修改&#xff0c;在今天从远程提取代码的过程中提示network error connection timed out错误&#xff0c;从网上看了一下解决方法 1&#xff1a;打开项目文件夹&#xff0c;点击查看 2&#xff1a;勾选隐藏的项目 3&#xff1a;进入下图所示的文件目录下&…...

怎样做pdf电子书下载网站/百度收录时间

7.C循环语句重复做一件事情是令人痛苦的&#xff0c;要不然老师也不会罚抄作业100遍了。如果让小孩从1数到100就给糖吃&#xff0c;她肯定欣然接受&#xff0c;但如果让她数到1000就一定要反抗了。生活中很多时候重复做一件事是不可避免的&#xff0c;比如交通信号灯的切换&…...