Experience Linux applets

The small program end

PC

Visit tldr.linux.cn/ Experience

introduce

After the IMPLEMENTATION of the UI interface is completed, the data docking related to cloud development can be started. After data docking is completed, the application foundation is laid, and the next step is to release online and add some small features.

configuration

In the relevant configuration call, you need to login Tencent cloud console, some configuration.

Use your mini program account to log in Tencent cloud and find cloud development products. Go to the production console.

Find your environment in the product console and click to go to the details page

On the Environment details page, select User Management, Login Settings, and Anonymous login

Enable anonymous login.

Cloud development of data query can only be queried after login, because the hope to provide users with a no-login solution, therefore, must open anonymous login, to ensure that data can be queried.

Because corresponding functions need to be invoked on the WEB page, you need to add the online domain name of the application to the WEB security domain name of the same page (localhost for local debugging is not required).

Add logic for anonymous login to the application

Location of this code: github.com/LCTT/tldr.l…

Because the user can open the web page can query the data, therefore, must complete the anonymous login logic in the case of the user is not feeling.

According to the pre-research on the Vue life cycle, the corresponding logic is put in the beforeCreate to ensure that after the application initialization, anonymous login can be automatically completed.

The specific implementation code is as follows

// main.js
new Vue({
  router,
  vuetify,
  render: h= > h(App),
  beforeCreate: function(){                           // Add anonymous logins
		const auth = this.$tcb.auth();        // Add anonymous logins
		auth.signInAnonymously();             // Add anonymous logins
  }                                                   // Add anonymous logins
}).$mount('#app')
Copy the code

After joining, you can use commands such as the database developed by the cloud to complete the corresponding database calls and verify whether their calls are normal.

Note here that console.log cannot be used in Vue project code by default due to the default Vue ESLint rules, You’ll need to use some command to skip the check by adding // eslint-disable-next-line to the line before you print the variable.

Call the data

Location of this code: github.com/LCTT/tldr.l…

Once the initialization is complete, the corresponding data calls need to be made. Instead of going through each one, I will choose an example to illustrate.

const db = this.$tcb.database();
const cmd = db.collection('command');
if(this.id){ // Where id is the parameter passed in for props, which is the doc ID of the command
    cmd.doc(this.id).get().then(res= > {
      this.command = res.data
    })
    }else{
    cmd.where({
      name: this.$route.params.cmd // The command can be obtained from Route, but in actual scenarios, because 'props: true' is enabled, it can also be obtained directly from props.
    }).limit(1).get().then(res= > {
      this.command = res.data[0]
    }).catch((err) = > {
      alert("Command query error, please contact us")
      // eslint-disable-next-line
      console.error(err)
    })
}
Copy the code

In this code, the first step is to extract the database from the previously mounted $TCB and build collection based on the database. The next step is to use collection to query.

Because of the different page logic involved here, an if is used to determine the data. The two methods are obtaining single data and using multiple data respectively. After the Data is obtained, the Data is updated and synchronized to Vue Data to complete the invocation of the corresponding logic.

Cloud development landing pit

Location of this code: github.com/LCTT/tldr.l…

Since users are provided with a quick query function, they are expected to be insensitive to the query at all times. However, the actual test found that if the user directly through the command line login, will cause an error. According to the information returned from the console, it is the user login status is not completed, on the data query.

By querying the documentation of cloud development, we found that the Auth object of cloud development can pass a persistence to control the persistence of identity information when logging in.

Session is used by default, so the login status of the user is lost. Setting Persistence to Local ensures that the application can transfer the user’s login status to the user’s storage after a login. This prevents the user from always experiencing request failures.

// main.js
new Vue({
  router,
  vuetify,
  render: h= > h(App),
  beforeCreate: async function(){
		const auth = this.$tcb.auth({ persistence: 'local' });
		await auth.signInAnonymously();
  }
}).$mount('#app')
Copy the code

conclusion

In the actual development, if you need to call the corresponding data through the Web SDK of cloud development, you need to first open the cloud development of anonymous login and configure the Web security domain name; There is not much difference between calling cloud development on the data call side and calling cloud development on the applet side; The problem of losing login status was solved by setting presistence.