小程序开发者文档:https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html
通过 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
async和await
页面跳转
组件的生命周期,应该被定义在lifetimes中
组件的方法应该被定义在methods中
created函数中不可以调用setData
获取数据的操作应该在attached函数中进行
小程序中通过observers选项来声明数据监听器
微信提供了专属的API接口,用于网络请求: wx.request
https://blog.csdn.net/coderHing/article/details/128506378
url:必传
data:请求参数
methods:请求方式
success:成功的回调
fail:失败的回调
跳转页面并且传值
https://blog.csdn.net/cheng2guang1/article/details/128151224
edit: function (res) {
wx.navigateTo({
url: '/pages/my/my?role='+JSON.stringify(res.currentTarget.dataset.item)
})
},
—— 评论区 ——