微信开发的代码组成

JSON 配置

JSON 是什么

• JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

常见的json 配置文件有3种：

1. 小程序配置 app.json：做全局配置
2. 页面配置 page.json：对小程序具体页面的配置
3. 工具配置 project.config.json：对开发者工具的个性化配置，如域名校验、代码上传时自动压缩等

注意：小程序无法在运行过程中去动态更新JSON

JSON 语法

• JSON文件都是被包裹在一个大括号{} 中
• JSON 中无法使用注释
• 键名需要双引号” ” 包裹
• 键值之间有冒号 : 分隔
• 键值对之间用逗号 , 分隔
• JSON的值只能是以下几种数据格式：
  • 数字，包含浮点数和整数
  • 字符串，需要包裹在双引号中
  • Bool值，true 或者 false
  • 数组，需要包裹在方括号中 []
  • 对象，需要包裹在大括号中 {}
  • Null

wxml摸版

WXML 全称是 WeiXin Markup Language 微信标记语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。
创建WXML 文件的方法：在app.json 中的“pages/index/index” 上新增一行 “pages/wxml/index” ，便会自动创建WXML 文件
注意：在WXML里的标签，就是组件的意思，这些组件是微信给封装好的。我们以后也可以自定义组件。

数据绑定

WXML 通过 {{ 变量名 }} 来映射js里的 data 数据。
变量名是大小写敏感的，也就是说 {{name}} 和 {{NAME}} 是两个不同的变量。
没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中。
示例：

	<text id="{{id}}">{{msg}}</text>
	data: {
    		id:1,
    		msg:'开课吧’
},

注：{{}} 叫做Mustache 语法。

{{ }}语法逻辑

{{}} 具有两种功能：动态渲染、逻辑运算。
{{}} 中除了变量名，还可以放置数字、字符串，并且做一些逻辑运算。
常见的逻辑运算的语法：

• 算数运算
• 字符串拼接
• 三元运算

WXML中的条件循环

在WXML 里有一套if、elif、else 组合。
就比如下面的例子：如果我附近有呷哺，选择火锅；否则如果有肯德基，就选择汉堡；否则，就回家做饭。

  <text wx:if="{{name==='呷哺'}}">火锅</text>
  <text wx:elif="{{name==='肯德基'}}">汉堡</text>
  <text wx:else>回家做饭</text>

<block>可以一次性判断多个组件标签。
<block wx:if="{{true}}">
  <view> 1 </view>
  <view> 2 </view>
</block>

列表渲染

WXML 使用wx:for 渲染列表，默认数组的当前项的变量名为item，下标名为index。

<view wx:for="{{food}}" wx:key="id">
  <text>{{item.name}}</text>
</view>
food:[{id:1,name:'粥'},{id:2,name:'面条'},{id:3,name:'混沌'}]

更多渲染方式

列表渲染 – 唯一标志符

1. wx:key 是列表中每一个项目的唯一的标识符。
   这个标志符可以提高wxml 动态渲染的效率。比如列表数据中的某一项数据发生改变时，微信会根据唯一标志符，找找到wxml 列表中与此条数据对应的项目，然后只对此项目进行渲染。
   这和vue、react 里的diff 算法是一个原理。
2. wx:key 的赋值方式：

• 列表项目的属性，如

<switch wx:for="{{objectArray}}" wx:key="unique" > {{item.id}} </switch>

• 列表项目自身，如

<switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>

摸版

wxml 中的重复性元素，可以制作成模板，从而方便批量修改。

<!-- template 模板需要设置name -->
<template name="hotel">
  <text>{{name}}：</text>
  <text wx:for="{{food}}" wx:key="id">{{index?'、':''}}{{item.name}}</text>
</template>

<!-- 使用模板时，is 指定其使用的模板，data 指定模板数据 -->
<template is=“hotel” data=“{{name,food}}"></template>  

共同属性

所有wxml 标签都支持的属性称之为共同属性

wxss样式

文件组成

项目公共样式：app.wxss，它会作用到小程序的每个页面。
页面样式：与app.json注册过的页面同名且位置同级的WXSS文件。
内联样式：在wxml 中，写在标签的style 属性里的样式
其它样式：可以被项目公共样式和页面样式引用的样式，比如模板文件里的样式。
注：小程序中不需要考虑样式文件的请求数量，不用像前端那样合并css 文件。

wxss和css不一样的地方

• wxss拥有相对的尺寸单位rpx，一个单位的rpx 是手机宽度的1/750
• 外联样式可用@import 导入
• background-image 里的图片为网络图片时，其图片所在网络的域名要经过微信许可。
• position 为absolute 的元素，需要position 为fixed 的容器。（这是由小程序的文档流中不存在- window、document对象导致的）

选择器

学过css 的都知道，选择器就是选择HTML 标签的一种方式。
小程序里的选择器就是这个意思，它选择的是WXML 元素。

选择器的优先级

WXSS优先级与CSS类似，权重如图：

扩展：WeUI.wxss

WeUI 是一套与微信原生视觉体验一致的基础样式库
WeUI 由微信官方设计团队为微信内网页和微信小程序量身设计，令用户的使用感知更加统一。
WeUI 包含button、cell、dialog、progress、toast、article、actionsheet、icon等各式原生组件的样式。

javascript脚本

作用域

小程序的作用域同 NodeJS 比较相似。
在一个文件中声明的变量和函数只在该文件中有效。
因此，在不同的文件中可以声明相同名字的变量和函数，不会互相影响。
全局函数 getApp() 可获取全局对象，通过此对象可设置全局变量。如：
const global = getApp()
global.globalData.motto=‘好好学习’

模块化

es6 中模块化语法可以应用于小程序中。
A.js 中建立A 模块

export default class A{
	constructor(name){
		this.name = name
	}
}

在index.js 中引入A 模块

import A from './A.js'
Page({
	data: {
		fruit:new A('苹果')
	},
})