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

1. 整个页面的样式设置？

   全局页面和单个页面设置整个页面的样式时都可以通过 page标签选择器来设置。

   page {
   	background:red;
   }
   

2. 给轮播图swiper设置圆角，使用border-radius:10rpx;不生效?

   需要再加上overflow:hidden.

   swiper {
   	 border-radius: 10rpx;
        overflow: hidden; 
   }
   

3. 可滚动区域，实现横向滚动的 css 关键点？

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

4. 可滚动区域，实现纵向滚动的 css 关键点？

   css代码关键点：给定滚动区域固定高度。

5. 页面导航跳转时传递的参数从哪里获取？

   导航跳转：<navigator url="/pages/list/list?id=123456&password=hello"> 跳转 </navigator>。
   获取参数：页面的生命周期 onLoad(options){} 的形参 options中获取到传过来的参数。

6. 有哪些数据需要从事件对象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 发送给后端换取用户的手机号。

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

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

   1. 如果是普通函数的形式，需要用到临时指针来保存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
           })
         }
       })
   }
   

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

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

8. 对于自定义组件的数据监听器 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
            })
        }
    }
})