穆瑾轩

微信小程序开发

1、微信小程序简介

1.1、什么是微信小程序

百度百科给出的定义：

微信小程序,英文名Wechat Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。

然后看下我未认证的小程序效果：

主页：

博客系列：

整体效果：

1.2、微信及小程序的历史

2010年腾讯正筹划一项大事，那就是做一款比QQ更纯粹，更高级的交流软件——微信。

2011年1月21日，微信1.0版本正式上线，那时候大家还停留在QQ的世界里，对微信也并不敏感。

2011年5月10日，微信发布2.0版本，推出了一项语音功能，微信也算迈出了自己的第一步；

2011年8月，微信发布2.5版本，新增“查看附近的人”交友功能，此时用户突破1500万；

2011年10月，微信发布3.0版本，新增“摇一摇”和“漂流瓶”功能，这段时间也是微信用户高速增长的阶段；

2011年12月，微信发布3.5 版本，也带来了全新的二维码“扫一扫”交友功能；

2012年3月，微信用户数突破1亿；4月，微信发布4.0版本，新增了“朋友圈相册”功能，并确定英文名称为“Wechat”；

2012年7月，微信发布4.2版本，增加视频聊天功能，同时发布网页版微信；

2012年8月23日，微信公众平台上线，微信开始构建内容生态；

2013年1月15日深夜，腾讯微信团队宣布：微信用户数突破3亿；

2013年7月，微信国内注册用户突破4亿，8月5日，微信支付正式上线；

2013年10月24日，微信的注册用户突破6亿，每日活跃用户1亿；

2014年1月，微信红包在春节前夕正式上线；

2014年年3月，开放微信支付功能，并开放微信支付接口；

2016年1月11日，微信之父张小龙时隔多年的公开亮相，解读了微信的四大价值观。张小龙指出，越来越多产品通过公众号来做，因为这里开发、获取用户和传播成本更低。拆分出来的服务号并没有提供更好的服务，所以微信内部正在研究新的形态，叫「微信小程序」；

2016年3月1日，微信支付对转账功能停止收取手续费。同时，对提现功能开始收取手续费；

2016年8月，微信获香港首批支付牌照；

2016年9月21日，微信小程序正式开启内测；

2017年1月9日，张小龙宣布小程序正式上线；微信小程序的存在让我们既省了手机容量，又省了下载流量，为我们带来了巨大的便利；

2017年12月，微信发布6.6.1 版本，开放了小游戏，还重点推荐了小游戏「跳一跳]；

2018年2月，微信全球用户月活数首次突破10亿;

2019年11月，微信新增“腾讯QQ”小程序;

2020年6月17日，微信上线“拍一拍”功能;

直到今天，微信触及了我们生活的方方面面，似乎大家的生活已经和微信绑在一起了。

而小程序是一种新的开放能力，开发者可以快速地开发一个小程序。小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

2、微信小程序的开发简介

2.1、小程序的开发流程

官网给我们的列举的步骤：

1）注册

在微信公众平台注册小程序，完成注册后可以同步进行信息完善和开发。官网注册说明

2）小程序信息完善

填写小程序基本信息，包括名称、头像、介绍及服务范围等。

3）开发小程序

完成小程序开发者绑定、开发信息配置后，开发者可下载开发者工具、参考开发文档进行小程序的开发和调试。

下载开发者工具，如果是win7，最高版：wechat_devtools_1.05的版本。

下载好微信开发者工具：

然后创建小程序：

AppID：注册成功后，我们可以在小程序后台，找到AppID；

后端服务：微信云开发是腾讯云为移动开发者提供的一站式后端云服务，弱化后端和运维概念，让开发者可以专注于业务逻辑的实现，无需搭建服务器，使用平台提供的 API （云函数、云数据库、云存储）进行业务开发即可，云开发中提供的少部分模板是免费的；而不使用云开发，也就是传统的开发，需要自己搭建环境，毕竟上线后需要定期进行数据维护等工作。

模板选择：可以选择使用Typescript和JavaScript等语言来开发；

注：Typescript是微软开发的一个开源的编程语言，通过在JavaScript的基础上添加静态类型定义构建而成，最终可以转译成JavaScript代码。

新建好一个项目：

4）提交审核和发布

完成小程序开发后，提交代码至微信团队审核，审核通过后即可发布（公测期间不能发布）。

2.2、目录结构

官网的描述：小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

1）一个小程序主体部分由三个文件组成，必须放在项目的根目录

文件	必需	作用
app.js	是	小程序逻辑（管理整个程序的生命周期）
app.json	是	小程序公共配置（包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等）
app.wxss	否	小程序公共样式表（全局CSS样式）

2）一个小程序页面由四个文件组成

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置，json是一种数据格式
wxss	否	页面样式表

3）其他文件

文件类型	必需	作用
project.config.json	是	开发者工具的配置文件
project.private.config.json	是	项目私有配置文件
sitemap.json	否	配置小程序及其页面是否允许被微信索引

3、微信小程序开发详解

微信小程序采用的原生框架叫做MINA，关于小程序更详细的教程可以看官方教程，这里只挑选主要内容。

3.1、全局配置

app.js包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。小程序默认的配置：

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

3.1.1、app.json的pages属性

用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）。

我们使用微信开发者工具直接在pages中新增一个page页面，工具自动帮我们生成了一个目录及相应的页面文件。（如果是使用的VSCODE开发工具的话是不会帮我们新建的）

3.1.2、app.json的entryPagePath属性

指定小程序的默认启动路径（首页），常见情景是从微信聊天列表页下拉启动、小程序列表启动等。如果不填，将默认为 pages 列表的第一项。

在app.json配置文件中新增entryPagePath字段，并设置启动路径：

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

案例效果：页面多了个主页图标

3.1.3、app.json的window属性

定义小程序所有页面的顶部背景颜色，文字颜色定义等。

默认的window就是我们前面看到的Weixin头部信息。官网window字段文档

"window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
}

接下来我们修改点app.json里的内容：

{
  "pages":[
    "pages/blog/blog",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#00bfff",
    "navigationBarTitleText": "穆瑾轩的博客",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json"
}

backgroundTextStyle，下拉 loading 的样式，enablePullDownRefresh开启全局的下拉刷新。

案例效果：

通过上面的学习，我们大致了解到微信小程序的页面布局：

但是有人会想，怎么看有的小程序的标题有其他颜色或者字体比我的大？微信对于window的设置并没有开放字体大小及颜色的设置（固定的样式，页面比较稳定，不会溢出）。但是微信提供了navigationStyle：'custom'来设置自定义的导航，官方对于navigationStyle的说明：

自定义导航需要了解小程序的自定义组件，这个后面再演示。

3.1.4、app.json的tabBar属性

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

通常用的比较多的是：顶部tabBar和底部的tabBar。

tabBar的一些属性：

1）一级属性

属性	类型	必填	默认值	描述	最低版本
color	HexColor	是		tab 上的文字默认颜色，仅支持十六进制颜色（未选中时）
selectedColor	HexColor	是		tab 上的文字选中时的颜色，仅支持十六进制颜色
backgroundColor	HexColor	是		tab 的背景色，仅支持十六进制颜色
list	Array	是		tab 的列表，详见 `list` 属性说明，最少 2 个、最多 5 个 tab
position	string	否	bottom	tabBar 的位置，仅支持 `bottom` / `top`
custom	boolean	否	false	自定义 tabBar，见详情	2.5.0

2）二级属性

属性	类型	必填	说明
pagePath	string	是	页面路径，必须在 pages 中先定义
text	string	是	tab 上按钮文字
iconPath	string	否	图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `position` 为 `top` 时，不显示 icon。
selectedIconPath	string	否	选中时的图片路径，icon 大小限制为 40kb，建议尺寸为 81px * 81px，不支持网络图片。当 `position` 为 `top` 时，不显示 icon。

官网中有给我们说明一些属性的意思：

新增tabBar配置：

{
  "pages":[
    "pages/blog/blog",
    "pages/person/person",
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#00bfff",
    "navigationBarTitleText": "穆瑾轩的博客",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar":{
    "list":[
      {
        "pagePath":"pages/blog/blog",
        "text": "博客",
        "iconPath":"images/bk3.png",
        "selectedIconPath":"images/bk2.png"
      },
      {
        "pagePath":"pages/person/person",
        "text": "关于我",
        "iconPath":"images/bk_gyw1.png",
        "selectedIconPath":"images/bk_gyw2.png"
      }
    ],
    "selectedColor":"#FF6F00",
    "position":"bottom"
  }
}

案例效果：

3.2、页面配置

每一个小程序页面也可以使用同名 .json 文件来对本页面的窗口表现进行配置，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

注：并不是所有的都能覆盖，具体以官网列举的为准。

3.2.1、页面配置index.json

例如，我配置person.json文件如下：

{
  "usingComponents": {},
  "enablePullDownRefresh":false,
  "navigationBarBackgroundColor":"#00cccc"
}

案例效果：

导航栏的背景颜色被改变，且无法下拉刷新。

3.3、小程序的组件

在学习页面配置前，我们先了解下小程序给我提供了哪些组件来渲染页面。打开官网的组件页面，我们可以看到有这些组件：

1）视图容器 2）基础内容 3）表单组件 4）导航 5）媒体组件 6）地图 7）画布 8）开放能力 9）原生组件说明 10）无障碍访问 11）导航栏 12）页面属性配置节点

如果之前了解过VUE，对组件的概念应该就不那么陌生了。组件是视图层的基本组成单元，可以扩展页面元素，是对UI层的封装。

这里只挑选几个常用的（视图容器、基础内容、表单组件、导航）演示。

3.3.1、视图容器

一个容器可以容纳多个组件，并使他们成为一个整体。容器可以简化图形化界面的设计，以整体结构来布局界面。

常用视图容器有view、scroll-view、swiper、swiper-item

3.3.1.1、view组件

view组件是页面中最基本的容器组件。类似于Html中的div，用来进行页面布局的，具有块级盒子特性，能够接受其他组件的嵌入。

view组件可以实现横向布局、纵向布局、嵌套等效果。

属性	类型	默认值	必填	说明	最低版本
hover-class	string	none	否	指定按下去的样式类。当 `hover-class="none"` 时，没有点击态效果	1.0.0
hover-stop-propagation	boolean	false	否	指定是否阻止本节点的祖先节点出现点击态	1.5.0
hover-start-time	number	50	否	按住后多久出现点击态，单位毫秒	1.0.0
hover-stay-time	number	400	否	手指松开后点击态保留时间，单位毫秒	1.0.0

1）横向布局

person.wxml



  
      flex-direction: row——横向布局
  
  
      A
      B
      C

person.wxss

/* pages/person/person.wxss */
.flex-item{
  width: 200rpx;
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
}
.demo-text-1{
  background-color: red;
}
.demo-text-2{
  background-color: green;
}
.demo-text-3{
  background-color: pink;
}

.container .flex-wrp{
  display: flex;
  flex-direction: row;
}

案例效果：

2）纵向布局

修改显示方式为按列显示

.container .flex-wrp{
  display: flex;
  flex-direction: column;
}

案例效果：

3）嵌套

person.wxml



  
      view-hover:视图点击生态-不阻止父类
  
  我是父类容器
    我是子类容器
  
  
      view-hover:视图点击生态-阻止父类
  
  我是父类容器
    我是子类容器

person.wxss

/* pages/person/person.wxss */
.view-parent {
  width: 100%;
  height: 350rpx;
  background-color: pink;
  text-align: center;
}
.view-son {
  width: 50%;
  height: 200rpx;
  background-color: blue;
  margin: 20rpx auto;
  text-align: center;
  line-height: 200rpx;
}

.view-hover {
  background-color: green;
}

案例效果：不阻止的点击子容器全部变绿，阻止的点击子容器只有子容器变绿。

3.3.1.2、scroll-view组件

scroll-view是可滚动视图容器组件。当视图无法完全展示内容时，可以采取滑动的方式，使控件显示其完整内容。

scroll-view的属性比较多，详细查看官网介绍。

1）纵向滚动

person.wxml



  
      scroll-view:可滚动视图-纵向滚动
  
  
  
    A 
    B 
    C 
    D

person.wxss

.scroll-y-item{
  width: 200rpx;
  height: 200rpx;
  text-align: center;
  line-height: 200rpx;
}

.scrolly{
  height: 200rpx;
  width: 200rpx;
}

.bg_green{
  background-color: green;
}

.bg_red{
  background-color: red;
}

.bg_blue{
  background-color: blue;
}

.bg_yellow{
  background-color: yellow;
}

案例效果：

2）横向滚动

person.wxml



  
      scroll-view:可滚动视图-横向滚动
  
  
  
    A 
    B 
    C 
    D

person.wxss

/* pages/person/person.wxss */
.scroll-x-item{
  width: 200rpx;
  height: 200rpx;
  display: inline-block;
  text-align: center;
  line-height: 200rpx;
}

.scrollx{
  width: 400rpx;
  white-space: nowrap;
  border: 1px red solid;
}

.bg_green{
  background-color: green;
}

.bg_red{
  background-color: red;
}

.bg_blue{
  background-color: blue;
}

.bg_yellow{
  background-color: yellow;
}

案例效果：

3.3.1.3、swiper和swiper-item组件

swiper是滑块视图容器组件，其中只可放置swiper-item组件，否则会导致未定义的行为。通常用于图片间的切换，也就是所谓的轮播图。

person.wxml



  
      swiper:滑块视图容器-轮播图
  
  
    A 
    B 
    C 
    D

person.wxss

/* pages/person/person.wxss */
.swiper-item{
  width: 100%;
  text-align: center;
  line-height: 300rpx;
}

.swiper{
  height: 300rpx;
}
.bg_green{
  background-color: green;
}

.bg_red{
  background-color: red;
}

.bg_blue{
  background-color: blue;
}

.bg_yellow{
  background-color: yellow;
}

案例效果：

其他视图容器组件cover-view,movable-view,page-container等等使用方式看官网。

3.3.2、基础内容

3.3.2.1、icon组件和progress组件

icon图标组件，这个对于我们来说应该不陌生了，很多系统图标、软件图标就是用的扩展名为*.icon、*.ico格式的图片。

progress是进度条组件。

这个官网上就比较详细了。

3.3.2.1、text组件和rich-text组件

text是文本组建，类似于HTML中的span标签，是一个行内元素。

text 组件内只支持 text 嵌套，text组件和view组件的区别就是除了文本节点以外的其他节点都无法长按选中。

rich-text是富文本组建，支持把HTML字符串渲染成wxml结构。

1）text组件测试



    我是view组件
    我是text组件,测试超长是否自动换行的哈哈哈哈哈哈哈哈哈
    
    我是text组件,支持长按选中,\n测试手动换行

案例效果：

3.3.3、表单组件

表单组件有：button、checkbox、form、input、label、picker-view、radio、slider、switch、textarea等等。

组件名称	组件说明
button	按钮组件
checkbox	复选框组件
form	表单组件
input	输入框组件
label	标签组件
picker-view	滚动选择器组件
radio	单选组件
slider	滑动选择器组件
switch	开关组件
textarea	多行文本框组件

3.3.3.1、button组件

button是按钮组件，功能比HTML中的button丰富很多，通过open-type属性可以调用微信提供的各种功能（打开客户会话、转发、获取用户手机号、获取用户信息、打开app、打开授权页面、获取用户头像等）。



    
    我是button组件：

案例效果：新版样式

旧版样式：

3.3.4、媒体组件

媒体组件主要是用来处理图片、视频、音频的组件。主要包括：

组件名称	组件说明
camera	系统相机，如：扫描二维码(微信6.7.3版本)
image	图片
live-player	实时音视频播放
live-pusher	实时音视频录制
video	视频
viop-room	多人音频视频对话

3.3.4.1、camera组件

camera组件可以调用系统相机，支持拍照、扫码二维码功能。同一页面只能插入一个 camera 组件。

person.wxml



  
  
  预览

person.js

// pages/person/person.js
Page({
  takePhoto() {
    const ctx = wx.createCameraContext()
    ctx.takePhoto({
      quality: 'high',
      success: (res) => {
        this.setData({
          src: res.tempImagePath
        })
      }
    })
  },
  error(e) {
    console.log(e.detail)
  }
})

案例效果：

3.3.4.2、image组件

image图片组件，支持 JPG、PNG、SVG、WEBP、GIF 等格式。

image组件默认宽度320px、高度240px；image组件中二维码/小程序码图片不支持长按识别。仅在 wx.previewImage 中支持长按识别。

原图：

使用image组件的mode属性来指定图片裁剪和缩放模式。



  
    image
    图片
  
  
    
      {{item.text}}

person.js

Page({
  data: {
    array: [{
      mode: 'scaleToFill',
      text: 'scaleToFill：不保持纵横比缩放图片，使图片完全适应'
    }, {
      mode: 'aspectFit',
      text: 'aspectFit：保持纵横比缩放图片，使图片的长边能完全显示出来'
    }, {
      mode: 'aspectFill',
      text: 'aspectFill：保持纵横比缩放图片，只保证图片的短边能完全显示出来'
    }, {
      mode: 'top',
      text: 'top：不缩放图片，只显示图片的顶部区域'
    }, {
      mode: 'bottom',
      text: 'bottom：不缩放图片，只显示图片的底部区域'
    }, {
      mode: 'center',
      text: 'center：不缩放图片，只显示图片的中间区域'
    }, {
      mode: 'left',
      text: 'left：不缩放图片，只显示图片的左边区域'
    }, {
      mode: 'right',
      text: 'right：不缩放图片，只显示图片的右边边区域'
    }, {
      mode: 'top left',
      text: 'top left：不缩放图片，只显示图片的左上边区域'
    }, {
      mode: 'top right',
      text: 'top right：不缩放图片，只显示图片的右上边区域'
    }, {
      mode: 'bottom left',
      text: 'bottom left：不缩放图片，只显示图片的左下边区域'
    }, {
      mode: 'bottom right',
      text: 'bottom right：不缩放图片，只显示图片的右下边区域'
    }],
    src: '/images/image_mm.jpg'
  },
  imageError: function(e) {
    console.log('image3发生error事件，携带值为', e.detail.errMsg)
  }
})

案例效果：

其他组件用到时在学习。

2.3、小程序中的基础语法及生命周期

前面我们学习了小程序的基础配置和一些常用组件。在开发小程序的页面时，我们会在wxml用一些组件，并且附上一些wxss样式及一些逻辑*.js代码去渲染我们的页面，所以我们经常会去编辑这些文件（*.wxml、*.wxss、*.js）。

小程序中的法语和vue中的语法类似，但是又有一些区别。

2.3.1、wxml语法简介

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

2.3.1.1、WXML与HTML区别

WXML与HTML的标签名不同

HTML（div、span、img、a）
WXML有自己的一套内置的组件（view、text、image、navigator）

2.3.1.2、数据绑定

WXML提供了类似于Vue中的模板语法。在data中定义数据，WXML中使用数据：

例如：

blog.wxml

blog.js

// pages/blog/blog.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    imgPath:"/images/image_mm.jpg"
  }
})

案例效果：

2.3.1.3、列表渲染



    {{ item.message }}


 {{item}}

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

使用 wx:for-item可以修改当前项的默认变量（item）名称。

使用 wx:for-index 可以指定数组当前下标的变量（index）名称。

wx:key

优点类似于vue中的:key的用法。如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态时需要提供，如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

wx:key 的值以两种形式提供：

a）字符串，数组中 item 的某个 property，要确保项保持自己的特征，此时的property的值是需要唯一的。

b）保留关键字 *this，代表在 for 循环中的 item 本身，items本身作为一个唯一的字符串或者数字。

例如：

blog.js

Page({

  /**
   * 页面的初始数据
   */
  data: {
    array1:[1,2,3,4],
    array2:[
      {id:"1",username:"a"},
      {id:"2",username:"b"},
      {id:"3",username:"c"}
    ]
  }
})

案例效果：

Page({

  /**
   * 页面的初始数据
   */
  data: {
    array1:[1,2,3,4],
    array2:[
      {id:"1",username:"a"},
      {id:"2",username:"b"},
      {id:"3",username:"c"}
    ]
  }
})

2.3.1.4、条件渲染

wx:if

vue中使用v-if和v-show控制元素的显示和隐藏。

小程序中使用 wx:if="" 和hidden控制元素的显示和隐藏。

 true 

false

block wx:if


   view1 
   view2

并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

wx:if和hidden的区别：

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

2.3.1.5、其他

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。模板用法，具体参考官网。

WXML 提供两种文件引用方式import和include,具体用法，参照官网。

2.3.2、wxss语法简介

WXSS (WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

2.3.2.1、WXSS和CSS的区别

CSS中需要手动进行像素单位换算；
WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算；
WXSS支持样式导入，使用@import语句；
WXSS仅支持部分CSS选择器。

详细内容至官网查看。

2.3.3、生命周期

生命周期是指一个对象从创建-运行-销毁的整个过程。相比Vue的生命周期，小程序的生命周期要简单一点。

小程序中的生命周期分为两类：

1）应用生命周期：小程序从启动-运行-销毁的过程；

2）页面生命周期：每个页面的加载-渲染-销毁的过程；

2.3.3.1、应用生命周期

小程序的应用生命周期在app.js中进行声明。详解内容，看官网

// app.js
App({
  onLaunch() {
    // 小程序初始化完成时执行，全局只触发一次，做一些初始化工作
    console.log("onLaunch");
  },
  onShow(){
    //小程序启动或从后台进入前台显示时触发
    console.log("onShow");
  },
  onHide(){
    //小程序从前台进入后台时触发
    console.log("onHide");
  },
  onError(msg){
    //小程序发生脚本错误或 API 调用报错时触发
    console.log("onHide"+msg);
  },
  onPageNotFound(res){
    //小程序要打开的页面不存在时触发。
    wx.redirectTo({
      url: 'pages/...'
    })
  },
  onUnhandledRejection(){
    //小程序有未处理的 Promise 拒绝时触发
    console.log("onUnhandledRejection");
  },
  onThemeChange(){
    //系统切换主题时触发
    console.log("onThemeChange");
  }
})

2.3.3.2、页面生命周期

小程序的页面生命周期需要在页面的.js文件中进行声明。更详细的看官网。

Page({
  onLoad: function(options) {
    // 生命周期回调—监听页面加载.
  },
  onShow: function() {
    // 生命周期回调—监听页面显示.
  },
  onReady: function() {
    // 生命周期回调—监听页面初次渲染完成.
  },
  onHide: function() {
    // 生命周期回调—监听页面隐藏.
  },
  onUnload: function() {
    // 生命周期回调—监听页面卸载.
  }
  ...
})

打开小程序：(App)onLaunch --> (App)onShow --> (Pages)onLoad --> (Pages)onShow --> (pages)onRead

进入下一个页面：(Pages)onHide --> (Next)onLoad --> (Next)onShow --> (Next)onReady

离开小程序：(App)onHide

3.4、小程序的API

MINA 框架提供丰富的微信原生 API，如获取用户信息，本地存储，支付功能等。api在开发中实践，具体看官网。

4、我的小程序开发

4.1、首页的实现

4.1.1、首页底部导航栏

首页底部导航栏是比较好实现的，设置navigationBar窗口信息，再添加tabBar，包括：推荐、博客、关于我即可。

{
  "pages":[
    "pages/index/index",
    "pages/blog/blog",
    "pages/person/person",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#00bfff",
    "navigationBarTitleText": "穆瑾轩的博客",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":true
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar":{
    "list":[
      {
        "pagePath":"pages/index/index",
        "text": "推荐",
        "iconPath":"images/home.png",
        "selectedIconPath":"images/homeSelected.png"
      },
      {
        "pagePath":"pages/blog/blog",
        "text": "博客",
        "iconPath":"images/bk3.png",
        "selectedIconPath":"images/bkSelected.png"
      },
      {
        "pagePath":"pages/person/person",
        "text": "关于我",
        "iconPath":"images/bk_gyw1.png",
        "selectedIconPath":"images/bk_gywSelected.png"
      }
    ],
    "selectedColor":"#FF6F00",
    "position":"bottom"
  }
}

案例效果：

4.1.2、首页轮播图

首页轮播图的实现比较简单，前面我们在学习swiper组件时候就实现过。

1）index.wxml

2）index.wxss

.page{
  background-color: #FFFFFF;
  height: 100%;
}

.banner{
  width: 750rpx;
  height: 375rpx;
  white-space: nowrap;
}

3） index.js

// index.js
Page({
  data: {
    runbo:[
      {
        id:'1',
        imgsrc:'/images/rb_image1.jpg'
      },
      {
        id:'2',
        imgsrc:'/images/rb_image2.jpg'
      },
      {
        id:'3',
        imgsrc:'/images/rb_image3.jpg'
      }
    ]
  }
})

案例效果：

4.1.3、首页推荐内容

首页推荐内容分两块，一块是最新内容，一块是推荐内容。本来想接入公众号的，无奈非认证的个人小程序没有这个资格。

1）index.wxml



  
      
      
      
      
            
              
            
      
       
      —— 最新 ——
     
      
      
          
            
            {{articles.title}}
            {{articles.content}}
          
          
            {{articles.createTime}}
          
      

      
      —— 推荐 ——

      
      
          
            
            {{articles.title}}
            {{articles.content}}
          
          
            {{articles.createTime}}

2）index.wxss

.page{
  background-color: #FFFFFF;
  height: 100%;
}

.banner{
  width: 750rpx;
  height: 375rpx;
  white-space: nowrap;
}

.article-follow{
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  line-height: 100rpx;
  font-size: 32rpx;
  text-align: center;
  color: #666666;
}
.weui-tabs-bar__wrp {
  border-bottom: 1px solid #eee;
  margin-top: 10px;
}

.weui-tabs-swiper {
  width: 100%;
  height: 100px;
}

.tab-content .tab-content-item{
  height: 100px;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-sizing: border-box;
  padding: 40rpx;
}

.weui-tabs-bar__title {
  margin: 0px 10px;
  font-size: 14rpx;
}

.tab-bar-title__selected {
  font-size: 16px;
  font-weight: bold;
}

.article-card{
  margin: 5rpx 0rpx 100rpx 0rpx;
  background: #ffffff;
  border-style: solid;
  box-shadow:0px 2px 4px 2px #DDDDDD;
  border-width: 0rpx;
}

.article-card .content {
  width: 750rpx;
  padding-bottom: 5rpx;
}

.article-card .operation {
  padding: 10rpx 30rpx 0rpx 30rpx;
}
.article-card .operation .date {
  font-size: 26rpx;
  color:#666666;
}

.article-card .content .cover {
  width: 750rpx;
  height: 100%;
}

.article-card .content .title {
  font-size: 32rpx;
  padding: 10rpx 30rpx 5rpx 30rpx;
  display: block;
}

.article-card .content .desc {
  font-size: 26rpx;
  color:#CCCCCC;
  padding: 0rpx 30rpx;
  display: block;
}

3）index.js

Page({
  data: {
    runbo:[
      {
        id:'1',
        imgsrc:'/images/rb_image1.jpg'
      },
      {
        id:'2',
        imgsrc:'/images/rb_image2.jpg'
      },
      {
        id:'3',
        imgsrc:'/images/rb_image3.jpg'
      }
    ],
    zx_articles: [],
    tj_articles: [],
  },
  // 事件处理函数
  bindViewTap() {
    
  },
  onLoad() {
    //设置文章列表
    const zx_articles = [
      {
        id: 1,
        imageUrl: '/images/bk_article.jpeg',
        title: '重学设计模式-设计模式总结',
        content:'设计模式并不是一种具体的技术，它讲述的是解决问题的思想，是一套用来提高代码可复用性、可维护性、可读性、稳健性以及安全性的解决方案...',
        createTime:'2022-07-02 23:22:59',
        contentPath:'/pages/article/article'
      }
    ]
    this.setData({ zx_articles });

    const tj_articles = [
      {
        id: 2,
        imageUrl: '/images/bk_article_gui.jpeg',
        title: 'Java GUI——Java图形用户界面',
        content:' 早期，电脑向用户提供的是单调、枯燥、纯字符状态的“命令行界面（CLI）...',
        createTime:'2021-10-10 23:22:59',
        contentPath:'/pages/article/article'
      },
      {
        id: 3,
        imageUrl: '/images/bk_article_vue.png',
        title: 'vuepress使用简介及个人博客搭建',
        content:' vuepress 是 Vuejs 官方提供的一个是Vue驱动的静态网站生成器，基于Markdown语法生成网页...',
        createTime:'2021-08-20 23:22:59',
        contentPath:'/pages/article/article'
      }
    ]
    this.setData({ tj_articles });
  }
})

案例效果：