小程序基础

1.小程序结构

小程序提供了自己的开发语言WXML,WXSS,Js

结构	传统web	小程序
结构	html	wxml
样式	css	wxss
逻辑	js	js
配置	wu	json

2.小程序配置文件

2.1全局配置文件

 pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。

未指定 entryPagePath 时，数组的第一项代表小程序的初始页面（首页）

├── app.js
├── app.json
├── app.wxss
├── pages
│   │── index
│   │   ├── index.wxml
│   │   ├── index.js
│   │   ├── index.json
│   │   └── index.wxss
│   └── logs
│       ├── logs.wxml
│       └── logs.js
└── utils
（文件目录如此的话，app.json就应当如下写，展示有几个页面）
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],

同时，在app.json中的Pages中直接添加"pages/x/x",则会在目录下自动添加文件。

entryPage

指定首页。如果不填，将默认为 pages 列表的第一项。不支持带页面路径参数。

{
  "entryPagePath": "pages/index/index"
}

window

用于设置小程序的状态栏、导航条、标题、窗口背景色，文字颜色。

如果需要单独定义 ，可以到某页中设置 再把json文件提到最上面

restartStrategy

从哪个页面退出小程序后下次启动页面的选择

可选值	含义
homePage	（默认值）如果从这个页面退出小程序，下次将从首页冷启动
homePageAndLatestPage	如果从这个页面退出小程序，下次冷启动后立刻加载这个页面，页面的参数保持不变（不可用于 tab 页）

tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

2.2sitemap配置

配置其小程序页面是否允许微信索引。

3.模板语法

3.1数据绑定前的编辑技巧

1.text标签，行内元素 不会换行

2.view块元素，会换行

简单绑定

数据绑定使用 Mustache 语法（双大括号）将变量包起来，可以作用于：

比如

<view> {{ message }} </view>

Page({
  data: {
    message: 'Hello MINA!'
  }
})

组件属性(需要在双引号之内)

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

控制属性(需要在双引号之内)

<view wx:if="{{condition}}"> </view>

Page({
  data: {
    condition: true
  }
})

关键字(需要在双引号之内)

true：boolean 类型的 true，代表真值。

false： boolean 类型的 false，代表假值。

<checkbox checked="{{false}}"> </checkbox>

3.2运算

三元运算

<view hidden="{{flag ? true : false}}"> Hidden </view>

算数运算

<view> {{a + b}} + {{c}} + d </view>

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})

view中的内容为 3 + 3 + d。

逻辑判断

<view wx:if="{{length > 5}}"> </view>

字符串运算

<view>{{"hello" + name}}</view>

Page({
  data:{
    name: 'MINA'
  }
})

数据路径运算

<view>{{object.key}} {{array[0]}}</view>

Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['MINA']
  }
})

3.3数组和对象循环

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

wx:for="{{数组或对象}}"   wx:for-item="循环项的名称"  wx:for-index="循环项的索引"

定义一个数组数据

list[
    {
        id=1,
        name="猪八戒"
    }，
    {
        id=1,
        name=""沙和尚
    }
]

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

提高渲染的性能