小程序

目录结构

每个项目均包含.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

•