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

embedded/2024/9/25 10:40:06/
  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. 手机号快速验证和手机号实时验证:bindgetphonenumberbindgetrealtimephonenumber的事件处理函数中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})}})
    }
    
    1. 使用箭头函数--------------建议使用
    	success:(res) => {this.setData({    //此时this仍然指向onLoadcoupon_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})}}
})

http://www.ppmy.cn/embedded/41539.html

相关文章

SharePoint 使用renderListDataAsStream方法查询list超过5000时的数据

问题&#xff1a; 当SharePoint List里的数据超过5000时&#xff0c;如果使用常用的rest api去获取数据&#xff0c;例如 await this.sp.web.lists.getByTitle(Document Library).rootFolder.files.select(*, listItemAllFields).expand(listItemAllFields).filter(listItemA…

开源模型应用落地-CodeQwen模型小试-集成langchain(四)

一、前言 通过学习代码专家模型&#xff0c;开发人员可以获得高效、准确和个性化的代码支持。这不仅可以提高工作效率&#xff0c;还可以在不同的技术环境中简化软件开发工作流程。代码专家模型的引入将为开发人员带来更多的机会去关注创造性的编程任务&#xff0c;从而推动软件…

go语言中的数组和切片

Go语言中的数组和切片 数组 定义 一维数组 一维数组是具有相同数据类型的固定大小的数据序列。在Go语言中&#xff0c;一维数组的定义形式为var arrayName [size]dataType&#xff0c;其中arrayName是数组的名称&#xff0c;size是数组的大小&#xff0c;dataType是数组中元…

GateWay检查接口耗时

添加gateway依赖 <dependency><groupId>org.springframework.cloud</groupId><artifactId>spring-cloud-starter-gateway</artifactId> </dependency>创建一个LogTimeGateWayFilterFactory类&#xff0c;可以不是这个名字但是后面必须是x…

【案例】使用Vue实现拖拽课表

效果展示 效果说明 点击左侧的课程并进行拖拽&#xff0c;拖拽到要开设本课程的地方然后松手&#xff0c;即可将本节课设置为当前所拖拽的科目并且背景色为当前科目的背景色&#xff0c;当多次拖拽到同一节课的时候将会实现后者覆盖前者的效果。 效果实现代码 第一步&#x…

【SpringBoot整合系列】SpringBoot整合RabbitMQ业务应用Demo

目录 业务要求代码实现1.依赖2.配置3.配置类4.接口Controller5.业务Service5.1模拟保存商品记录5.2提交订单业务5.3用户支付业务&#xff08;模拟&#xff09;完整代码 6.消息消费者Consumer完整代码 7.其他mapper、model、工具类mapper注意&#xff1a;启动类上别忘了加Mapper…

基于yolov2深度学习网络的单人口罩佩戴检测和人脸定位算法matlab仿真

目录 1.算法运行效果图预览 2.算法运行软件版本 3.部分核心程序 4.算法理论概述 5.算法完整程序工程 1.算法运行效果图预览 2.算法运行软件版本 MATLAB2022A 3.部分核心程序 ..............................................................I0 imresize…

electron 使用两个页面(额外添加一个html文件)

需求&#xff1a;打开窗口 (加载本地的html页面) 并播放视频资源 环境 electron 28.1.3 electron-forge 7.2.0 思路&#xff1a;因为要加载新弹出一个窗口并播放资源&#xff0c;可以自己加载一个外部的页面或者加载一个本地的页面&#xff0c;使用本地的会好些。让electron-…