小程序重要点笔记

目录
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-2allfirst_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

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值