微信小程序-起步(2)

这篇文章主要是说模板、WXS、事件、setData、样式

模板

• 有可能被重复使用 动态 的wxml文件的代码结构，可以提出来放在跟pages同级的common文件里面

<template name="stringName">
  <view>{{name}}</view>
</template>

在index.wxml里面的这样引用
<import src="template.wxml"/> src写相对路径
<template is="stringName" data="{{name: 'Matt'}}"></template>

import 的作用域
import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。
如：C import B，B import A，在C中可以使用B定义的template，在B中可以使用A定义的template，但是C不能使用A定义的template。

这样的模板使用类似于声明一个函数，调用的时候可以传入参数
也可以使用ES6语法 参见 wxml模板使用

• 有可能被重复使用的静态模板 也可以提出来放在跟pages同级的common文件里面

<view> ---我是一个 Header--- </view>

使用的话，哪里需要就在哪个相应的位置include
<include src="header.wxml"/>

---

WXS

是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。 (类似于js)
参见 wxs说明
这就意味着可以在wxml里面调用wsx里面的函数方法

//wxml调用
<wxs src="tool.wxs" module="tool"></wxs>

 <view
    wx:for="{{tool(names)}}"
  >{{item}}</view> 

//wxs文件
function createNames(names){
  var arr = names.split(',')
  return arr;
}
module.exports = createNames;

---

事件

• bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。

<!--微信上的这个例子就很方便理解
点击 inner view 会先后调用handleTap3和handleTap2
(因为tap事件会冒泡到 middle view，而 middle view 阻止了 tap 事件冒泡，不再向父节点传递)，
点击 middle view 会触发handleTap2，点击 outer view 会触发handleTap1。 -->

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

有的时候我们反而需要事件冒泡来帮助我们实现事件绑定，父级的bind：tap事件里面打印

//wxml
<view bind:tap="onTap" class="pressBtn" id="view" data-name="容器">
    <text id="text" data-name="文字"> 点按我可以打印信息</text>
  </view>
//js
onTap(event){
    console.log(event); //event的对象里面有currentTarget和target
  },

说明
1.currentTarget 组件源 真正点击的那个组件身上的一些属性，可以匹配id的属性 去绑定事件

image.png
2.target 是冒泡到最上层的组件身上的一些属性

---

样式

• rpx 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

/** app.wxss src相对路径**/
@import "common.wxss";
.middle-p {
  padding:15px;
}

---

setData()

这个方法是page身上的方法
在js中 用this调用

onTap(){
  this.setData({
      num: Math.floor(magicNumber*1000)
    });
}

• 这样做是做到数据改变，视图更新；微信的这个实现原理 并不像vue那样，是响应式的 ，这里需要自己手动的调用方法去更新视图
• 而数据更新和页面更新并不是同步的过程，而是异步的过程
• 但是执行完setData以后 data里面的数据就变了

 this.setData({
      magicNumber: Math.random()
    });

    let {magicNumber} = this.data;    //es6对象的解构赋值

    this.setData({
      num: Math.floor(magicNumber*1000)
    });