小程序配置详解

小程序新生成时的目录

有4中不一样的文件类型

1. .json 后缀的 JSON 配置文件
2. .wxml 后缀的 WXML 模板文件
3. .wxss 后缀的 WXSS 样式文件
4. .js 后缀的 JS 脚本逻辑文件

 

json

app.json 是对当前小程序的全局配置，包括了小程序的全部页面路径、界面表现、网络超时时间、底部 tab 等

下面是一个包含全部配置选项的app.json：

{
  "pages": [ "pages/index/index", "pages/logs/index" ], "window": { "navigationBarTitleText": "Demo" }, "tabBar": { "list": [{ "pagePath": "pages/index/index", "text": "首页" }, { "pagePath": "pages/logs/logs", "text": "日志" }] }, "networkTimeout": { "request": 10000, "downloadFile": 10000 }, "debug": true }

　　

1. pages字段 —— 用于描述当前小程序全部页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪一个目录。
2. window字段 —— 小程序全部页面的顶部背景颜色，文字颜色定义在这里的。
3. tabBar字段——若是小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏能够切换页面），能够经过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
4. networkTimeout字段——能够设置各类网络请求超时时间
5. debug字段——能够在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有Page的注册，页面路由，数据更新，事件触发 。 能够帮助开发者快速定位一些常见的问题。

WXML

网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 一般是用来处理这个页面和用户的交互

WXML 相似于 HTML

 

WXSS样式

WXSS 具备 CSS 大部分的特性，小程序在 WXSS 也作了一些扩充和修改。

1. 新增了尺寸单位。在写 CSS 样式时，开发者须要考虑到手机设备的屏幕会有不一样的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者能够免去换算的烦恼，只要交给小程序底层来换算便可，因为换算采用的浮点数运算，因此运算结果会和预期结果有一点点误差。
2. 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你能够写一个 app.wxss 做为全局样式，会做用于当前小程序的全部页面，局部页面样式 page.wxss 仅对当前页面生效。
3. 此外 WXSS 仅支持部分 CSS 选择器

JS 交互逻辑

在小程序里边，咱们就经过编写 JS 脚本文件来处理用户的操做。

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

　　点击 button 按钮的时候，咱们但愿把界面上 msg 显示成 "Hello World"，因而咱们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应此次点击操做：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})