微信小程序基础

一、开发者工具以及代码结构

1.开发者工具

微信小程序开发是在专门的微信开发者工具上进行开发的；下载地址在上微信公众平台上

logo
界面

2.微信小程序代码结构

• 配置文件 json
• 页面结构 wxml
• 页面样式 wxss
• 页面交互 js

二、WXML 模板

1.介绍

WXML 文件后缀名是 .wxml ，打开 pages/wxml/index.wxml 文件，有过 HTML 的开发经验的读者应该会很熟悉这种代码的书写方式，简单的 WXML语句在语法上同 HTML 非常相似。

<!--pages/wxml/index.wxml-->

<text>pages/wxml/index.wxml</text>

2.数据绑定

• 在微信小程序开发中，数据绑定用{{}}把一个变量绑定到页面上

（1）数据绑定示例

<!--pages/wxml/index.wxml-->
<text>当前时间：{{time}}</text>

// pages/wxml/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    time: (new Date()).toString()
  },
})

（2）属性值也可以动态的去改变，有所不同的是，属性值必须被包裹在双引号中，如下

<!-- 正确的写法 -->
<text data-test="{{test}}"> hello world</text>


<!-- 错误的写法  -->
<text data-test={{test}}> hello world </text >

3.条件渲染

• wx:if -> wx:elif -> wx:else

  <!--index.wxml-->
  <view>--------条件渲染----------</view>
  <view wx:if="{{isShow}}">判断为true</view>
  <view wx:else>判断为false</view>

// index.js
Page({
  data: {
    isShow: true,
  })

4.列表渲染

• 在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
• 也可以用wx:for-item="user"改变当前项的变量名，wx:for-index="id" 改变当前下边变量名
• 在用列表渲染循环是，需要绑定一个key值wx:key="id"

<!--index.wxml-->
<view>--------列表渲染1----------</view>
  <view wx:for="{{userList}}" wx:key="index">
    {{index}} {{item.name}} {{item.age}}
  </view>

   <view>--------列表渲染2----------</view>
  <view wx:for="{{userList}}" wx:for-item="user" wx:for-index="id" wx:key="id">
    {{id}} {{user.name}} {{user.age}}
  </view>

Page({
  data: {
    userList: [
      { name:'小明', age:'12' },
      { name:'小红', age:'13' },
      { name:'小刚', age:'14' }
    ]
  })

三、WXSS样式

1. 文件组成

2. 尺寸单位

• rpx

3. 样式导入

• @import 'wxss文件地址';

/**index.wxss**/
@import '../../style/mystyle.wxss';
.fontwrap {
  width: 300rpx;
  height: 100rpx;
  border:1rpx red solid;
}

四、事件处理

1. 简单使用

• bindtap绑定一个事件
• 用data-属性="值" 绑定一个属性，在定义函数时，从e或event事件对象e.target.dataset.msg中能够获取
• setData 将脚本的内容渲染到页面上去

  <!--index.wxml-->
  <!-- bindtap绑定一个事件, data-msg绑定一个显示内容 -->
  <view class="btn" bindtap="clickMe" data-msg="恭喜你，点击成功">点击我</view>
  <view>{{msg}}</view>

Page({
  data: {
  },
  clickMe: function(e) {
    console.log(e);
    let msg = e.target.dataset.msg;
    console.log(msg);
    // setData 将脚本的内容渲染到页面上去
    this.setData({
      msg: msg
    })
  }
})

e或event事件对象打印结果

2. 事件类型

常见的事件类型

3.事件冒泡捕获

（1） 默认绑定事件bind 事件冒泡

（2）设置绑定事件前缀capture-bind， 表示事件捕获阶段

（3）将绑定事件bind换为catch的话，将阻止事件的传递

• bind -> catch
• capture-bind -> capture-catch