配置介绍

一个小程序应用程序会包括最基本的两种配置文件。一种是全局的 app.json 和 页面自己的 page.json

注意：配置文件中不能出现注释

全局配置app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。普通快速启动项目里边的 app.json 配置

json中没有注释！！！

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}
1
2
3
4
5
6
7
8
9
10
11
12

可以在page中直接创建一个新的包：
示例：

这样子就会自动创建文件夹以及里面的配置文件。

字段的含义

1. pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
2. window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
3. 完整的配置信息请参考 app.json配置

page.json

这里的 page.json 其实用来表示页面目录下的 page.json 这类和小程序页面相关的配置。

开发者可以独立定义每个页面的一些属性，如顶部颜色、是否允许下拉刷新等等。

页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项。

视图层

WXML（WeiXin Markup Language）是框架设计的一套标签语言，结合基础组件、事件系统，可以构建出页面的结构。

数据绑定

普通写法

<view> {{ message }} view>
1

Page({
  data: {
    message: 'Hello MINA!'
  }
})
1
2
3
4
5

组件属性

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

Page({
  data: {
    id: 0
  }
})
1
2
3
4
5

bool类型

不要直接写 checked=“false”，其计算结果是一个字符串

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

运算

三元运算

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

算数运算

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

Page({
  data: {
    a: 1,
    b: 2,
    c: 3
  }
})
1
2
3
4
5
6
7

逻辑判断

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

字符串运算

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

Page({
  data:{
    name: 'MINA'
  }
})
1
2
3
4
5

注意

花括号和引号之间如果有空格，将最终被解析成为字符串

列表渲染

wx:for

项的变量名默认为 item wx:for-item 可以指定数组当前元素的变量名

下标变量名默认为 index wx:for-index 可以指定数组当前下标的变量名

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
view>
1
2
3

Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
1
2
3
4
5
6
7
8
9

wx:for

渲染一个包含多节点的结构块 block最终不会变成真正的dom元素

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: view>
  <view> {{item}} view>
block>
1
2
3
4

wx:key

提高效率使用的

条件渲染

wx:if

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

<view wx:if="{{condition}}"> True view>
1

hidden

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

类似 wx:if

频繁切换 用 hidden

不常使用 用 wx:if

WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述 WXML 的组件样式。

与 CSS 相比，WXSS 扩展的特性有：

• 尺寸单位
• 样式导入

尺寸单位

• rpx（responsive pixel）: 可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6 上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素。

建议： 开发微信小程序时设计师可以用 iPhone6 作为视觉稿的标准。

注意： 在较小的屏幕上不可避免的会有一些毛刺，请在开发时尽量避免这种情况。

样式导入

使用@import语句可以导入外联样式表，@import后跟需要导入的外联样式表的相对路径，用;表示语句结束。

示例代码：

/** common.wxss **/
.small-p {
  padding:5px;
}
1
2
3
4

/** app.wxss **/
@import "common.wxss";
.middle-p {
  padding:15px;
}
1
2
3
4
5

内联样式

框架组件上支持使用 style、class 属性来控制组件的样式。

• style：静态的样式统一写到 class 中。style 接收动态的样式，在运行时会进行解析，请尽量避免将静态的样式写进 style 中，以免影响渲染速度。

<view style="color:{{color}};" />
1

• class：用于指定样式规则，其属性值是样式规则中类选择器名(样式类名)的集合，样式类名不需要带上.，样式类名之间用空格分隔。

<view class="normal_view" />
1

选择器

目前支持的选择器有：

全局样式与局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

基本组件

小程序提供了常用的标签组件用于构建页面

组件

view

类似 div

代码

  <view hover-class="h-class">
  点击我试试
  view>
  
  .h-class{
    background-color: yellow;
  }
1
2
3
4
5
6
7

text

显示普通的文本 text只能嵌套text

代码

  <text selectable="{{false}}" decode="{{false}}">
    普 通
  text>
1
2
3

image

图片标签，image组件默认宽度320px、高度240px

**注意：该标签 其实是 web中的 图片标签 和 背景图片的结合！！！ 并且不支持以前的web中的背景图片的写法！！！ **

mode 有效值：

mode 有 13 种模式，其中 4 种是缩放模式，9 种是裁剪模式。

swiper

微信内置有轮播图组件

默认宽度 100% 高度 150px

swiper

滑块视图容器。

swiper-item

滑块

默认宽度和高度都是100%

swiper-item相当于html中div盒子中的图片，每有一个图片，就需要一个swiper-item来装图片内容，也可以使用循环的方式绑定图片

navigator

导航组件 类似超链接标签

open-type 有效值：

示例：
采用循环的方式：
wxml代码：

<swiper class="banners" indicator-dots autoplay  indicator-active-color="#d43c33" indicator-color="ivory">
    <swiper-item wx:for="{{imgUrl}}" wx:key="bannerId">
      <image mode="widthFix" src="{{item}}" />
    </swiper-item>
</swiper>
1
2
3
4
5

js data数据代码配置：

  data: {
    imgUrl: [
      "图片url",
      '图片url',
      '图片url',
      '图片url',
      '图片url',
      '图片url'
    ], //轮播图
  },
1
2
3
4
5
6
7
8
9
10

wxss代码配置：

.banners{
  width: 100%;
  height: 300rpx;
}

.banners image{
  height: 100%;
  width: 100%;
}
1
2
3
4
5
6
7
8
9

video

视频。该组件是原生组件，使用时请注意相关限制。

<video src="{{src}}" controls>video>
1