微信小程序基础工作模板

大家好，欢迎来到IT知识分享网。

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>