微信小程序
一、准备工作
- 申请账号
- 安装开发工具（微信自己的开发工具）
-
微信自己弄了一套语言，目录结构如下
结构
图片.png
有四种不同类型的文件
- .json 后缀的 JSON 配置文件
- .wxml 后缀的 WXML 模板文件（相当于web中的HTML）
- .wxss 后缀的 WXSS 样式文件（CSS）
- .js 后缀的 JS 脚本逻辑文件(JS)
二、配置
1.小程序配置 app.json
对当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等
很必要的是"pages"的配置（路径一定要对），描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
{
"pages":[
"pages/index/index",
"pages/logs/logs"
],
"window":{
"backgroundTextStyle":"light",
"navigationBarBackgroundColor": "#fff",
"navigationBarTitleText": "WeChat",
"navigationBarTextStyle":"black"
}
}
//window字段 —— 小程序所有页面的顶部背景颜色，文字颜色定义在这里的。
三、WXML模板、WXSS样式、JS交互
每一个文件下的index是本文件的根文件，可以对整个文件操作，而每个页面下的则只对本页面作用
1.WXML
- 标签用的是 view, button, text 等，都是已包装好的基本能力，小程序还有地图
<map></map>、视频<video></video>等等组件能力。 - 还有类似于VUE的 wx:if 的属性以及 {{ }} 的表达式。用 MVVM 的开发模式，把渲染和逻辑分离。简单来说就是不要再让 JS 直接操控 DOM，JS只需要管理状态即可，然后再通过一种模板语法来描述状态和界面结构的关系即可。
如显示hello world
//WXML
<text></text>
//JS
this.setData({ msg: "Hello World" })
//通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。
- 仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。
2.WXSS
- 具有 CSS 大部分的特性，也有了一些扩充和修改。
- 新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
- 提供了全局的样式和局部样式。和前边 app.json的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
- WXSS 仅支持部分 CSS 选择器
3.JS
- 和用户做交互：响应用户的点击、获取用户的位置等。
- 在 JS 中调用小程序提供的丰富的 API，利用这些 API 可以很方便的调起微信提供的能力，例如获取用户信息
gegUserInfo、微信支付requsetPayment等。文件来处理用户的操作。
四、逻辑层
1.App()
注册一个小程序。接受一个 object 参数，其指定小程序的生命周期函数等。
全局的 getApp() 函数可以用来获取到小程序实例。
// other.js
var appInstance = getApp()
console.log(appInstance.globalData) // I am global data
- 注意：
1.App() 必须在 app.js 中注册，且不能注册多个。
2.不要在定义于 App() 内的函数中调用 getApp() ，使用 this 就可以拿到 app 实例。
3.不要在 onLaunch 的时候调用 getCurrentPages()，此时 page 还没有生成。
4.通过 getApp() 获取实例之后，不要私自调用生命周期函数。
2.注册页面Page
Page()函数用来注册一个页面，接受一个 object 参数，其指定页面的初始数据、生命周期函数、事件处理函数等。
是在小程序里面用到很重要的一个函数。（基本都要用）
- 初始化数据将作为页面的第一次渲染。
data 将会以 JSON 的形式由逻辑层传至渲染层，所以其数据必须是可以转成 JSON 的格式：字符串，数字，布尔值，对象，数组。
渲染层可以通过 WXML 对数据进行绑定。
<view>{{text}}</view>
<view>{{array[0].msg}}</view>
Page({
data: {
text: 'init data',
array: [{msg: '1'}, {msg: '2'}]
}
})
-
生命周期函数
mina-lifecycle.png
onLoad: 页面加载
onShow: 页面显示
onReady: 页面初次渲染完成
onHide: 页面隐藏
onUnload: 页面卸载
-
页面相关事件处理函数
onPullDownRefresh: 下拉刷新
onReachBottom: 上拉触底
onPageScroll: 页面滚动
onShareAppMessage: 用户转发 -
事件处理函数
Page 中还可以定义一些特殊的函数：事件处理函数。在渲染层可以在组件中加入，当达到触发事件时，就会执行 Page 中定义的事件处理函数。
<view bindtap="viewTap"> click me </view>
Page({
viewTap: function() {
console.log('view tap')
}
})
Page.prototype.route:
route 字段可以获取到当前页面的路径。
Page.prototype.setData():
setData 函数用于将数据从逻辑层发送到视图层（异步），同时改变对应的 this.data 的值（同步）。
setData也是很重要的一个函数
注意：
1.直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的，还会造成数据不一致。
2.不要把 data 中任何一项的 value 设为 undefined
3.页面路由
- 在小程序中所有页面的路由全部由框架进行管理。
-
getCurrentPages()函数用于获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
4.模块化
-
文件作用域
在 JavaScript 文件中声明的变量和函数只在该文件中有效；不同的文件中可以声明相同名字的变量和函数，不会互相影响。 -
通过全局函数
getApp()可以获取全局的应用实例，如果需要全局的数据可以在App()中设置
可以将一些公共的代码抽离成为一个单独的 js 文件，作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。 -
注意：require 暂时不支持绝对路径
5.API
6.场景值
- 可在 App 的 onlaunch 和 onshow 中获取场景值，部分场景值下还可以获取来源应用、公众号或小程序的appId
五、视图层
1.WXML
-
数据绑定
WXML 中的动态数据均来自对应 Page 的 data。
使用双大括号{{ }}将变量包起来 -
列表渲染
wx:for
控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item。
如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx 控制属性。<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。
用 wx:key 来指定列表中项目的唯一的标识符。 -
条件渲染
wx:if
在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块，也可以用 wx:elif 和 wx:else 来添加一个 else 块。
可用<block></block>
wx:if 和 hidden区别：
wx:if 的条件值切换时，框架有一个局部渲染的过程，会确保条件块在切换时销毁或重新渲染。 wx:if 也是惰性的，若在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。
hidden，组件始终会被渲染，只是简单的控制显示与隐藏。
一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。
- 模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入
<template is="msgItem" data="{{...item}}"/>
模板拥有自己的作用域，只能使用 data 传入的数据以及模版定义文件中定义的 <wxs /> 模块。 - 事件
分为冒泡事件和非冒泡事件：
冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
key 以bind（冒泡）或catch（阻止冒泡）开头。
捕获阶段，事件到达节点的顺序与冒泡阶段相反。
- 引用
WXML 提供两种文件引用方式import和include。
2.WXS
- 模块
WXS 代码可以编写在 wxml 文件中的 <wxs> 标签内，或以 .wxs 为后缀名的文件内。
<wxs> 模块只能在定义模块的 WXML 文件中被访问到。使用 <include> 或 <import> 时，<wxs> 模块不会被引入到对应的 WXML 文件中。
<template> 标签中，只能使用定义该 <template> 的 WXML 文件中定义的 <wxs> 模块。 - 变量
- 注释
// 方法一：单行注释
/*
方法二：多行注释
*/
/*
方法三：结尾注释。即从 /* 开始往后的所有 WXS 代码均被注释
- 运算符
- 语句
- 数据类型：
number： 数值
string：字符串
boolean：布尔值
object：对象
function：函数
array: 数组
date：日期
regexp：正则 - 基础类库
3.WXSS
- 尺寸单位 ：rpx
- 样式导入：@import语句可以导入外联样式表 (相对路径)
- 内联样式
style、class - 选择器
.class
#id
element
element element
::after
::before - 全局样式和局部样式
定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。 - 基础组件快速开发
- 自定义组件
