globalData、分包、云开发(云数据库、云存储、云函数)

最新推荐文章于 2024-08-05 20:51:51 发布

m0_59023231

最新推荐文章于 2024-08-05 20:51:51 发布

阅读量704

点赞数

文章标签： javascript 前端小程序

本文链接：https://blog.youkuaiyun.com/m0_59023231/article/details/125173103

版权

本文介绍了微信小程序中如何使用globalData进行全局数据管理，包括在不同页面间共享用户信息，并展示了在登录流程中的应用。同时，详细阐述了小程序的分包策略，包括分包的配置、预下载和独立分包的使用，以优化加载速度和用户体验。此外，还提到了云开发的几个关键功能，如云数据库、云存储和云函数的使用方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.globalData

特点：globalData是小程序中一个全局的对象，在任意组件和页面中都可以调用，类似于vuex。不同的是vuex中仓库数据更新时，各个页面会同步更新，而global不会主动更新视图。globalData字段位于app.js中的APP对象中，globalData对象包含一个userInfo字段默认值为空，globalData一般与本地存储搭配使用。

1.1 引入app.js中的globalData用户信息

const app = getApp()

使用getApp引入app.js中的App对象，通过app常量来接收App对象，这样就可以使用app打点调用App对象中的数据。

1.2 读取globalData的最新数据

在douyu.js中的生命周期函数，页面显示周期函数中读取到globalData的数据。

**生命周期函数中，页面加载函数onLoad和页面显示函数onShow，第一次切换到douyu页时都会执行，等第二次再切换到douyu页面，则只执行douyu页面的页面显示函数onShow。**所以如果想douyu页面的导航栏标题换成用户名，globalData中的userInfo用户信息只能在onShow周期函数中获取。获取之前先判断用户信息是否为空，不为空则使用wx.setNavigationBarTitle方法设置导航条标题。代码如下：

 onShow: function () {
     console.log("douyushow");
    //  由于onShow函数每次(包括第一次)展示都会执行，所以可以在这里读取globalData中的最新数据
    if (app.globalData.userInfo) {
        // 设置导航条标题
        wx.setNavigationBarTitle({
          title: app.globalData.userInfo.nickName,
        })
    }
  }

1.2.1 设置导航条标题

wx.setNavigationBarTitle()函数设置导航条标题，传入的是一个对象，对象包含title字段设置导航条标题。

1.2.2 第一次点击登录按钮获取用户信息之后，不再点击按钮获取信息，直接记录用户信息

在用户页中的页面显示周期函数中，判断全局globalData中是否有用户信息，有则记录到当前页，不再调接口获取。判断的条件如下：

if(app.globalData.userInfo){
    this.setData({
        userInfo:app.globalData.userInfo
    })
}

在登录流程中，判断该页面自己定义的userInfo是否有值，有就直接return不再弹窗获取用户信息。

  login(){
//    判断userInfo是否有值，如果有值，直接登录，不再弹窗获取用户信息
    if(this.data.userInfo){
    // wx.login()
    return;
    }
  }

1.2.2.1 在登录页中，点击登录之后，把获取到的用户信息记录到globalData中

在成功登录的getUserProfile接口中成功的回调函数中的参数res1中的用户信息记录到globalData中。

       app.globalData.userInfo = res1.userInfo

1.2.2.2 自定义一个函数，用于更新并存储全局用户信息

保存到本地存储用wx.setStorage（），参数为key和data。

setUserInfo(myInfo){
      this.globalData.userInfo = myInfo
      wx.setStorage({
          key:"userInfo",
          data:myInfo
      })
  }

在登录页调用定义的set函数更新globalData

    app.setUserInfo(res1.userInfo)

1.2.2.3 更新视图和数据this.setData函数

setData函数传入的是对象，对象包含键值对，想更新谁就定义谁为键。

 onShow: function () {
    // 如果全局globalData中有用户信息，则记录到当前页，不再调接口获取
    if (app.globalData.userInfo) {
        this.setData({
            userInfo:app.globalData.userInfo
            //userInfo是在该页面中的data字段中定义的键为null，如果userInfo为空数组，则判断条件还是为true，就不会执行更新视图操作。
        })
    }
  },

注意：定义userInfo时应该定义为null，如果定义为[]空数组，则上边判断条件就不会成立。因为空数组不是null。

2.分包

某些情况下，开发者需要将叫程序划分成不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。每个使用分包小程序必定含有一个主包。所谓的主包，即放置默认启动页面/TabBar页面。

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

目前小程序分包大小有以下限制：

整个小程序所有分包大小不超过20M
单个分包/主包大小不能超过2M

对小程序进行分包，可以优化小程序首次启动的下载时间，以及再多团队共同开发时可以更好的协作。

2.1 使用分包

配置方法：

分包小程序目录结构如下：

├── app.js
├── app.json
├── app.wxss
├── packageA
│   └── pages
│       ├── cat
│       └── dog
├── packageB
│   └── pages
│       ├── apple
│       └── banana
├── pages
│   ├── index
│   └── logs
└── utils

通过在app.json subpackages字段声明项目分包结构，写成subPackages也支持。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "subPackages": [
      {
        "root": "haojing1",
        "name": "浩鲸1",
        "pages": [
            "pages/cat/cat",
            "pages/dog/dog"
        ],
        "independent": true
      },
      {
        "root": "haojing2",
        "name": "浩鲸2",
        "pages": [
            "pages/apple/apple",
            "pages/banana/banana"
        ]
      }
  ]
}

root：分包根目录
name：分包别名，分包预下载时可以使用
pages：分包页面路径，一定要写完整，官方档案是缩写
independent：是否独立分包，值为布尔类型

注意：1.包可以引用主包的资源、文件和数据，不能引用别的包的资源、文件和数据。

2.包的外边不能嵌套包

3.tabBar页面必须在主包内

2.2 分包预下载

开发者可以通过配置，在进入小程序某个页面时，由框架自动预下载可能需要的分包，提升进入后续分包页面时的启动速度，对于独立分包，也可以预下载主包。分包预下载目前只支持通过配置方式使用，暂不支持用过调用API完成。

分包预下载其实就是根据用户的行为来判断即将进入哪一个页面的几率较大，就预下载哪一个页面，当用户点击该页面时提高速度执行缓存即可。

2.2.1 使用分包预下载

预下载分包行为在进入某个页面时触发，通过在app.json 增加preloadRule配置来控制。

  "preloadRule": {
      "pages/logs/logs":{
          "packages": ["haojing1","浩鲸2"]
      }
  },

pageckages：进入页面后预下载分包的root或name，_APP _表示主包
network：在指定网络下预下载

2.3 独立分包

独立分包就是当某个人给你发一个商品连接时直接点开这个链接不用下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。独立分包不依赖主包即可运行，可以很大程度上提升分包页面的启动速度。

2.3.1 使用分包

开发者通过在app.json的subpackages字段中对应的分包配置项中定义independent字段声明对应分包为独立分包。

  "subPackages": [
      {
        "root": "haojing1",
        "name": "浩鲸1",
        "pages": [
            "pages/cat/cat",
            "pages/dog/dog"
        ],
        "independent": true
      }
 ]

3.云开发

3.1 云数据库

云开发提供了一个JSON数据库，每一张表就是一个集合。云数据库的集合权限可以设置为所有用户可读，仅创建者可读写或者仅创建者可读写，两者区别在于：用户添加数据进数据库时，会自动添加_openid字段，查询时如果权限为所有用户可读，会显示所有数据；仅创建者可读写，查询时只会显示含有_openid字段的数据。

3.1.1 连接数据库并进行查询

		// 1，获取数据库引用
        const db = wx.cloud.database()
        // 2,执行查询
        db.collection("users1").add({
            data:e.detail.value,
            success:()=>{
                wx.showToast({
                  title: '添加成功',
                  success:()=>{
                    db.collection("users1").get({
                        success:res=>{
                           console.log(res.data);
                           this.setData({
                               users:res.data
                           })
                        }
                    })
                  }
                })
            }
        })

3.2 云存储

在小程序端可以分别调用 wx.cloud.uploadFile 和 wx.cloud.downloadFile 完成上传和下载云文件操作。

文件上传代码如下：上传云文件有三个键cloudPath、filePath和成功回调函数

 wx.chooseImage({
          count: 1,
          success:res=>{
              console.log(res.tempFilePaths);
            //   调用云存储API实现文件上传
            wx.cloud.uploadFile({
                // 指定上传的云路经，在云空间中显示的图片名
                cloudPath:"浩鲸2班测试图.gif",
                filePath:res.tempFilePaths[0],
                success:res1=>{
                    wx.showToast({
                        title:"上传成功"
                    })
                    // res1.fileID 是上传的文件id，下载文件时要用
                    console.log(res1);
                }
            })
          }
        })

文件下载如下：文件下载有两个键分别是fileID和成功的回调函数

 wx.cloud.downloadFile({
            fileID:"cloud://cloud1-5g8qrosmfabd6a4e.636c-cloud1-5g8qrosmfabd6a4e-1312370407/浩鲸2班测试图.gif",
            success:res=>{
                console.log(res);
                // 把下载的文件保存到本地相册
                wx.saveImageToPhotosAlbum({
                  filePath: res.tempFilePath,
                })
            }
        })

3.3 云函数

云函数是一段运行在云端的代码，无需管理服务器，在开发工具内编写、一键上传部署即可运行后端代码。选中cloudfunctions点击右键新建Node.js云函数，需要下载node模块包。每改变云数据就必须上传部署(不上传node模块包)，也可以选择开启云函数本地调试来更新数据。

3.3.1 调用云函数

 wx.cloud.callFunction(
            {
                name:"add",
                data:{
                    x:10,
                    y:20
                },
                complete:res=>{
                    console.log(res);
                }
            }
        )