代码组成
小程序由配置文件json，模板文件wxml，样式代码wxss，以及逻辑代码javascript组成
一、JSON配置
小程序中，JSON扮演静态配置角色
在创建的小程序的根目录下，有两个json文件，app.json和project.config.json，在每个pages页面目录下，也有一个json文件，这几个json文件分别是什么功能呢？
app.json
app.json文件是当前小程序的全局配置，包括所有页面路径、界面表现、网络超时时间、底部TAB等，配置方式如下
代码片段1-1：
"pages": ["pages/index/index", "pages/logs/logs"],
"window": {
"backgroundTextStyle": "light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle": "black"
}
}
其中：
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。
工具配置 project.config.json
你在工具上做的任何配置都会写入到project.config.json这个文件中，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
页面配置 page.json
用于对单个页面进行配置，页面的配置只能设置 app.json 中部分 window 配置项的内容，页面中配置项会覆盖 app.json 的 window 中相同的配置项
二、WXML
wxml在小程序中充当html的角色，wxml也由标签和属性构成，但也有不一样的地方
1.小程序中的标签是包装好的标签，如view, button, text ，还提供了地图、视频、音频等等组件能力
2.多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式，使用方式与vue等MVVM框架相似
模板语法
通过{{}}将变量绑定到界面上：<text> {{text}}</text>
属性也可以动态绑定：<text data-test="{{test}}"> hello world</text>
注意：没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中
逻辑语法
{{}}内可以进行简单的逻辑运算
三元运算：<text>{{ a === 10? "变量 a 等于10": "变量 a 不等于10"}}</text>
算数运算：<view> {{a + b}} + {{c}} + d </view>
字符串拼接：<view>{{"hello " + name}}</view>
{{ }}中还可以直接放置数字、字符串或者是数组
<text>{{[1,2,3]}}</text>
<!-- 输出 1,2,3 -->
<text>{{"hello world"}}</text>
<!-- 输出 hello world -->
条件逻辑
WXML中使用 wx:if="{{condition}}"进行逻辑渲染
<view wx:if="{{condition}}"> True </view>
使用wx:elif和wx:else来书写一个else块
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
列表渲染
在组件上使用wx:for进行列表渲染，默认变量index为数组当前下标，变量item为数组的当前项
<!--WXML-->
<view wx:for="{{list}}">{{index}}: {{item.message}</view>
<!--对应的脚本-->
Page({
data: {
list: [{message: 1},{message: 2},{message: 2}]
}
})
可以使用wx:for-item指定数组当前元素的变量名，可以使用wx:for-index指定数组当前下标的变量名
<view wx:for="list" wx:for-item="name" wx:for-index="idx">{{idx}}:{{name}}</view>
wx:key用来指定列表中项目的唯一标识符，取值可以是以下两种
1.字符串。必须是列表中的某一个属性值，且该属性值在列表中必须是唯一的
2.使用关键字this与item本身进行绑定，这就要求item本身是唯一的数字或字符串
在数据发生改变的时候，绑定了key的组件只会被重新排序，不会被重新渲染，以确保组件保持自身的状态
<!--this绑定示例-->
<switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>
模板
WXML提供模板，可以在模板中定义代码片段，在别处调用
<!--
{
index: 0,
msg: 'this is a template',
time: '2016-06-18'
}
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
<template is="msgItem" data="{{...item}}"/> //使用data传入模板需要的数据
<!-- 输出
0: this is a template Time: 2016-06-18
-->
is可以动态决定需要渲染哪个模板
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
引用
WXML提供了两种文件引用方式import和include
在一个wxml文件中通过import的方式可以使用另一个wxml文件中定义的模板
在 item.wxml 中定义了一个叫 item的 template ：
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml，就可以使用 item模板：
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是 import 不具有递归的特性。
include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置
共同属性
所有wxml标签都支持的属性称为共同属性
微信截图_20190110142246.png
三、WXSS
介绍
wxss充当css的角色
app.wxss中为项目公共样式
pages下的wxss为页面样式
其它样式可以被公共样式和页面样式引用
在小程序开发中不必考虑样式文件的请求数量，样式代码最终会被编译优化
尺寸单位
wxss是使用rpx作为尺寸单位
样式引用
@import './test_0.wxss'
小程序中的样式文件引用不会产生多余的文件请求
内联样式
小程序支持动态更新内联样式
<view style="color: {{color}};font-size: {{fontSize}}"></view>
选择器
小程序支持id，类，标签和伪元素（after,before）选择器
样式优先级
小程序样式优先级与css相同
官方样式库
小程序提供了WeUI.wxss基础样式库 https://github.com/Tencent/weui-wxss
WeUI是一套与微信原生视觉体验一致的基础样式库，由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生。
javascript脚本
浏览器中的javascript由ECMAScript，BOM和DOM组成
小程序中的javascript由ECMAScript 以及小程序框架和小程序 API 来实现的，没有BOM和DOM对象，所以类似 JQuery、Zepto这种浏览器类库是无法在小程序中运行起来的
作用域
在文件中声明的变量和函数只在该变量内有效
如果想定义全局函数：global.globalValue = 'globalValue'
需要注意的是必须保证全局变量定义的文件需要在使用的文件之前执行，当需要保证全局的数据可以在任何文件中安全的被使用到，那么可以在 App() 中进行设置
//app.js 定义全局变量
App({
globalData: 1
})
//a.js使用全局变量
var app = getApp()
//改变全局变量的值
app.globalData++
网友评论