小程序学习笔记（一）

1.小程序结构目录

小程序框架提供了自己的视图层描述语言 WXML 和 WXSS ，以及 JavaScript ，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。
2.小程序文件结构和传统web对比

传统web	微信小程序
HTML	WXML
CSS	WXSS
JavaScript	JavaScript
配置：无	JSON

通过以上对比得出，传统web是三层结构。而微信小程序是四层结构，多了⼀层配置.json
3. 基本的项目目录

4.小程序配置文件
⼀个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和页面自己的page.json
注：.json是配置文件，其内容必须符合json格式内部不允许有注释。

app.json 配置项列表

属性	类型	必填	描述
pages	String Array	是	设置页面路径
window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部 tab 的表现
networkTimeout	Object	否	设置网络超时时间
debug	Boolean	否	设置是否开启 debug 模式

pages

接受一个数组，每一项都是字符串，来指定小程序由哪些页面组成。每一项代表对应页面的【路径+文件名】信息，数组的第一项代表小程序的初始页面。小程序中新增/减少页面，都需要对 pages 数组进行修改。
文件名不需要写文件后缀，因为框架会自动去寻找路径下 .json, .js, .wxml, .wxss 四个文件进行整合。
如开发目录为：

pages/

pages/index/index.wxml

pages/index/index.js

pages/index/index.wxss

pages/logs/logs.wxml

pages/logs/logs.js

app.js

app.json

app.wxss

则需要在 app.json 中写

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ]
}

window 字段⸺定义小程序所有页面的顶部背景颜色，文字颜色定义等。

注：HexColor（十六进制颜色值），如"#ff00ff"
5.模板语法
1.数据绑定
利用大括号{{ text }}这样的格式来进行信息的绑定，我们只需要在js文件的data属性中加上 text代表的数据。
普通写法：

<view> {{ msg }} </view>

Page({
  data: {
    msg: 'Hello'
 }
})

注意关键字 true和false 必须是这样使用
特别注意：不要直接写checked=“false”，其计算结果是一个字符串，转成 boolean 类型后代表真值。

2.组件属性

<view id="item-{{id}}"> </view>

Page({
  data: {
    id: 0
 }
})

3.列表渲染
wx:for：
项的变量名默认为 item wx:for–item 可以指定数组当前元素的变量名
下标变量名默认为 index wx:for–index 可以指定数组当前下标的变量名
wx:key 用来提高数组渲染的性能
wx:key 绑定的值 有如下选择：

1. string 类型，表示循环项中的唯⼀属性如

list:[{id:0,name:"炒饭"},{id:1,name:"炒面"}]
wx:key="id"

2. 保留字 *this ，它的意思是 item本⾝ ，*this 代表的必须是唯⼀的字符串和数组。

list:[1,2,3,4,5]
wx:key="*this"

代码：

<view wx:for="{{array}}" wx:key="id">
 {{index}}: {{item.message}}
</view>

Page({
  data: {
    array: [{
      id:0,
      message: 'foo',
   }, {
      id:1,
      message: 'bar'
   }]
 }
 })

4.条件渲染
wx:if
在框架中，使⽤ wx:if="{{condition}}" 来判断是否需要渲染该代码块：

  <view wx:if="{{false}}">1</view>
  <view wx:elif="{{true}}">2</view>
  <view wx:else>3</view>

hidden

<view hidden="{{condition}}"> True </view>

wx:if相当于Vue里的v-if
hidden相当于Vue的v-show
频繁切换 用 hidden
不常使用 用 wx:if