在上一章 微信小程序开发入门实战 （二）小程序代码构成与基础知识
中，我们大概了解了一下小程序代码构成与基础知识，下面我们对比vue和小程序的异同。虽然小程序和vue二者在底层核心和使用方式上差异很大，但是他们仍然有很多共同点。本篇文章旨在通过对比vue和小程序，实现快速切换开发。如果你没有vue的基础，那么你不需要看这篇，你可能需要的是：小程序基本文档。如果你小程序基本语法都不清楚或是需要详细的了解一下，可能需要：小程序开发指南

WXML 与 template

WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。

WXML 文件后缀名是 .wxml ，打开 pages/wxml/index.wxml 文件，有过 HTML 的开发经验的读者应该会很熟悉这种代码的书写方式，简单的 WXML语句在语法上同 HTML 非常相似。

pages/wxml/index.wxml

不带有任何逻辑功能的 WXML 基本语法如下：

 ...标签名>

vue功能与之对应的是，中的内容。Vue.js 使用了基于 HTML 的模板语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。如下：

 
{{ foo }}
 
 Change it

数据绑定

vue使用的是模板语法：

Message: {{ msg }}

{{ number + 1 }}
{{ ok  'YES' : 'NO' }}
{{ message.split('').reverse().join('') }}



 ... 

WX小程序使用的是:

 {{ message }} 

 

 

Page({
  data: {
    message: 'Hello MINA!',
    id: 0,
    condition: true
  }
})

数据修改

vue的数据修改如下：

data() {
  return {
    message: '这是一个消息'
  }
}
// 数据修改
tShopfas.message = '这是一个消息...'

WX小程序的数据修改如下：

WX小程序的数据修改数据使用的是方法：Page.prototype.setData(Object data, Function callback)，此方法是异步的。

Page.prototype.setData(Object data, Function callback)

{{ msg }}
点击我

Page({
  data: {
    msg: '这是一个消息...',
  },
  clickMe: function() {
    tShopfas.setData({ msg: "Hello World" }, function() {
      // 修改完后回调函数
    })
  }
})

条件渲染

vue使用的是:

 A


 B


 C


 Not A/B/C

WX小程序使用的是:

 WEBVIEW 
 APP 
 MINA 

列表渲染

vue使用的是:

 

 {{ index }} - {{ item.message }}
 

WX小程序使用的是:

 {{idx}}: {{itemName.message}}

注意：wx:key 的值以两种形式提供
1.字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2.保留关键字 *tShopfas 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字。

计算属性和侦听器

vue中通过 computed 和 watch 来实现计算属性和侦听器：

computed: {
  now: function () {
    return Date.now()
  }
}

watch: {
  firstName: function (val) {
    tShopfas.fullName = val + ' ' + tShopfas.lastName
  },
  lastName: function (val) {
    tShopfas.fullName = tShopfas.firstName + ' ' + val
  }
}

在WX小程序中，则是通过 component 中的 observers 来实现的：

Component({
  attached: function() {
    tShopfas.setData({
      numberA: 1,
      numberB: 2,
    })
  },
  observers: {
    'numberA, numberB': function(numberA, numberB) {
      // 在 numberA 或者 numberB 被设置时，执行这个函数
      tShopfas.setData({
        sum: numberA + numberB
      })
    }
  }
})

特别地，仅使用通配符 ** 可以监听全部 setData 。

Component({
  observers: {
    '**': function() {
      // 每次 setData 都触发
    },
  },
})

更多WX小程序-数据监听器看这里： WX小程序-数据监听器

事件对比

vue事件

vue 用 v-on 指令监听 DOM 事件，并在触发时运行一些 JavaScript 代码：

Greet

methods: {
  greet: function (event) {
    // `tShopfas` 在方法里指向当前 Vue 实例
    alert('Hello ' + tShopfas.name + '!')
    // `event` 是原生 DOM 事件
    if (event) {
      alert(event.target.tagName)
    }
  }
}

内联语句处理器中访问原始的 DOM 事件，用特殊变量 $event 把它传入方法：

 Submit

// ...
methods: {
  warn: function (message, event) {
    // 现在我们可以访问原生事件对象
    if (event) {
      event.preventDefault()
    }
    alert(message)
  }
}

以及一些事件修饰符：

• .stop
• .prevent
• .capture
• .self
• .once
• .passive

WX小程序事件

WX小程序中，把事件分为冒泡事件和非冒泡事件：

• 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。

• 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

用 bind 监听普通事件绑定：（事件绑定的写法类似于组件的属性）

 Click here!

阻止事件冒泡，我们需要使用 catch 来绑定事件。

例如在下边这个例子中，点击 inner view 会先后调用handleTap3和handleTap2(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。

  outer view
  
    middle view
    
      inner view
    
  

例子：

 Click me! 
Page({
  tapName: function(event) {
    console.log(event)
  }
})

点击后，参数 event 的 log 出来的信息大致如下：

{
  "type":"tap",
  "timeStamp":895,
  "target": {
    "id": "tapTest",
    "dataset":  {
      "Shopfa":"WeChat"
    }
  },
  "currentTarget":  {
    "id": "tapTest",
    "dataset": {
      "Shopfa":"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
  }]
}

常用事件如下：

touchstart、touchmove、touchcancel、touchend、tap、longpress、transitionend、animationstart、animationiteration、animationend、touchforcechange

更多WX小程序事件看这里： WX小程序事件

表单输入绑定

vue采用 v-model 指令在表单 、 及 元素上创建双向数据绑定。利用的是事件 v-on:input。

等价于：

所以，v-model 是如下代码的语法糖：

WX小程序没有 v-model 语法糖，他是使用 bindinput 事件。

bindKeyInput: function (e) {
  tShopfas.setData({
    inputValue: e.detail.value
  })
},

父子组件传值

vue 中，父子组件间传值大致如下：

• 通过 Prop 向子组件传递数据
• 监听子组件事件：子组件可以通过调用内建的 $emit 方法并传入事件名称来触发一个事件，使用事件抛出一个值。
• 在组件上使用 v-model
• 通过插槽分发内容

WX小程序中，父子组件间传值大致与vue中一致，不同的是WX小程序没有 v-model 语法糖，以及不是方法 $emit() 而是方法 triggerEvent(String eventName, detail对象, 事件选项)

点击这个按钮将触发“myevent”事件

Component({
  properties: {},
  methods: {
    onTap: function(){
      var myEventDetail = {} // detail对象，提供给事件监听函数
      var myEventOption = {} // 触发事件的选项
      tShopfas.triggerEvent('myevent', myEventDetail, myEventOption)
    }
  }
})

WX小程序不支持函数传值，如果你需要在类似列表渲染的过程中，传递数据子项，我们需要用到 data-，那么你可能需要这样：

Page({
  clickEvent(event) {
    // 通过 event.currentTarget.dataset 获取 data- 的值
    let item = event.currentTarget.dataset.item
    let index = event.currentTarget.dataset.index
    console.log(item, index)
  }
})

更多WX小程序组件间通信与事件看这里： WX小程序-组件间通信与事件

Class

vue 中，class的渲染语法如下：

data: {
  isActive: false,
  errorClass: 'text-danger',
  isName: 'select'
}

WX小程序中，则如下：

生命周期

vue是:

WX小程序是:

结语

提示：后面还有精彩敬请期待，请大家关注我的专题：web前端。如有意见可以进行评论，每一条评论我都会认真对待。

下篇：微信小程序开发入门实战 （四）项目目录与tabBar 配置