微信小程序笔记

最新推荐文章于 2024-06-26 15:35:08 发布

riddlediary

最新推荐文章于 2024-06-26 15:35:08 发布

阅读量291

点赞数

文章标签：微信小程序

本文链接：https://blog.csdn.net/riddlediary/article/details/124167510

版权

个人学习笔记

目录
1 水平居中—使用 text-align 1
2 scroll-view 猪蹄不分瓣问题（左右滚动分不开，一起滚动） 2
3微信小程序中使用calc（）的注意事项 2
4.const {} =this.xxx 2
5 if( ! XXX){ ; } 2
6　this.data可以获取页面data对象 3
7 res.authSetting[‘scope.userInfo’] 为什么用中括号的问题 3
8 所有异步解决办法 3
9 js中this指向问题 4
10 URL中的#、？、&解释 4
11 在小程序标签中，用富文本组件 4
12 数组自动改变值问题（ 5
微信小程序：data里的数组赋值给变量，修改变量，data数组值也会改变 5
13 url 传值，只能传简单的，不能传复杂的数据，用以下方法解决 6
14 （非常重要）微信小程序页面之间正向传值和逆向传值的方法 7
15 ES6，Array.find()和findIndex()函数的用法 10
16 wx:if vs hidden 10
17 小程序的网络请求 10

1 水平居中—使用 text-align
有些场景下简单的方法就是最好的方法
div.center { text-align: center; background: hsl(0, 100%, 97%); }
div.center img { width: 33%; height: auto; }
但该方法不能让图片垂直居中：需要给 div 添加 padding 或给 div 中的元素添加 margin-top 和 margin-bottom

2 scroll-view 猪蹄不分瓣问题（左右滚动分不开，一起滚动）
// scroll-view使用最重要的就是要给父容器设置高度
// 如果不设置高度，就会出现两屏一起滚动，
// 他们其实是使用了屏幕视图的滚动条了，而不是我们定义的scroll-view组件的滚动条
3微信小程序中使用calc（）的注意事项
height: calc(100vh - 90rpx);
↑ ↑ 注意空格和calc
4.const {} =this.xxx
const {dispatch} = this.props;
这段代码你可以认为是这样: const dispatch =this.props.dispatch; 那样写是 ES6 的简写形式
5 if( ! XXX){ ; }
如果xxx为0, !xxx为真,继续执行if里的语句
(注：①js中0代表false， ②空数组[]转化为Number，得到0；空对象{}转化为Number，得到NaN)
如果xxx为非0值, !xxx为假,跳过if里的语句
6　this.data可以获取页面data对象

7 res.authSetting[‘scope.userInfo’] 为什么用中括号的问题
JavaScript中有两种方式来访问对象的属性，点操作符或者中括号操作符。
两种语法是等价的，但是中括号操作符在下面两种情况下依然有效 - 动态设置属性 - 属性名不是一个有效的变量名。

点号后加标识符（静态的）;
中括号放字符串，字符串可以是动态的，obj[‘string’+variable];
如果是静态的还是用点号方便;

8 所有异步解决办法
https://blog.csdn.net/qq_32442973/article/details/89322763?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161526869016780261987695%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=161526869016780261987695&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_alltop_click~default-1-89322763.pc_search_result_before_js&utm_term=async

9 js中this指向问题
https://blog.csdn.net/qq_33988065/article/details/68957806?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522161536401616780274132164%2522%252C%2522scm%2522%253A%252220140713.130102334…%2522%257D&request_id=161536401616780274132164&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2_allbaidu_landing_v2~default-2-68957806.pc_search_result_before_js&utm_term=js%E4%B8%AD%E7%9A%84this.
10 URL中的#、？、&解释
这里只对？进行解释，其余csdn有解释
url="/pages/goods_list/index?cid={{item2.cat_id}}
通过？问号来带参数，连接域名和参数
11 在小程序标签中，用富文本组件
rich-texr有一个nods属性，支持数组和字符串类型的数据。当nodes的值为数组时，是一组HTML节点的列表；当nodes值是字符串时，则是HTML字符串。
例：

<rich-text nodes=”

这是一个富文本节点

”

字符串

数组

Js
Page({
data:{
html:’

hellow word <p style=font-size :50px;>ho ho

’,
nods:[{
name:’div’
attrs:{
style:’line-height:60px;color:red;’
},
children:[{ type:’text’,
text:’hellow word’},
{name:’p’,
attrs: {
style=’font-size :50px;’
}
}]
}
})
12 数组自动改变值问题（当你没有给某数组改变值时，他自动改变，是用变量传值时，只引用，未传值）

微信小程序：data里的数组赋值给变量，修改变量，data数组值也会改变
比昂2020-07-14
4121浏览
4评论
data里的数组赋值给变量，修改变量，data数组值也会改变踩坑日记
问题：newArray执行了倒叙后执行正常，但是data里的array也倒叙了
data:{
array:[
{id:0},{id:1}
]
}

var newArray = this.data.array
//倒叙数组
newArray.reverse()
console.log(newArray);
console.log(this.data.array)
//执行结果
[{id:1},{id:0}]//newArray
[{id:1},{id:0}]//this.data.array

解决方案：查阅相关资料后，发现这样的赋值并不是真的赋值，而是传递的性质，所以需要将数组array转换json字符串后，才算是赋值

var newArray = JSON.parse(JSON.stringify(this.data.array));
newArray.reverse()
console.log(newArray);
console.log(this.data.array)
//执行结果
[{id:1},{id:0}]//newArray
[{id:0},{id:1}]//this.data.array

【注意】这种问题只会出现在你的数组类型是键值对的情况

13 url 传值，只能传简单的，不能传复杂的数据，用以下方法解决
准备传出数据的页面js配置如下：先对javascript对象进行stringify json字符串化，再encodeuricomponent 把字符串作为 URI 组件进行编码。

wx.navigateTo({
url: '…/…/pages/dJshi/dJshi?daplace= '+ encodeURIComponent(JSON.stringify(linshi)),
})

接受数据的页面js配置如下：
Onload中，decodeurlcomponent进行解码，parse把json字符串转成js对象，在赋值给data里边的。
let that = this
let jsonstr=decodeURIComponent(res.daplace)
that.data.linsji=JSON.parse(jsonstr)

14 （非常重要）微信小程序页面之间正向传值和逆向传值的方法
正向传值
一直接使用URL传值
wx.navigateTo({
url: /pages/contacts-edit/contacts-edit?name=zhangsan&idx=1,
})
但是如果一个对象结构比较复杂, 数据量比较大, 即使转换成JSON也有可能会被莫名其妙的截取.
所以使用URL传值的时候, 需要先编码
我是这样做的

// A页面触发事件, 跳转到B页面
_onClickCell: function (e) {
let contacts = {
name: ‘张三’,
phone: ‘13800001111’,
safePhone: ‘138****1111’,
idCard: ‘230524202113324455’,
safeIdCard: ‘230524********4455’,
typeStr: ‘成人’,
gender: ‘0’,
genderStr: ‘保密’
}
// 先对数据进行JSON
let jsonStr = JSON.stringify(contacts)
// 对数据进行URI编码, 如果不进行这一步操作, 数据有可能会被截断, 少量数据没有问题, 如果是一个大的对象, 就容易被截断获取不到完整的数据
let data = encodeURIComponent(jsonStr)

wx.navigateTo({
  url: `/pages/contacts-edit/contacts-edit?contacts=${data}&idx=${idx}`,
})

// B页面再onLoad方法中接收参数
onLoad: function (options) {
let idx = (!!options.idx) ? Number(options.idx) : -1
let contacts = {}
if (!!options.contacts) {
let jsonStr = decodeURIComponent(options.contacts)
contacts = JSON.parse(jsonStr)
}
this.setData({ contacts, idx })
},
二使用eventChannel来传递
//A页面准备跳转到B页面
_onClickCell: function (e) {
let address = {
id: 457,
name: ‘小艾-3’,
countryCode: ‘86’,
phone: ‘13892292222’,
reginoCode: ‘871’,
city: ‘市辖区’,
area: ‘海淀区’,
street: ‘东北旺路8号院中关村软件园8号楼华夏科技大厦’,
address: ‘中国北京市市辖区海淀区东北旺路8号院中关村软件园8号楼华夏科技大厦’
},

wx.navigateTo({
  url: '/pages/address-edit/address-edit',
  success: res => {
    // 这里给要打开的页面传递数据.  第一个参数:方法key, 第二个参数:需要传递的数据
    res.eventChannel.emit('setAddressEditData', address)
  }
})

}

//B页面在onLoad方法中接收参数
onLoad: function (options) {
// 接收上个页面传递来的数据
let eventChannel = this.getOpenerEventChannel()
// setAddressEditData和上个页面设置的相同即可
eventChannel.on(‘setAddressEditData’, (address) => {
this.setData({
address: address || {},
})
})
},
逆向传值
一使用全局对象, 获取全部页面来逆向传值
_onClickComplete: function () {
// 获取当前全部的页面栈
let arr = getCurrentPages()
// 获取到要逆向传值的上一个页面
let lastPage = (arr.length >= 2) ? arr[arr.length - 2] : undefined
// 判断拿到的上一个页面是不是我们要的页面
if (!!lastPage && lastPage.route == ‘pages/contacts-list/contacts-list’) {
/*
这里我们就拿到了上一个页面的页面对象, 这里其实我们就可以使用lastPage做很多事情了,
例如直接操作lastPage.data, 修改上一个页面的数据
或者调用这个页面内的方法,
我上一个页面预留了一个更新方法, 所以这里就直接用上一个页面调用数据刷新的方法, 我这里给赋值, 就可以携带数据回上一个页面了
*/
lastPage.updateContactList(this.data.contacts, this.data.idx)
// 返回上一个页面
wx.navigateBack()
}
},
二使用eventChannel来逆向传值 B->A
// B页面
_onClickComplete: function (e) {
let eventChannel = this.getOpenerEventChannel()
// updateAddressListData 这个方法需要上一个页面的支持, 上一个页面在navigateTo方法中的events数据中定义这个方法来接收数据
eventChannel.emit(‘updateAddressListData’, this.data.address, this.data.idx)
wx.navigateBack()
},

// A页面需要的支持
_onClickCell: function (e) {
wx.navigateTo({
url: ‘/pages/address-edit/address-edit’,
events: {
// 这里用来接收后面页面传递回来的数据
updateAddressListData: (address, index) => {
// 这里处理数据即可
}
}
})
}

15 ES6，Array.find()和findIndex()函数的用法
ES6为Array增加了find()，findIndex函数。
find()函数用来查找目标元素，找到就返回该元素，找不到返回undefined。
findIndex()函数也是查找目标元素，找到就返回元素的位置，找不到就返回
-1。
他们的都是一个查找回调函数。
16 wx:if vs hidden
因为 wx:if 之中的模板也可能包含数据绑定，所以当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。
同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

17 小程序的网络请求
需要留意的是url是有长度限制的，其最大长度是1024字节，同时url上的参数需要拼接到字符串里，参数的值还需要做一次urlEncode。向服务端发送的数据超过1024字节时，就要采用HTTPPOST的形式，此时传递的数据就必须要使用data参数，基于这个情况，一般建议需要传递数据时，使用data参数来传递。
我们再来单独看看POST请求的情况，并不是所有请求都是按照键值对key=value的形式传递到后台服务器，有时候需要传一些比较复杂的数据结构到后台的时候，用JSON格式会更加合适。此时我们可以在wx.request的header参数设置content-type头部为application/json，小程序发起的请求的包体内容就是data参数对应的JSON字符串

18 Wxs 学习
绑定的WXS函数必须用{{}}括起来例：bindtap=“{{wxs.tapName}}”
19 云数据库or and多个条件查询

riddlediary

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
微信小程序笔记

个人学习笔记目录1 水平居中—使用 text-align 12 scroll-view 猪蹄不分瓣问题（左右滚动分不开，一起滚动） 23微信小程序中使用calc（）的注意事项 24.const {} =this.xxx 25 if( ! XXX){ ; } 26　this.data可以获取页面data对象 37 res.authSetting[‘scope.userInfo’] 为什么用中括号的问题 38 所有异步解决办法 39 js中this指向问题 410 URL中的#、？、&
复制链接

扫一扫