微信小程序实战一：简单的展示小程序(上）

许久未发文的哈士奇又回来了，各位小伙伴想我了没？最近哈士奇继续在前端的路上苦苦钻研，最近沉浸到了微信小程序之中，简单写了一个展示信息的小程序，立马分享给大家看看哈士奇的成果！！

小程序的界面是这样滴

前端布局

主要就是分为最上面的图片 图片下的三行字 加上最下面的两个按钮 最后经过排版和调试搞定了一个比较简洁的页面。

文件分类

哈士奇使用的是微信开发者工具，大家可以自行下载。

index包

这个包里面加入了所有与后端数据有关的代码，例如如何获取后端的数据，并且将其布局在前端部分的

styles包

这个包里面放入的是页面布局，每行文字和图片的样式就它了

项目链接文件

这些文件里面我们主要需要使用到的是 app.js app.json app.wxss 这三个文件

文件内容及解释

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
    })
  },
  onReady() {
    console.log('ready Go')
  }
})

1. 获取应用对象：

   • const app = getApp() 这一行获取了小程序的应用实例对象，这个对象包含了全局的数据和函数。

2. 页面逻辑：

   • Page({}) 是一个页面构造器，定义了页面的属性、数据、生命周期函数等。

   • data: {} 定义了页面的数据，包括 slides（幻灯片）和 entities（实体）两个属性，初始化为 null。

   • onLoad() {} 是页面加载时的生命周期函数。在加载时，它会执行一些操作：

     • console.log(app, '页面显示了') 输出应用对象 app 并显示 '页面显示了'，用于调试和验证页面加载。

     • 使用 setTimeout 设置一个延迟2秒的定时器，在定时器内部使用箭头函数（没有自己的 this 上下文）。

       • 在定时器内部，使用 this.setData() 将 slides 和 entities 更新为应用全局数据 app.globalData.slides 和 app.globalData.vehicles。

     • 直接使用 this.setData() 将 user 更新为应用全局数据 app.globalData.user。

   • onReady() {} 是页面初次渲染完成时的生命周期函数，在页面准备好后执行，会输出 'ready Go'。

3. 作用：

   • 页面加载时，输出应用对象，延迟2秒后将页面的 slides 和 entities 数据更新为应用全局的幻灯片和车辆数据。
   • 同时，将页面的 user 数据更新为应用全局的用户数据。
   • 在页面初次渲染完成后输出 'ready Go'。

这段代码主要实现了页面加载时从全局应用对象获取数据，并在页面加载完成后渲染页面，并在渲染完成后输出 'ready Go'，同时考虑到了异步操作的延迟。

index.wxml

<!-- wx提供了功能丰富的组件 -->
<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>

这段代码展示了一个微信小程序页面的结构，它主要实现了一个轮播（Swiper）功能，循环展示幻灯片内容，并包含了预约试驾和了解更多的按钮。

1. Swiper 组件：

   • <swiper> 标签定义了一个轮播容器，用于显示幻灯片。
   • indicator-dots="{{true}}" 属性表示显示指示点。
   • class="section hero white" 是用于定义样式的类名，是自定义的样式类。

2. 数据循环展示：

   • <block wx:for="{{slides}}" wx:key="id"> 是一个循环块，用于遍历 slides 数组中的数据，wx:for 用于指定数据源，wx:key 则是每个项的唯一标识符。
   • <swiper-item> 标签定义了每个轮播项。
   • <image src="{{item.image}}" mode=""/> 显示了一个图片，src 属性使用了 item.image，mode 可以设置图片展示的模式。
   • <view> 标签展示了幻灯片的内容，包括 item.sub_header、item.header、item.description 等。
   • 两个按钮分别是预约试驾和了解更多，使用了 <button> 标签。

3. 注释：

   • HTML 注释 <!-- ... --> 用于提供代码的解释和备注。

这段代码的作用是展示一个轮播组件（Swiper），动态地展示 slides 数组中的内容，每个幻灯片包含图片、标题、描述等信息，并提供了预约试驾和了解更多的按钮功能。

index.wxss

/* 单屏类名section */
.section {
  height: 100vh;
}
/* hero风格主题 */
.hero {

}
/*白色背景*/
.white {
  background: white;
}

1. .section 类名：

   • .section 类名被定义为具有 height: 100vh; 属性的样式规则。height: 100vh; 意味着元素的高度将会占据整个视口高度，使得元素占据屏幕的全部高度。

2. .hero 类名：

   • .hero 类名是一个占位符，可能是为了后续定义特定样式而预留的。目前看起来是空的，没有定义实际的样式属性。

3. .white 类名：

   • .white 类名被定义为具有 background: white; 属性的样式规则。这意味着具有 .white 类名的元素会具有白色背景。

作用：

• .section 类名确保任何拥有该类的元素会占据整个视口高度，这在构建单屏内容的页面时非常有用，因为它们会铺满整个屏幕高度。
• .white 类名提供了一个方便的方式来为元素添加白色背景，使得页面元素具有白色背景，可能用于特定区域或元素的样式设置。

reset.wxss

image{/*全局图片样式 */
    display: block;
    width: 100%;
}
page{
  line-height: 1.5;
  /* 小程序专属相对单位 rpx=2px */
  font-size: 32rpx;
}

这段CSS代码定义了两个样式规则，一个是针对图片元素（可能是所有图片），另一个是针对整个页面的样式规则。

1. image 元素样式规则：

   • display: block;：将图片元素设置为块级元素，使其独占一行，不与其他元素同行显示。
   • width: 100%;：将图片的宽度设置为其父元素宽度的百分百，使图片在其容器内展示为100%宽度。

2. page 元素样式规则：

   • line-height: 1.5;：设置页面中文字的行高为文字大小的1.5倍，提高文字的可读性。
   • font-size: 32rpx;：设置页面中文字的大小为32rpx。在小程序中，rpx 是一个相对长度单位，它是微信小程序专属的，相当于屏幕宽度的 1/750。因此，font-size: 32rpx; 意味着文字大小是相对于屏幕宽度的，约等于正常显示在屏幕上时的大小。

作用：

• image 元素样式规则确保所有图片都以块级元素显示，并且宽度占据其容器的100%，这有助于使图片在页面中占据正确的空间并保持响应式。
• page 元素样式规则设置了页面文字的行高和大小，提高了文字的可读性，并且使用了微信小程序专有的相对单位 rpx 来确保文字在不同屏幕尺寸下的一致性显示。

hero.wxss

.hero{}
/* 主题 可以更改特定的页面样式*/
.hero image{
  height: 38.2vh;
}
.hero .content{
  padding-top:10%;
}
.hero .content.centered{/*需要在.hero 后面留出空格前面才算名字 否则不能使用命名方法*/
  text-align: center;
}
/* 只要使用rpx，小程序会自动解决适配问题 */
.hero .sub-header{
font-size: 32rpx;
text-transform: uppercase;/*大写字母*/
letter-spacing: 6rpx;/*间距*/
margin-bottom: 16rpx;
color: rgba(0,0,0,0.85);
}
/* 前面加入.hero的原因是因为其他人也会使用，备注就知道是你写的 */
.hero .header{
  font-size: 72rpx;
  font-weight: bold;
  margin: 0 12% 16rpx;
}
.hero .description{
  padding: 0 12%;
  margin-bottom: 64rpx;
}

这段 CSS 代码针对类名为 .hero 的元素内部的不同元素进行样式定义。

1. .hero {}：

   • 这是一个空的 .hero 类样式定义，可能是为了标记这个类用于特定样式的设定，但本身没有添加任何样式规则。

2. .hero image {}：

   • 此规则设置了类名为 .hero 下的图片元素的样式。
   • height: 38.2vh; 将图片的高度设置为其父元素（.hero）高度的 38.2%。

3. .hero .content {}：

   • .hero .content 规则是针对类名为 .content 且位于 .hero 类元素内部的元素。
   • padding-top: 10%; 设置 .content 元素顶部的内边距为其自身高度的 10%。

4. .hero .content.centered {}：

   • 这个规则是针对在 .hero 类元素内部的具有 .content.centered 类名的元素。
   • text-align: center; 设置这些元素内文本的对齐方式为居中。

5. 样式属性和规则：

   • .hero .sub-header {}、.hero .header {}、.hero .description {} 分别针对不同类名为 .sub-header、.header、.description 的元素进行样式设置。
   • 使用了 rpx 作为单位，保证了文字和间距的大小随着屏幕宽度的变化而自适应。
   • 其中 .sub-header 设置了文本的大小、大写转换、字母间距和颜色。
   • .header 设置了标题文本的大小、粗细和外边距。
   • .description 设置了描述文本的内边距和底部外边距。

总体而言，这段 CSS 代码定义了 .hero 类下不同元素的样式，其中 .content 类用于布局设置，.sub-header、.header 和 .description 类则用于设置文本的大小、颜色和间距，并使用了 rpx 单位来适应不同屏幕尺寸。

button.wxss

.button {
  display: inline-block;/*相对行内元素可以设置宽高 相对块级元素可以在同一行*/
  margin:  8rpx;
  background-color: rgba(0,0,0,0.6);
  font-weight: bold;
  border-radius: 1px;
  font-size: 32rpx;
  transition: .3s all;
}
.button.primary{
  background-color: #000000;
  color: rgba(255, 255, 255, 0.9);
}

这段 CSS 代码定义了两种按钮样式：.button 和 .button.primary。

1. .button {}：

   • display: inline-block; 将按钮元素设置为内联块级元素，使其既具有块级元素的盒子模型特性（可以设置宽高、margin），又在同一行显示。
   • margin: 8rpx; 设置按钮元素的外边距为 8rpx，即按钮与周围元素之间的间距为相对长度单位 rpx 对应的大小。
   • background-color: rgba(0, 0, 0, 0.6); 设置按钮的背景颜色为黑色，透明度为60%，采用了 RGBA 格式来指定颜色和透明度。
   • font-weight: bold; 将按钮文字设置为粗体。
   • border-radius: 1px; 给按钮添加了1px的圆角边框。
   • font-size: 32rpx; 设置按钮文字的大小为32rpx，根据屏幕宽度自适应大小。
   • transition: .3s all; 添加了一个过渡效果，让按钮的样式在变化时以0.3秒的时间进行平滑过渡。

2. .button.primary {}：

   • .button.primary 是对特定按钮的额外样式定义。
   • background-color: #000000; 将具有 .button.primary 类的按钮背景颜色设置为纯黑色。
   • color: rgba(255, 255, 255, 0.9); 设置按钮文字颜色为白色，透明度为90%。

作用：

• .button 类定义了基本按钮的样式，使其具有一致的外观：黑色背景、白色文字、圆角边框、过渡效果等，适用于通用按钮。
• .button.primary 类则修改了特定按钮的样式，使其背景色更深，文字颜色更亮，可能用于强调某些操作或者区分不同类型的按钮。

action.wxss

暂时还没有给它加上，这会在下中提及哦！！！

app.js

//应用
//page（）页面

App({
  globalData:{
    
  },
  onLaunch(){
    //在应用启动时，发送接口请求
    //console.log('应用启动了')
    wx.request({
      url: 'https://resources.ninghao.net/wxapp-case/db.json',
      success:(response)=>{//如果成功了，那就回调
        //console.log(response);
        Object.assign(this.globalData,
          response.data)
          //console.log(this,'-----')
      }
    })
  }
})
//配置

这段代码是一个基于微信小程序框架的应用程序和其配置。

1. App({})：

   • App() 函数用于注册一个小程序。

   • globalData 是全局数据对象，用于存储整个小程序中共享的数据。目前是空的，但在应用启动后会被填充数据。

   • onLaunch() 是生命周期函数，表示小程序初始化完成时执行的操作。在这里：

     • 发起了一个网络请求 wx.request()，访问了指定 URL 的 JSON 数据。
     • 当请求成功后，将返回的数据 response.data 合并到 this.globalData 中，将这些数据变为全局可用的，以供整个小程序使用。

2. 作用：

   • App() 函数创建了整个小程序的实例，并定义了全局数据对象 globalData。
   • onLaunch() 生命周期函数在小程序初始化完成时执行，用于在应用启动时获取数据。这段代码中，它通过发送网络请求获取特定 URL 的 JSON 数据，并将这些数据存储在 globalData 中，以便在整个小程序中使用。
   • 获取的数据可能包含小程序启动所需的配置信息、全局数据、或其他需要在整个小程序中共享和使用的内容。

app.json

{
  "pages": [
    "pages/index/index",
    "pages/cars/cars",
    "pages/logs/logs"
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle": "black"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

这段代码是微信小程序的全局配置文件 app.json。让我解释一下它的各个字段的作用：

1. "pages"：

   • 包含了小程序的所有页面路径。对应不同的页面，每个字符串是页面的路径。例如："pages/index/index" 是指向小程序中名为 index 的页面。

2. "window"：

   • 这是小程序的全局样式配置。
   • "backgroundTextStyle"：指定下拉loading的样式，这里设置为 "light"，表示浅色背景。
   • "navigationBarBackgroundColor"：顶部导航栏的背景颜色。
   • "navigationBarTitleText"：顶部导航栏的标题文字内容。
   • "navigationBarTextStyle"：顶部导航栏标题的文字颜色。

3. "style"：

   • 表示小程序的样式版本，这里设置为 "v2"，可能指示使用的样式规范版本。

4. "sitemapLocation"：

   • 指定小程序的 sitemap 文件位置，用于告知搜索引擎小程序页面的索引信息。

作用：

• "pages" 字段指定了小程序包含的页面路径，定义了小程序的路由结构，告诉小程序每个页面对应的路径和文件位置。
• "window" 字段定义了小程序的全局样式，包括顶部导航栏的样式、下拉 loading 样式等。
• "style" 字段用于指定小程序的样式版本，可能是用来支持特定版本的样式规范。
• "sitemapLocation" 字段指定了小程序 sitemap 文件的位置，有助于搜索引擎了解小程序的页面结构和内容，用于 SEO（搜索引擎优化）相关的配置。

app.wxss

/* 模块化划分 */
@import "styles/reset.wxss";/*动态引入指令，一部分放入进去可以引用全局,可以节省代码*/
@import "styles/hero.wxss";
@import "styles/button.wxss";
@import "styles/action.wxss";
/* 触发下单的按钮 */
page{/*page代表全部界面*/
  background: #f8f8f8;
}
.section{/*全选*/
  height: 100vh;
}

这段代码是在微信小程序中使用样式文件模块化划分的一种方式，通过 @import 指令将多个样式文件引入并应用到小程序的页面中。

1. @import 指令：

   • @import 是 CSS 中用于引入其他样式文件的指令。
   • @import "styles/reset.wxss"; 引入了名为 reset.wxss 的样式文件，可能用于重置默认样式，提供一致的基础样式。
   • 后续的 @import 类似地引入了其他样式文件，如 hero.wxss、button.wxss、action.wxss，这些文件可能包含了不同组件、模块的样式定义。

2. 样式规则：

   • page {}：设置了全局页面的背景颜色为 #f8f8f8，即浅灰色背景。
   • .section {}：设置了一个全局类名 .section，将其高度设置为占据整个视窗高度，用于页面中的单屏显示。

3. 作用：

   • @import 指令用于将多个样式文件按需引入，实现样式的模块化管理，避免样式文件过于臃肿，使样式代码更加清晰和易于维护。
   • 每个样式文件可能包含特定模块或组件的样式定义，比如重置样式、hero 模块的样式、按钮样式等，将它们分开组织有助于代码管理和复用。
   • .section 类名的定义确保了在小程序中使用这个类名的元素都会占据整个视窗的高度，这在设计单屏页面时非常有用。

那么今天我们的分享就到此结束了，大家快来写上自己的第一个小程序吧！！！