微信小程序学习笔记–Note one

小程序的代码目录结构

• app.js

  • 注册微信小程序应用

• app.json

  • 当前小程序的全局配置，包括小程序的所有页面路径

• app.wxss

  • 保存微信小程序的全局样式

• project.config.json

  • 项目配置文件，我们可以在这里做一些个性化的配置，例如调节我们开发的时候界面的颜色，或者小程序的编译配置等等

• sitemap

  • 配置小程序机器页面是否允许被微信索引

• pages

  • 微信小程序内的所有页面
  • 每一个页面最多由四个部分组成
    • js
      • 微信小程序页面逻辑和数据交互
    • json
      • 配置微信小程序的页面信息
    • wxml
      • 展示小程序页面的元素和内容
    • wxss
      • 设置页面的样式

• utils

  • 存放工具函数，让代码复用，从而更加简洁

小程序的配置文件

全局配置

在小程序中，我们总共有五个配置是全局配置独有的

• Pages
  • 主要是用于注册我们小程序的所有页面
• tabBar
  • 如果我们的小程序是一个多tab的应用，我们可以通过这个配置来指定我们tab栏的表现
• networkTimeout
  • 设置各个网络请求的超时时间
• debug
  • 调试模式
• navigationStyle
  • 导航栏的样式

页面配置

在小程序中，我们有一个配置是页面配置独有的

• disableScroll
  • 设置页面是否开启滚动

共有的配置

• navigationBarBackgroundColor
  • 导航栏的背景颜色
• navigationBarTextStyle
  • 导航栏的文字样式
• navigationBarTitleText
  • 导航栏标题文字内容
• backgroundColor
  • 背景颜色
• backgroundTextStyle
  • 下拉的时候的文字样式
• onReachBottomDistance
  • 页面上拉触底事件触发时距页面底部距离
• enablePullDownRefresh
  • 全局或者单个页面下拉刷新的表现

如果全局配置和页面配置重复了，页面的配置项会覆盖掉全局的配置项

WXML语法

WXML是小程序的一套是标签语言，结合组件、WXS和事件系统，可以构建出页面的结构

WXS对WXML能力增强的一种脚本语言，可以对我们请求返回回来的数据进行逻辑计算或者过滤处理等操作

语法结构为

<标签名 属性名="">
	......
</标签名>

比如

<view class = "className" data-name = "A">
  Hello,world!
  <view>
    Hello, weChat!
  </view>
</view>

WXML语法特性之数据绑定

在我们的开发中，页面上的一些数据有很强的时效性，数据会需要频繁进行更新，WXML通过数据绑定特性可以实现动态改变界面的效果，页面中的数据往往是来自于我们页面的JS文件中配置的data对象，例如

// index.js
Page({
  data: {
    name: "Wechat Demo"
  }
})

<!--index.wxml-->
<view class = "className" data-name = "A">
  Hello,world!
  <view>
    <text>Hello, {{name}}</text>
  </view>
</view>

这样我们就将我们的名字为name的data同界面上的UI进行了一个绑定，除了单纯的数据绑定，WXML也支持属性的绑定，举个例子，我们将data-name属性同js中的name进行绑定

<!--index.wxml-->
<view class = "className" data-name = "{{name}}">
  Hello,world!
  <view>
    <text>Hello</text>
  </view>
</view>

之后运行的时候，我们可以看下调试器的输出

属性就已经被成功绑定到了我们的组件上

所有的组件和属性都需要是小写的

WXML属性

• id
  • 组件的唯一标志
• clas
  • 对应于组件在WXSS中定义的样式类
• style
  • 动态设置组件的内联样式
• hidden
  • 组件是否显示，所有组件默认都是显示，布尔类型
• data-*
  • 自定义属性，组件上触发事件的时候会发送事件给到处理事件的函数
• bind*/catch*
  • 组件的事件

WXML语法特性之列表渲染

// index.js
Page({
  data: {
    items: [
      {name: "test1"},
      {name: "test2"},
      {name: "test3"},
      {name: "test4"},
      {name: "test5"},
      {name: "test6"}
    ]
  }
})

我们首先定义一个我们列表需要展示的数据

之后再Block组件内绑定数据并展示

<!--index.wxml-->
<view>
  <block wx:for="{{items}}" wx:for-item="item" wx:key="index">
    <view>{{index}}:{{item.name}}</view>
  </block>
</view>

index是当前元素对应的下标，我们也可以通过for-item设置，key这个属性会在页面重新渲染的时候，确保带有key的item会被重新排序。Block标签并不是一个组件，而是一个包装元素，在渲染的时候其并不会被渲染

WXML语法特性之条件渲染

条件渲染主要是通过wx:if，wx:else，wx:elif 三个条件来实现的，满足条件才渲染组件

<view wx:if="condition1"> 1 </view>
<view wx:elif="condition2"> 2 </view>
<view wx:else> 3 </view>

如果我们希望一个控制语句能够同时对多个组件进行条件控制，可以通过block将多个组件包裹起来

<block wx:if="condition">
  <view> view1 </view>
  <view> view2 </view>
</block>

Block并不是一个组件，它仅仅是一个包装元素，不会参与页面渲染

条件判断中可能也包含了数据绑定，所以当条件值有变化的时候，也会产生渲染，同时WXML的条件渲染是惰性的，初始的时候如果条件判断为false，就不会发生渲染，直到条件第一次发生变化的时候才会开始渲染。相较于此，hidden属性不论值为false或true，组件都会被渲染，只是简单的控制隐藏和显示，如果有频繁的条件切换，建议用条件渲染

WXML语法特性之模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

模板定义

我们可以在