微信小程序继续入坑指南

微信小程序继续入坑指南

wxml

类似于html

感觉和ejs灰常的相似

数据绑定

js

Page({
  data: {
    message: "hello world"
  }
})

wxml

<view>{{message}}</view>

使用的是https://mustache.github.io/模板引擎系统

对组件的属性和控制属性的更改

<view id="item-{{id}}"></view>
Page({
  data: {
    message: "hello world",
    id: 3
  }
})

关键字

对布尔型的进行解析

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

将会解析成为布尔值的false

运算

模板引擎支持布尔运算

三目运算

<view hidden="{{flag?true:false}}"></view>

当变量的flag的值为真的时候输出true,否输出false

算术运算

<view>{{a+b}}+ {{c}}</view>

支持最简单的算术运算

逻辑判断

<view>{{a>2}}+ {{c}}</view>

字符串运算

<view>{{"hello" + message}}</view>

对对象进行访问

<view>{{object.key}}</view>

同样支持变量

数组

<view>{{[zero, 1, 2, 3]}}</view>

直接进行组合,其中zroe的值为0

组合以后渲染为

0, 1, 2, 3

对象

template

ps w3c组织也规定了该标签,该标签也为模板

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
<template is="msgItem" data="{{index: item.index,msg: item.index, time: item.time}}"></template>
Page({
  data: {
    item: {
      index: 0,
      msg: "222",
      time: "333"
    }
  }
})

使用模板,进行重复的利用,减少了重复代码的书写

同样也可以使用扩展运算符,进行扩展

上方的使用扩展运算符

<template name="msgItem">
  <view>
    <text> {{index}}: {{msg}} </text>
    <text> Time: {{time}} </text>
  </view>
</template>
<template is="msgItem" data="{{...item}}"></template>

彻底的完成了扩展

输出正常的内容

如果变量名有冲突,前面的会覆盖后面的

列表渲染

wx:for 对数组进行重复的渲染

类似于使用for in 循环一样

<view wx:for="{{array}}">
  {{index}}:{{item.msg}}
</view>
Page({
  data: {
    array: [{
      msg: 'foo',
    }, {
      msg: 'bar'
    }]
  }
})

上方完成了一次列表渲染,其中index为默认的遍历到的数组的小标,从0开始,item为当前遍历到的数组对应下标的元素。

其中wx:for-itm为指定当前的元素,wx:for-index为指定当前元素的小标

输出九九乘法表

<view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="i">
  <view wx:for="{{[1,2,3,4,5,6,7,8,9]}}" wx:for-item="j">
    <view wx:if="{{i <= j}}">
      {{i}} * {{j}} = {{i * j}}
    </view>
  </view>
</view>

block

block为一个块,用于控制一些内容

<block wx:for="{{[1,2,3,4]}}">
  <view>{{index}}</view>
  <view>{{item}}</view>
</block>

wk:key

此为给框一个唯一的标识符号,类似于网页中的id,无论列表如何变化,此id永远不变,一直标识一个内容

Page({
  data: {
    objectSwitch: [
      {
        id: 0,
        unique: "unique_0"
      }, {
        id:1,
        unique: "unique_1"
      }, {
        id:2,
        unique: "unique_2"
      }
    ]
  },
  addSwitch: function (e) {
    // 获取当前的最大的按钮数
    const length = this.data.objectSwitch.length;
    // 添加一个新数组的项,将其推入数组中
    this.data.objectSwitch = [{ id: length, unique: "unique_" + length }].concat(this.data.objectSwitch);
    // 重新进行页面的渲染
    this.setData({
      objectSwitch: this.data.objectSwitch
    })
  }
})
<switch wx:for="{{objectSwitch}}" wx:key="unique">{{item.id}}, {{index}}</switch>
<button bindtap="addSwitch">添加一个选项</button>

条件渲染

wx:if条件渲染

templat

为模板,支持代码的复用

事件

和网页类似

不过这个是视图到逻辑的通信方式。

bindtap

进行事件的绑定

冒泡和非冒泡

ps 发现知晓程序 https://minapp.com/miniapp/ 好滴,写完后继续上。肯定要写插件喽

bind和catch后面跟上事件类型。

tap为手指触摸以后马上离开,或者是touchmove事件,手指触摸以后移动

例如 bindtap事件为手指触摸以后马上离开

在网页中也有触摸事件 https://developer.mozilla.org/en-US/docs/Web/API/Touch_events/Using_Touch_Events https://developer.mozilla.org/zh-CN/docs/Web/API/Touch_events 其中文档给有一个栗子,该栗子是进行在移动设备上绘图,额,暂时不想看,目前该方案只有chrome实现

catch事件的绑定可以阻止冒泡事件向上传播。

ps 只要冒泡,没有传播

<view id="outer" bindtap="handleTap1">
  <view id="middle" catchtap="handleTap2">
    <view id="inner" bindtap="handleTap3"></view>
  </view>
</view>

在上方事件中,点击inner会触发handleTap3,接着冒泡到handleTap2,接着继续冒泡到handleTap2 如果除法middle将会止步于当前的冒泡。

捕获

换了一个名词而已。约等于网页开发中的传播

即事件先传播到顶层,在往下捕获,到底部以后在往上进行冒泡。事件一共经历了先往上,在往下,再次往上的过程。来源于网景和ie的那一场战争。战争遗留的内容。

capture-bind

以及

capture-catch

使用这两个关键字可以完成对事件的捕获。

<view id="outer" bind:touchstart="handleTap1" capture-bind:touchstart="handleTap2">
  <view id="inner" bind:touchstart="handleTap3" capture-bind:touchstart="handleTap4">
  </view>
</view>

当点击inner的时候,会先传播,即传播到最顶层,被outer捕获,除法handleTap2事件,继续往下传播,传播到inner,触发handleTap4事件,接着冒泡,触发inner的handleTap3事件,接着触发outer的handleTap1事件。

事件数据回传

事件数据回传到逻辑层

以data开头,多个单词以-连接,将会转为驼峰命名法,如果有大写字母,将会全部转为小写

是滴,在html5中也有这样通过属性读值的方式。切记,在mvvm框架中,不可操作dom,数据和视图是完全分隔的。

Page({
  bindViewTap: (event) => {
    var data = event.currentTarget.dataset.alphaBeta;
    var data2 = event.currentTarget.dataset.alphabeta;
    console.log(data);
    console.log(data2);
  }
})
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap">点击一下</view>

是滴,这样就完成了视图层数据通知到逻辑层。

事件对象

当事件被触发的时候,处于逻辑层的回调函数,将会接收到一个事件对象

Page({
  touch: (baseEvent) => {
    console.log(baseEvent);
  }
})
<button bindtap="touch">点击按钮触发事件</button>

即,触发事件

引用

wxml提供两种方式的引用。

import和include

import

import可以完成引用。即完成对模板的引用

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<!-- 另外一个文件 -->
<import src="item.wxml"/>
<template is="item" data="{{text:"hello world"}}">

include

include将会完成包含

除了template和wxs以外都能进行包含

<include src="header.wxml"/>
<view>body</view>
<view src="footer.wxml"></view>

上方完成了一次模块化。即将header和footer进行合并,完成模块。

wxs模块

wxs,即模块

每一个文件和wxs标签都为一个单独的模块,独立。

每个模块都有一个独立的作用域。即在一个模块里定义的变量和函数。默认为私有,对其他模块不可见。

var foo = "hello world";
var bar =  function (d) { 
  return d;
}

module.exports = {
  foo: foo,
  bar: bar
}

即,上方文件完成了导出,可被wxs文件或者wxs标签引用

module

每个wxs模块有一个内置的module对象

<wxs src="./hello.wxs" module="tools"/>
<view>{{tools.msg}}</view>
<view>{{tools.bar(tools.foo)}}</view> 
var foo = "hello world"
var bar = function(d) {
  return d;
}

module.exports = {
  foo: foo,
  bar: bar
};

module.exports.msg = "some msg"

require函数

同理,可以进行引入

不在阐述

类似于node.js的包

wxs模块只能进行引入,使用include和import wxs模块的时候不能进行引入

template 标签中只能定义该标签内部的wxs模块

变量

变量依旧会有变量的提升

注释

依旧类似

运算符

依旧类似

语句

依旧类似

数据类型

依旧类似

arguments 依旧可以在function内使用

日期类型不过换了一个函数

getDate()

正则由原先的new变成了一个函数

getRegExp

数据类型的判断可以就、依旧使用typeof

一些基础的库

依旧类似

console.log

此函数依旧可用

Match依旧可用

json依旧可用

JSON.stringify 依旧可用

JSON.parse 依旧可用

迁移即可

统统都是es5的内容

WXSS

一种类似于css的微信内容

尺寸单位 由原先的em,px 给换成了rpx

以物理像素为单位

em 以当前字体大小为单位

@import

同样类似,使用import即可导入,和css类似

内联样式

同样类似,多出

element

after和before依旧可用

全局样式和局部样式

依旧可在app.wxss中使用

依旧类似

组件

组件为视图层的基本单元

对应于组件化

组件会自带微信的一些功能

组件包括开始标签和结束标签,属性用来修饰内容

view 视图容器

scroll-view 允许组件滚动

swiper 对应于滑块

icon 对应于封装好的图标

text 对应于封装好的文字

progress 对应于封装好的进度条

form 进行表单,包括数据的提交

navigator 跳转到新页面

video 播放视频 类似于h5的标签

canvas 支持进行画画

原创声明,本文系作者授权云+社区发表,未经许可,不得转载。

如有侵权,请联系 yunjia_community@tencent.com 删除。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏mySoul

jQuery (二)

还可以使用三个值,第一值为事件,第二个值为Event对象的data属性,在调用最后一个处理函数的时候,会将第二个值作为对象的data属性,这样即可避免使用闭包操...

1203
来自专栏IMWeb前端团队

Zepto源码分析之form模块

前言 JavaScript最初的一个应用场景就是分担服务器处理表单的责任,打破处处依赖服务器的局面,这篇文章主要介绍zepto中form模块关于表单处理的几个...

20210
来自专栏较真的前端

Chrome开发者工具还有这些功能,你知道吗?

2828
来自专栏Golang语言社区

Golang URL解析

Golang URL解析 今天利用课余时间看了一下Go语言的URL解析,于是就实践了一下,为了大家一起学习交流,故贴出来和大家一起分享,如有什么错误,请各位大神...

56312
来自专栏小蠢驴iOS专题

iOS中纯代码创建的UI控件使用weak还是strong

2054
来自专栏木制robot技术杂谈

常用命令行快捷键

1535
来自专栏xingoo, 一个梦想做发明家的程序员

编写兼容性JS代码

前文介绍了:  1 DOM四个常用的方法   2 使用DOM核心方法完成属性填充 本篇主要介绍在JS中需要注意的几个地方,另外为了减小html与jav...

2339
来自专栏GreenLeaves

Jquer学习之jQuery(function(){})与(function(){})(jQuery)之间的区别

Jquery是优秀的Javascrīpt框架。我们现在来讨论下在 Jquery 中两个页面载入后执行的函数。 $(document).ready(functio...

1K5
来自专栏有趣的django

微信小程序入门(三)

四个组成部分,其它三个前面介绍过了,主要WXS: WXS:对wxml增强的一种脚本语言,可以对请求的数据进行filter或者做计算处理,帮助wxml快速构建出...

1464
来自专栏逸鹏说道

01.Web大前端时代之:HTML5+CSS3入门系列~初识HTML5

Web大前端时代之:HTML5+CSS3入门系列:http://www.cnblogs.com/dunitian/p/5121725.html 文档申明 <!-...

2974

扫码关注云+社区

领取腾讯云代金券