持续创作，加速成长！这是我参与「掘金日新计划 · 10 月更文挑战」的第12天，点击查看活动详情
app .json 文件
pages : 用来记录当前小程序所有页面的路径 window: 全局定义小程序所有的背景色,文字颜色等 style : 全局定义小程序组件所使用的样式版本 sitemapLocation : 用来指明sitemap.json的位置
sitmap.json文件 微信开放小程序内搜索 当搜索的内容与相应内容匹配时就会
wxml与html的区别
#标签名称不同 html( div,span,img,a) wxml(view,text,image,navigator)
#属性节点不同
<a href="#">超链接</a>
<navigator url="/pages/home/home"></navigator>
#提供了类似于Vue中的模板语法
- 数据绑定
- 列表渲染
- 条件渲染
wxss和css的区别
#新增rpx尺寸单位
-
css中需要手动进行像素单位的换算，例rem
-
wxss在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算 #提供了全局的样式和局部样式
-
项目根目录中的app.wxss会作用于所有小程序页面
-
局部页面的.wxss样式仅对当前页面生效 #wxss仅支持部分CSS选择器
-
.class和#id
-
element
-
并集选择器，后代选择器
-
::after 和::befor等伪类选择器
事件传参
小程序比较特殊，不能在绑定事件的同时为事件处理函数传递参数
<button type="primary" bindtap="btnHandler(123)"></button> //这样写是不对的
因为小程序会把整个bindtap绑定的值当作事件名称来处理，相当于调用了btnHandler(123)的事件处理函数。 可以为组件提供data-来传值
<button type="primary" bindtap="btnHandler"data-info="{{2}}">事件传参</button>
- info会被解析为参数的名字
- 数值 2会被解析为参数的值
在事件处理函数中，通过event.target.dataset.参数名 即可获取到具体参数的值
btnHandler(e){
console.log(event.target.dataset.info)//通过打印就能打印出传递的值为2
},
bindinput 语法格式
<input bindinput="inputHandler"></input>
inputHandler(e){
console.log(e.detail.value)
},
如何实现文本框和data之间的数据互动
定义数据
page({
data:{
msg:'你好,'
}
})
inputHandler(){
this.getData({
msg:e.detail.value
})
}
<input bindinput="inputHandler" value="{{msg}}"></input>
