微信小程序使用过程注意事项

Yjing景

于 2024-05-14 21:50:57 发布

阅读量844

点赞数 13

分类专栏：微信开发者工具文章标签：微信小程序

本文链接：https://blog.csdn.net/weixin_45871977/article/details/138618851

版权

微信开发者工具专栏收录该内容

2 篇文章 0 订阅

订阅专栏

整个页面的样式设置？

全局页面和单个页面设置整个页面的样式时都可以通过 page标签选择器来设置。
```
page {
	background:red;
}
```
给轮播图swiper设置圆角，使用border-radius:10rpx;不生效?

需要再加上overflow:hidden.
```
swiper {
	 border-radius: 10rpx;
     overflow: hidden; 
}
```
可滚动区域，实现横向滚动的 css 关键点？

css 代码的关键点：
1. 将 view 设置为行内块样式：display:inline-block;
2. 设置滚动区域的内容在一行显示，不换行：white-space:nowrap;
可滚动区域，实现纵向滚动的 css 关键点？

css代码关键点：给定滚动区域固定高度。
页面导航跳转时传递的参数从哪里获取？

导航跳转：<navigator url="/pages/list/list?id=123456&password=hello"> 跳转 </navigator>。
获取参数：页面的生命周期 onLoad(options){} 的形参 options中获取到传过来的参数。
有哪些数据需要从事件对象e中获取到？

事件处理函数的形参事件对象 e
1. input获取表单的值： e.detail.value.
2. 使用 data-* 属性方式将数据传递给事件处理函数，接收：e.currentTarget.dataset.数据和e.target.dataset.数据
e.currentTarget是指事件绑定者，e.target是指事件触发者，根据想要获取谁的数据来决定使用哪个。
3. 使用 mark:自定义属性方式将数据传递给事件处理函数，接收：e.mark.数据.
mark 会包含从触发事件的节点到根节点上所有的 mark: 属性值 (事件委托的)。
4. 使用this.triggerEvent 子-》父传值时父组件接收数据从事件处理函数中的 e.detail.
5. 获取微信头像的临时路径，bindchooseavatar 的事件处理函数中，e.detail.avatarUrl。
6. 获取微信用户昵称，表单 form 的 bindsubmit 事件处理函数
中，e.detail.value.
7. 手机号快速验证和手机号实时验证：bindgetphonenumber和bindgetrealtimephonenumber的事件处理函数中e.detail.code拿到动态令牌，可以使用 code 发送给后端换取用户的手机号。

使用 wx.request 发送请求的回调函数中，如果需要对数据使用this.setData进行更新，

参考内容：微信小程序报错：TypeError: Cannot read property ‘setData‘ of undefined 及两种解决方法

如果是普通函数的形式，需要用到临时指针来保存this指针：

onLoad: function (options) {
    let that = this  //保存临时指针
    wx.request({
      url: 'url',
      method: 'POST',
      header: { 'Content-Type': 'application/x-www-form-urlencoded' },
      data: { },
      success(res) {
        that.setData({    //使用临时指针
          coupon_length:res.data.data.length
        })
      }
    })
}

使用箭头函数--------------建议使用

	success:(res) => {
    this.setData({    //此时this仍然指向onLoad
      coupon_length:res.data.data.length
    })
  }

对于自定义组件的数据监听器 observes ，在使用时如果想使用 this.setData()，不能使用箭头函数，要使用普通函数，否则 this 会指向undefined.

Component({
    data: {
        num: 1,
        count: 0
    },
    observers: {
        // num:(newNum)=>{
        //     console.log(this,1212) // undefined，这里要改为普通函数
        //     this.setData({
        //         count:newNum
        //     })
        // }
        num: function (newNum) {
            console.log(this, 1212)
            this.setData({
                count: newNum
            })
        }
    },
    methods: {
        upd() {
            console.log(this)
            this.setData({
                num: this.data.num + 1
            })
        }
    }
})