js页面初始化方法只调用一次_跟我学 “Linux” 小程序 Web 版开发(三):云开发相关数据调用
介绍
在完成了界面的实现后,接下来可以开始进行和云开发相关的数据对接。完成数据对接后,应用基础就打好了,接下来的就是发布上线以及一些小的功能的加入。
配置
在进行相关的配置调用的时候,你需要先登录腾讯云控制台,进行一些配置。使用你的小程序账号登录腾讯云,并在其中找到“云开发”产品。进入到“产品控制台”。
在“产品控制台”中找到你的环境,点击进入“详情页”:
在环境“详情页面”选择“用户管理”->“登录设置”->“匿名登录”:
启用匿名登录。
云开发的数据查询目前必须登录后才可以查询,因为希望给用户提供的是免登录的解决方案,因此,必须开通匿名登录,确保可以进行数据查询。
由于需要在网页中调用相应的函数,因此,也需要在同一个页面的 WEB 安全域名中添加应用的上线域名(本地调试用的 localhost 无需添加)。
为应用程序添加匿名登录的逻辑
此部分代码位置:https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js
由于希望用户可以打开网页就可以查询数据,因此,必须在用户无感的情况下,完成匿名登录逻辑。
根据对 Vue 生命周期的预研,将相应的逻辑放在了 beforeCreate
中,确保在应用初始化完成后,就可以自动完成匿名登录。
具体实现代码如下:
// main.js
new Vue({router,vuetify,render: h => h(App),beforeCreate: function(){ // 新增匿名登陆逻辑const auth = this.$tcb.auth(); // 新增匿名登陆逻辑auth.signInAnonymously(); // 新增匿名登陆逻辑} // 新增匿名登陆逻辑
}).$mount('#app')
加入完成后,你可以使用云开发的数据库等命令,来完成相应的数据库调用,验证自己的调用是否正常。
在这里需要注意,由于 Vue 默认的 ESLint 规则限制,默认是无法在 Vue 项目代码中使用
console.log
的,你需要使用一些命令来跳过相应的检查 只需要在你需要打印变量的前一行加入// eslint-disable-next-line
就可以避免对应的检查了。
调用数据
此部分代码位置:https://github.com/LCTT/tldr.linux.cn/blob/master/src/views/Result.vue
完成初始化后,就需要完成相应的数据调用,这里不再针对每一个进行讲解,选择一个例子来说明。
const db = this.$tcb.database();
const cmd = db.collection('command');
if(this.id){ // 这里的 id 是 props 传入的参数,为命令对应的 doc idcmd.doc(this.id).get().then(res => {this.command = res.data})}else{cmd.where({name: this.$route.params.cmd // 命令可以从 Route 中获取,但实际场景下,因为开启了 `props: true`,也可以直接从 props 中获取。}).limit(1).get().then(res => {this.command = res.data[0]}).catch((err) => {alert("命令查询出错,请联系我们")// eslint-disable-next-lineconsole.error(err)})
}
在这段代码中,首先是前期挂载的 $tcb
中抽取 database()
对象,并基于 database()
对象构建 collection()
对象。 然后就是使用 collection()
对象进行查询。
由于这里涉及到不同的页面逻辑,使用了一个 if 来判断数据。上下两种分别是获取单个数据和使用多个数据的方法。获取到数据以后,将数据更新,同步到 Vue 的 Data 中,完成相应的逻辑的调用。
云开发登录的坑
此部分代码位置:https://github.com/LCTT/tldr.linux.cn/blob/master/src/main.js
由于为用户提供的是快速查询功能,因此希望用户无论何时都是无感进行查询的。但实际测试的时候,发现用户如果直接通过命令行登录的时候,会导致报错。根据控制台返回的信息来看,是用户登录状态尚未完成,就进行了数据查询。
通过查询云开发的文档,发现云开发的 auth
对象在登录的时候,可以传入一个 persistence
参数来控制身份信息的持久化。
由于默认使用的是会话 ,所以导致用户的登录态丢失。为了确保应用的状态正常进行,将 persistence
设置为 local
,确保应用在一次登录后可以将用户登录状态下放到用户的存储 中,这样可以避免用户总是会遭遇请求失败的问题。
// 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')
总结
在实际开发中,如果你需要通过云开发的 Web SDK 调用相应的数据,则需要先行开启云开发的匿名登录并配置 Web 安全域名;在数据调用的部分和在小程序端调用云开发没有太大的区别;并通过设置 presistence
设置搞定了登录状态丢失的问题。
js页面初始化方法只调用一次_跟我学 “Linux” 小程序 Web 版开发(三):云开发相关数据调用相关推荐
- uview 瀑布流_最简单的微信小程序瀑布流布局方法
最近写一个小程序的瀑布流布局,发现网上别人写的都是css加js的方法,页面分两列,加载数据通过JS分别载入到两列中.比较复杂,研究了一下,弄了一个比较简单的方法,分享给大家. 效果如下图: 小程序瀑布 ...
- 微信小程序接入微信支付(二):后台调用统一下单接口
微信统一支付官方文档:https://pay.weixin.qq.com/wiki/doc/api/wxa/wxa_api.php?chapter=9_1 因该接口需要商户系统中自己的订单编号,笔者先 ...
- 微信小程序 - 在自定义组件中请求后端 API 数据接口(引入该组件的页面触发)组件在哪个生命周期钩子函数中请求接口数据呢?
前言 我开发了一个 A 页面,然后在 A 页面引入了一个组件 B ,我想在 B 组件中加载进来的时候执行一个后端请求,获取数据进行 B 组件渲染. 今天遇到这么一个问题,我写好的小程序 组件(comp ...
- 微信小程序 授权地理位置被拒绝后 wx.getLocation接口调用失败问题
最近在开发小程序,需要用到位置信息. 但总有那么一小部分人会点击拒接授权,然后小程序就用不了了.因为是根据所在的城市信息来加载数据,所以就需要引导用户自己打开地理位置授权.像下图 废话不多说直接上代码 ...
- 微信小程序(微信应用号)开发ide安装解决方法
微信小程序(微信应用号)开发ide安装解决方法 参考文章: (1)微信小程序(微信应用号)开发ide安装解决方法 (2)https://www.cnblogs.com/muyixiaoguang/p/ ...
- 微信小程序体验版无法调用API接口,显示空白
微信小程序体验版无法调用接口 解决方案: 当扫码之后,前往体验版,右上角三个点,点击一,然后划到最后,点击开发调试,打开调试,完美解决.
- 只调用一次_邹军:数控宏程序编程入门之程序的调用,老师傅用了都说好
数控程序的调用常用M98,G65等方式调用子程序. 一, 使用M98调用子程序 比如下面两个程序例子: 两程序保存在机床中,其中O0001为主程序,O0002为子程序. 程序运行顺序是: 运行O000 ...
- 高拍仪 js调用demo_颜值高、性能好的小程序组件库,带给你不一样的视觉体验...
介绍 ColorUI是一个高饱和度色彩,注重视觉效果的小程序组件库,可以在国内比较火的uniapp或者原生小程序中进行开发.文章中将进行各组件的截图预览,一定不会让你失望的! PS:想直接查看组件效果 ...
- 上传声音 微信小程序_图文详解微信小程序中调用录音功能和音频播放的方法...
老规矩,先几张图. 1.为了进来看得清楚.刚开始没有加载音频列表.代码往前挪一挪即可. 2.按住 录音按钮的时候会出现麦克风.中间的麦克风是个帧动画. 其实就是用js控制图片显示隐藏.没啥好说的.这里 ...
最新文章
- OpenCV中CvArr* 的含义~
- 【LeetCode】-- 260. Single Number III
- 腾讯创始人马化腾:14年经验得失总结
- c#自定义Json类
- jvm classLoader 过程
- [选拔赛1]花园(矩阵快速幂),JM的月亮神树(最短路),保护出题人(斜率优化)
- 机械学哪种计算机语言,对于机器学习,到底该选择哪种编程语言?
- android中屏保功能项目,【Android】一段时间不操作弹出【屏保】效果
- 7.23 ToolTip 实现全介绍
- 机房重构——UML图最终版本
- 物联网python教程慕课_Web应用开发 19物联网,中国大学MOOC(慕课)答案公众号搜题...
- 东南计算机研究生英语免修条件,2017级硕士研究生英语免修总名单
- printf输出格式总结
- tipask 3.5 出错get_class() expects parameter 1 to be object 解决方案及说明
- Python工具库安装
- 关于在u-boot中使用usb进行通信(三)
- 带你由浅入深探索webpack4(二)
- VMware虚拟机下安装Ubuntu系统并配置远程桌面连接
- 明厨亮灶/雪亮工程/平安城市/智慧工地等项目进行监控视频汇聚的方案介绍
- [管理故事]:路遥知马力,日久见人心。
热门文章
- django异常日志_django 捕获异常和日志系统过程详解
- mysql-8.0.16-winx64.zip安装教程
- 例子---随机数/不重复的随机数
- idea中Tomcat启动乱码问题
- bigint最大有多少位_《追光吧哥哥》21位艺人靠实力成团?不见得,节目赛制本不公平...
- python3.7.3配置环境变量_配置环境变量切换到python3.7
- 每天一个小异常——ssh整合空指针异常
- centos安装python_python3.10 如何下载安装?
- dategridview设置下拉框默认值_smtp服务器怎么设置
- Windows 7+Ubuntu 16.04 双系统安装