用户
 找回密码
 立即注册

QQ登录

只需一步,快速开始

扫一扫,登录网站

小程序社区 首页 教程 实战教程 查看内容

微信小程序开发入门实战 (三)在熟悉vue的情况下,快速切换为小程序开发 ...

Rolan 2020-8-28 15:26

本篇文章旨在通过对比vue和小程序,实现快速切换开发。

虽然小程序和vue二者在底层核心和使用方式上差异很大,但是他们仍然有很多共同点。本篇文章旨在通过对比vue和小程序,实现快速切换开发。如果你没有vue的基础,那么你不需要看这篇,你可能需要的是:小程序基本文档。如果你小程序基本语法都不清楚或是需要详细的了解一下,可能需要:小程序开发指南

WXML 与 template

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

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

<!--pages/wxml/index.wxml-->
<text>pages/wxml/index.wxml</text>
不带有任何逻辑功能的 WXML 基本语法如下:


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


数据绑定

vue使用的是模板语法:

WX小程序使用的是:

数据修改

vue的数据修改如下:

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

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

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



条件渲染

vue使用的是:

WX小程序使用的是:

列表渲染

vue使用的是:

WX小程序使用的是:

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

计算属性和侦听器

vue中通过 computedwatch 来实现计算属性和侦听器:


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

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


事件对比

vue事件

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

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

以及一些事件修饰符:

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

WX小程序事件

WX小程序中,把事件分为冒泡事件和非冒泡事件:

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

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

bind 监听普通事件绑定:(事件绑定的写法类似于组件的属性)

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

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



例子:


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

常用事件如下:

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

表单输入绑定

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


父子组件传值

vue 中,父子组件间传值大致如下:

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

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



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


Class

vue 中,class的渲染语法如下:


生命周期

vue是:

WX小程序是:

作者:言墨儿
来源:简书
著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。
鲜花
鲜花
鸡蛋
鸡蛋
分享至 : QQ空间
收藏