2024小程序学习笔记初识微信小程序微信小程序是一种运行在微信内部的轻量级应用程序注册微信小程序账号略完善小程序

初识微信小程序

微信小程序是一种运行在微信内部的轻量级应用程序

注册微信小程序账号

略

完善小程序账号信息

略

项目成员和体验成员

小程序提供了两种成员角色:项目成员和体验成员

项目成员:表示参与小程序开发、运营的成员。项目成员可以登录微信公众后台。

体验成员：表示参与小程序内测体验的成员

小程序开发者ID

微信开发者工具

略

创建小程序项目

略

文件和目录结构介绍

一个完整的小程序项目分为两个部分：主体文件、页面文件

主体文件

主体文件又称为全局文件，能够作用于整个小程序，影响到小程序的每个页面，主体文件必须放到项目的根目录下。

主体文件由三部分组成：

app.js:小程序入口文件(必须，主体文件的名字必须是app)
app.json:小程序全局配置文件（必须）
app.wxss:小程序的全局样式

页面文件

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

每个页面通常由四个文件组成，每个文件只对当前页面有效:

.js 页面逻辑
.wxml 页面结构
.wxss 页面样式
.json 小页面配置

注意事项：.js文件和.wxml文件时必须的!

调试基础库

小程序调试基础库是指：微信开发者工具中可以选择的微信基础库版本

微信基础库是指小程序的运行环境，给小程序提供了运行所需的各种API和工具，以及基础框架和运行逻辑等。

小程序开发者可以在微信开发者工具中选择所需的微信基础库版本，作为运行和调试小程序时的运行环境。
每个小程序有自己所允许使用的基础库最低版本要求，开发者需要选择要兼容的基础库版本，从而确保小程序的功能正常运行。

如何调试小程序代码

主要是这些操作面板

注意：微信开发者工具的缓存太严重了，有时候发现代码未生效需要清除缓存

配置文件

配置文件介绍

JSON是一种轻量级数据格式，常用于前后端数据的交互，但是在小程序中，JSON扮演的是配置文件角色，用于配置项目或者页面属性和行为，每个页面或组件也都有一个对应的json文件。

小程序中常见的配置文件有以下几种：

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

全局配置

小程序页面区域结构：

pages配置

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

{
  "pages": [
    "pages/index/index",
    "pages/list/list"
  ]
}

在配置pages字段时，都有以下注意事项:

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

window配置

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

"window": {
    "navigationBarTitleText": "慕尚花坊",
    "navigationBarBackgroundColor": "#f3514f",
    "enablePullDownRefresh": true,
    "backgroundColor": "#efefef",
    "backgroundTextStyle":"dark"
  }

tabbar配置

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

注意事项: list配置项（tab列表）数量有限制，最少2个，最多5个。

app.json

"tabBar": {
    "selectedColor": "#30c27b",
    "color":"#666",
    "borderStyle":"black",
    "position": "bottom",
    "list": [
      {
        "text":"首页",
        "pagePath": "pages/index/index",
        "iconPath": "/assets/tabBar/index.png",
        "selectedIconPath": "/assets/tabBar/index-active.png"
      },
      {
        "text":"分类",
        "pagePath": "pages/cate/cate",
        "iconPath": "/assets/tabBar/cate.png",
        "selectedIconPath": "/assets/tabBar/cate-active.png"
      },
      {
        "text":"购物车",
        "pagePath": "pages/cart/cart",
        "iconPath": "/assets/tabBar/cart.png",
        "selectedIconPath": "/assets/tabBar/cart-active.png"
      },
      {
        "text":"我的",
        "pagePath": "pages/profile/profile",
        "iconPath": "/assets/tabBar/profile.png",
        "selectedIconPath": "/assets/tabBar/profile-active.png"
      }
    ]
  },

页面配置

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

注意：页面配置文件的属性和全局配置文件中的window属性几乎一致，如果出现相同的配置项，页面中配置项会覆盖全局配置文件中相同的配置项

pages/xx文件夹/xx.json

{
  "usingComponents": {},
  "navigationBarTitleText": "商品分类",
  "navigationBarBackgroundColor": "#00AF92",
  "enablePullDownRefresh": true,
  "backgroundTextStyle":"light"
}

项目配置文件

官方文档：developers.weixin.qq.com/miniprogram…

项目根目录中的 project.config.json 和 project.private.config.json 文件可以对项目进行配置，
project.private.config.json 中的相同设置优先级高于 project.config.json
可以在 project.config.json 文件中配置公共的配置，在 project.private.config.json 配置个人的配置，可以将 project.private.config.json 写到 .gitignore 避免版本管理的冲突。
project.private.config.json 中有的字段，开发者工具内的设置修改会优先覆盖 project.private.config.json 的内容。如在 project.private.config.json 有 appid 字段，那么在详情-基本信息中修改了 appid，会写到 project.private.config.json 中，不会覆盖掉 project.config.json 的 appid 字段的内容
开发阶段相关的设置修改优先同步到 project.private.config.json 中，但与最终编译产物有关的设置无法在 project.private.config.json 中生效，界面上的改动也不会同步到 project.private.config.json 文件中。详见表格是否允许私有设置。

sitemap.json文件

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

注意：

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

样式和组件

介绍

小程序中不能使用HTML标签，没有DOM和BOM，CSS也仅仅支持部分选择器，小程序提供了WXML进行页面结构编写，同时提供了WXSS进行页面样式的编写。

WXML提供了view、text、image、navigator等标签来构建页面结构，只不过在小程序中将标签称为组件

WXSS对CSS扩充和修改，新增了尺寸单位rpx,提供了全局样式和局部样式，另外需要注意的是wxss``仅支持部分css选择器

rpx

随着智能手机的发展，手机设备的宽度也逐渐多元化，所以我们需要适配不同屏幕宽度的手机。为了解决屏幕适配问题，微信小程序推出了rpx单位

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

小程序规定任何型号手机：屏幕宽都为750rpx

开发建议：

开发微信小程序时设计师可以用iphone6作为视觉稿的标准，iphone的设计稿一般是750px
如果用iphone6作为视觉稿的标准量取多少px,直接写(0.5乘以px数)rpx即可，开发起来比较方便。设计稿宽度是750px,而iphone6的手机宽度是375px，设计稿要想完整展示到手机中，需要缩小一倍。

全局样式和局部样式

全局样式：写在app.wxss文件中

局部样式：写在page.wxss文件中

常用的组件

swiper与swiper-item组件

在进行传统网页开发的时候，实现轮播图的时候相当麻烦。但是在小程序则简单地多。

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

swiper:滑块视图容器，只能放置swiper-item组件

swiper-item:只可放置在swiper组件中，宽高自动设置为100%,代表swiper的每一项。

navigation

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

1.url:当前小程序

2.open-type:跳转方式

navigate 保留当前页面，跳转到应用内的某个页面。但是不能跳到tabbar页面
redirect:关闭当前页面，跳转到应用内的某个页面。但不能跳转到tabbar页面
switchTab:跳转到tabBar页面，并关闭其他所有非tabBar页面
reLaunch:关闭所有页面，打开到应用内的某个页面
navigateBack:关闭当前页面，返回上一页面或多级页面

注意事项：

路径后可以带参数，在onLoad(options)生命周期函数中获取传递的参数
open-type="switchTab"时不支持传参

scroll-view

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

scroll-view:可滚动视图区域，适用于需要滚动展示内容的场景，用于在小程序中实现类似于网页中的滚动条效果。

两个属性： scroll-x:横向滚动

scroll-y:纵向滚动

Page方法

在小程序中，Page方法用于定义一个页面的逻辑和数据。它是一个全局函数，接受一个对象作为参数，这个对象包含了页面的初始数据、生命周期函数、事件处理函数等。

示例：

Page({
  // 页面的初始数据
  data: {
    someData: 'Hello, World!'
  },

  // 生命周期函数--监听页面加载
  onLoad: function (options) {
    console.log('Page loaded with options:', options);
  },

  // 生命周期函数--监听页面初次渲染完成
  onReady: function () {
    console.log('Page ready');
  },

  // 生命周期函数--监听页面显示
  onShow: function () {
    console.log('Page shown');
  },

  // 生命周期函数--监听页面隐藏
  onHide: function () {
    console.log('Page hidden');
  },

  // 生命周期函数--监听页面卸载
  onUnload: function () {
    console.log('Page unloaded');
  },

  // 页面相关事件处理函数
  handleEvent: function(e) {
    console.log('Event triggered:', e);
  }
});

小程序事件系统

事件绑定和事件对象

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

第一种方式:bind:事件名

<view bind:tap="fnName"></view>

第二种方式：bind事件名，bind后面直接跟上事件名，例如：

<view bindtap="fnName"></view>

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

// index.js
// index.js
Page({
  handleClickBtn(event){
    console.log('点击了按钮',event)
  },
  getInputVal(event){
    console.log('输入了内容',event)
  }
})

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

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

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

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

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

index.wxml默认parentHandler与btnHandler都会触发

<view class="catch" bind:tap="parentHandler">
  <button bind:tap="btnHandler">点击按钮</button>
</view>

使用catch阻止冒泡，只会触发btnHandler：

<view class="catch" bind:tap="parentHandler">
  <button catch:tap="，只会触发btnHandlerbtnHandler">点击按钮</button>
</view>

事件传参 data-xx

在组件上通过data-xx的方式定义需要传递的数据，例如<view data-id="100" bind:tap="handler"/>

触发事件，输出事件对象，传参的数据在currentTarget和target中

currentTarget：事件绑定者,也就是哪个组件绑定了当前事件处理函数
target:事件触发者，也就是指：哪个组件触发了当前事件处理函数

事件传参 mark自定义数据

小程序进行事件传参的时候，除了使用data-xx属性传递参数外，还可以使用mark标记传递参数

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

例如:<view mark:id="100" bindtap="handler"/>

参数会存在事件对象的这个地方

如果父子组件都绑定了mark属性呢:

<view class="catch" bind:tap="parentHandler" mark:parentId="200" mark:name="小张">
  <button type="primary" mark:id="100" mark:name="小明">点击按钮</button>
</view>

注意：

先点击view组件区域（不点击按钮）通过事件对象获取的mark属性是view身上绑定的数据
先点击按钮（不点击view组件区域）通过事件对象获取到的是触发事件节点与view组件身上绑定的所有mark属性（如果有重名mark属性则触发事件节点的mark属性覆盖事件绑定者的mark属性）

wxml语法

声明和绑定数据

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

在将数据声明好以后，在WXML使用{{}}将变量包起来，从而将数据绑定。在{{}}内部可以做一些简单的运算。

注意事项:在{{}}语法中，只能写表达式，不能写语句，也不能调用js相关的方法。(比Vue垃圾多了) index.js文件

// index.js
Page({
  data:{
    school:'江西农业大学',
    id:1
  }
})

index.wxml文件

<!-- 绑定内容 -->
<view>{{school}}</view>
<!-- 绑定属性 -->
<view id="{{id}}">111</view>

setData()修改数据

小程序中修改数据不推荐通过赋值的方式进行修改，通过赋值的方式修改数据无法改变页面的数据，而是要通过setData()方法进行修改，setData()方法接收对象作为参数，key是需要修改的数据，value是最新的值。

setData()方法有两个作用:

更新数据
驱动视图更新

index.wxml

<view>数量:{{num}}</view>
<button type="primary" bind:tap="handleChangeNum">修改数值</button>

index.js

// index.js
Page({
  data:{
    num:0
  },
  handleChangeNum(){
    this.setData({
      num:this.data.num+1
    })
  }
})

简易双向数据绑定

在WXML中，普通属性的绑定是单向的，例如：<input value="{{value}}">

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

:model有如下限制:

只能是一个单一字段的绑定，例如:错误用法:
尚不能写data路径,也就是不支持数组和对象

列表渲染

基础用法

列表渲染就是指通过循环遍历一个数组或对象，将其中的每个元素渲染到页面上，需要使用wx:for,每一项的变量名默认为item。下标变量名默认为index

在使用wx:for进行遍历的时候，建议加上wx:key属性，wx:key的值以两种形式提供：

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

注意事项：

如果不加wx:key，会报一个warning,如果明确知道该列表时静态，即以后数据不会改变，或者不必关注顺序，可以选择忽略
在给wx:key添加属性值的时候，不需要使用双大括号语法，直接使用遍历的array中item的某个属性

<!-- 如果渲染的是数组，item:数组的每一项，index:下标 -->
<view wx:for="{{numList}}">{{item}}-{{index}}</view>

<!-- 如果渲染的是对象，item:对象属性的值，index:对象属性 -->
<view wx:for="{{obj}}">{{item}}-{{index}}</view>

<!-- wx:key提升性能 -->
<!-- wx:key属性值有两种添加形式 -->
<!-- 1.字符串，需要是遍历数组中item中的某个属性，要求该属性是列表中唯一的字符串或者数字，不能进行动态改变 -->
<!-- 2.保留关键字*this，*this代表的是item本身，item本身是唯一的字符串或者数字 -->

<!-- wx:key的属性值不需要使用双大括号进行包裹，直接写遍历的数组中item的某个属性 -->
<view wx:for="{{numList}}" wx:key="id">{{item}}</view>
<view wx:for="{{obj}}" wx:key="*this">{{item}}</view>

进阶用法

1.如果需要对默认的变量名和下标进行修改，可以使用wx:for-item和wx:for-index

使用wx:for-item可以指定数组当前元素的变量名
使用wx:for-index可以指定数组当前下标的变量名

2.将wx:for用在<block/>，以渲染一个包含多个节点的结构块

<block/>并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性
<block/>标签在wxml中可以用于组织代码结构，支持列表渲染、条件渲染等

条件渲染

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

使用wx:if、wx:elif、wx:else属性组
使用hidden（类似于vue的v-show）属性

wx:if和hidden二者的区别:

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

小程序生命周期

小程序运行机制

小程序启动可以分为两种情况，一种是冷启动，一种是热启动。

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

热启动：如果用户已经打开过小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态。

前台和后台状态 小程序启动后，界面被展示给用户，此时小程序处于前台状态

当用户关闭小程序时（点击右上角关闭按钮、按home键、锁屏），小程序并没有真正被关闭，而是进入了后台状态，当用户再次进入微信并打开小程序，小程序又会重新进入前台状态。

挂起和销毁

挂起:小程序进入[后台]状态一段时间后（5秒），微信停止小程序JS线程执行，小程序进入[挂起]状态，当开发者使用了后台播放音乐、后台地理位置等能力时，小程序可以在后台持续运行，不会进入到挂起状态。

销毁：如果用户很久没有使用小程序，或者系统资源紧张，小程序会被销毁，即完全终止运行。当小程序进入后台并被[挂起]后，如果很长时间（30分钟）都未再次进入前台，小程序会被销毁，当小程序占用系统资源过高，可能会被系统销毁或被微信客户端主动回收。

小程序更新机制

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

开发者在发布了新的小程序版本以后，微信客户端会检查本地缓存的小程序有没有新版本，并进行小程序代码包的更新。

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

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

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

在启动时异步更新的情况下，如果开发者希望立刻进行版本更新，可以使用wx.getUpdateManagerAPI进行处理。在有新版本时提示用户重启小程序更新新版本。

案例如下: app.js

// app.js
App({
  // onLaunch是小程序的钩子函数，在冷启动时执行
  // 当小程序冷启动时，会自动微信后台请求新版本的信息，如果有新版本，会立即进行下载
  onLaunch(){
    console.log("onLaunch钩子，此时进入冷启动")
    // 使用ws.getUpdateManager方法监听下载的状态
    const updateManager=wx.getUpdateManager()
    // 当下载完成新版本以后，会触发onUpdateReady回调函数
    updateManager.onUpdateReady(function(){
      // 在回调函数中给用户提示
      wx.showModal({
        title: '更新提示',
        content: '新版本已经准备好，是否重启应用？',
        success(res){
          if(res.confirm){
            // 强制当前小程序使用新版本并且会重启当前小程序
            updateManager.applyUpdate()
          }
        }
      })
    })
  }
})