微信小程序学习笔记

一、文件和目录结构介绍

小程序包括：主体文件、页面文件

主体文件：

app.js：小程序入口文件
app.json：小程序的全局配置文件
app.wxss：小程序的全局样式

页面文件：是每个页面所需的文件，小程序页面文件都存放在pages目录下，一个页面一个文件夹

页面文件：

.js：页面逻辑（必须存在）
.wxml：页面结构（必须存在）
.wxss：页面样式
.json：小页面配置

二、配置文件介绍

1、JSON

JSON是一种轻量级的数据格式，常用于前后端数据的交互，但是小程序中，JSON扮演配置项的角色，用于配置项目或者页面属性和行为

app.json：小程序全局配置文件，用于配置小程序的一些全局属性和页面路由
页面.json：小程序页面配置文件，也称局部配置文件，用于配置当前页面的窗口样式、页面标题等
project.config.json：小程序项目的配置文件，用于保存项目的一些配置信息和开发者的个人设置
sitemap.json：配置小程序及其页面是否允许被微信索引，提高小程序在搜索引擎搜索到的概率

2、pages

pages用来指定小程序由哪些页面组成，用于让小程序知道由哪些页面组成以及页面定义在哪个目录，每一项都对应一个页面的路径信息

主义事项：

页面路由不需要写文件后缀，框架会自动去寻找对应位置的四个文件进行处理
小程序中新增/减少页面，都需要对pages数组进行修改
未指定entryPagePath（直接指示小程序首页）时，数组的第一项代表小程序的初始页面（首页）

3、window

用于设置小程序的状态栏、导航条、标题、窗口背景色

配置项查询链接：

bash 复制代码

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

4、tabBar

定义小程序顶部底部tab栏，用以实现页面之间的快速切换，可以通过tabbar配置项指定tab栏的表现，以及tab切换时显示的对应页面

tabbar配置项：

selectedColor：选中时文字的颜色
color：文字的默认颜色
backgroundColor：当前tab栏的背景色
borderStyle：tab栏上方border是否需要，可选项"white"和"black"
position：tab栏的位置，可选项"top"（tab栏在顶部，此时icon不会显示）
list：tab栏的内容

tabbar配置list的要求：

5、页面配置

小程序的页面配置也称局部配置，每一个小程序页面也可以使用自己的.json文件对本页面的窗口表现进行配置。

页面配置文件的属性和全局配置文件中的window属性几乎一致，只不过这里不需要额外指定window字段，因此如果出现相同的配置项，页面中的配置项会覆盖全局配置文件中相同的配置项。

6、项目配置文件-config.json和配置sass

（1）项目配置文件

在创建项目的时候，每个项目的根目录生成两个config.json文件，用于保存开发者在工具上做的个性化配置，例如和编译有关的配置。当重新安装微信开发者工具或换电脑工作时，只要载入同一个项目的代码包，开发者工具就会自动恢复到当时开发项目时的个性化配置。

project.config.json：项目配置文件，常用来进行配置公共的配置（与最终编译结果有关的设置必须设置到这里）
project.private.config.json：项目私有的配置，常用来配置个人的配置

（2）配置sass

与编译结果有关，所以在project.config.json中进行配置

7、配置文件-sitemap.json

配置小程序及其页面是否允许被微信索引，提高小程序在微信内部被用户搜索到的概率。

微信现已开放小程序内搜索，开发者可以通过sitemap.json配置来设置小程序页面是否允许微信索引。当开发者允许微信索引时，微信会通过爬虫的形式，为小程序的页面内容建立索引。当用户的搜索词条触发改索引时，小程序的页面将可能展示在搜索结果中。

注：

没有sitemap.json则默认所有页面都能被索引
{"action":"allow","page":"*"}是优先级最低的默认规则，未显式指明"disallow"的都默认被索引

二、小程序的样式和组件

1、组件

在小程序中不能使用HTML标签，也就没有DOM和BOM，CSS也仅仅支持部分选择器。

小程序提供了WXML进行页面结构编写，同时提供了WXSS进行页面的样式编写

WXML提供了view、text、image、navigator等标签来构建页面结构，只不过在小程序中将标签称为组件
WXSS对CSS扩充和修改，新增了尺寸单位rpx，提供了全局的样式和局部样式，另外需要注意的是WXSS仅支持部分CSS选择器

2、尺寸单位rpx

为了解决屏幕适配的问题，微信小程序推出了rpx单位

rpx：时下程序新增的自适应单位，他可以根据不同设备的屏幕宽度进行自适应缩放

开发建议：

开发微信小程序时设计师可以用iphone6作为视觉稿的标准，iphone6的设计稿一般是750px
如果iphone6作为视觉稿的标准量取多少px，直接写多少rpx即可，开发起来更方便，也能够适配屏幕的宽度

3、全局样式和局部样式

全局样式：指在app.wxss中定义的样式规则，作用域每一个页面，例如：设置字号、背景色、宽高等全局样式

局部样式：指在page.wxss中定义的样式规则，只作用在对应的页面，并会覆盖app.wxss中相同的选择器

4、划分页面结构

小程序常用的组件：

view组件
swiper和swiper-item组件
image组件
text组件
navigator组件
scroll-view组件
字体图标

设置整体页面背景色（设置高优先级）

5、轮播图区域绘制

在小程序中，提供了swiper和swiper-item组件实现轮播图

swiper：滑块视图容器，其中只能放置swiper-item组件
swiper-item：只可放置在swiper组件中，宽高自动设置为100%，代表swiper中的每一项

在小程序中，如果需要渲染图片，需要使用image组件，常用的属性有4个：

src属性：图片资源地址
mode：图片裁剪、缩放的模式
show-menu-by-longpress：长按图片显示菜单
lazy-load：图片懒加载（滑动到一定区域才会加载图片）

注意事项：

image默认具有宽度和高度，宽度是320px高度是240px
image组件不给src属性设置图片地址，也占据宽和高

6、绘制公司信息区域

在小程序中，如果需要渲染文本，需要使用text组件，常用的属性有2个：

user-select：文本是否可选，用于长按选择文本
space：显示连续空格
- ensp：显示空格时会按照中文字符空格一半大小显示
- emsp：显示空格时会按照中文字符空格大小显示空格
- nbsp：按照字符大小进行展示

注意事项：

除了文本节点以外的其他节点都无法长按选中
text组件内只支持text嵌套

7、商品导航区域

结合view、image、text的综合案例

8、点击商品导航跳转到商品列表

在小程序中，如果需要进行跳转，需要使用navigator组件，常用的属性有2个：

url：当前小程序内的跳转链接
open-type：跳转方式
- navigate：保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar页面
- redirect：关闭当前页面，没有返回上一页的箭头，跳转到应用内的某个页面。但不能跳转到tabbar页面
- switchTab：跳转到tabBar页面，并关闭其他所有非tabBar页面
- reLaunch：关闭所有页面，打开到应用内的某个页面
- navigateBack：关闭当前页面，返回上一页面或前几个页面（搭配delta属性，默认是1，如果想返回几级，就写几）

注意事项：

路径后可以带参数。参数与路径之间使用?分隔，参数键与参数值用=相连，不同参数用&分隔。
例如：list/?id=10&name=hua，在onLoad(options)生命周期函数中获取传递的参数
open-type="switchTab"时不支持传参

9、推荐商品区域-滚动效果

在小程序中，如果想实现内容滚动，需要使用scroll-view组件

scroll-view：可滚动视图区域，适用于需要滚动展示内容的场景，用于在小程序中实现类似于网页中的滚动条效果，用户可以直接通过手指滑动或者点击滚动条来滚动内容。2个属性：

scroll-x：允许横向滚动
scroll-y：允许纵向滚动

水平方向的滚动：

垂直方向的滚动：

10、推荐商品区域

WXML：

xml 复制代码

<view class="good-hot">
  <scroll-view class="scroll-x" scroll-x>
    <view>
      <view class="good-item">
        <image src="../../assets/floor/1.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>66</text>
      </view>
    </view>
    <view>
      <view class="good-item">
        <image src="../../assets/floor/2.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>77</text>
      </view>
    </view>
    <view>
      <view class="good-item">
        <image src="../../assets/floor/3.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>88</text>
      </view>
    </view>
    <view>
      <view class="good-item">
        <image src="../../assets/floor/4.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>99</text>
      </view>
    </view>
    <view>
      <view class="good-item">
        <image src="../../assets/floor/5.png" mode=""/>
        <text>鲜花玫瑰</text>
        <text>100</text>
      </view>
    </view>
  </scroll-view>
</view>

SCSS：

css 复制代码

.good-hot{
  font-size:24rpx;
  background-color: #fff;
  padding:16rpx;
  border-radius: 10rpx;
  .scroll-x{
    width: 100%;
    white-space: nowrap; // 不允许元素换行

    view{
      margin-right:16rpx;
      display:inline-block;
      width:320rpx;
      height:440rpx;
      &:last-child{
        margin-right:0rpx;
      }
      .good-item{
        display:flex;
        flex-direction: column;
        justify-content: space-between;
        image{
          width: 100%;
          height: 320rpx;
        }
        text{
          &:nth-of-type(1){
            font-weight: bold;
          }
        }
      }
      
    }
  }
}

11、字体图标的使用

在项目中使用到的小图标，一般由公司设计师进行设计，设计好以后上传到阿里巴巴矢量图标库，方便程序员来进行使用。

小程序中的字体图标使用方式与Web开发中的使用方式是一样的。

在阿里巴巴矢量图库中将icon存入项目

项目设置勾选Based64
生成代码
复制代码至wxss

创建一个iconfont文件夹，创建iconfont.scss并将下述代码复制其中
导入

一定要以分号结尾
字体图标添加

12、背景图的使用

在小程序中，我们可以使用background-image属性来设置元素的背景图像

注意事项：

小程序的background-image不支持本地路径，需要使用网络图片，或者base64（不建议使用，太长）或者使用</image>组件

三、事件系统

1、事件绑定和事件对象

在小程序中绑定事件与在网页开发中绑定事件几乎一致，只不过在小程序不能通过on的方式绑定事件，也没有click等事件，小程序中绑定事件使用bind方法，click事件也需要使用tap事件来进行代替，绑定事件的方式有两种：

bind:事件名，bind后面需要跟上冒号，冒号后面跟上事件名
bind事件名，bind后面直接跟上事件名

事件处理函数需要写到.js文件中，在.js文件中需要调用小程序提供的Page方法来注册小程序的页面，我们可以直接在Page方法中创建事件处理函数

绑定事件步骤：

bind绑定
在index.js中添加绑定的事件

event会输出一个对象，可以通过这个对象传递数据

event传参示例：

2、事件分类以及阻止事件冒泡

事件分为冒泡事件和非冒泡事件：

冒泡事件：当一个组件的事件被触发后，该事件会向父节点传递

非冒泡事件：当一个组件的事件被触发后，该事件不会向父节点传递

使用bind绑定的事件，会触发事件冒泡，如果想阻止事件冒泡，可以使用catch来绑定事件

组件冒泡：

结果

如何阻止组件冒泡：

结果成功阻止冒泡

3、事件传参------data-*自定义数据

事件传参：在触发事件时，将一些数据作为参数传递给事件处理函数的过程，就是事件传参

在微信小程序中，我们经常会在组件上添加一些自定义数据，然后在事件处理函数中获取这些自定义数据，从而完成业务逻辑的开发

在组件上通过data-*的方式定义需要传递的数据，其中*是自定义的属性

事件绑定者和事件触发者为同一个：

事件绑定者和事件触发者不是同一个：

如果data后是多个单词的自定义属性，单词和单词用-连接，在event中会转换为小驼峰命名法
如果data后的自定义属性是小驼峰写法，在event中会全部转换成小写

4、事件传参------mark自定义数据

mark是一种自定义属性，可以在组件上添加，用于来识别具体出发事件的target节点。同时mark还可以用于承载一些自定义数据。

在组件上使用mark:自定义属性的方式将数据传递给事件处理函数，然后通过事件对象event进行获取自定义函数

button绑定事件处理函数：

view绑定事件处理函数：

四、wxml语法

1、声明和绑定数据

小程序页面中使用的数据均需要在Page()方法的data对象中进行声明定义。

在将数据声明好之后，在wxml使用Mustache语法（双大括号{``{}}）将变量包起来，从而将数据绑定。

在{``{}}内部可以做一些简单的运算，支持算术运算、三元运算、逻辑判断等方式。只能写表达式，不能写语句也不能调用js方法。

2、setData()修改数据

小程序中修改数据不推荐通过赋值的方式进行修改，通过赋值的方式修改数据无法改变页面的数据

而是要通过setData()方法进行修改，setData()方法接收对象作为参数，key是需要修改的数据，value是最新的值

setData()有两个作用：更新数据、驱动视图更新

3、使用setData()修改对象类型数据

（1）使用setData()新增属性

（2）使用setData()修改属性

这样修改数据一但修改量多写起来就很麻烦，可以借助ES6的语法进行优化

（1）展开运算符...

通过展开运算符能够将对象中的属性赋值给另一个对象，后面的属性会覆盖前面的属性

（2）Object.assign()

将多个对象合并为一个对象，遵循从后往前合并的原则

（3）使用setData()删除属性

删除单个数据

删除多个数据

4、使用setData()修改数组类型数据

（1）使用setData()新增数组元素

使用push方法（push会修改原数组）

使用concat方法

使用展开运算符

（2）使用setData()修改数组元素

（3）使用setData()删除数组元素

使用 splice方法（splice方法会修改原数组）

使用filter方法（filter不修改原数组，返回一个符合要求的新数组）

5、简易双向数据绑定

在WXML中，普通属性的绑定是单向的，即数据能够影响页面，页面无法影响数据

如果希望用户输入数据的同时改变data中的数据，可以借助简易双向绑定机制。在对应属性之前添加model:前缀即可

注意事项：

只能是一个单一字段的绑定

html 复制代码

<input model:value="值为 {{value}}"/>
不可以，单一字段，前面不能加"值为"

不能写data路径，也就是不支持数组和对象

html 复制代码

<input model:value="{{obj.value}}"/>
不可以，属性值为对象是不允许的

6、列表渲染

在组件上使用wx:for属性绑定一个数组或对象，既可使用每一项数据重复渲染当前组件，每一项的变量名默认为item，下标变量名默认为index

加上wx:key属性（不需要使用大括号语法），两种形式：

字符串：代表需要遍历的array中item的某个属性，该属性的值需要是列表中唯一的字符串或数字，且不能动态改变
保留关键字*this，*this代表在for循环中的item本身，当item本身是一个唯一的字符串或者数字时可以使用

加入wx:key

7、列表渲染-进阶用法

使用wx:for-item和wx:for-index
将wx:for用在block标签上，以渲染一个包含多个节点的结构块
- block并不是一个组件，他仅仅是一个包装元素，不会做任何渲染，只接受控制属性
- block标签在wxml种可以用于组织代码结构，支持列表渲染、条件渲染等

如果需要修改默认的变量名，需要使用wx:for-item属性；如果需要修改默认的下标变量名，需要使用wx:for-index属性

block不是一个组件，只是一个包装元素，可以组织代码结构，支持列表渲染

8、条件渲染

条件渲染主要用于控制页面结构的展示和隐藏，在微信小程序中实现条件渲染有两种方式：

wx:if、wx:elif、wx:else属性组
使用hidden属性

wx:if和hidden两者的区别：

wx:if：当条件为true时将结构展示出来，否则结构不会进行展示，通过移除/新增节点的方式来实现
hidden：当条件为true时会将结构隐藏，否则结构会展示出来，通过display样式属性来实现

（1）wx-if属性组

只有对应的条件成立，属性所在的组件才会进行展示

wx:elif和wx:else不能单独使用，在使用的时候，必须结合wx:if来使用
使用了wx:if属性组的组件不能被打断，组件必须连贯才可以，即中间不能夹着别的组件

（2）hidden属性

hidden属性如果是true，就会隐藏结构，如果是false就会显示结构

（3）区别

wx:if控制结构的展示和隐藏，是通过新增和移除结构来实现的
hidden控制结构的展示和隐藏，是通过控制css的display属性来实现的

五、生命周期

1、小程序运行机制

（1）冷启动和热启动

冷启动：如果用户首次打开，或小程序销毁后被用户再次代开，此时小程序需要重新加载启动

热启动：打开过，在一定时间内再次打开该小程序，此时小程序并未被销毁，知识从后台状态进入前台状态

（2）前台及后台状态

前台：小程序启动，页面被展示给用户

后台：用户关闭小程序，小程序并没有被真正关闭，而是进入后台状态

切后台的方式包括但不限于以下几种：

点击右上角胶囊按钮离开小程序
安卓点击返回键离开小程序
屏幕左侧右滑离开小程序

（3）挂起

小程序进入后台状态一段时间后（5秒），微信停止小程序JS线程执行，小程序就进入挂起状态。

（4）销毁

如果用户很久没有使用小程序，或者系统资源紧张，小程序会被销毁，即完全终止运行。茹小程序被长时间挂起（30分钟）都未再次进入前台，小程序会被销毁

2、小程序更新机制

访问小程序时，微信会将小程序代码包缓存到本地

开发者发布新版本后，微信客户端会检查本地缓存的小程序有没有新版本并更新

小程序的更新机制有两种：启动时同步更新和启动时异步更新

（1）启动时同步更新

微信运行时，会定期检查最近使用的小程序是否有更新。如果有更新，下次小程序启动时会同步进行更新，更新到最新版本后再打开小程序。如果用户长时间未使用小程序时，会强制同步检查版本更新

（2）启动时异步更新

在启动前没有发现更新，小程序每次冷启动时，都会异步检查是否有更新版本。如果发现有新版本，将会异步下载新版本的代码包，将新版本的小程序在下一次冷启动进行使用，当前访问使用的依然是本地的旧版本代码

如果想要立即更新，可以使用 wx.getUpdateManagerAPI进行处理（在有新版本时提示用户重启小程序更新新版本）

js 复制代码

// app.js
App({
  
  // onLaunch 是小程序的钩子函数，这个钩子函数在冷启动时肯定会执行到
  // 当小程序冷启动时，会自动微信后台请求新版本的信息，如果有新版本，会立即进行下载
  onLaunch () {
    // 使用 wx.getUpdateManager 方法监听下载的状态
    const updateManager = wx.getUpdateManager()

    // 当下载完成新版本以后，会触发 onUpdateReady 回调函数
    updateManager.onUpdateReady(function () {
      // 在回调函数中给用户提示，
      wx.showModal({
        title: '更新提示',
        content: '新版本已经准备好，是否重启应用？',
        success(res) {
          if (res.confirm) {
            // 强制当前小程序使用新版本并且会重启当前小程序
            updateManager.applyUpdate()
          }
        }
      })
    })
  }

})

3、生命周期介绍

小程序的生命周期是指小程序从启动到销毁的整个过程。打开一个小程序应用的时候都需要经历一系列的初始化步骤，比如页面是否加载完成、页面是否初次渲染完成等。

此过程中，小程序会运行生命周期钩子函数，生命周期函数会按照顺序依次自动触发调用。

小程序的生命周期分为三类：应用级别、页面级别和组件级别

4、应用级别生命周期

应用生命周期通常是指一个小程序从启动 → 运行 → 销毁的整个过程

应用生命周期伴随着一些函数，称为应用生命周期函数，应用生命周期函数需要在app.js文件的App()方法中定义

onLaunch监听小程序初始化，全局只会执行1次
onShow监听小程序启动（冷启动）或切前台
onHide监听小程序切后台

5、页面级别生命周期

页面生命周期就是指小程序页面从加载 → 运行 → 销毁的整个过程

小程序中的一个页面都需要在对应页面的.js 文件中调用Page()方法来注册。Page()接受一个 Object类型参数，其指定页面的初始数据、生命周期回调、事件处理函数等。

onLoad页面加载时触发（一个页面只会调用一次）
onShow页面显示时触发，页面显示/切入前台时触发
onReady页面初次渲染完成时触发（一个页面只调用一次）
onHide页面隐藏/切入后台时触发
onUnload页面卸载时触发

6、生命周期两个细节补充

tabBar页面之间相互切换，页面不会被销毁
点击左上角，返回上一个页面，会销毁当前页面

六、微信原生API

1、小程序API介绍

可以方便的调起微信提供的能力，如获取用户信息，本地存储，支付功能等，几乎所有小程序的 API 都挂载在 wx 对象底下。

事件监听API：约定以 on 开头 API 用来监听某个事件是否触发，例如：wx.onThemeChange()
同步API：约定以 Sync 结尾的 API 都是同步 API，例如：wx.setStorageSync()
异步API：大多数 API 都是异步 API，通常都接受一个object类型的参数，例如：wx.request({})

异步 API 支持 callback & Promise 两种调用方式：

当接口参数 Object 对象中不包含 success/fail/complete 时将默认返回 Promise
部分接口如 request, uploadFile 本身就有返回值，因此不支持 Promise 风格的调用方式，它们的 promisify 需要开发者自行封装。

2、网络请求

在微信小程序中，如果需要发起 HTTPS 网络请求需要使用：wx.request()

wx.request()请求的域名需要在微信公众平台进行配置

（1）在代码中配置

js 复制代码

getData(){
    // 如果需要发起网络请求，需要使用wx.request API
    wx.request({
      // 配置接口地址
      url:"http://gmall-prod.atguigu.cn/mall-api/index/findBanner",
      // 配置请求方式
      method:"GET",
      // 配置请求参数
      data:{},
      // 配置请求头
      header:{},
      // API调用成功以后，执行的回调
      success:(res)=>{
        console.log(res);
        if(res.data.code===200){
          this.setData({
            list:res.data.data
          })
        }
      },
      // API调用失败以后，执行的回调
      fail:(err)=>{
        console.log(err);
      },
      // API不管调用成功还是失败都会执行的回调
      complete:(res)=>{
        console.log(res);
      }
    })
  }

（2）微信公众平台配置请求的域名

微信公众平台-->开发管理-->服务器域名

日常练习可不对域名进行校验