微信小程序开发之JS

关联

我们知道了wxml是页面，json是配置，js是逻辑，wxss是样式

那么怎么关联起来呢？一般的，创建wxml会自动关联自己的wxss和json。

那么主要注意的是wxml与js的关联

一般的：js用来设置数据，wxml用来布置数据

js（常用）

app.js

参考

App({
  onLaunch: function () {
    // 小程序启动之后 触发
  }
})

pagexxx.js

参考

看了pagexxx.js，感觉也是对应Java类，内容有：

1. data{…}部分就是定义的初始化数据
2. 各种function就是各种方法
3. Java中可以直接为变量赋值，但是在这里的js中需要使用（this.data.xxx）

直接使用this.data.xxx与setData

使用this.data.xxx来进行赋值的话，一般用于页面的初始数据的初始化

使用this.setData的方式来对变量进行赋值的话，这是一个异步操作，在进行赋值后会对页面进行刷新，把修改的值显示出来。

如果使用this.data.xxx直接赋值的话，不会对页面刷新

let, var , const

参考
参考2

这里只是先记录简单的用法：
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