目录结构
每个项目均包含.js和.wxml文件,js文件配置页面入口,wxml配置布局与源;两者一起完成页面的确认
视图与渲染
- 组件的基本使用
示例:
1)按钮
<button
type="default"
hover-class="other-button-hover"
>
start
</button>
2)文本
<text>{{text}}</text>
- 数据绑定
<text>{{text}}</text>
即把文本内容绑定到text上,需要在.js文件的data段中声明:
Page({
data: {
text:"Welcome..."
},
})
- 若希望点击按钮后显示变化:
btnClick:function(){
console.log("Clicked...") /*在控制台(调试窗口)的日志中显示引号中内容*/
this.setData({text:"Nice to meet you,too"}) /*将text的内容改变为引号中内容*/
}
- 渲染标签——条件标签 & 循环标签
条件标签——if
<view wx:if="{{false}}">{{text}}</view> /*
/*text的内容不能正常显示*/
<view wx:if="{{show}}">{{text}}</view> /*
/*同时在data中声明show*/
btnClick:function(){
console.log("Clicked...")
var isShow=this.data.show; //
console.log("isShow:"+isShow) //
/*每次点击后show的内容取反*/
this.setData({text:"Nice to meet you,too",show:!isShow}) //
}
<view wx:if="{{show}}">{{text}} 1</view> /*
<view wx:else>{{text}} 2</view> /*
/*循环显示两个内容*/
循环标签——for
<view wx:for="{{['aaa','bbb','ccc']}}"> /*数组内容可在data段中声明为news,这里绑定news即可*/
循环内容... /*这里的内容会在遍历上一行数组的过程中循环打印*/
</view>
{{item}} /*遍历数组时输出内容*/
<view wx:for="{{news}}" wx:for-item="itemx"> /*更改item的变量名*/
{{index}} - {{itemx}} /*定义输出格式*/
</view>
var newsdata = this.data.news;
newsdata.shift() /*依次删除一个数组元素*/
- 模板的使用
即将重复的页面格式提取为模板
1.在pages目录下新建模板目录templates,在模板目录下的.wxml文件中输入模板样式
2.需要该模板的页面,
对于单个模板,在其.wxml文件相应位置加入:
<include src="../templates/header" /> /*注意斜杠不能少*/
对于多个模板,在其.wxml文件相应位置加入:
<import src="../templates/footer" /> //
<template is="footer1" /> //
/*这里斜杠也不可少*/
事件
一种用户行为、通讯方式
- 类别
点击事件 tap
长按事件 longtap
触摸事件 touchstart开始触摸,touchend结束触摸,touchmove移动触摸,touchcancel取消触摸
其他 submit,input