再学微信小程序

本文介绍: wxml.wxss.wxmlCSS.jsJavaScriptapp.jsontabBarapp.jsJavaScriptapp.wxss以上是微信小程序中常见的文件类型，每个文件都有其特定的作用和功能，通过不同类型的文件协同工作，可以构建出完整的微信小程序应用。

微信小程序开发的登录流程是怎么样的，是如何维持登录态的

微信小程序的登录流程主要涉及三个步骤：用户授权登录、获取用户凭证、维持登录态。

用户授权登录：用户打开小程序后，开发者可以通过调用 wx.login 接口获取用户的临时登录凭证 code。如果用户之前已经在小程序中登录过，这一步可以略过。
获取用户凭证：开发者拿到用户的临时登录凭证 code 后，可以使用该凭证调用微信提供的接口 wx.request 发送请求到微信服务器，通过 code 获取 session_key 和 openid。其中 session_key 是微信服务器用于标识用户会话的密钥，openid 是用户的唯一标识。
维持登录态：一般情况下，为了保持登录态，开发者需要将获取到的 session_key 和 openid 存储在服务器端。服务端可以通过 session_key 进行加密生成 access_token，并将其返回给客户端。客户端可以将 access_token 存储在本地，以便在后续请求中携带给服务器。

当用户再次使用小程序时，开发者可以通过调用 wx.checkSession 接口检查用户登录态是否过期。如果未过期，则可以使用之前保存的 session_key 和 openid 进行身份验证。如果过期，开发者需要重新执行授权登录流程。

需要注意的是，微信小程序登录态的维持并不是持久的，session_key 的有效期较短，过期后需要重新获取。在实际开发中，开发者通常会将用户的登录态与自己的业务数据关联起来，从而实现用户登录状态的持久化和相关操作的执行。

以上是微信小程序登录流程的基本介绍，具体的实现方式可能会根据开发者的需求和架构设计有所差异。

wx.checkSession是校验session_key是否失效吗？

是的，wx.checkSession 是用来校验 session_key 是否失效的接口。

在微信小程序中，用户的登录态由 session_key 来标识。session_key 的有效期比较短，通常为两个小时。为了避免在每次用户打开小程序时都需要重新登录，开发者可以使用 wx.checkSession 接口检测 session_key 是否有效。

当调用 wx.checkSession 接口时，微信客户端会发起一个检验 session_key 的请求到微信服务器。如果 session_key 仍然有效，返回成功的结果；如果 session_key 已过期，返回失败的结果。

如果校验失败，开发者需要重新执行登录流程获取新的 session_key。用户在这种情况下往往无感知，因为微信客户端会处理相关的重新登录操作。

通过使用 wx.checkSession 接口，开发者能够在不需要用户重新授权的情况下，检测并维持用户的登录态。这样可以提高用户的使用体验，减少登录的频率。

生成的access_token是否在后续请求中，校验access_token失效

在微信小程序中，通常情况下，开发者会生成一个自定义的 access_token 并将其返回给客户端。这个自定义的 access_token 并非是微信提供的，而是开发者自行生成和管理的。

校验 access_token 的失效与否是开发者自己的责任，微信小程序并没有提供特定的接口用于校验开发者生成的 access_token 的有效性。

一般来说，开发者在生成 access_token 是会设置一个过期时间，客户端会将这个 access_token 存储在本地。在每次请求需要进行身份验证的接口时，客户端会将存储的 access_token 携带到服务器，并在服务器端进行校验。

在服务器端，开发者可以根据自己的业务逻辑来校验 access_token 的有效性。这可能涉及到对 access_token 的解密以及与一些存储在服务器端的信息进行比对等操作。

当服务器端校验 access_token 失效时，可以返回相应的错误码或错误信息，让客户端处理失效的情况。客户端可以根据服务器端返回的错误信息，进行相应的处理，比如重新发起登录请求获取新的 access_token。

总之，微信小程序并没有提供直接校验开发者生成的 access_token 的接口，开发者需要自行实现 access_token 的校验逻辑和失效处理。

微信小程序框架

mpvue： mpvue是一个基于Vue.js的小程序开发框架。它允许开发者使用Vue.js的语法和特性来开发小程序，从而降低了学习成本和提高了开发效率。mpvue可以将Vue.js代码转换为小程序的代码，实现了Vue.js和小程序之间的无缝衔接。开发者可以在mpvue中使用Vue.js的生态系统，如Vuex状态管理、Vue Router路由等。
除了以上主流框架，还有一些其他的小程序开发框架和工具，如Taro、Uni-App等，它们可以支持多个小程序平台（如微信、支付宝、百度等），让开发者能够一次编写，多端运行。选择适合自己项目需求和技术背景的框架，可以帮助开发者更高效地构建小程序，并提供更好的用户体验。

1 微信小程序有几个文件

微信小程序主要包含以下几个文件：

.wxml（WeiXin Markup Language）：用于描述小程序的页面结构，类似于 HTML。在这个文件中，可以使用小程序提供的组件和自定义的组件，以及使用数据绑定和逻辑控制语句来构建页面的结构。
.wxss（WeiXin Style Sheets）：是一套样式语言，用于描述 .wxml 文件中组件的样式。类似于 CSS，可以设置元素的样式、布局、动画效果等。
.js：小程序的逻辑处理文件，包含了页面的逻辑代码。可以在这个文件中定义页面的事件处理函数、数据的处理和操作等。通过 JavaScript 的逻辑控制，可以实现小程序的交互功能。
app.json：小程序的全局配置文件，必须存在于小程序项目中。在这个文件中，可以进行页面的注册，设置小程序的窗口样式，配置底部导航栏（tabBar），以及设置网络请求等。
app.js：小程序的全局 JavaScript 文件，用于监听和处理小程序的生命周期函数、声明全局变量等。可以在这个文件中编写全局的逻辑代码。
app.wxss：小程序的全局样式文件，用于设置小程序全局的样式。可以在这个文件中定义小程序的全局样式，如页面的背景色、字体样式、导航栏样式等。

以上是微信小程序中常见的文件类型，每个文件都有其特定的作用和功能，通过不同类型的文件协同工作，可以构建出完整的微信小程序应用。

2 微信小程序怎样跟事件传值

在微信小程序中，可以通过以下方式实现事件传值：

使用 data-* 属性：给 HTML 元素添加自定义的 data-* 属性来传递需要的值。例如，可以在某个元素上添加 data-id 属性来传递对应的 ID 值。在事件处理函数中，可以通过 event.currentTarget.dataset 来获取这些属性值。
```
<view data-id="123" bindtap="handleTap">点击我</view>
```
```
Page({
  handleTap(event) {
    const id = event.currentTarget.dataset.id;
    console.log(id); // 输出：123
  }
})
```

使用自定义属性：在小程序中可以给 HTML 元素添加自定义属性，然后在事件处理函数中通过 event.currentTarget.dataset 或 event.currentTarget.id 来获取这些属性值。

<view id="my-element" data-id="123" bindtap="handleTap">点击我</view>

Page({
  handleTap(event) {
    const id = event.currentTarget.dataset.id;
    const elementId = event.currentTarget.id;
    console.log(id); // 输出：123
    console.log(elementId); // 输出：my-element
  }
})

使用 event.detail：对于一些特定的事件，例如表单的提交事件 bindsubmit，可以通过 event.detail 来获取额外的参数值。

<form bindsubmit="handleSubmit">
  <input name="username" placeholder="请输入用户名" />
  <input name="password" type="password" placeholder="请输入密码" />
  <button type="submit">提交</button>
</form>

Page({
  handleSubmit(event) {
    const { username, password } = event.detail.value;
    console.log(username, password); // 输出：输入的用户名和密码
  }
})

通过以上方法，可以在微信小程序中实现事件传值，并在事件处理函数中获取传递的值，以实现更灵活的交互和数据处理。

3 小程序的 wxss 和 css 有哪些不一样的地方？

小程序的 WXSS（WeiXin Style Sheets）和 CSS（Cascading Style Sheets）在语法和功能上有一些不同之处：

图片引入方式：在 WXSS 中，图片引入需要使用外链地址，即通过网络地址加载图片，而不能使用相对路径或本地文件路径。
```
/* WXSS */
.image {
  background-image: url("https://example.com/image.jpg");
}
```

缺少 body 元素：小程序中没有 body 元素，样式可以直接写在页面的组件选择器上。

<!-- WXML -->
<view class="container">
  <text class="text">Hello, Mini Program!</text>
</view>

/* WXSS */
.container {
  background-color: #f5f5f5;
}

.text {
  color: #333;
  font-size: 14px;
}

样式导入方式：小程序中的样式文件可以使用 @import 导入其他样式文件。
```
/* WXSS */
@import "common.wxss";

.container {
  /* styles */
}
```
不支持部分 CSS 属性和选择器：小程序的 WXSS 并不完全支持所有的 CSS 属性和选择器，例如不支持浮动（float）和定位（position）属性，也不支持伪类选择器（:hover、:before 等）和部分伪元素选择器。
```
/* WXSS */
.container {
  /* 不支持的属性 */
  /* 不支持的伪类选择器 */
}
```

需要注意的是，虽然 WXSS 和 CSS 在一些语法和功能上存在差异，但在基本的样式定义和样式属性上，它们仍然具有相似性，并可以使用类似的语法和规则进行样式的定义和控制。

4 小程序关联微信公众号如何确定用户的唯一性

在小程序中，如果要确定用户的唯一性并与微信公众号关联，可以使用以下步骤：

在小程序中调用 wx.login 方法获取用户的临时登录凭证 code。
将获取到的 code 发送到后端服务器。
后端服务器通过 code 调用微信开放平台的接口，如 https://api.weixin.qq.com/sns/jscode2session，获取用户的 openid 和 session_key。
后端服务器将 openid 返回给小程序前端，并存储在客户端。
在小程序中调用 wx.getUserInfo 方法获取用户信息，包括 encryptedData 和 iv。
将获取到的 encryptedData 和 iv 发送到后端服务器。
后端服务器使用用户的 session_key 对 encryptedData 进行解密，获取用户的 unionId。
将用户的 unionId 与用户的其他信息一起存储在后端服务器，用于唯一标识用户并与微信公众号关联。

需要注意的是，获取用户的 unionId 需要满足以下条件：

小程序需要通过微信开放平台的方式进行接入，而不是独立的小程序账号。
小程序和微信公众号需要在同一个微信开放平台账号下，且已经完成了关联。
用户在小程序和微信公众号之间需要存在关联关系，例如用户曾经在微信公众号中授权过。

通过以上步骤，可以确定用户的唯一性并与微信公众号进行关联。后续的操作中，可以根据用户的 unionId 进行个性化的业务逻辑处理。

5 微信小程序与vue区别

微信小程序和Vue在一些方面确实存在一些差异，以下是它们之间的一些区别：

生命周期：微信小程序的生命周期相对简单，包括onLoad、onShow、onReady、onHide、onUnload等几个基本生命周期函数。而Vue拥有更为丰富的生命周期钩子函数，例如created、mounted、updated、destroyed等。
数据绑定语法：微信小程序使用{{}}来进行数据绑定，而Vue使用简洁的v-bind和v-model指令来实现数据绑定。
元素显示和隐藏：在微信小程序中，可以使用wx-if和hidden来控制元素的显示和隐藏；而在Vue中，可以使用v-if和v-show来实现相同的功能。
事件处理：微信小程序中使用bindtap或catchtap来绑定事件处理函数，而Vue使用v-on或@来绑定事件处理函数。
数据双向绑定：在Vue中，可以通过使用v-model指令实现表单元素与数据的双向绑定，而微信小程序需要手动获取表单元素的值并将其赋给对应的数据变量。