码农知识堂 - 1000bd
  •   Python
  •   PHP
  •   JS/TS
  •   JAVA
  •   C/C++
  •   C#
  •   GO
  •   Kotlin
  •   Swift
  • 小程序云开发笔记三


    小程序云开发笔记三

      • 一、在组件中使用外部样式(组件的样式隔离)
      • 动态变更组件内容slot插槽
      • 如何在小程序中阻止事件冒泡
      • 显示提示信息的时候同时显示蒙版
      • 在子界面中调用上一个界面中的方法
      • 如何在云数据库中创建索引
      • 在小程序端调用数据库和在云函数中调用数据库的方法
      • 云数据库1对n/多关系的三种设计方式(跟N的数量级是有关系的)
      • 数组中放入数据的操作

    一、在组件中使用外部样式(组件的样式隔离)

    组件的样式隔离表示默认不允许调用外部的样式。比如说全局的iconfont样式,写在组件中是无法被调用的
    引用组件的wxml
    第一种引用方式:

     <x-search iconfont="iconfont" icon-sousuo="icon-sousuo"/>
    
    • 1

    组件js
    externalClasses: [
    ‘iconfont’,
    ‘icon-sousuo’,
    ],
    第二种引用方式:
    将iconfont.css文件放到组件的目录中,然后在组件的wxss文件中引入iconfont.css文件。

     @import "iconfont.wxss"; 
    
    • 1

    第三种方式:
    组件js中新增配置
    options: {
    /**组件样式隔离,外影响内 */
    styleIsolation: ‘apply-shared’,
    multipleSlots: true,
    },

    styleIsolation 选项从基础库版本 2.6.5 开始支持。它支持以下取值:

    isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
    apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
    shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)

    动态变更组件内容slot插槽

    如何在小程序中阻止事件冒泡

    
      
        
        
          {{blog.nickName}}
          {{_createTime}}
        
      
      {{blog.content}}
      
        
          
        
      
    
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15

    在这里插入图片描述
    点击这个博客的时候会跳转到博客的评论中,点击博客中的图片会跳转到预览图片。如果没有阻止事件冒泡(事件向上传播,触发了子元素的事件之后会向父元素冒泡,触发父元素的事件),在点击预览图片的时候,既会预览图片,也会跳转到评论中。解决的方法就是在子元素。**bind:tap="onPreviewImage"改为catch:tap=“onPreviewImage”**来阻止事件冒泡。

    显示提示信息的时候同时显示蒙版

     wx.showLoading({
          title: '发布中',
          mask: true,
        })
    
    • 1
    • 2
    • 3
    • 4

    在子界面中调用上一个界面中的方法

        const pages = getCurrentPages()
         console.log(pages)
         取到上一个页面
         const prevPage = pages[pages.length - 2]
         prevPage.onPullDownRefresh()
    
    • 1
    • 2
    • 3
    • 4
    • 5

    如何在云数据库中创建索引

    打开云数据库,然后点击索引管理,添加索引,然后创建索引名称,索引的字段,升序和降序即可,创建索引之后可以增加搜索的效率,用空间来换取时间

    在小程序端调用数据库和在云函数中调用数据库的方法

    1. 便于代码的管理,在云函数中调用小程序可以进行多次的复用而在小程序端不可以。
    2. 在云函数中调用是const db=cloud.database() 在小程序端调用是const db=wx.cloud.databse()
    3. 在云函数中调用查询数据库中的数量要比在小程序中调用获取的数量要多。
    4. 权限设置不同,小程序中发起的数据库请求比如只能看到自己发布的博客,不能看到别人发布的,需要在数据库设置中修改权限设置为所有用户可读。权限设置在云控制台和服务端是无效的。

    云数据库1对n/多关系的三种设计方式(跟N的数量级是有关系的)

    1. 几个或者是十几个===》在1的一方存一个数组 比如一个博客可以关联多个图片
      好处是查询的时候既可以得到1的数据,同时也可以得到多的数据。
      在这里插入图片描述
      2.几十个或者是几百的情况(比如1个产品对应多个零件)
      在1的一方建立数组,存储多的一方的id,好处是多的一方更新数据的时候比较方便。
      在这里插入图片描述
      3.几千个几万个的级别
      在n的一方存储1的id,比如一个博客下面有很多的评论。

    数组中放入数据的操作

    Array.push(),表示在当前数组之后放入数据。
    Array.unshift(),表示在当前数组之前放入数据。

  • 相关阅读:
    nginx 发布vue项目 页面刷新出现404问题
    Linux系统编程(二)——Linux系统IO函数
    主谓一致基本语法
    区块链技术与应用 【全国职业院校技能大赛国赛题目解析】第五套智能合约安全漏洞测试
    卷起来了?2023这三个项目直接让你原地起飞!
    java计算机毕业设计计算机专业招聘网站源码+mysql数据库+系统+lw文档+部署
    基于Freetype的文字渲染流程以及缓存策略
    Ansys Zemax | 大功率激光系统的 STOP 分析1:如何使用 OpticStudio 优化光学设置
    【开发教程10】疯壳·开源蓝牙智能健康手表-OTA镜像制作及下载技术文档
    Git学习笔记10
  • 原文地址:https://blog.csdn.net/u010653050/article/details/128201611
  • 最新文章
  • 攻防演习之三天拿下官网站群
    数据安全治理学习——前期安全规划和安全管理体系建设
    企业安全 | 企业内一次钓鱼演练准备过程
    内网渗透测试 | Kerberos协议及其部分攻击手法
    0day的产生 | 不懂代码的"代码审计"
    安装scrcpy-client模块av模块异常,环境问题解决方案
    leetcode hot100【LeetCode 279. 完全平方数】java实现
    OpenWrt下安装Mosquitto
    AnatoMask论文汇总
    【AI日记】24.11.01 LangChain、openai api和github copilot
  • 热门文章
  • 十款代码表白小特效 一个比一个浪漫 赶紧收藏起来吧!!!
    奉劝各位学弟学妹们,该打造你的技术影响力了!
    五年了,我在 CSDN 的两个一百万。
    Java俄罗斯方块,老程序员花了一个周末,连接中学年代!
    面试官都震惊,你这网络基础可以啊!
    你真的会用百度吗?我不信 — 那些不为人知的搜索引擎语法
    心情不好的时候,用 Python 画棵樱花树送给自己吧
    通宵一晚做出来的一款类似CS的第一人称射击游戏Demo!原来做游戏也不是很难,连憨憨学妹都学会了!
    13 万字 C 语言从入门到精通保姆级教程2021 年版
    10行代码集2000张美女图,Python爬虫120例,再上征途
Copyright © 2022 侵权请联系2656653265@qq.com    京ICP备2022015340号-1
正则表达式工具 cron表达式工具 密码生成工具

京公网安备 11010502049817号