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

初心丨哈士奇2024-01-18 18:07

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

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

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

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

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

项目包分布

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

项目更新

index包

index.js

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类用于首页下面的同类车的呈现

wxml 复制代码 
<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. 外部容器：

    html 复制代码 
    <view class="cards">

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

  2. 卡片迭代：

    html 复制代码 
    <view class="card" wx:for="{{ entities }}" wx:key="id">

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

  3. 卡片导航：

    html 复制代码 
    <navigator url="/pages/vehicles/show?id={{item.id}}">

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

  4. 卡片中的图像：

    html 复制代码 
    <image src="{{ item.image }}" mode="aspectFill"/>

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

  5. 内容容器：

    html 复制代码 
    <view class="content">

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

  6. 标题和子标题：

    html 复制代码 
    <view class="header">{{ item.header }}
  <view class="sub-header">{{ item.sub_header }}</view>
</view>

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

  7. 描述：

    html 复制代码 
    <view class="description">{{ item.description }}</view>

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

  8. 元信息：

    html 复制代码 
    <view class="mata">{{ item.meta.price }}</view>

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

  9. 闭合标签：

    html 复制代码 
    </navigator>
</view>

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

这是完整代码

wxml 复制代码 
<!-- 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中引入

json 复制代码 
"pages": [
    "pages/index/index",
    "pages/vehicles/show"
  ],

show.js

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

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中导入

wxss 复制代码 
@import "styles/card.wxss";
@import"styles/cover.wxss";

card.wxss

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 属性。它可以为文本中的每个字符之间添加或减少间距，从而影响文本的外观。该属性通常用于调整文本的字母间距，以改变文本的紧密度或稀疏度。

语法
css 复制代码 
selector {
  letter-spacing: normal|length|initial|inherit;
}
  • normal: 默认值，表示字符间距与字体相关，通常由浏览器定义。
  • length: 可以使用具体的长度值，正值表示增加间距，负值表示减少间距。
  • initial: 将属性重置为默认值。
  • inherit: 继承父元素的值。
示例
css 复制代码 
p {
  letter-spacing: 2px; /* 增加字符间距 */
}

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

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

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

text-transform

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

语法
css 复制代码 
selector {
  text-transform: none|capitalize|uppercase|lowercase|initial|inherit;
}
  • none: 默认值，不进行文本转换。
  • capitalize: 将每个单词的首字母转换为大写。
  • uppercase: 将文本中的所有字母转换为大写。
  • lowercase: 将文本中的所有字母转换为小写。
  • initial: 将属性重置为默认值。
  • inherit: 继承父元素的值。
示例
css 复制代码 
p {
  text-transform: uppercase; /* 将文本转换为大写 */
}

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

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

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

cover.wxss

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 布局。

语法
css 复制代码 
.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: 继承父元素的值。
示例
css 复制代码 
.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进行小程序的编写，主要还是切页面，但是作为一个基础项目可以帮助大家入门微信小程序，希望大家喜欢呀

相关推荐
susu10830189111 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾3 分钟前
前端基础-html-注册界面
前端·算法·html
Dragon Wu5 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym10 分钟前
Webpack性能优化指南：从构建到部署的全方位策略
前端·webpack·性能优化
~甲壳虫11 分钟前
说说webpack中常见的Loader?解决了什么问题?
前端·webpack·node.js
~甲壳虫15 分钟前
说说webpack proxy工作原理?为什么能解决跨域
前端·webpack·node.js
Cwhat16 分钟前
前端性能优化2
前端
丁总学Java35 分钟前
微信小程序，点击bindtap事件后，没有跳转到详情页，有可能是app.json中没有正确配置页面路径
微信小程序·小程序·json
熊的猫1 小时前
JS 中的类型 & 类型判断 & 类型转换
前端·javascript·vue.js·chrome·react.js·前端框架·node.js
瑶琴AI前端1 小时前
uniapp组件实现省市区三级联动选择
java·前端·uni-app
热门推荐
01【HarmonyOS】HUAWEI DevEco Studio 下载地址汇总02(欧拉)openEuler系统添加网卡文件配置流程、(欧拉)openEuler系统手动配置ipv6地址流程、(欧拉)openEuler系统网络管理说明03组基轨迹建模 GBTM的介绍与实现（Stata 或 R）04【AIGC】重塑未来的科技巨轮05全面解析：构建基于深度学习的安全帽检测系统（UI界面+YOLO代码+数据集）06【经验分享】Ubuntu22.04安装微信(linux官方版)07基于YOLOv10深度学习的CT扫描图像肾结石智能检测系统【python源码+Pyqt5界面+数据集+训练代码】深度学习实战、目标检测08Ubuntu 20.04使用Livox mid 360 测试 FAST_LIO09RAG 实践- Ollama+RagFlow 部署本地知识库10红米手机使用google play