小程序重要点笔记

目录
1 bindtap 传值问题（打印bindtap传出的值，是空） 2
2 小程序中，动态绑定太多影响性能 2
4 promise then return 返回值问题（测试代码复制用来研究） 3
5 this.setData传不过去值问题 5
6 相对路径 5
7 子组件样式隔离问题 5
8 tabBar必须有一个初始index页面，否则都不显示。 6
9 云数据库获取不到集合的问题 6
10 图片真机渲染失败问题 6
11 云数据库记录，添加、更新console.log显示成功但并未改变数据库中的数据。 7
12 在使用less时， 7
13 100%和100vh/vw的区别。 7
17 scroll-view使用flex时一定在标签里enable-flex=“true”否则无效 8
18 使用节点选择器时、要等页面加载完成再调用否则为空 8
19 setdata二级，三级局部渲染。 8
20 图片脏渲染页面抖动解决 8

1 bindtap 传值问题（打印bindtap传出的值，是空）

要为想得到的值赋值
2 小程序中，动态绑定太多影响性能
3 云数据库中 ，读取权限，非创建者不可写数据库，用云函数跳过权限。
4 promise then return 返回值问题（测试代码复制用来研究）
// pages/index8/index8.js
Page({
data: {
},
/**

• Promise .then（return）返回值的问题
  */
  onLoad: function (options) {
  let pro = new Promise((resolve, reject) => {
  setTimeout(() => {
  resolve(123456);
  }, 1000)
  });

const po = pro.then(
res=>{console.log(“po内部”,res)
return 123
}

)
const pi =po.then(res=>{console.log(“pi内部”,res)
})
console.log(pro)
console.log(‘po’,po)
console.log(“pi”,pi)
},

})

打印台输出

5 this.setData传不过去值问题

上图两个pingLun,是同一个，是page.data里的值
但后一个，提供值的，要加this.data,前面的不用加。
6 相对路径 …/ 代表本文件向上一个目录
7 子组件样式隔离问题
子组件因样式表使用了特殊选择器，造成样式表无效，用styleIsolation 可以解决，
isolated 表示启用样式隔离，在自定义组件内外，使用 class 指定的样式将不会相互影响（一般情况下的默认值）；
apply-shared 表示页面 wxss 样式将影响到自定义组件，但自定义组件 wxss 中指定的样式不会影响页面；
shared 表示页面 wxss 样式将影响到自定义组件，自定义组件 wxss 中指定的样式也会影响页面和其他设置了 apply-shared 或 shared 的自定义组件。（这个选项在插件中不可用。）
使用后两者时，请务必注意组件间样式的相互影响。
如果这个 Component 构造器用于构造页面 ，则默认值为 shared ，且还有以下几个额外的样式隔离选项可用：

page-isolated 表示在这个页面禁用 app.wxss ，同时，页面的 wxss 不会影响到其他自定义组件；
page-apply-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式不会影响到其他自定义组件，但设为 shared 的自定义组件会影响到页面；
page-shared 表示在这个页面禁用 app.wxss ，同时，页面 wxss 样式会影响到其他设为 apply-shared 或 shared 的自定义组件，也会受到设为 shared 的自定义组件的影响。
8 tabBar必须有一个初始index页面，否则都不显示。
9 hidden与wx:if
Ws:if初始渲染条件为flase时,框架什么也不做，在条件第一次为真的时候，才开始局部渲染，hidden就简单的多，组件始终会被渲染，只是简单地控制显示与隐藏。 一般地，wx: if有更高的切换消耗，而hidden有更高的初始渲染消耗。因此，在需要频繁切换的场景下，用hidden更好。如果运行时条件不太可能改变，则用if较好。
9 云数据库获取不到集合的问题
！！！所有用户可读取
10 图片真机渲染失败问题
图片名称造成的dui (1)改成dui1就可以了。
11 云数据库记录，添加、更新console.log显示成功但并未改变数据库中的数据。

只有创建者可进行对值的更改，所以必须传openid，创建记录时要创建_openid字段*
12 在使用less时，千万注意像image、view、navigator等标签千万不要加 . 点
13 100%和100vh/vw的区别。
% 是相对于父元素的大小设定的比率。
vw (viewport width) vh (viewport height) 是视窗的大小，100vw = 100%视窗宽度 100vh = 100%视窗高度，用vw，vh设定的大小只和视窗大小有关，和他们的父元素高度宽度没关系，所以用来开发多种屏幕设备的应用用这个单位还是挺合适的
14** 字体大小不仅跟font-size有关系还跟font-weight有关系
15 js 里做判断不是一定用wx:if ,用 变量？的方式也很方便
16 连续使用 setData 来改变界面的方法也可以达到动画的效果。这样可以任意地改变界面，但通常会产生较大的延迟或卡顿，甚至导致小程序僵死。此时可以通过将页面的 setData 改为 自定义组件 中的 setData 来提升性能。下面的例子是使用 setData 来实现秒表动画的示例。
17 scroll-view使用flex时一定在标签里enable-flex=“true”否则无效
18 使用节点选择器时、要等页面加载完成再调用否则为空
19 setdata二级，三级局部渲染。
例：var changeOne = “nameArray[” + 1+ “].grade”; //注意这个双引号，+ “”
this.setData({
[changeOne ]:‘大一’
})
20 图片脏渲染页面抖动解决
是widthfix导致的，删掉
方法1//未测试

方法二
在图片把宽高固定死image{height:100%;width:100%}
21 透明度设置时一定用0.来表示，否则真机不显示！！
22 hasOwnProperty只能在this.data.里的数据里用。
23 switch样式不用选择器，是特殊的
//开关checked为true时，开关的框框的样式
.wx-switch-input{
width: 86rpx!important;
height: 36rpx!important;
background: rgb(112, 174, 248)!important;
}

//开关checked为false时，开关的框框的样式
.wx-switch-input::before{
width: 84rpx!important;
height: 36rpx!important;
background: lightgray!important;
}

//白圈的样式
.wx-switch-input::after{
width: 50rpx!important;
height: 38rpx!important;
}
24 地图调整样式的方法
在对地图进行控制显示区域大小时想将地图全屏显示在手机上，使用平时的px或者直接使用百分比对于高度全屏无效，这时候可以通过vh这个单位，整个屏幕默认满屏为100vh;所以将地图的高度设置为100vh宽度设置为100%，就可以
25 父页面调用子组件的方法用 selectComponent
https://blog.csdn.net/weixin_43970743/article/details/105382576?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522163523735016780262513678%2522%252C%2522scm%2522%253A%252220140713.130102334.pc%255Fall.%2522%257D&request_id=163523735016780262513678&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allfirst_rank_ecpm_v1~rank_v31_ecpm-1-105382576.pc_search_result_hbase_insert&utm_term=%E5%B0%8F%E7%A8%8B%E5%BA%8F%E7%88%B6%E9%A1%B5%E9%9D%A2%E8%B0%83%E5%AD%90%E9%A1%B5%E9%9D%A2%E7%9A%84%E6%96%B9%E6%B3%95&spm=1018.2226.3001.4187

26 小程序style前面加： ——》 ：style