Call the resources developed by Mini Program Cloud on the web page

Key point: The Mini Program cloud environment is actually the cloud environment of Tencent Cloud, and the documents and functions of Tencent Cloud can be used normally

Realized functions: build a PC management background website based on the data in the small program cloud development, and read the data collection in the small program cloud development in the PC management background website.

Example: Call the data of the applet on the web page

Complete renderings:

pre-preparation,

1. Open WeChat applet cloud development and create a data collection

2. Create a new web project and install the Web SDK in the web project https://docs.cloudbase.net/api-reference/webv3/initialization

3. Initialize the sdk in the web project and choose the login method https://docs.cloudbase.net/authentication-v2/auth/introduce

4. If you choose to log in anonymously, you need to open https://console.cloud.tencent.com/tcb/env/login here

The login method is to first click on the WeChat official account to log in, then scan the code on the authorization page

Then, if you are a mini-program administrator, you can scan the QR code and select the corresponding mini-program to enter the corresponding account

After setting it up like this, there will be a delay of a few minutes.

Install SDKs:

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

Implement the complete code:

<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>