微信小程序基础工作模板

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>