PandaDoc

目录表

一、小程序

1、小程序的文件类型

微信小程序包含多种类型的文件，每种文件类型在小程序的开发和运行过程中有不同的用途和限制。以下是微信小程序的主要文件类型：

JSON 文件：
- .json 文件用于配置小程序的全局配置信息，如页面路径、窗口设置、导航栏样式等。
- app.json 是小程序的全局配置文件，每个小程序至少有一个。
- 页面配置文件（如page.json）可以单独配置某个页面的特定属性。
WXML 文件：
- .wxml 文件用于编写小程序的页面结构，类似于HTML。
- WXML 支持数据绑定、条件渲染、列表渲染等功能。
WXSS 文件：
- .wxss 文件用于编写小程序的页面样式，类似于CSS。
- WXSS 支持类似 CSS 的选择器和属性，但也有一些微信小程序特定的样式语法。
JS 文件：
- .js 文件用于编写小程序的逻辑层代码，包括页面的交互逻辑、数据处理等。
- 小程序中的 JavaScript 代码遵循 CommonJS 规范，可以使用 require() 导入模块。
WXS 文件：
- .wxs 文件是小程序的模块脚本文件，用于处理一些复杂的逻辑和计算，类似于 JavaScript。
- WXS 代码在运行时独立于页面的事件处理函数运行，可以提高性能。

小程序的文件类型和规范可以根据开发需要逐一了解和使用。不同文件类型有不同的用途和约束，开发者需要遵守微信小程序的文件命名规则和目录结构要求。

2、生命周期函数

微信小程序有一系列生命周期函数，它们用于管理小程序的生命周期事件，允许开发者在不同阶段执行特定的逻辑。以下是主要的小程序生命周期函数：

onLoad() 页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数
onReady() 页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互
onShow() 页面显示/切入前台时触发。
onHide() 页面隐藏/切入后台时触发。如 navigateTo 或底部 tab 切换到其他页面，小程序切入后台等
onUnload() 页面卸载时触发。如 redirectTo 或 navigateBack 到其他页面时

3、常用组件和api函数

以下是微信小程序中常用的5个组件和5个API函数：

常用组件：

<view> 组件：
- <view> 组件用于创建一个视图容器，可以包含其他组件和文本。
- 它类似于HTML中的 <div>，用于布局和样式控制。
<text> 组件：
- <text> 组件用于显示文本内容，支持文本样式设置。
- 可以用于显示静态文本或动态文本内容。
<button> 组件：
- <button> 组件用于创建按钮，用户可以点击来触发事件。
- 可以通过绑定事件监听器实现按钮的交互功能。
<image> 组件：
- <image> 组件用于显示图片，支持本地图片和网络图片。
- 可以用于显示头像、图标、广告等图片内容。
<input> 组件：
- <input> 组件用于创建输入框，允许用户输入文本。
- 可以通过监听输入事件来获取用户输入的内容。

常用API函数：

wx.navigateTo：
- wx.navigateTo 用于页面跳转，将页面入栈到页面栈中。
- 可以用于实现页面之间的导航。
wx.request：
- wx.request 用于发送网络请求，支持GET、POST等HTTP请求方式。
- 可以用于获取远程数据，如接口数据或JSON数据。
wx.showToast：
- wx.showToast 用于显示轻量级的提示框，如成功提示、错误提示等。
- 可以用于给用户反馈信息。
wx.getStorageSync：
- wx.getStorageSync 用于同步获取本地缓存的数据。
- 可以用于存储和读取小程序的本地数据。
wx.getLocation：
- wx.getLocation 用于获取用户的地理位置信息。
- 可以用于实现位置相关的功能，如地图、附近的店铺等。

这些组件和API函数是微信小程序开发中经常使用的一些基本元素，用于构建小程序界面和实现功能。开发者可以根据具体的需求和场景来选择合适的组件和API函数。

4、页面间传递数据的方法

使用全局变量实现数据传递

在 app.js 文件中定义全局变量 globalData，将需要存储的信息存放在里面

// app.js
App({
     // 全局变量
  globalData: {
    userInfo: null
  }
})

使用的时候，直接使用 getApp() 拿到存储的信息

传参

使用 wx.navigateTo 与 wx.redirectTo 的时候，可以将部分数据放在 url 里面，并在新页面 onLoad 的时候初始化

// Navigate
wx.navigateTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

// Redirect
wx.redirectTo({
  url: '../pageD/pageD?name=raymond&gender=male',
})

// pageB.js
...
Page({
  onLoad: function(option){
    console.log(option.name + 'is' + option.gender)
    this.setData({
      option: option
    })
  }
})

需要注意的问题：wx.navigateTo 和 wx.redirectTo 不允许跳转到 tab 所包含的页面，onLoad 只执行一次

使用本地缓存

5、优化首次加载的速度

包体积优化

分包加载（优先采用，大幅降低主包体积）。
图片优化（1.使用tinypng压缩图片素材； 2.服务器端支持，可采用webp格式）。
组件化开发（易维护）。
减少文件个数及冗余数据。

请求优化

关键数据尽早请求(onLoad()阶段请求,次要数据可以通过事件触发再请求)；整合请求数据，降低请求次数。
采用cdn缓存静态的接口数据（如判断用户登录状态，未登录则请求缓存接口数据），cdn稳定且就近访问速度快（针对加载总时长波动大）。缓存请求的接口数据。

首次渲染优化

图片懒加载（节省带宽）。
setData优化（不要一次性设置过多的数据等）。
DOM渲染优化（减少DOM节点）

6、微信小程序的登录流程

登录流程时序

An image

说明
- 调用wx.login()获取临时登录凭证code ，并通过wx.request()回传到开发者服务器。
- 开发者服务器调用微信接口，换取用户唯一标识 OpenID、用户在微信开放平台账号下的唯一标识UnionID和会话密钥session_key。
- 之后开发者服务器可以根据用户标识来生成自定义登录态，用于后续业务逻辑中前后端交互时识别用户身份。
注意事项
- 会话密钥 session_key 是对用户数据进行加密签名的密钥。
- 临时登录凭证 code 只能使用一次

7、获取用户昵称头像

该功能微信不断调整，最初是wx.getUserInfo，然后更改为getUserProfile，目前这两个都已被弃用。目前的版本不支持通过接口自动获取，需要用户自己填写！

头像选择

需要将 button 组件 open-type 的值设置为 chooseAvatar，当用户选择需要使用的头像之后，可以通过 bindchooseavatar 事件回调获取到头像信息的临时路径。

昵称填写

需要将 input 组件 type 的值设置为 nickname，当用户在此input进行输入时，键盘上方会展示微信昵称。

html

<button class="avatar-wrapper" open-type="chooseAvatar" bind:chooseavatar="onChooseAvatar">
  <image class="avatar" src="{{avatarUrl}}"></image>
</button> 
<input type="nickname" class="weui-input" placeholder="请输入昵称"/>

const defaultAvatarUrl = 'https://mmbiz.qpic.cn/...'

Page({
  data: {
    avatarUrl: defaultAvatarUrl,
  },
  onChooseAvatar(e) {
    const { avatarUrl } = e.detail 
    this.setData({
      avatarUrl,
    })
  }
})

8、实现支付功能

要在微信小程序中实现支付功能，通常需要遵循以下步骤：

申请商户号和开通支付功能： 首先，你需要拥有一个微信支付商户号，并在微信支付平台上开通支付功能。这通常需要你的企业信息和银行账户。
设置支付参数： 在小程序中，你需要配置支付参数，包括商户号、密钥、证书等信息。这些参数将用于生成支付签名和进行支付请求。
获取用户授权： 在进行支付前，你需要获取用户的授权，以便访问其支付信息。你可以使用wx.requestPayment API 来触发微信支付授权页面，用户确认后，你将获得一个支付凭证（prepay_id）。
生成支付签名： 使用获取的 prepay_id，你需要在服务器端生成支付签名。签名通常基于你的商户号、密钥以及其他必要参数。签名的生成方法通常依赖于你的后端语言和框架。
发起支付请求： 将生成的签名和其他支付参数传递给wx.requestPayment API，以触发支付。示例代码如下：

javascript

wx.requestPayment({
  timeStamp: "", // 时间戳
  nonceStr: "", // 随机字符串
  package: "", // 统一下单接口返回的 prepay_id
  signType: "MD5", // 签名算法
  paySign: "", // 签名
  success(res) {
    // 支付成功回调
  },
  fail(res) {
    // 支付失败回调
  },
});

处理支付结果： 在支付完成后，wx.requestPayment API 的回调函数将返回支付结果。你需要根据支付结果来更新用户的订单状态和提供相应的反馈。
安全性和异常处理： 确保支付过程的安全性，包括校验支付结果、防止重放攻击等。还需要处理各种异常情况，例如用户取消支付、支付超时等。
日志和记录： 记录支付交易，以便后续的支付管理和报告。

需要注意的是，支付功能牵涉到用户隐私和金钱，因此在实现支付功能时必须非常谨慎，遵循微信支付的最佳实践和安全要求。另外，建议参考微信官方文档以获取最新的支付接口和安全建议。

9、用户取消支付如何处理

当用户取消支付时，你需要在微信小程序中进行适当的处理，以提供友好的用户体验。以下是一些处理用户取消支付的方法：

提示用户取消支付： 在支付页面上，可以显示一个友好的提示，告知用户支付已取消，同时提供重新支付的选项。
监听支付回调： 使用wx.requestPayment API 时，可以监听支付回调函数，包括支付成功和支付失败。如果用户取消支付，会触发支付失败回调，你可以在这个回调中处理取消支付的情况。

javascript

wx.requestPayment({
  // ...其他支付参数
  success(res) {
    // 支付成功回调
  },
  fail(res) {
    if (res.errMsg === "requestPayment:fail cancel") {
      // 用户取消支付，处理取消支付的逻辑
    } else {
      // 其他支付失败情况，处理支付失败的逻辑
    }
  },
});

订单状态更新： 如果用户已经创建了订单或交易，但支付被取消，你应该更新订单状态以反映支付取消的情况。这可以包括将订单标记为未支付、将库存还原、取消预订等。
提供重新支付选项： 如果用户取消支付后仍然有兴趣购买商品或服务，你可以提供重新支付的选项。这可以是一个按钮或链接，允许用户再次触发支付操作。
记录取消支付： 记录支付被取消的情况，以便进行分析和监测。这有助于你了解用户取消支付的原因，并采取措施来改善用户体验。
退款政策： 如果你的业务涉及退款政策，确保用户了解如何申请退款或取消订单，并提供相应的支持。

处理用户取消支付是支付流程中的一部分，它有助于提供更好的用户体验，并确保用户在需要时可以重新支付或取消订单。不同的小程序可能有不同的业务需求，所以你可以根据实际情况进行适当的定制和处理。

10、小程序分包的使用

小程序分包加载是一种用于改善小程序性能和加载速度的技术。它允许你将小程序的一部分代码和资源打包成独立的分包，从而实现按需加载，减小小程序的初始加载时间。

以下是使用分包加载的基本步骤：

创建分包目录： 首先，在小程序的根目录下，创建一个subPackage子目录，用于存放分包的代码和资源文件。
配置分包信息： 在小程序的配置文件（app.json）中，需要添加分包的配置信息。在subPackages字段下，定义各个分包的名称、路径、以及需要分包的页面。例如：

json

{
  "subPackages": [
    {
      "root": "subPackage1",
      "pages": ["page1", "page2"]
    },
    {
      "root": "subPackage2",
      "pages": ["page3", "page4"]
    }
  ]
}

在上面的示例中，定义了两个分包，每个分包有一个根目录和包含的页面列表。

将页面移动到分包目录： 将相应的页面文件（WXML、JS、JSON、WXSS 等）和资源文件（如图片）移到各个分包的目录下。
在代码中加载分包： 在小程序的代码中，可以使用wx.loadSubPackage API 来动态加载分包。例如：

javascript

// 在需要加载分包的地方
wx.loadSubPackage({
  name: "subPackage1", // 分包的名称，即配置中定义的名称
  success(res) {
    // 分包加载成功后的回调
  },
  fail(res) {
    // 分包加载失败后的回调
  },
});

这将触发分包的加载过程，成功加载后，分包中的页面就可以在小程序中访问了。

分包预加载（可选）： 你还可以使用分包的预加载功能，以提前加载分包中的内容，而不需要在运行时再加载。预加载可以通过配置实现，以加速页面加载。

11、跳转到小程序

要从外部应用程序或短信等渠道打开微信小程序，可以使用微信提供的 URL Scheme （/skiːm/）功能。具体步骤如下：

获取 URL Scheme：通过微信的服务端接口获取打开小程序任意页面的 URL Scheme。

javascript

weixin://dl/business/?t=miniProgram&appId=小程序AppID&path=小程序页面路径

发送链接：将获取的 URL Scheme 发送到用户的短信、邮件或其他外部渠道。
用户点击：用户点击链接后，微信会自动打开并跳转到对应的小程序页面。

需要注意的是，iOS 系统支持直接识别 URL Scheme，而 Android 系统可能需要通过 H5 页面中转来实现跳转。

二、大屏相关

1、屏幕适配

数字大屏在不同屏幕上的适配，通常采用以下几种方法：

基于视口缩放的方案（缩放适配）

使用 CSS Transform: scale (/skeɪl/)进行整体缩放，根据设计稿和实际屏幕宽高比例动态缩放。

核心代码示例：

css

html, body {
    width: 100%;
    height: 100%;
    margin: 0;
    overflow: hidden;
}
#app {
    width: 1920px; /* 设计稿宽度 */
    height: 1080px; /* 设计稿高度 */
    transform: scale(calc(100vw / 1920), calc(100vh / 1080));
    transform-origin: top left;
}

基于动态 REM 的方案

动态设置 html 的 font-size，通过 REM 单位实现自适应。

核心代码示例：

javascript

const resize = () => {
    const baseWidth = 1920; // 设计稿宽度
    const scale = document.documentElement.clientWidth / baseWidth;
    document.documentElement.style.fontSize = `${scale * 100}px`;
};
window.addEventListener('resize', resize);
resize();

CSS 中用 rem 定义尺寸，随屏幕缩放。

Flex 或 Grid 布局结合百分比单位
- 使用 flex 或 grid 布局，搭配百分比宽高，实现自适应。
媒体查询
- 针对不同屏幕尺寸使用媒体查询，调整样式。
  css
```
@media (max-width: 768px) {
    /* 针对小屏幕的样式 */
}
```
封装适配工具函数
- 可结合 window.innerWidth 和 window.innerHeight，动态调整比例或布局。

方案选择：

PC 大屏：推荐使用缩放适配方案，简单有效。
多设备适配：结合 REM 和媒体查询更灵活。

目录表 ​

一、小程序 ​

1、小程序的文件类型 ​

2、生命周期函数 ​

3、常用组件和api函数 ​

4、页面间传递数据的方法 ​

5、优化首次加载的速度 ​

6、微信小程序的登录流程 ​

7、获取用户昵称头像 ​

8、实现支付功能 ​

9、用户取消支付如何处理 ​

10、小程序分包的使用 ​

11、跳转到小程序 ​

二、大屏相关 ​

1、屏幕适配 ​

目录表

一、小程序

1、小程序的文件类型

2、生命周期函数

3、常用组件和api函数

4、页面间传递数据的方法

5、优化首次加载的速度

6、微信小程序的登录流程

7、获取用户昵称头像

8、实现支付功能

9、用户取消支付如何处理

10、小程序分包的使用

11、跳转到小程序

二、大屏相关

1、屏幕适配