这篇文章主要是说模板、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的属性 去绑定事件

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)
});
网友评论