文章目录
关联
我们知道了wxml是页面,json是配置,js是逻辑,wxss是样式
那么怎么关联起来呢?一般的,创建wxml会自动关联自己的wxss和json。
那么主要注意的是wxml与js的关联
一般的:js用来设置数据,wxml用来布置数据
js(常用)
app.js
App({
onLaunch: function () {
// 小程序启动之后 触发
}
})
pagexxx.js
看了pagexxx.js,感觉也是对应Java类,内容有:
- data{…}部分就是定义的初始化数据
- 各种function就是各种方法
- Java中可以直接为变量赋值,但是在这里的js中需要使用(this.data.xxx)
直接使用this.data.xxx与setData
使用this.data.xxx来进行赋值的话,一般用于页面的初始数据的初始化
使用this.setData的方式来对变量进行赋值的话,这是一个异步操作,在进行赋值后会对页面进行刷新,把修改的值显示出来。
如果使用this.data.xxx直接赋值的话,不会对页面刷新
let, var , const
这里只是先记录简单的用法:
let : 声明变量只在它所在的代码块区域,也就是花括号{}中有效
var : 声明的变量在它所在的方法中有效,别的方法中调用的话无效
const:声明常量
闭包与that,this,self
闭包:根据查询,闭包有点像Java中的匿名函数,这里指的就是函数中存在的函数
this:this在闭包中使用是无效的
that和slef:因为this在闭包中无效,所以在执行带有闭包的函数前,复制一个副本,官方使用的是that,使用self应该也是这个原理。
// 比如在执行带有闭包的函数之前,先声明一个that = this,以可以调用到this的data
AAA: function(){
var that = this;
}
// 再参考var的用法和上面that,我们就知道如果我们的AAA方法中存在闭包函数,那么我们在闭包前声明一个变量,是在闭包函数中也可以使用的
页面参数传递
进行页面跳转的时候,会在url上拼接一些字段和它的值
在目标页面的onLoad方法中的参数,options就是接收了这些传递的字段,我们可以通过options来获取传递过来的字段值
wxml调用js
一般就是调用js中的方法,官方的例子是:
wxml中:
<view id="tapTest" data-hi="WeChat" bindtap="tapName"> Click me! </view>
js中
Page({
tapName: function(event) {
console.log(event)
}
})
打印参数
{
"type":"tap",
"timeStamp":895,
"target": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"currentTarget": {
"id": "tapTest",
"dataset": {
"hi":"WeChat"
}
},
"detail": {
"x":53,
"y":14
},
"touches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}],
"changedTouches":[{
"identifier":0,
"pageX":53,
"pageY":14,
"clientX":53,
"clientY":14
}]
}
看打印的结果,记录了哪个id的控件过来的,dataSet是携带的数据,detail等是点击位置
View中,属性以data开头的有哪些,那么就会在dataSet中展示有哪些,比如例子中的data-hi,在view中有定义,在dataSet中的key就是hi。第二,声明这个key的时候,尽量小写,我包含大写的,会自动转换小写。
获取参数中的数据就要使用:e.currentTarget.dataSet.xxx