微信小程序-起步(2)

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

模板

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

在index.wxml里面的这样引用
src写相对路径

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文件里面

 ---我是一个 Header--- 

使用的话，哪里需要就在哪个相应的位置include

---

WXS

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

//wxml调用


 {{item}} 

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

---

事件

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

  outer view
  
    middle view
    
      inner view
    
  

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

//wxml

     点按我可以打印信息
  
//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)
    });