侧边栏壁纸

小程序学习笔记

2023年08月14日 724阅读 0评论 1点赞

小程序学习笔记

小程序开发者文档:https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

llapo7ky.png

修改数据

通过 this.setData({})定义新的值
通过 this.data 访问具体的值

addNum () {

  //修改 data 的数据 : setData 
  //访问 data 的数据 : this.data
  this.setData({
    'nav.num':this.data.nav.num + 1
  })
}
点击事件

监听事件 tap 需要用到 bind
bindtap
bind:tap

事件传参

通过属性绑定( data-xx ) 把需要传递的参数绑定到DOM 中
在对应的回调函数中,通过 e.target.dataset 进行访问

<!--

为事件传递参数
1.event 对像:形参
  1.1通过 e.target.dataset 访问传递参数
2.data- 属性:实参
  2.1小程序中 不能直接为回调函数方法传递参数
  2.2属性绑定的形式,把需要传递的参数绑定到当前 DOM 元素的data-xx 属性下

-->


addNumN(e){

  //拿到传递的参数
  const stop = parseInt(e.target.dataset.stop)
  this.setData({
    'nav.num':this.data.nav.num + stop
  })
}
双向数据绑定

视图发生变化时,数据也跟着发生变化,
同理,数据发生变化时,视图也跟着发生变化。

小程序中实现双向数据绑定

通过value为input视图绑定数据


商品的数量是:

<input value="{{nav.num}}" class="num-input" type="{{nav.num}}" bindinput="addNumS"/>

通过监听bindinput获取视图变化,在回调函数中修改数据

addNumS(e){

  const val = parseInt(e.detail.value)
  this.setData({
    'nav.num':val
  })
}
条件渲染

wx:if
wx:if wx:elif wx:else
当wx:if 条件满足则,进行渲染,否则不渲染
wx:if 有更高的切换消耗,适合在运行时天剑不大可能改变
hidden
当hidden条件满足则 隐藏 ,否则 不隐藏
hidden 有更高的初始渲染消耗,适合频繁切换的情景
区别:
wx:if 用来控制 组件是否会被渲染
hidden 用来控制 组件是否会被隐藏
列表渲染 wx:for
wx:for="{{ 要循环的列表 }}"
默认的当前项和下标名称:
默认的当前项为:item
默认的下标名为:index
block组件:是包裹性值的容器,不会进行渲染
wx:for 它必须要配合 wx:key进行使用,wx:key可以提高for循环的性能
对应的key值必须是一个不可重复的值
注意:使用index作为 wx:key的表达式是不需要使用{{}}

数据请求

限制:
1.只能请求 https 类型接口
2.必须把接口的域名添加到信任列表中
解决方案:
1.生产环境:配置合法域名
2.开发环境:右上角 详情 勾选 不校验合法域名

//get请求

getAdd(){
  wx.request({
    url: 'url',
    method:"GET",
    success:(res)=>{
      console.log(res);
    }
  })
}

//post请求
getAdd(){
  wx.request({
    url: 'url',
    method:"GET",
    data:{
      msg:"内容"
    },
    success:(res)=>{
      console.log(res);
    }
  })
}

异步变成promise

llapj1yh.png
llapj9m2.png
llapjdsi.png

async和await

llapjizf.png

页面跳转

llapjs3d.png
llapjvsc.png
llapjzqz.png
llapk4ye.png

组件的生命周期

组件的生命周期,应该被定义在lifetimes中
组件的方法应该被定义在methods中
created函数中不可以调用setData
获取数据的操作应该在attached函数中进行

数据监听

小程序中通过observers选项来声明数据监听器

网络请求API和封装

微信提供了专属的API接口,用于网络请求: wx.request
https://blog.csdn.net/coderHing/article/details/128506378
url:必传
data:请求参数
methods:请求方式
success:成功的回调
fail:失败的回调

llapl8uq.png

跳转页面并且传值
https://blog.csdn.net/cheng2guang1/article/details/128151224

edit: function (res) {

wx.navigateTo({
  url: '/pages/my/my?role='+JSON.stringify(res.currentTarget.dataset.item)
})

},

1

—— 评论区 ——

昵称
邮箱
网址
取消
最新评论
舔狗日记