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

微信小程序基础工作模板

news 来源：原创 2024/9/29 10:21:52

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>

 

 

 

 

 

相关文章：

  • 网络安全实战基础——实战工具与攻防环境介绍
  • 小阿轩yx-iptables 防火墙
  • JUC并发编程第十章——Java对象内存布局和对象头
  • bpmn+vue 中文文档
  • Javaweb---HTTPS
  • 笔记：Mysql的安全策略
  • Meta Llama 3 RMSNorm（Root Mean Square Layer Normalization）
  • [每周一更]-(第100期)：介绍 goctl自动生成代码
  • 【归档】git使用
  • HCIA-RS实验-单臂配置
  • 小米路由器如何设置去广告功能，如何设置小米路由器的自定义Hosts（小米路由器如何去除小米广告、去除小米电视盒子开屏广告、视频广告）
  • 基于深度学习的在线选修课程推荐系统
  • 【六袆 - Java】Java 驱动连接Oracle数据库； Java单元测试 连接Oracle；
  • springcloud第4季 springcloud-gateway网关filter案例场景
  • 自定义类型：结构体+结构体内存对齐+结构体实现位段
  • 【vuex入门系列02】mutation接收单个参数和多个参数
  • 2018天猫双11|这就是阿里云！不止有新技术，更有温暖的社会力量
  • C语言笔记（第一章：C语言编程）
  • HTTP请求重发
  • IDEA 插件开发入门教程
  • JAVA SE 6 GC调优笔记
  • Redis在Web项目中的应用与实践
  • 一些基于React、Vue、Node.js、MongoDB技术栈的实践项目
  • 应用生命周期终极 DevOps 工具包
  • ​configparser --- 配置文件解析器​
  • #绘制圆心_R语言——绘制一个诚意满满的圆 祝你2021圆圆满满
  • （1）(1.13) SiK无线电高级配置（五）
  • (2/2) 为了理解 UWP 的启动流程，我从零开始创建了一个 UWP 程序
  • （C语言）共用体union的用法举例
  • (delphi11最新学习资料) Object Pascal 学习笔记---第13章第6节 （嵌套的Finally代码块）
  • （独孤九剑）--文件系统
  • （二）七种元启发算法（DBO、LO、SWO、COA、LSO、KOA、GRO）求解无人机路径规划MATLAB
  • (附源码)计算机毕业设计ssm电影分享网站
  • (五) 一起学 Unix 环境高级编程 (APUE) 之 进程环境
  • （一）Kafka 安全之使用 SASL 进行身份验证 —— JAAS 配置、SASL 配置
  • （已解决）vue+element-ui实现个人中心，仿照原神
  • (转载)hibernate缓存
  • .net core docker部署教程和细节问题
  • .NET MVC 验证码
  • .Net调用Java编写的WebServices返回值为Null的解决方法(SoapUI工具测试有返回值)
  • .NET面试题(二)
  • .pyc文件还原.py文件_Python什么情况下会生成pyc文件？
  • .sh
  • @ModelAttribute注解使用
  • @SentinelResource详解
  • [ 2222 ]http://e.eqxiu.com/s/wJMf15Ku
  • [ vulhub漏洞复现篇 ] Grafana任意文件读取漏洞CVE-2021-43798
  • []FET-430SIM508 研究日志 11.3.31
  • [000-01-022].第06节：RabbitMQ中的交换机介绍
  • [2024最新教程]地表最强AGI：Claude 3注册账号/登录账号/访问方法，小白教程包教包会
  • [8] CUDA之向量点乘和矩阵乘法
  • [Android 13]Input系列--获取触摸窗口
  • [Android]如何调试Native memory crash issue
  • [BZOJ 4034][HAOI2015]T2 [树链剖分]
  • [BZOJ 4598][Sdoi2016]模式字符串