小程序开发

豆浆-plus

已于 2024-03-04 22:14:01 修改

阅读量587

点赞数 17

文章标签：小程序微信小程序

于 2024-03-04 22:06:13 首次发布

本文链接：https://blog.csdn.net/m0_66052129/article/details/136366072

版权

1.生命周期

小程序运行机制：

小程序启动可以分为两种情况，一种是冷启动，一种是热启动
冷启动:如果用户首次打开，或小程序销毁后被用户再次打开，此时小程序需要重新加载启动热启动:如果用户已经打开过某小程序，然后在一定时间内再次打开该小程序，此时小程序并未被销毁，只是从后台状态进入前台状态



前台和后台状态：
小程序启动后，界面被展示给用户，此时小程序处于「前台」状态。当用户「关闭」小程序时，小程序并没有真正被关闭，而是进入了「后台」状态，当用户再次进入微信并打开小程序，小程序又会重新进入「前台」状态



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



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

小程序更新机制：

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

小程序的更新机制有两种:启动时同步更新和启动时异步更新
        启动时同步更新:微信运行时，会定期检査最近使用的小程序是否有更新。如果有更新，下次小程序启动时会同步进行更新，更新到最新版本后再打开小程序。如果用户长时间未使用小程序时，会强制同步检查版本更新
        启动时异步更新:在启动前没有发现更新，小程序每次冷启动时，都会异步检査是否有更新版本。如果发现有新版本，将会异步下载新版本的代码包，将新版本的小程序在下一次冷启动进行使用，当前访问使用的依然是本地的旧版本代码，在启动时异步更新的情况下，如果开发者希望立刻进行版本更新，可以使用 wx.aetUpdateManaer API进行处理。在有新版本时提示用户重启小程序更新新版本。

生命周期：

        应用生命周期是指应用程序进程从创建到消亡的整个过程

        小程序的生命周期指的是小程序从启动到销毁的整个过程

        一个小程序完整的生命周期由 应用生命周期、页面生命周期和组件生命周期 三部分来组成

        小程序生命周期伴随着一些函数，这些函数由小程序框架本身提供，被称为生命周期函数，生命周期函数会按照顺序依次自动触发调用。帮助程序员在特定的时机执行特定的操作，辅助程序员完成一些比较复杂的逻辑

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

页面生命周期函数需要在 Page()方法进行定义

2.小程序API

小程序开发框架提供丰富的微信原生 API，可以方便的调起微信提供的能力，例如:获取用户信息、微信登录、微信支付等，小程序提供的 API几乎都挂载在 wx 对象下，例如:wx.request()、wx.setStorage()等，wx 对象实际上就是小程序的宿主环境微信所提供的全局对象

异步 AP| 支持 callback & Promise 两种调用方式:

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

3.小程序自定义组件

小程序目前已经支持组件化开发，可以将页面中的功能模块抽取成自定义组件，以便在不同的页面中重复使用;也可以将复杂的页面拆分成多个低耦合的模块，有助于代码维护。
开发中常见的组件有两种:

公共组件:将页面内的功能模块抽取成自定义组件，以便在不同的页面中重复使用
页面组件:将复杂的页面拆分成多个低耦合的模块，有助于代码维护

如果是公共组件，建议放在项目根目录的components 文件夹中

如果是页面组件，建议放在对应页面的目录下

建议:一个组件一个文件夹

开发中常见的组件主要分为公共组件和页面组件两种，因此注册组件的方式也分为两种:

全局注册:在 app.json 文件中配置 usingComponents 进行注册，注册后可以在任意页面使用
局部注册:在页面的json 文件中配置 usingComponents进行注册，注册后只能在当前页面使用

在 usingComponents 中进行组件注册时，需要提供 自定义组件的组件名和自定义组件文件路径
在将组件注册好以后，直接将自定义组件的组件名当成组件标签名使用即可

组件数据和方法需要在 组件.js 的 Component 方法中进行定义， Component 创建自定义组件

data:定义组件的内部数据
methods:在组件中事件处理程序需要写到 methods 中才可以
Properies 是指组件的对外属性，主要用来接收组件使用者传递给组件内部的数据，和 data 一同用于组件的模板渲染

在使用基础组件时，可以在组件中间写子节点，从而将子节点的内容展示到页面中，自定义组件也可以接收子节点只不过在组件模板中需要定义<slot/>节点，用于承载组件中间的子节点

自定义组件wxss 样式:

自定义组件拥有自己的 wxss 样式，组件 wxss 文件的样式，默认只对当前组件生效
编写组件样式时，需要注意以下几点:

app.wxss 或页面的 wxss 中使用了标签名(view)选择器(或一些其他特殊选择器)来直接指定样式这些选择器会影响到页面和全部组件，通常情况下这是不推荐的做法
组件和引用组件的页面不能使用 id 选择器(#a)、属性选择器([a])和标签名选择器，请改用 class 选择器
组件和引用组件的页面中使用后代选择器(.a.b)在一些极端情况下会有非预期的表现，如遇，请避免
使子元素选择器(.a>.b)只能用于 view 组件与其子节点之间，用于其他组件可能导致非预期的情况。
继承样式，如 font、color ，会从组件外继承到组件内。
除继承样式外，全局中的样式、组件所在页面的的样式对自定义组件无效(除非更改组件样式隔离选项)

自定义组件隔离:

默认情况下，自定义组件的样式只受自身 wxss 的影响，但是它支持以下取值:这时候就需要指定特殊的样式隔离选项 stylelsolation，选择

isolated:表示启用样式隔离，在自定义组件内外，使用class 指定的样式将不会相互影响(一般情况下的默认值)
apply-shared:表示页面 wxss 样式将影响到自定义组传,但自定义组件 wxss 中指定的样式不会影响页面
shared:表示页面 wxss 样式将影响到自定义组件，自定义组件Wxss中指定的样式也会影响页面和其他设置了 apply-shared或 shared 的自定义组件。

修改checkbox(复选框)样式：

        复选框组件是公共组件
  以后需要再多个页面或者需要再多个项目中进行使用，所以呢，需要先给复选框组件准备、设置一些默认样式，如果在其他页面或者其他项目中使用的时候，发现样式不符合产品需求，可以进行修改、对默认的样式进行修改

需要给复选框设置默认样式





组件使用者也能够修改默认的样式

*.scss中修改默认的样式

数据监听器：主要用于监听和响应任何属性(properties)和(data)的变化，当数据发生变化时就会触发对应回调函数，从而方便数护开发者进行业务逻辑的处理
在组件中如果需要进行数据监听需要使用 observers 字段

组件通信

组件通信-获取组件实例：
父组件可以通过 this.selectComponent方法，获取子组件实例对象，这样就可以直接访问子组件的任意数据和方法，this.selectComponent 方法在调用时需要传入一个匹配选择器 selector

组件的生命周期:指的是组件自身的一些钩子函数，这些函数在特定的时间节点时被自动触发组件的生命周期函数需要在 lifetimes 字段内进行声明

组件的生命周期函数有5个:created、attached、ready、moved、 detached

组件所在页面的生命周期：
组件还有一些特殊的生命周期，这类生命周期和组件没有很强的关联

主要用于组件内部监听父组件的展示、隐藏状态，从而便组件内部执行一些业务逻辑的处理

组件所在页面的生命周期有4个:show、hide、resizrouteDone，需要在 pageLifetimes 字段内进行声明

Component 方法用于创建自定义组件：
小程序的页面也可以视为自定义组件，因此页面也可以使用Component方法进行创建，从而实现复杂的页面逻辑开发

外部样式类:

4.npm

自定义npm:

5.Vant Weapp



        Vant Weapp 是有赞前端团队开源的小程序 U组件库，基于微信小程序的自定义组件开发，可用来快速搭建小程序项目。

去除 style:"v2"

6.分包加载

        小程序的代码通常是由许多页面、组件以及资源等组成，随着小程序功能的增加，代码量也会逐渐增加，体积过大就会导致用户打开速度变慢，影响用户的使用体验。
分包加载是一种小程序优化技术。将小程序不同功能的代码，分别打包,成不同的子包，在构建时打包,成不同的分包，用户在使用时按需进行加载，在构建小程序分包项目时，构建会输出一个或多个分包。每个使用分包小程序必定含有一个主包

主包:包含默认启动页面/TabBar 页面以及所有分包都需用到公共资源的包
分包:根据开发者的配置进行划分出来的子包

分包后加载顺序:
        在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，微信客户端会把对应分包下载下来，下载完成后再进行展示。

目前小程序分包大小有以下限制:
        1.整个小程序所有分包大小不超过 20MB
        2.单个分包/主包大小不能超过 2MB

小程序如果需要进行分包加载，需要在 app.json 中，通过 subPackages 或者 subpackages 定义分包结构
每个分包结构含三个常用字段:

root:分包的根目录，该目录下的所有文件都会被J包成一个独立的包
name:分包的别名，用于在代码中引用该分包
pages:指定当前分包中包含哪些页面
"subPackages": [
    {
      "root": "modules/goodModule",
      "name": "goodModule",
      "pages": [
        "pages/list/list",
        "pages/hua/hua"
      ]
    }
  ]

<navigator url="/modules/goodModule/pages/list/list">跳转到商品列表页面</navigator>
打包原则:

tabBar 页面必须在主包内
最外层的 pages 字段，属于主包的包含的页面
按 subpackages 配置路径进行打包，配置路径外的目录将被打包到主包中
分包之间不能相互嵌套，subpackage 的根目录不能是另外一个 subpackage 内的子目录

引用原则:

主包不可以引用分包的资源，但分包可以使用主包的公共资源
分包与分包之间资源无法相互引用，分包异步化时不受此条限制



独立分包:是指能够独立于主包和其他分包运行的包
        从独立分包中页面进入小程序时，不需要下载主包，当户进入普通分包或主包内页面时，主包才会被下载为独立分包不依赖主包就可以运行，可以很大程度上提升分包页面的启动速度

        开发者可以将功能相对独立的页面配置到独立分包中，给 subPackages 定义的分包结构添加 independent 字即可声明对应分包为独立分包。
"subPackages": [
    {
      "root": "modules/goodModule",
      "name": "goodModule",
      "pages": [
        "pages/list/list",
        "pages/hua/hua"
      ],
      "independent": true
    }
  ]
注意事项:

独立分包中不能依赖主包和其他分包中的资源
主包中的 app.wxss 对独立分包无效
App 只能在主包内定义，独立分包中不能定义 App，会造成无法预期的行为



分包预下载:

        是指访问小程序某个页面时，预先下载其他分包中的代码和资源，当用户需要访问分包中的页面时，已经预先下载的代码和资源，因此可以直接使用，从而提高用户的使用体验

小程序的分包预下载需要在 app.json 中通过 preloadRule字段设置预下载规则

preloadRule 是一个对象，对象的 key 表示访问哪个路径时进行预加载，value 是进入此页面的预下载配置，具有两个配置项:

     packages:进入页面后预下载分包的root或name,_APP_表示主包
network:在指定网络下预下载，可选值为:all网络)、wifi(仅wifi下预下载)
"preloadRule": {
    "pages/index/index":{
      "network": "all",
      "packages": ["goodModule"]   //别名
    }
  }

7.获取微信头像

当小程序需要让用户完善个人资料时，我们可以通过微言提供的头像、昵称填写能力快速完善

想使用微信提供的头像填写能力，需要两步:

将 button 组件 open-type 的值设置为 chooseAvatar
通过 bindchooseavatar 事件回调获取到头像信息的临时路径。
<view>
  <button class="btn" open-type="chooseAvatar" bindchooseavatar="chooseavatar">
    <image class="avater" src="{{ avatarUrl }}"></image>
  </button>
</view>
.btn{
  background-color: transparent;

}
.btn::after{
  border: none;
}
.avatar{
  width: 200px;
  height: 200px;
  border-radius: 50%;
}
//获取微信头像
  chooseavatar(event){
    //console.log(event)
    const { avatarUrl }=event.detail
    this.setData({
      avatarUrl
    })
  },

//目前获取的微信头像是临时路径
//临时路径是有失效时间的，在实际开发中，需要将临时路径上传到公司的服务器

8.获取微信的昵称

当小程序需要让用户完善个人资料时，我们可以通过微信提供的头像、昵称填写能力快速

想使用微信提供的昵称填写能力，需要三步:

通过 form 组件中包裹住 input 以及 form-type 为 submit 的 button 组件
需要将 input 组件 type 的值设置为 nickname，当用户输入框输入时，键盘上方会展示微信昵称
给 form 绑定 submit 事件，在事件处理函数中通过事件对象获取用户昵称
    //获取微信昵称
  onsubmit(enent){
      //console.log(enent)
      const { nickname }=enent.detail.value
      console.log(nickname)
  },