Llame a los recursos desarrollados por Mini Program Cloud en la página web

Punto clave: el entorno de nube del Mini Programa es en realidad el entorno de nube de Tencent Cloud, y los documentos y funciones de Tencent Cloud se pueden usar normalmente

Funciones realizadas: cree un sitio web de fondo de administración de PC basado en los datos en el desarrollo de nube de programa pequeño y lea la recopilación de datos en el desarrollo de nube de programa pequeño en el sitio web de fondo de administración de PC.

Ejemplo: llamar a los datos del applet en la página web

Representaciones completas:

preparación previa,

1. Abra el desarrollo en la nube del subprograma WeChat y cree una recopilación de datos

2. Cree un nuevo proyecto web e instale Web SDK en el proyecto web https://docs.cloudbase.net/api-reference/webv3/initialization

3. Inicialice el SDK en el proyecto web y elija el método de inicio de sesión https://docs.cloudbase.net/authentication-v2/auth/introduce

4. Si elige iniciar sesión de forma anónima, debe abrir https://console.cloud.tencent.com/tcb/env/login aquí

El método de inicio de sesión es hacer clic primero en la cuenta oficial de WeChat para iniciar sesión y luego escanear el código en la página de autorización.

Luego, si eres administrador de un miniprograma, puedes escanear el código QR y seleccionar el miniprograma correspondiente para ingresar a la cuenta correspondiente

Después de configurarlo así, habrá un retraso de unos minutos.

Instalar SDK:

#npm
npm install @cloudbase/[email protected] -S

Implementar el código completo:

<template>
  <div class="hello">

    <div class="form">
      <div class="form-group">
        <label for="exampleInputEmail1">用户名</label>
        <input type="test" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp">
        <!-- <small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small> -->
      </div>
      <div class="form-group">
        <label for="exampleInputPassword1">密码</label>
        <input type="password" class="form-control" id="exampleInputPassword1">
      </div>
      <div class="form-group form-check">
        <input type="checkbox" class="form-check-input" id="exampleCheck1">
        <label class="form-check-label" for="exampleCheck1">Check me out</label>
      </div>
      <button @click="navChatRoom" class="btn btn-primary">登录</button>
      <!-- <router-link :to="{name:'ChatRoom'}">22222</router-link> -->
    </div>
  </div>
</template>

<script>
  import cloudbase from "@cloudbase/js-sdk";
  export default {
    name: 'HelloWorld',
    data() {
      return {
        msg: ''
      }
    },
    async created() {
      const app = cloudbase.init({
        env: "cloud1-6glft3kv82decd45",
        // clientId: "wx4bb0aadc3a08b089"
        // env: "jay-7gxk4t4a1bcc29bf"
      })

      const auth = app.auth()

      async function login(){
        await auth.signInAnonymously();
        const loginScope = await auth.loginScope();
        console.log('loginScope',loginScope);
        // 如为匿名登录，则输出 true
        console.log(loginScope === 'anonymous');
      }

      await login();

      const db = app.database();
      const collection = db.collection("user");
      collection
        .limit(1)
        .get()
        .then(function (res) {
          console.log('user-data', res);
        });

      // db.collection("user")
      //   .get()
      //   .then((res) => {
      //     // res.data 包含该记录的数据
      //   });

      // 以匿名登录为例
      // await this.$cloudbase.auth({
      //   persistence: "local" //用户显式退出或更改密码之前的30天一直有效
      // });

      // this.$db.collection("user").get().then((res) => {
      //   console.log('33333', res);
      // });

      // 以匿名登录为例
      // await this.$cloudbase.auth({
      //   persistence: "local"
      // }).anonymousAuthProvider().signIn();
    },
    methods: {
      navChatRoom() {
        console.log('navChatRoom');
        this.$router.push({
          name: "ChatRoom"
        });
      }
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
  .form {
    width: 600px;
    position: relative;
    top: 300px;
    left: 50%;
    margin-left: -300px;
  }
</style>