零基础微信落地页小程序实战项目

前言

微信小程序简单易上手，只要有一些编程基础，即可快速开发基本的项目。
本项目是常见的，商品广告落地页小程序。提供商品浏览，商品列表按钮，购买，微信授权，手机号绑定，验证码校验，用户协议，消息通知，监听者模式等基本功能。
定位学习人群是刚接触微信小程序的，零基础同学。
本人刚接触微信小程序时，也是零基础，HTML和CSS都是第一次接触，经过两个星期的学习，就掌握了基本的开发技巧，并独立完成多个项目。所以即使没有这方面经验的同学也不要气馁，只要学习几个实战项目之后，应付工作基本上都是绰绰有余的。

---

效果图展示：

---

目录

1. 创建小程序

2. 落地页可适配长度界面

3. 落地页底部栏：

   • 客服按钮，购买按钮
   • 微信登录授权
   • 底部用户协议，用户协议同意定位

4. 3 x 3 按钮组件

   • 组件使用
     • flex-grow
     • flex-shrink
   • 组件传递数据
   • CSS关键帧动画

5. 拼团成功组件

6. 广告轮播

   • 水平广告轮播
   • 消息轮播

7. 下浮层

8. Notification 监听者模式

9. Toast 提示弹窗

10. 总结

11. 代码下载

---

创建

创建一个小程序项目，如果只是学习，那只需要下载安装 微信开发者工具。如果是商用的话，需要申请APPID，并根据自己需要开通相应的功能，例如支付接口，以及申请自己的资源CDN。

下面介绍如何创建一个小程序：

启动工具之后，点击“+” 创建小程序。

如果没有申请 APPID，可以使用测试号，就是随机生成的测试号，只是本地开发使用，不可以商用。

选择 不使用云服务，点击创建，选择编程语言。然后点击确定。

这样就来到项目界面。

---

— NEXT —

---

落地页可适配长度界面

本小节，我们来实现一下落地页可适配长度的滚动界面。

需要创建 page，名称就叫做 landingpage。

在app.json中，添加启动页，输入名称，按下回车，会自动在 pages/ 路径下生成文件夹，并生成 landingpage.js，landingpage.json，landingpage.wxml，landingpage.wxss 四个文件。

{
  "pages":[
    "pages/landingpage/landingpage",
    ...
  ]
}

我习惯先写 .wxml 文件，然后在 .wxss 文件中随时调试界面样式，涉及到引用的组件，在 .json 文件中添加即可。界面逻辑写在 .js 文件中。

分析界面结构：

• 整体结构为纵向垂直布局，可以先设置几张图片依次平铺。
  
  

先设置 landingpage 整体样式：

<view class='main-wrap'></view>

.main-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #EEE;
}

使用 wx:for 设置一组图片，wx:key可以写成 *this

<block wx:for="{
  {bannerImgList}}" wx:for-index="index" wx:key="*this">
    <image class="banner" mode="widthFix" src="{
  {item}}" lazy-load="true" />
</block>

图片样式为：

.banner {
  width: 100%;
  height: auto;
}

这里 bannerImgList 为本地一组图片资源，在 data 中声明：

bannerImgList: [
  '../../images/landingpage1.jpg',
  '../../images/landingpage6.jpg',
  '../../images/landingpage7.jpg',
  '../../images/landingpage8.jpg',
]

这样，落地页基本就有了一个简单的界面，图片从上到下铺满屏幕。

注意这里的图片在实际项目中，需要使用CDN的下载地址，不然本地资源太多，影响小程序加载速度，而且上传小程序也有尺寸限制。

Tips:

• 书写 wxml 标签快捷方式：
  1. 输入 view . className 回车，会自动生成 <view class=“className”></view>
  2. 输入 view # idName 回车，会自动生成 *<view id=“idName”></view>，其他标签同理。
• 微信小程序，自定义组件不支持 id 选择器，所以注意在组件中要使用类选择器。
• 图片加载方式设置为 lazy-load 表示需要显示图片时才显示，这样做能提高界面刷新效率。

---

— NEXT —

---

落地页底部栏：

本小节，我们布局底部栏，包含用户协议，和两个按钮。

分析界面布局

• 上下两层结构，内部为水平布局。

先创建一个bottom容器：
<view class="bottom-box"></view>

.bottom-box {
  position: relative;
  width: 100%;
  height: 120rpx;
}

再添加两个按钮和文字：

<view id="bottom-wrap" style="padding-bottom:{
  {safeAreaHeight}}rpx;">
  <view id="kefu" bindtap="tapKefu" hover-class="button-hover">
    <image id="kefu-icon" mode="widthFix" src="../../images/kefu.png"></image>
    <text id="kefu-txt">咨询</text>
  </view>

  <button class="button-normal" hover-class="button-hover" bindtap="getUserProfile">购 买</button>
</view>

Tips:

• bindtag   按钮点击事件的回调函数名称
• hover-class   按钮选中样式
• getUserProfile   是微信授权接口，固定写法
• safeAreaHeight   是为了适配

样式如下:

#bottom-wrap {
  position: fixed;
  width: 100%;
  bottom: 0;
  z-index: 1;
  background: #fff;
  display: flex;
  flex-direction: row;
  /* padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom); */
}

#kefu {
  position: relative;
  margin-top: 10rpx;
  margin-left: 30rpx;
  width: 200rpx;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  border: 2rpx solid green;
  border-radius: 100rpx;
  background-color: #EEE;
  justify-content: space-evenly;
  align-items: center;
}

#kefu-icon {
  margin: 0;
  padding: 0;
  width: 70rpx;
  height: 70rpx;
}

#kefu-txt {
  margin: 0;
  padding: 0;
  font-size: 30rpx;
  line-height: 30rpx;
  color: green;
}

.button-normal {
  position: relative;
  padding: 0;
  margin: 10rpx;
  margin-right: 30rpx !important;
  width: 400rpx !important;
  height: 100rpx;
  display: flex;
  flex-direction: row;
  border-radius: 100rpx;
  background-color: #FF6400;
  align-items: center;
  justify-content: center;
  font-size: 40rpx;
  color: #fff;
}

.button-hover {
  opacity: 0.75;
}

Tips:

• constant(safe-area-inset-bottom) 和 env(safe-area-inset-bottom)
  是适配 iPhoneX 底部 “Dock” 栏的方法。但是适配的高度偏高，这里还是使用自定义高度。
• position 是标签需要经常使用的定位属性，一般常用的是 <