微信小程序开发：带你畅游路虎4S店

前言

微信小程序 是相对于 Android 和 iOS 的原生应用而言的轻量级应用程序 。它不需要用户下载和安装，用户通过扫描二维码或搜索就可以立即使用，非常适合 O2O（Online to Offline）场景，即在线服务与线下活动结合的场景。今天我们就来学习一下微信小程序的开发。

微信小程序

微信小程序的开发类似于 Vue 的开发，学习起来也是比较简便；小程序的技术架构主要围绕 页面（Pages） 这一核心概念来组织。每个页面是一个独立的视图单元，具有自己独立的模板、样式和逻辑。

微信开发者工具

我们一般用微信开发者工具去对小程序进行开发；

它的目录结构也与 Vue 的非常相似；

• WXML（微信标记语言） ：用于描述页面的结构，类似于 HTML。通过 WXML，可以使用模板语法、条件渲染、列表渲染等功能。

  • 例如：{{motto}} 是数据绑定的占位符，表示在页面中引用 JavaScript 中的 data 数据项。
  • 支持组件化开发，如 swiper 组件可用于实现滑动轮播图。

• WXSS（微信样式语言） ：用于描述页面的样式，类似于 CSS。通过 WXSS 可以实现响应式设计，支持使用 rpx 单位等适配小程序的设计规范。

• JS（JavaScript） ：负责页面的业务逻辑和数据处理。每个页面都有一个 Page 函数来定义页面的配置及其方法。

  • 例如：Page({ data: { slides: [...] }, methods: { ... } })。

• JSON（配置文件） ：用于配置页面的路径、标题、导航栏颜色等全局或局部的配置信息。

开发路虎4S店

app.json

app.json 文件是微信小程序中的全局配置文件，主要用于定义小程序的基本信息和页面路径等。

{
  "pages": [
    "pages/index/index",
    "pages/logs/logs",
    "pages/stories/index",
    "pages/vehicles/show"
  ],
  "tabBar": {
    "selectedColor": "#000000",
    "borderStyle": "white",
    "backgroundColor": "#ededed",
    "list": [
      {
        "text": "首页",
        "pagePath": "pages/index/index",
        "iconPath": "assets/icons/home.png",
        "selectedIconPath": "assets/icons/home-active.png"
      },
      {
        "text": "故事",
        "pagePath": "pages/stories/index",
        "iconPath": "assets/icons/event.png",
        "selectedIconPath": "assets/icons/event-active.png"
      }
    ]
  },
  "window": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "抚州路虎4S店",
    "navigationBarBackgroundColor": "#ffffff"
  },
  "componentFramework": "glass-easel",
  "sitemapLocation": "sitemap.json",
  "lazyCodeLoading": "requiredComponents"
}

1. pages：指定小程序的页面路径列表，第一个页面会被视为小程序的首页。
2. window：设置小程序所有页面的默认窗口表现，如导航条标题文字颜色、背景色等。
3. tabBar：如果小程序有底部 tab 导航，可以通过此配置项设置 tab 的样式和页面链接。

Page

我们在pages数组中配置了小程序的首页index以及另外三个页面。小程序的开发其实也就是对每一个page页面的开发，我们新建的每一个page文件都涵盖着，WXML，WXSS，JS，JSON，四部分。

以首页index为例，我们在WXML文件中去编写页面的结构：

index.wxml

<swiper 
    class="section hero white" 
    indicator-dots>
    <swiper-item wx:for="{{slides}}" wx:key="id">
        <image src="{{item.image}}" mode="aspectFill"/>
        <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" role="button" bindtap="testDrive">预约试驾</button>
            <button class="button primary" role="button" bindtap="doMore">了解更多</button>
          </view>
        </view>
    </swiper-item>
</swiper>
<view class="cards">
  <view class="card" wx:for="{{entities}}" wx:key="id">
    <navigator url="/pages/vehicles/show">
      <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="meta">
          {{item.meta.price}}
        </view>
      </view>
    </navigator>
  </view>
</view>

小程序的页面结构采用类似HTML的语法，其中通过双大括号{{}}进行数据绑定。例如，{{motto}}可以绑定一个变量，在页面上动态显示该变量的值。其中swiper组件可以用来创建一个轮播图，它可以实现滑动切换不同的效果 。同样地，小程序中的循环渲染 wx:for="{{slides}}" wx:key="id" 和vue中的v-for的用法是类似的，使用起来也是非常的简单。

WXSS可以用来设计页面的样式；

index.wxss

.cards{
  padding: 32rpx;
}
.card{
  background: #fff;
  margin-bottom: 32rpx;
  transition: .5s all;
}
.card image{
  position: relative;
  height: 36vh;
}
.card .content{
  padding: 48rpx 48rpx 48rpx;
}
.card .header{
  font-size: 48rpx;
  font-weight: bold;
  letter-spacing: 2rpx;
  margin-bottom: 48rpx;
}
.card .sub-header{
  font-size: 32rpx;
  letter-spacing: 6rpx;
  text-transform: uppercase;
}
/* .card .sub-header::before{
  content: '元素结束之前';
} */
.card .sub-header::after{
  content: '';
  display: block;
  width: 80rpx;
  border-bottom: 2px solid #000;
  padding-bottom: 16rpx;
}
.card .description, .card .meta{
  margin-bottom: 16rpx;
  color: rgba(0, 0, 0, .85);
  font-size: 32rpx;
}

小程序的样式使用与CSS类似的wxss文件，可以为页面元素设置布局、颜色、字体等。为了提高样式的复用性，开发者通常会将基础样式类拆分成多个小类，进行组合使用。rpx 单位是微信小程序中特有的尺寸单位，全称是 responsive pixel（响应式像素） 。设计这个单位的主要目的是为了使页面在不同分辨率的设备上都能保持一致的显示效果，即实现屏幕适配。在不同的设备上，1rpx 并不代表相同的物理像素数量，而是根据设备的屏幕宽度动态调整。

而在js文件中，我们可以用来存放页面上需要渲染的数据data，还有一些事件函数，每个页面的js，都有一个Page函数 ，代表页面的配置，通过data对象来存储页面的数据，并通过setData()方法来更新数据，实现视图和数据的双向绑定：

index.js

// index.js
const defaultAvatarUrl = 'https://mmbiz.qpic.cn/mmbiz/icTdbqWNOwNRna42FI242Lcia07jQodd2FJGIYQfG0LAJGFxM4FbnQP6yfMxBgJ0F3YRqJCJ1aPAK2dQagdusBZg/0'

Page({
  data: {
    "slides": [
      {
        "id": 5,
        "header": "全新一代发现",
        "sub_header": "Discovery",
        "description": "全尺寸七座 SUV，现已接受预订。",
        "image": "https://resources.ninghao.net/landrover/discover-1.jpg"
      },
      {
        "id": 3,
        "header": "全新揽胜星脉",
        "sub_header": "Range Rover",
        "description": "标新立异的前卫揽胜。",
        "image": "https://resources.ninghao.net/landrover/velar-1.jpg"
      },
      {
        "id": 6,
        "header": "发现神行",
        "sub_header": "Discovery",
        "description": "发现的绝佳时刻。",
        "image": "https://resources.ninghao.net/landrover/discovery-sport-1.jpg"
      }  
    ],
    "entities": [
      {
        "id": 1,
        "header": "揽胜",
        "sub_header": "Range Rover",
        "description": "世界顶级奢华 SUV 的极致巅峰。",
        "image": "https://resources.ninghao.net/landrover/range-rover-small.jpg",
        "meta": {
          "price": "RMB 1,588,000 起",
          "carbon_dioxide": 262,
          "fuel": 10.7,
          "exterior_design": [
            {
              "header": "闻名遐迩的设计",
              "description": "车身下部特征造型的三条经典线条、飘逸的车顶线和延续的腰线赋予揽胜极高的辨识度。独具特色的侧影略呈锥形，线条更为利落，亮光黑色支柱让车顶格外引人注目。",
              "image": "https://resources.ninghao.net/landrover/range-rover-ext-1.jpg"
            },
            {
              "header": "巅峰创世加长版外观",
              "description": "每种定制方案都透露着优雅和对细节的关注。独特的前格栅以及带深色滚花外观和光亮镀铬边缘的 "Range Rover" 前后字标等奢华的设计理念充分展示了对细节的不懈追求。",
              "image": "https://resources.ninghao.net/landrover/range-rover-ext-2.jpg"
            }
          ],
          "interior_design": [
            {
              "header": "装饰精美",
              "description": "车辆的内饰可带来宁静而奢华的舒适感。内饰奢华，精心打造；宽阔的中控台让基本控制按钮伸手可及。由精美真皮和甄选实木装饰的表面干净、雅致，帮助打造具有现代感的舒适氛围。",
              "image": "https://resources.ninghao.net/landrover/range-rover-int-1.jpg"
            },
            {
              "header": "巅峰创世加长版内饰",
              "description": "从后排中央扶手含高级冷藏箱和伸缩桌的后中央控制台，到带小腿支托的独特座椅设计，此车处处彰显自信高雅，散发出宁静、泰然的感觉。",
              "image": "https://resources.ninghao.net/landrover/range-rover-int-2.jpg"
            }
          ]
        }
      },
      {
        "id": 2,
        "header": "揽胜运动",
        "sub_header": "Range Rover Sport",
        "description": "越界动能，运动型豪华 SUV 的至高典范。",
        "image": "https://resources.ninghao.net/landrover/ranger-rover-sport-small.jpg",
        "meta": {
          "price": "RMB 928,000 起",
          "carbon_dioxide": 262,
          "fuel": 10.7,
          "exterior_design": [
            {
              "header": "优异性能",
              "description": "全铝合金车身结构不仅可以降低车重，更可增加灵活性，并有助于提高车辆安全性。揽胜运动版被设计为路虎迄今反应速度最快、最动感和最敏捷的车型。",
              "image": "https://resources.ninghao.net/landrover/range-rover-sport-ext-1.jpg"
            },
            {
              "header": "为震撼而生",
              "description": "均衡的比例、彰显力量的形象、简洁洗练的线条和精心雕刻的角度，所有这一切让这款车型变得卓而不凡、引人注目。",
              "image": "https://resources.ninghao.net/landrover/range-rover-sport-ext-2.jpg"
            }
          ],
          "interior_design": [
            {
              "header": "为您而设计",
              "description": "驾驶舱和控制布局经过精心设计和简化，为您提供易于集中精力和近乎直觉的驾驶体验。揽胜运动版指挥官式驾驶座椅让您对前方道路一目了然，从而提升自信感和控制感，增强驾驶体验。",
              "image": "https://resources.ninghao.net/landrover/range-rover-sport-int-1.jpg"
            },
            {
              "header": "现代内饰",
              "description": "富有现代气息的精致内饰彰显路虎揽胜运动版的运动气质。有力的线条、干净利落的表面和巧妙的细节处理，与柔和的饰面和精致的材质完美融合。整个空间既舒适又富有功能实用性。",
              "image": "https://resources.ninghao.net/landrover/range-rover-sport-int-2.jpg"
            }
          ]
        }
      },
      {
        "id": 3,
        "header": "揽胜星脉",
        "sub_header": "Range Rover Velar",
        "description": "路虎精湛、强大的中级 SUV。",
        "image": "https://resources.ninghao.net/landrover/velar-small.jpg",
        "meta": {
          "price": "RMB 688,000 起",
          "carbon_dioxide": 173,
          "fuel": 7.5,
          "exterior_design": [
            {
              "header": "简洁，优雅的设计",
              "description": "现代简洁的外观，流露出自信和独具风格的个性。全新路虎揽胜星脉引领设计潮流。现代简洁、优雅而独特的设计，诠释出动魄风范。全新路虎揽胜星脉无论行至何处，无不惹人注目。",
              "image": "https://resources.ninghao.net/landrover/velar-ext-1.jpg"
            },
            {
              "header": "星脉车型",
              "description": "路虎有史以来非常现代性和创新性的中级SUV。全新路虎揽胜星脉拥有悬浮式车顶和流线形腰线，而全新路虎揽胜星脉R-Dynamic则突破常规，以独特的设计，展现难以抗拒的吸引力。",
              "image": "https://resources.ninghao.net/landrover/velar-ext-2.jpg"
            },
            {
              "header": "隐藏式车门把手",
              "description": "全新路虎揽胜星脉以现代简洁、优雅而独特的设计，引领设计潮流。可展开式车门把手在不用时可收回。隐藏式设计缔造出无比简洁、纯粹的线条，提升了空气动力效率，降低了风阻。",
              "image": "https://resources.ninghao.net/landrover/velar-ext-3.jpg"
            }
          ],
          "interior_design": [
            {
              "header": "全新的内饰设计",
              "description": "全新路虎揽胜星脉的内饰设计，诠释了简约中的优雅。从用户可调节车内氛围灯，到分体式滑动扶手，所有的个性化设计，让您与乘客尽享舒适旅程。",
              "image": "https://resources.ninghao.net/landrover/velar-int-1.jpg"
            },
            {
              "header": "精致内饰",
              "description": "全新路虎揽胜星脉的内饰设计，只为您畅意尽享驾驭的乐趣。享有盛誉的指挥官式座椅可扩大您的下方视野，便于更清楚地查看周围环境，让您在任何天气或交通状况下稳操胜券。",
              "image": "https://resources.ninghao.net/landrover/velar-int-2.jpg"
            },
            {
              "header": "工艺",
              "description": "车内的每一个细节，都由我们的专业团队精心打造，让您的所见所触，幻化成精彩的感观盛宴。柔软的豪华真皮，不单用于座椅，内饰空间也大面积地应用了这些材料。",
              "image": "https://resources.ninghao.net/landrover/velar-int-3.jpg"
            }
          ]
        }
      },
      {
        "id": 4,
        "header": "揽胜极光",
        "sub_header": "Range Rover Evoque",
        "description": "时尚豪华全地形 SUV。",
        "image": "https://resources.ninghao.net/landrover/evoque-small.jpg",
        "meta": {
          "price": "RMB 398,000 起",
          "carbon_dioxide": 262,
          "fuel": 10.7,
          "exterior_design": [
            {
              "header": "揽胜极光五门版车型",
              "description": "专门增设的揽胜极光梦莲湖蓝限量版，可将他别具匠心的外观设计诠释得淋漓尽致。无论是携亲友在城市中迅游，还是前往静谧郊野过一天的休闲时光，揽胜极光都会让您轻松出行。",
              "image": "https://resources.ninghao.net/landrover/evoque-ext-1.jpg"
            },
            {
              "header": "揽胜极光敞篷版",
              "description": "黑檀木色织布材质的Z字形自动折叠顶篷系统，将汽车内在性能与非凡外观融合提升至新高度。 凌厉的线条凸显自信、个性与从容的姿态，而宽敞的内部空间可使车上四位乘客尽享开放式的舒适旅途。",
              "image": "https://resources.ninghao.net/landrover/evoque-ext-2.jpg"
            }
          ],
          "interior_design": [
            {
              "header": "五门版",
              "description": "简洁利落的内饰设计更能凸显出路虎对内饰材质的精挑细选。选择您最喜欢的内饰材质与颜色组合，包括双针工艺缝合的真皮包覆、铝合金饰面、可让阳光自然倾泻至车舱的全景天窗，打造个性化座舱空间。",
              "image": "https://resources.ninghao.net/landrover/evoque-int-1.jpg"
            },
            {
              "header": "运动座椅",
              "description": "运动增强包中的运动座椅只在揽胜极光 HSE Dynamic 敞篷版上提供，更贴合人体的设计让您尽享奢华舒适。带腰部支撑和座椅记忆功能的电动调节座椅，提供黑檀木/甘椒红双拼色两种配色方案可选。",
              "image": "https://resources.ninghao.net/landrover/evoque-int-2.jpg"
            },
            {
              "header": "揽胜极光敞篷版内饰",
              "description": "个性化的四座设计，运动美感卓然眼前。 前排座椅集成了诸如温控功能等科技，保证您获得真正轻松愉悦的驾乘体验。 整洁利落的线条辅以高档时尚的饰面，一望便知的揽胜家族奢华 DNA。",
              "image": "https://resources.ninghao.net/landrover/evoque-int-3.jpg"
            }
          ]
        }
      },
      {
        "id": 5,
        "header": "发现",
        "sub_header": "Discovery",
        "description": "全能全尺寸豪华 SUV。",
        "image": "https://resources.ninghao.net/landrover/discovery-small.jpg",
        "meta": {
          "price": "RMB 798,000 起",
          "carbon_dioxide": 254,
          "fuel": 10.7,
          "exterior_design": [
            {
              "header": "现代设计",
              "description": "独特的天窗和随着车身向后部延伸上升的特色线条，外加最新的前后端设计，赋予全新一代发现魅力气息。全新一代发现工艺精致，彬彬有礼，展现极具吸引力的现代英伦设计。",
              "image": "https://resources.ninghao.net/landrover/discovery-ext-1.jpg"
            },
            {
              "header": "黄金比例",
              "description": "独特有力且前挑精短的前端、大倾角挡风玻璃、突出的腰线和线条流畅的锥度后端，彰显简洁动感、高效现代。",
              "image": "https://resources.ninghao.net/landrover/discovery-ext-2.jpg"
            }
          ],
          "interior_design": [
            {
              "header": "智慧空间利用",
              "description": "从手套箱到中央扶手储物箱（可选前排中央通道集成冷藏箱），智慧存储方案会突破您的想象。",
              "image": "https://resources.ninghao.net/landrover/discovery-int-1.jpg"
            },
            {
              "header": "饰面真材实料",
              "description": "优质真皮和织物饰面采用专门设计的优美双针缝线，并用金属和实木细节装帧。可选醒目的光泽黑色或磨砂铝饰面板，前门内部把手和变速箱换挡旋钮采用金属电镀饰面。",
              "image": "https://resources.ninghao.net/landrover/discovery-int-2.jpg"
            }
          ]
        }
      },
      {
        "id": 6,
        "header": "发现神行",
        "sub_header": "Discovery Sport",
        "description": "全能全地形豪华 SUV。",
        "image": "https://resources.ninghao.net/landrover/discovery-sport-small.jpg",
        "meta": {
          "price": "RMB 368,000起",
          "carbon_dioxide": 180,
          "fuel": 7.6,
          "exterior_design": [
            {
              "header": "外观设计",
              "description": "延承发现家族风范，全地形豪华中型SUV路虎发现神行，以紧凑均衡的现代外观，尽展果敢美学姿态。独具标识性的流线型轮廓，令发现神行看起来充满自信，只待随时启程去探享。",
              "image": "https://resources.ninghao.net/landrover/discovery-sport-ext-1.jpg"
            }
          ],
          "interior_design": [
            {
              "header": "内饰设计",
              "description": "发现神行的全享设计理念，同样呈现于座舱内鲜明的水平和垂直线条设计中。整洁利落的饰面、精细的工艺及可选真皮饰面，令多功能内部空间更添质感。",
              "image": "https://resources.ninghao.net/landrover/discovery-sport-int-1.jpg"
            },
            {
              "header": "5 + 2 座椅",
              "description": "如您所愿，功能全面的路虎发现神行可选配 5+2 座椅，但依然保持比传统5座SUV更为紧凑的身形。",
              "image": "https://resources.ninghao.net/landrover/discovery-sport-int-2.jpg"
            }
          ]
        }
      }
    ]
  },
  testDrive(){
    console.log('test');
  },
  doMore(){
    // console.log('More');
    wx.navigateTo({
      url: '/pages/vehicles/show',
    })()
  },
  bindViewTap() {
    wx.navigateTo({
      url: '../logs/logs'
    })
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail
    const { nickName } = this.data.userInfo
    this.setData({
      "userInfo.avatarUrl": avatarUrl,
      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
    })
  },
  onInputChange(e) {
    const nickName = e.detail.value
    const { avatarUrl } = this.data.userInfo
    this.setData({
      "userInfo.nickName": nickName,
      hasUserInfo: nickName && avatarUrl && avatarUrl !== defaultAvatarUrl,
    })
  },
  getUserProfile(e) {
    // 推荐使用wx.getUserProfile获取用户信息，开发者每次通过该接口获取用户个人信息均需用户确认，开发者妥善保管用户快速填写的头像昵称，避免重复弹窗
    wx.getUserProfile({
      desc: '展示用户信息', // 声明获取用户个人信息后的用途，后续会展示在弹窗中，请谨慎填写
      success: (res) => {
        console.log(res)
        this.setData({
          userInfo: res.userInfo,
          hasUserInfo: true
        })
      }
    })
  },
})

这样一个简单的小程序页面我们就设计好了。

AI小程序

在人工智能技术不断发展的趋势下，小程序将不仅仅局限于简单的工具应用，而是变得更加智能化、个性化。随着5G技术的发展和AI算法的进步，小程序将能够处理更复杂的数据和任务，为用户提供更加智能、便捷的服务。对于开发者来说，借助AI技术，也能够实现更高效的开发、运营和管理，推动小程序生态的发展与创新。