微信小程序基本语法

一、简单介绍

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

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

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

二、界面层的数据绑定

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

1. 简单绑定 {{ }}

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

在 .wxml 文件中
 {{ msg }} 
 

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

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

3. 列表渲染

     
     {{ item.name }} 
     {{ index }} 

• 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 中
点我 

5. 单向数据流

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

.wxml 中

 {{ msg}} 
.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. 页面间跳转(导航)

 Go to Demo 

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

 跳转过去
// .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

五、待续