专栏首页mySoul微信小程序继续入坑指南
原创

微信小程序继续入坑指南

微信小程序继续入坑指南

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 条评论
登录 后参与评论

相关文章

  • 浏览器推送 comet

    服务器端的推送事件的方式为客户端在创建一个EventSource对象时会建立一个到服务器的连接,服务器会保持这个连接处于打开的状态,当发生一个事件的时候,服务器...

    mySoul
  • 线性表

    源文件 https://gitlab.com/melovemingming/code/blob/practice/practice/C/2018/10/01/u...

    mySoul
  • C/C++ 函数指针

    由于虚函数的存在,所以在在类的成员函数指针在调用的时候需要传入类的实例化后的对象,用于找到虚函数在内存中的函数体开始的地址。

    mySoul
  • View官方文档

    nimomeng
  • Android 开发艺术探索笔记一

    ViewRoot对应于ViewRootImpl类,它是连接windowmanager和DecorView的纽带,View的三大流程均是通过ViewRoot来完成...

    Yif
  • 微信小程序新闻信息列表展示

    达达前端
  • Android6.0源码分析之View(一)

    目前对于view还处于学习阶段,本来打算学习结束之后再写一篇进行总结,但是发现自己自制力太差,学习效率太低,所以在此,边学边写博客,不仅督促自己完成对view的...

    fanfan
  • Android中View研究自学之路 Android6.0源码分析之View(一)Android6.0源码分析之View(二)

    Android中View研究自学之路 http://blog.csdn.net/zrf1335348191/article/details/54171263 ...

    fanfan
  • Android中View研究自学之路

    写这篇博客呢是在研究了view将近一个月之后,算是对自己的学习做一个总结,进而反思一下学习方法,本博文不涉及代码分析。

    fanfan
  • 小程序组件开发 -- 疫情动态

    之前有很多疫情相关的项目涌现,本弱鸡的作品至今只有一点点star,本着骗star的原则,把一个比较常用的功能组件进行封装,方便各位小程序开发者使用,组件代码放在...

    Kindear

扫码关注云+社区

领取腾讯云代金券