微信小程序基本语法

一、简单介绍

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

• App 方法，用于定义 应用程序实例对象
• Page 方法，用于定义 页面对象
• getApp 方法，用来获取全局应用程序对象
• getCurrentPages 方法，用来获取当前页面的调用栈（数组，最后一个就是当前页面）
• wx 对象，用来提供核心 API 的

3. 小程序的 JS 是支持 commonJS 规范的

二、界面层的数据绑定

WXML 中的动态数据均来自对应 Page 页 .js 文件中的 data

1. 简单绑定 {{ }}

• data 是界面和逻辑之间的桥梁

在 .wxml 文件中
<text> {{ msg }} </text>
<view class="{{ viewname }}"> </view>

在 .js 文件中
Page({
  data: {
      msg:'这是一条信息',
      viewname:'item'
  }
})

2. 当语法解析误解了 true/false，可使用 {{ }}解决

  <checkbox checked = "{{ false }}"> </check>

3. 列表渲染

<view wx:for=" {{ todos }} " wx:for-item="aaa">
    <checkbox checked=" {{item.completed}} "> </checkbox>
    <text> {{ item.name }} </text>
    <text> {{ index }} </text>
</view>

• wx:for属性，属性值等于要遍历的数组。在这个标签(循环体)内部使用item代表当前遍历的元素。index 为当前遍历数据的下标
• 解决全局属性中有 item 这种关键词，使用 wx:for-item 去给当前遍历数据起别名
• 给遍历的对象定义名称：wx:for-item = "xxx"
• 给遍历的下标（索引）定义名称：wx:for-index = xxx,e.g wx:for-index = "i"

4. 界面层的事件冒泡

• 事件的基本使用 bind[xxx]、catch[xxx]
  - bind+事件名会触发冒泡
  - catch+事件名会阻止冒泡
• 界面层的事件传参
  若需要给事件处理函数指定参数，只能通过 dataset方式

.js 中
Page({
  tapHandle(e){
    // 1. e.target拿到的就是点击的元素
    // 2. dataset 指的是元素上所有以 data- 开头的属性集合
     console.log(e.target.dataset)
  }
})
.wxml 中
<button bindtap=" tapHandle " data-name = " Jack">点我 </button>

5. 单向数据流

• 逻辑(JS) ----> 界面(WXML) ：数据绑定 this.setData()
• 界面(WXML) ---> 逻辑(JS)：事件e.detail.value

.wxml 中
<input  bindinput="inputHandle"/>
<text> {{ msg}} </text>
.js中
Page({
   data: {
      msg:'initial'
    },
   inputHandle: function(e){
      this.setData({
          msg: e.detail.value
      })
    }
})

• this.setData 是用来改变data中的数据，他与直接赋值区别在于setData可以通知界面做出变化，直接赋值没办法实现这一点(直接赋值：this.data.msg = e.detail.value)

三、小程序 页面间的跳转和传值

第一种：组件方式

1. 页面间跳转(导航)

<navigator url="../demo/demo"> Go to Demo </navigator>

2. 页面间传值，接收页面传递的参数，要结合 JS 脚本

<navigator url="../demo/demo?name=Pinger> Pinger </navigator>
// .js 文件中
onLoad:function( options ){
    console.log(options)
}

总结：
1). 传递：在跳转链接上加 ?要传递的参数，类似于?username=Jack，传多个参数的话就用 &符号来连接 ?name=jack&password=1234
2). 接收：onload的第一个参数options,是一个对象，里面包含了页面传递过来的所有参数
第二种： API方式

<button primary bindtap="tapHandle"> 跳转过去</button>
// .js 文件
Page({
  tapHandle(){
     wx.navigateTo({
        url:'../demo/demo?id=123'
    })
  }
})

• wx.navigateTo
• wx.navigateBack() 默认返回到上一页
• wx.navigateBack({ delta: 2}) 指定 delta，就是返回到指定页面，当delta过大（超出历史记录），默认返回最开始的页面
• wx.redirectTo

四、小程序中发送 HTTP 请求

onLoad:function(options){
  wx.request({
      url:'https://api.douban.com/v2/movie',
      header: {
          Content-Type: 'json'
      },
      success:function(res){
          console.log(res)
      }
  })
}

• 发送异步请求不再是 web 中的 Ajax
• 没有跨域这种说法
• 请求的地址必须在管理后台添加白名单
• 域名必须备案，服务器端必须采用 HTTPS

五、待续