微信小程序实战一：简单的展示小程序（下）

终于到了更新小程序的时候了，大家就等啦，哈士奇这就给大家把剩下的小程序接上！！！

首先给大家展示最后的页面

在下滑以后会展示相应系列的车子

点击进去以后会展示车子的详细信息

很简单的功能，主要需要的是能够保证接收到页面的数据展示出来，然后排列在所需的位置

项目包分布

相比于之前的包，我们增加了vehicles包，card.wxs和cover.wxss的两个样式

项目更新

index包

index.js

//App->Page的桥梁
//微信提供  应用对象
const app =getApp()
Page({
  //页面的数据
  data:{
    //user:{}
    slides:null,
    entities:null
  },
  //生命周期
  onLoad(){
    //whis->Page
    // console.log(app,'页面显示了')
    //响应式的页面
    setTimeout(()=>{
      //箭头函数里面没有this
      this.setData({
        slides:app.globalData.slides,
        entities:app.globalData.vehicles
      })
    },2000)
    // this.setData({
    //   user:app.globalData.user
    // })
  },
})

在更新的页面中我们注释掉了用于监视是否添加成功的各种函数，留下了Page和onLoad（）两个重要的内容，其他代码没有变化

index.wxml

在原有的基础上增加了cards类用于首页下面的同类车的呈现

<view class="cards">
  <view class="card" 
  wx:for="{{ entities }}"
  wx:key="id">
    <navigator url="/pages/vehicles/show?id={{item.id}}">
    <!--a标签 navigator实现跳转
      ./当前目录 相对路径
      /？绝对路径 项目根目录
    -->
        <image src="{{ item.image }}" 
        mode="aspectFill"/>
        <view class="content">
        <view class="header">
        {{ item.header }}
        <view class="sub-header">
        {{ item.sub_header }}
        </view>
        </view>
        <view class="description">
        {{ item.description }}</view>
        <view class="mata">{{ item.meta.price }}</view>
        </view>
    </navigator>
  </view>
</view>

代码解释

1. 外部容器：

   <view class="cards">

   这是一个外部容器，代表一组卡片或某个部分。

2. 卡片迭代：

   <view class="card" wx:for="{{ entities }}" wx:key="id">

   这表示对实体列表进行循环（wx:for），每个卡片都有一个由wx:key属性指定的唯一标识符。

3. 卡片导航：

   <navigator url="/pages/vehicles/show?id={{item.id}}">

   这是一个导航链接（navigator），指定了单击卡片时要导航到的URL。它包括一个基于循环中的当前项的参数（id）。

4. 卡片中的图像：

   <image src="{{ item.image }}" mode="aspectFill"/>

   这在每个卡片内显示一张图像。src属性绑定到item.image属性，表示内容是动态的。

5. 内容容器：

   <view class="content">

   这是每个卡片内容的容器。

6. 标题和子标题：

   <view class="header">{{ item.header }}
     <view class="sub-header">{{ item.sub_header }}</view>
   </view>

   此部分包含每个卡片的标题和子标题，同样包含动态内容。

7. 描述：

   <view class="description">{{ item.description }}</view>

   此部分显示每个卡片的描述。

8. 元信息：

   <view class="mata">{{ item.meta.price }}</view>

   这是元信息，特别是显示item.meta.price中的价格信息。

9. 闭合标签：

   </navigator>
   </view>

   与打开的<navigator>和<view>标签相匹配的闭合标签。

这是完整代码

<!-- wx提供了功能丰富的组件 -->
<!-- <view>
<text>{{slides[0].description}}111</text>
<text>{{user.favor}}222</text>
</view> -->
<!--幻灯片-->
<swiper
    indicator-dots="{{true}}"
    class="section hero white"
>
    <!--循环输出-->
    <block wx:for="{{slides}}" wx:key="id">
      <swiper-item>
      <image src="{{item.image}}" mode=""/>
      <view class="content centered">
      <view class="sub-header">{{item.sub_header}}</view>
      <view class="header">{{item.header}}</view>
      <view class="description">{{item.description}}</view>
      <view class="action">
      <button class="button">预约试驾</button>
      <button class="button primary">了解更多</button>
      </view>
      </view>
      </swiper-item>
    </block>
</swiper>
<view class="cards">
  <view class="card" 
  wx:for="{{ entities }}"
  wx:key="id">
    <navigator url="/pages/vehicles/show?id={{item.id}}">
    <!--a标签 navigator实现跳转
      ./当前目录 相对路径
      /？绝对路径 项目根目录
    -->
        <image src="{{ item.image }}" 
        mode="aspectFill"/>
        <view class="content">
        <view class="header">
        {{ item.header }}
        <view class="sub-header">
        {{ item.sub_header }}
        </view>
        </view>
        <view class="description">
        {{ item.description }}</view>
        <view class="mata">{{ item.meta.price }}</view>
        </view>
    </navigator>
  </view>
</view>

vehicle包

首先创建一个page，命名为show

记得在app.json的Page中引入

"pages": [
    "pages/index/index",
    "pages/vehicles/show"
  ],

show.js

// pages/vehicles/show.js
const app=getApp()
Page({

  /**
   * 页面的初始数据
   */
  data: {
    //声明绑什么数据
    entity:null
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    // const id=options.id;
    const { id }=options;//解构出来id
    // console.log(id)
    console.log(app.globalData.vehicles)
    const entity=app.globalData.vehicles.filter((item)=>{
      return item.id==id
    });
    // console.log(entity);
    this.setData({
      entity: entity[0]
    })
    wx.setNavigationBarTitle({
      title: this.data.entity.header
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */

  onReady() {

  },

  /**
   * 生命周期函数--监听页面显示
   */
  onShow() {

  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide() {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload() {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh() {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {

  }
})

页面加载生命周期函数 (onLoad)：

• 通过 options 参数获取页面加载时传递的参数，这里解构出了 id。
• 使用 app.globalData.vehicles 进行筛选，找到与传递的 id 匹配的车辆信息，并将该信息设置到页面数据中。
• 使用 wx.setNavigationBarTitle 设置页面标题为车辆信息中的 header。

这段代码主要用于在页面加载时获取特定车辆的信息并展示在页面上。在小程序生命周期的不同阶段，可以执行相应的逻辑。

show.wxml

<view class="section">
  <view class="cover">
    <image src="{{ entity.image }}" mode=""/>
    <view class="content">
      <view class="header">
        {{ entity.header }}
        <view class="sub_header">
          {{ entity.sub_header }}
        </view>
      </view>

      <view class="meta">{{entity.meta.price}}</view>
    </view>
    </view>
   
</view>

上述这段代码很简单，主要是用于创建界面，弄且放置好相应的代码块

css样式

首先在style包中创建card.wxss和cover.wxss两个文件，并且在app.wxss中导入

@import "styles/card.wxss";
@import"styles/cover.wxss";

card.wxss

/* 移动端常用卡片样式 */
.cards {
  padding: 32rpx;
}
.card{
  background-color: #fff;
  margin-bottom: 32rpx;
  transition: .5s all;
}
.card image{
  position: relative;
}
.card .content{
  padding: 48rpx 48rpx 64tpx;
}
.card .header{
  font-size: 48rpx;
  font-size: bold;
  letter-spacing: 2rpx;//调整文件字符间距
  margin-bottom: 48rpx;
}
.card .sub-header{
  font-size: 32rpx;
  letter-spacing: 6rpx;
  text-transform: uppercase;//调整文件转换效果
}
.card .description, .card .meta{
  margin-bottom: 16rpx;
  color: rgba(0,0,0,0.85);
  font-size: 32rpx;
}

letter-spacing

letter-spacing 是一种用于调整文本中字符之间距离的 CSS 属性。它可以为文本中的每个字符之间添加或减少间距，从而影响文本的外观。该属性通常用于调整文本的字母间距，以改变文本的紧密度或稀疏度。

语法

selector {
  letter-spacing: normal|length|initial|inherit;
}

• normal: 默认值，表示字符间距与字体相关，通常由浏览器定义。
• length: 可以使用具体的长度值，正值表示增加间距，负值表示减少间距。
• initial: 将属性重置为默认值。
• inherit: 继承父元素的值。

示例

p {
  letter-spacing: 2px; /* 增加字符间距 */
}

h1 {
  letter-spacing: -1px; /* 减少字符间距 */
}

span {
  letter-spacing: normal; /* 使用默认值 */
}

这样的样式规则会影响相应选择器下的文本元素，改变字符之间的间距。这在设计中常被用来微调文本的外观，以满足设计需求。

text-transform

text-transform 是一种用于指定文本转换效果的 CSS 属性。它可以用来控制文本的大小写形式，以及其他一些文本的转换效果。

语法

selector {
  text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
}

• none: 默认值，不进行文本转换。
• capitalize: 将每个单词的首字母转换为大写。
• uppercase: 将文本中的所有字母转换为大写。
• lowercase: 将文本中的所有字母转换为小写。
• initial: 将属性重置为默认值。
• inherit: 继承父元素的值。

示例

p {
  text-transform: uppercase; /* 将文本转换为大写 */
}

h2 {
  text-transform: lowercase; /* 将文本转换为小写 */
}

span {
  text-transform: capitalize; /* 将每个单词的首字母转换为大写 */
}

这些样式规则会影响相应选择器下的文本元素，改变其文本的大小写形式或其他转换效果。text-transform 经常用于调整文本的外观，以满足设计和排版需求。

cover.wxss

.cover{
  position:relative
}
.cover image{
  height:38.2vh;
}

.cover .content {
  position: absolute;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.36);
  width: 100%;
  display: flex;
  justify-content: space-between;
  color: rgba(255,255,255,0.85);
  padding: 16rpx 32rpx;
  align-items: flex-end;
  text-shadow: 0 10rpx 38rpx rgba(0,0,0,0.5);
}
.cover .header{
  font-size: 36rpx;
  font-weight: bold;
  letter-spacing: 4rpx;
}
.cover .sub-header{
  font-size: 26rpx;
  font-weight: normal;
  text-transform: uppercase;
  letter-spacing: 4rpx;
}
.cover .meta {
  font-size: 26rpx;
  
}

justify-content

justify-content 是一个用于定义弹性容器中子元素在主轴上的对齐方式的 CSS 属性。这个属性通常用于 Flexbox 布局。

语法

.container {
  justify-content: flex-start|flex-end|center|space-between|space-around|space-evenly|initial|inherit;
}

• flex-start: 子元素在容器的起始位置对齐。
• flex-end: 子元素在容器的结束位置对齐。
• center: 子元素在容器中居中对齐。
• space-between: 子元素在容器中平均分布，两端贴边。
• space-around: 子元素在容器中平均分布，两端和子元素之间有相等的空间。
• space-evenly: 子元素在容器中平均分布，包括两端和子元素之间。
• initial: 将属性重置为默认值。
• inherit: 继承父元素的值。

示例

.container {
  display: flex;
  justify-content: center; /* 子元素在容器中居中对齐 */
}

.flex-row {
  display: flex;
  justify-content: space-between; /* 子元素在容器中平均分布，两端贴边 */
}

.space-around {
  display: flex;
  justify-content: space-around; /* 子元素在容器中平均分布，两端和子元素之间有相等的空间 */
}

这些样式规则用于控制 Flexbox 容器中子元素在主轴上的对齐方式。justify-content 属性在实现页面布局时经常用于水平方向的对齐调整。

总结

这是一个非常简单的微信小程序，调用了后端的api进行小程序的编写，主要还是切页面，但是作为一个基础项目可以帮助大家入门微信小程序，希望大家喜欢呀