微信小程序开发（分包+获取用户信息+获取手机号）

目录

一、分包

1. 配置分包

2. 创建分包目录结构

3. 页面逻辑实现

4. 构建和发布

注意事项：

二、获取用户信息

1.通过API获取用户信息

三、获取手机号

---

一、分包

某些情况下，开发者需要将小程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar 页面，以及一些所有分包都需用到公共资源/JS 脚本；而分包则是根据开发者的配置进行划分。

优势

1.在小程序启动时，默认会下载主包并启动主包内页面，当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示。 2.单个分包/主包大小不能超过 2M,整个小程序所有分包大小不超过 20M,能够将工程大小扩充到20M 3.对小程序进行分包，可以优化小程序首次启动的下载时间，以及在多团队共同开发时可以更好的解耦协作。

分包： 普通分包，主包、独立分包
​
访问过程：
    1.如果第一次先进入的是主包，只加载主包；
    2.如果第一次进入的是普通分包，则先加载主包，再去加载分包
    3.独立分包不需要主包的支持，如果第一次进入的是独立分包，则不需要加载主包
    
    注意事项： 各个包页面直接，正常跳转

在微信小程序中，分包是指将小程序的部分功能或页面单独打包成一个子包，主要用于优化小程序的首次加载速度和减少主包体积。以下是一个简单的微信小程序分包的示例案例，假设我们将小程序的某些页面和资源进行分包处理。

1. 配置分包

首先，在小程序的 app.json 中配置分包信息：

{
  "pages": [
    "pages/index/index",
    "pages/details/details"
  ],
  "subpackages": [
    {
      "root": "subpackage1",
      "pages": [
        "pageA",
        "pageB"
      ]
    }
  ],
  "window": {
    "navigationBarTitleText": "分包示例"
  }
}

• "pages" 字段指定了主包的页面路径列表。
• "subpackages" 字段用于定义分包的配置信息：
  • "root" 指定分包的根目录，相对于小程序根目录。
  • "pages" 列出了分包中需要单独打包的页面路径列表。

2. 创建分包目录结构

在小程序根目录下创建分包目录 subpackage1，并在该目录下创建分包页面文件：

├── app.js
├── app.json
├── app.wxss
├── pages
│   ├── index
│   │   ├── index.js
│   │   ├── index.wxml
│   │   └── index.wxss
│   └── details
│       ├── details.js
│       ├── details.wxml
│       └── details.wxss
└── subpackage1
    ├── pageA
    │   ├── pageA.js
    │   ├── pageA.wxml
    │   └── pageA.wxss
    └── pageB
        ├── pageB.js
        ├── pageB.wxml
        └── pageB.wxss

3. 页面逻辑实现

在每个页面的 .js 文件中，处理页面的逻辑和数据加载。例如，pageA.js 可能如下所示：

Page({
  data: {
    message: 'Hello from Subpackage 1 - Page A!'
  },
  onLoad: function(options) {
    console.log('Page A loaded with options:', options);
    // 页面加载时的逻辑处理
  },
  // 其他自定义函数和事件处理函数
})

4. 构建和发布

在完成代码和目录结构后，使用微信开发者工具进行构建并发布小程序。在发布时，微信开发者工具会自动识别和打包分包配置。

注意事项：

• 分包功能主要用于优化小程序的加载速度和性能，将不同功能模块独立打包，减少首次加载的时间和主包体积。
• 每个分包目录下可以有多个页面，但是注意分包的页面总数和文件大小要控制在微信小程序的限制范围内。
• 分包的资源和页面需要通过 subpackages 配置项在 app.json 中明确列出，并在小程序发布前进行验证和测试。

通过这样的分包配置，可以有效管理小程序的复杂度，提升用户体验和性能表现。

二、获取用户信息

1.通过API获取用户信息

wxml

<view wx:if="{{ isLogin }}" class="userInfo">  
     <image style="width: 50px;height: 50px;border-radius: 50%;" src="{{ userInfo.avatarUrl }}"></image>
     <view>昵称:{{ userInfo.nickName }}</view>
</view>
<button bindtap="_getUserInfo">获取用户信息</button>

js

// 新版本获取用户信息

 _getUserInfo() {
    console.log(wx.getUserProfile);
    if (!wx.getUserProfile) {
      wx.showModal({
        title: "版本提示",
        content: "您的微信客户端版本过低，请升级你的客户端版本"
      })
      return;
    }
    // 获取用户信息
    let that = this;
    wx.getUserProfile({
      desc: '显示信息',
      success(res) {
        console.log(res)
        that.setData({
          userInfo: res.userInfo,
          isLogin:true
          // wx.setStorageSync('userInfo', res.userInfo)
        })
      }
    })
  }

三、获取手机号

(1)获取微信用户绑定的手机号，需先调用wx.login接口; (2)需要用户主动触发才能发起获取手机号接口,该功能不由 API 来调用，需用 button 组件的点击来触发 (3)目前该接口针对非个人开发者，且完成了认证的小程序开放（不包含海外主体）

使用方法：

需要将 button 组件 open-type 的值设置为 getPhoneNumber，当用户点击并同意之后，可以通过 bindgetphonenumber 事件回调获取到微信服务器返回的加密数据， 然后在第三方服务端结合 session_key 以及 app_id 进行解密获取手机号。

<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber">获取用户手机号</button>

  getPhoneNumber(e) {
    console.log(e.detail);
    let {
      encryptedData,
      iv
    } = e.detail
    wx.checkSession({
      success: (res) => {
        wx.request({
          url: 'http://localhost:3000/v1/getPhoneNumber',
          data: {
            encryptedData,
            iv,
          },
          success(res) {
            console.log('真实的手机号', res)
          }
        })
      },
      fail() {
        // console.log('失效')
        wx.login({
          timeout: 60000,
          success(result) {
            // console.log(result)
            let {
              iv,
              encryptedData
            } = e.detail;
            wx.request({
              url: 'http://localhost:3000/v1/getPhoneNumber',
              data: {
                encryptedData,
                iv,
                code: result.code
              },
              success(res) {
                console.log('真实的手机号', res)
              }
            })
          }
        })
      }
    })

  }