微信小程序开发 – 使用laf-client-sdk教程

1 微信小程序中使用laf-client-sdk

1.1 Javascript版本微信小程序使用laf-client-sdk

1.1.1 安装laf-client-sdk

首先在小程序项目文件夹中打开终端，执行以下命令初始化项目

npm init -y

然后在小程序项目主文件夹中执行以下命令安装laf-client-sdk

npm i laf-client-sdk

安装完成之后，在微信小程序开发工具中点击工具-构建npm，等待构建完成。

1.1.2 使用laf-client-sdk

在小程序项目的app.js中顶部增加

import { Cloud } from "laf-client-sdk";

在app.js的globalData中增加

cloud: new Cloud({
    baseUrl: "https://appid.laf.run",   // 填入自己的 appid和url
    getAccessToken: () => wx.getStorageSync('access_token'),    
    environment: "wxmp",
})

修改之后，整个app.js内容如下

// app.js
import { Cloud } from "laf-client-sdk";

App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null,
    cloud: new Cloud({
      baseUrl: "https://appid.laf.run",   // 填入自己的 appid和url
      getAccessToken: () => wx.getStorageSync('access_token'),    
      environment: "wxmp",
  })
  }
})

到这里整个laf-client-sdk就引入完成了，如果需要使用laf-client-sdk，则在需要调用sdk的页面的js文件的顶部新增以下两行

const app = getApp()
const cloud = app.globalData.cloud

然后如果想调用云函数则可以通过以下代码，在调用这段代码的方法名前加入async

const res = await cloud.invoke('test_method') // test_method为laf中云函数名
console.log(res)     // 这里的 res 是云函数中 return 的内容

比如

  async formSubmit(e) {
    console.log('form发生了submit事件，携带数据为：', e.detail.value.input)
    const res = await cloud.invoke('get_resource_download_url',{'id':e.detail.value.input})
    console.log(res)     // 这里的 res 是云函数中 return 的内容
  },

1.2 Typescript版本微信小程序引入laf-client-sdk

1.2.1 安装laf-client-sdk

首先在小程序项目文件夹中打开终端，执行以下命令初始化项目

npm init -y

然后在小程序项目主文件夹中执行以下命令安装laf-client-sdk

npm i laf-client-sdk

然后修改小程序项目主文件夹下的project.config.json文件，在setting下新增

"packNpmManually": true,
"packNpmRelationList": [
  {
    "packageJsonPath": "./package.json",
    "miniprogramNpmDistDir": "miniprogram/"
  }
]

修改完成之后，在微信小程序开发工具中点击工具-构建npm，等待构建完成。

1.2.2 使用laf-client-sdk

在小程序项目的app.ts中顶部增加

import { Cloud, EnvironmentType } from "laf-client-sdk";
import { IAppOption } from "../typings";

在app.js的globalData中增加

cloud: new Cloud({
    baseUrl: "https://appid.laf.run",   // 填入自己的 appid和url
    getAccessToken: () => wx.getStorageSync('access_token'),    
    environment: "wxmp",
})

在typings/index.d.ts中的globalData中新增

cloud?: Cloud

到这里整个laf-client-sdk就引入完成了，如果需要使用laf-client-sdk，则在需要调用sdk的页面的js文件的顶部新增以下两行

const app = getApp<IAppOption>()
const cloud = app.globalData.cloud

然后如果想调用云函数则可以通过以下代码，在调用这段代码的方法名前加入async

const res = await cloud.invoke('test_method') // test_method为laf中云函数名
console.log(res)     // 这里的 res 是云函数中 return 的内容

参考

• https://doc.laf.run/guide/client-sdk/#%E5%BE%AE%E4%BF%A1%E5%B0%8F%E7%A8%8B%E5%BA%8F%E4%B8%AD%E4%BD%BF%E7%94%A8
• https://forum.laf.run/d/387