Skip to content
capricorn416 edited this page Apr 29, 2021 · 4 revisions

app.json: 对微信小程序进行全局配置

app.js: 调用App方法(全局方法)的作用是用来创建应用程序实例对象定义应用程序的生命周期事件

app.wxss:定义全局共享样式,公用样式


[page-name].js: 页面逻辑文件,用于创建页面对象,以及处理页面生命周期控制和数据处理

[page-name].wxml: 用于定义页面中元素结构,语法遵循XML语法

[page-name].json(可选):设置当前页面工作时的window的配置,此处会覆盖app.json中的window设置,只可以设置window中设置的属性

[page-name].wxss(可选):用于定义页面样式的,语法遵循css语法,扩展了css基本用法和长度单位(rpx响应式像素)


逻辑层的javascript 1.小程序不是运行在浏览器中的,所以没有BOM和DOM对象2.小程序的JS有一些额外的成员

App方法,用于定义应用程序实例对象
Page方法,用于定义页面对象
    data为页面提供数据,是界面和逻辑之间的桥梁
getApp方法,用来获取全局应用程序对象
getCurrentPages方法:用来获取当前页面的调用栈,[0]是当前页面
wx对象,用来提供核心API

3.小程序的JS是支持CommonJS规范的(不支持exports.xxx 只支持module.exports)

界面层数据绑定1.数据在哪(当前页面对象的data属性中)2.绑定到哪里去(想绑定到哪就在那里用mustache语法{{}}输出)mustache 语法可以用在:1.类似innerHTML 2.元素的属性上 不能用在标签名和属性名上可以直接使用字面量和简单的逻辑运算符当语法解析误解了true/false,可以使用{{}}解决

列表数据渲染1.明确页面结构中的循环体2.删除多余的重复内容,只保留一个3.在剩下的这个上加上wx:for属性,属性值等于要遍历的数据源(数组)4.在这个标签(循环体)内部使用item代表当前被遍历的元素(如果全局属性中有item这种关键词,可以使用wx:for-item=“”去给当前遍历数据起名字)给被遍历到的对象定义名称 wx:for-item 给遍历的下标(索引)定义名称 wx:for-index wx:if是用来根据一个bool值决定显示或隐藏

事件处理console.dir()将一个对象以树状形式打印到控制台基本的时间使用就是通过给组件添加一个“bind+事件名”的属性,属性的值指向一个定义在当前页面对象中JS方法事件处理函数中的this指向的还是页面对象

事件冒泡catch+事件名是绑定事件且阻止冒泡

如果需要给事件处理函数指定参数只能通过dataset方式e.target拿到的就是点击的元素dataset指的是元素上所有以data-开头的属性集合

数据流this.setData是用来改变data中的数据它与直接赋值区别在于setData可以通知界面做出变化,直接赋值没有办法实现这一点

passwordChangeHandle:function(e){

this.setData({
  password:e.detail.value
})

}

inputChangeHandle:function(e){

var prop=e.target.dataset.prop
var changed={}
changed[prop]=e.detail.value
this.setData(changed)

}

条件渲染block只是控制属性(wx:)的载体,页面渲染过程中没有实际意义wx:if当条件为假的时候是不渲染的(这个标签不工作)hidden标签仍然会工作,只是不显示在界面上

Clone this wiki locally