小程序云开发笔记三
一、在组件中使用外部样式(组件的样式隔离)
组件的样式隔离表示默认不允许调用外部的样式。比如说全局的iconfont样式,写在组件中是无法被调用的
引用组件的wxml
第一种引用方式:
<x-search iconfont="iconfont" icon-sousuo="icon-sousuo"/>
组件js
externalClasses: [
‘iconfont’,
‘icon-sousuo’,
],
第二种引用方式:
将iconfont.css文件放到组件的目录中,然后在组件的wxss文件中引入iconfont.css文件。
@import "iconfont.wxss";
第三种方式:
组件js中新增配置
options: {
/**组件样式隔离,外影响内 */
styleIsolation: ‘apply-shared’,
multipleSlots: true,
},
styleIsolation 选项从基础库版本 2.6.5 开始支持。它支持以下取值:
isolated 表示启用样式隔离,在自定义组件内外,使用 class 指定的样式将不会相互影响(一般情况下的默认值);
apply-shared 表示页面 wxss 样式将影响到自定义组件,但自定义组件 wxss 中指定的样式不会影响页面;
shared 表示页面 wxss 样式将影响到自定义组件,自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。(这个选项在插件中不可用。)
动态变更组件内容slot插槽
如何在小程序中阻止事件冒泡
<view class="blog" bind:tap="goComment">
<view class="blog-title">
<image class="blog-portrait" src="{{blog.avatarUrl}}"></image>
<view class="blog-box">
<view class="blog-nickName">{{blog.nickName}}</view>
<view class="blog-time">{{_createTime}}</view>
</view>
</view>
<view class="blog-content">{{blog.content}}</view>
<view class="blog-img">
<block wx:for="{{blog.img}}" wx:key="index">
<image class="img" src="{{item}}" mode="aspectFill" catch:tap="onPreviewImage" data-imgsrc="{{item}}" data-imgs="{{blog.img}}"></image>
</block>
</view>
</view>
点击这个博客的时候会跳转到博客的评论中,点击博客中的图片会跳转到预览图片。如果没有阻止事件冒泡(事件向上传播,触发了子元素的事件之后会向父元素冒泡,触发父元素的事件),在点击预览图片的时候,既会预览图片,也会跳转到评论中。解决的方法就是在子元素。**bind:tap="onPreviewImage"改为catch:tap=“onPreviewImage”**来阻止事件冒泡。
显示提示信息的时候同时显示蒙版
wx.showLoading({
title: '发布中',
mask: true,
})
在子界面中调用上一个界面中的方法
const pages = getCurrentPages()
console.log(pages)
取到上一个页面
const prevPage = pages[pages.length - 2]
prevPage.onPullDownRefresh()
如何在云数据库中创建索引
打开云数据库,然后点击索引管理,添加索引,然后创建索引名称,索引的字段,升序和降序即可,创建索引之后可以增加搜索的效率,用空间来换取时间
在小程序端调用数据库和在云函数中调用数据库的方法
- 便于代码的管理,在云函数中调用小程序可以进行多次的复用而在小程序端不可以。
- 在云函数中调用是const db=cloud.database() 在小程序端调用是const db=wx.cloud.databse()
- 在云函数中调用查询数据库中的数量要比在小程序中调用获取的数量要多。
- 权限设置不同,小程序中发起的数据库请求比如只能看到自己发布的博客,不能看到别人发布的,需要在数据库设置中修改权限设置为所有用户可读。权限设置在云控制台和服务端是无效的。
云数据库1对n/多关系的三种设计方式(跟N的数量级是有关系的)
- 几个或者是十几个===》在1的一方存一个数组 比如一个博客可以关联多个图片
好处是查询的时候既可以得到1的数据,同时也可以得到多的数据。
2.几十个或者是几百的情况(比如1个产品对应多个零件)
在1的一方建立数组,存储多的一方的id,好处是多的一方更新数据的时候比较方便。
3.几千个几万个的级别
在n的一方存储1的id,比如一个博客下面有很多的评论。
数组中放入数据的操作
Array.push(),表示在当前数组之后放入数据。
Array.unshift(),表示在当前数组之前放入数据。