用户性别

wxml

数据绑定

mustache方式：{{message}}

绑定文本：

在index.js中

  1. Pages({
  2.   data: {
  3.       message: "Hello, world"
  4.   }
  5. })

在index.wxml中：

  1. <view>
  2.     <text>{{message}}</text>
  3. </view>

绑定属性：

  1. Pages({
  2.   data: {
  3.       theName: "Jack"
  4.   }
  5. })
  1. <view>
  2.     <text data-name="{{theName}}"></text>
  3. </view>

运算符绑定

  1. Pages({
  2.   data: {
  3.       flag: false
  4.   }
  5. })
  1. <view hidden="{{flag ? true : false}}">
  2.     Hidden
  3. </view>

将显示Hidden

还有：字符串运算，组合式绑定，扩展运算符绑定。

id，class、style、hiddle、data-、bind / catch*

列表渲染

  1. <!--index.html-->
  2. <view>
  3.     <block wx:for="{{items}}" wx:for-item="item" wx:key="index"> 
  4.         <view>{{index}}:{{item.name}}</view>
  5.     </block>
  6. </view>
  8. //index.js
  9. Page({
  10.     data: {
  11.         items: [
  12.             {name: "A"},
  13.             {name: "B"},
  14.             {name: "C"},
  15.             {name: "D"},
  16.             {name: "E"},
  17.         ]
  18.     }
  19. })

最终显示：
0:A
1:B
2:C
3:D
4:E

条件渲染

  1. <!---index.wxml-->
  2. <view>今天吃什么？</view>
  3. <view wx:if="{{codition === 1}}">
  4.     饺子
  5. </view>
  6. <view wx:elif="{{codition === 2}}">
  7.   米饭
  8. </view>
  9. <view>
  10.     面食  
  11. </view>
  13. //index.js
  14. Page({
  15.     data: {
  16.         condition: Math.floor(Math.random()*3+1)
  17.     }
  18. })

最终结果：
今天吃什么？
面食（这个不一定，Math.random()是0-1的浮点随机数，Math.floor向下取整，整体是取1-3的随机整数）

wx:if条件渲染和hidden可以类比，wx:if在页面频繁切换时影响效率，hiddle在初始化加载时慢。

模板引用

  1. <!--index.wxml-->
  2. <!--模板-->
  3. <template name="tempItem">
  4.     <view>
  5.       <view>收件人：{{name}}</view>
  6.     <view>联系方式：{{phone}}</view>
  7.     <view>地址：{{address}}</view>
  8.   </view>
  9. </template>
  10. <!--引用模板-->
  11. <template is="tempItem" data="{{...item}}"></template>
  1. //index.js
  2. Page({
  3.     data: {
  4.         item: {
  5.       name: "张三",
  6.       phone: "188",
  7.       address: "中国"
  8.     }
  9.     }
  10. })

最终输出：
收件人：张三
联系方式：188
地址：中国

文件引用

import和include

import

  1. <!--index.wxml-->
  2. <import src="a.wxml"></import>
  3. <template is="a"></template>
  5. <!--a.wxml-->
  6. <view>Hello</view>
  7. <template>
  8.     World!
  9. </template>

最终只会打印出World!，因为只打印引用的模板里的内容。

  1. <!--index.wxml-->
  2. <import src="a.wxml"></import>
  3. <template is="a"></template>
  5. <!--a.wxml-->
  6. <import src="c.wxml"></import>
  7. <template name="a">
  8.     This is a.wxml
  9. </template>
  11. <template is="b"></template>
  13. <template name="b">
  14.     This is b.wxml
  15. </template>

最终输出：This is a.wxml

作用域，只能引用template里的内容，template里再引用别的template是不会被引用的，小程序的设计避免死循环问题。避免a引b，b引a

include

和import不同，include是把目标文件除模板之外的东西都拷贝。

src引用可以是绝对，也可以是相对路径。

  1. <!--index.wxml-->
  2. <include src="a.wxml"/>
  3. <template is="a">
  4. </template>
  6. <!--a.wxml-->
  7. <template name="a">
  8.     <view>
  9.         This is a.wxml
  10.     </view>
  11. </template>
  12. <view>Hello.world</view>

最后输出：
Hello,world

WXSS

WeiXin Style Sheets是一套样式语言，用于描述WXML的组件样式
CSS（Cascading Style Sheets）是一套样式语言，描述html和xml的呈现。

WXSS基于CSS的修改：
1、尺寸单位rpx；响应式像素
2、样式导入；
3、内联样式
4、选择器；

rpx：
设备像素（device pixels）设备控制显示最小物理单位；
CSS像素（css pxels）逻辑像素；
PPI/DPI（pixel per inch）每英寸拥有像素数量；
image.png
DPR（device pixel Ratio）手机某一方向上设备像素和CSS像素之比

rpx是微信团队开发的。rpx最终转换为rem

WXSS特性之样式

外联样式导入

使用@import 导入，好处是，不同页面有相同值元素时，可以抽离成外联样式成文件，从而减少文件资源大小。

  1. <!--index.wxml-->
  2. <view class="container">
  3.     Hello,world!
  4. </view>
  1. /** index.wxss **/
  2. @import './assets.wxss';
  3. .container {
  4.     color: red;
  5. }
  1. /** assets.wxss **/
  2. .container {
  3.     border: 1px solid #000;
  4. }

image.png

样式文件执行有顺序，从上到下，从左到右，如果在index.wxss中定义container的border是黄色，则最终会覆盖黑色，结果是黄色。

wxss不仅支持外联样式，也支持内联样式。

image.png

wxss选择器

image.png

选择器优先级：

image.png

!important优先级最高，会覆盖其他任何生命，会破坏样式固有的级联规则。什么时候使用呢？
用别人插件时，在插件外用!important修改插件样式。

wxml和wxss使页面基本视图，页面怎么能动态交互起来，那就是javascript

javaScript

轻量、解释型、面向对象的头等函数语言，动态的基于原型和多范式脚本语言，支持面向对象、命令式、函数式的编程风格。
java和javascript关系相当于雷锋和雷峰塔的关系。
推荐书：
《javascript高级程序设计》《javascript权威指南》

nodeJs中JavaScript实现

image.png

Native是原生模块，可以具备javascript不具备的能力；
npm是包管理系统，世界上最大开源库生态系统；

nodejs常用于后端实现；

小程序javascript的实现

image.png

和浏览器的javascript相比，没有Bom和Dom对象，所以jQuery、是无法使用的。缺少nodeJs的Native和Npm模块。

和javascript相似的ECMAScript：
语法、类型、语句、关键字、从操作符、对象
image.png

nodeJs的js、浏览器里的js、小程序的js都是基于ECMAScript的实现，各封装了其模块和特性。

浏览器js组成：

image.png

小程序宿主环境差异

image.png

IDE微信开发者工具是nwjs渲染。

大部分使用ES5、ES6。IOS8，IOS9并没兼容ES6，所以开发者工具中和真机，同样代码表现是不同的，所以用远程调试。

WXS

逻辑层javascript，小程序自己的脚本语言WXSS
image.png

wxs模块作用域：私有，对外不可见。
index.wxml中module定义模块名，message对外不可见，用module对象的exports暴露给外部；
image.png
可以用require函数引用其他wxs文件：
以下index.wxml中中src引用了m2.wxs，module指定外部wxs模块名；m2.wxs通过require引入m1.wxs，
这样index.wxml中就可以使用message变量了。需要注意，同一个页面不能同时引用wxs名，否则后面的会覆盖前面的。
image.png

和ES5使用方式相同。

注释

单行注释：//
多行注释：/ /
结尾注释：/*
image.png

可以看到打印出的是1，说明多行注释生效。
/*后面的d=3没打印出来，说明结尾注释生效。

运算符

image.png
基本：加减乘除
一元：左移，自增，正负运算；
位运算：按位与。。
等值：等于、非等于、全等、非全等
赋值：a=a+1
二元：a || b，a and b

WXS语句

和js差不多，但不支持try、catch语句

WXS数据类型

image.png

生成date用getDate函数生成，regexp用getRegexp函数，不能用new运算。判断数据类型时用construct属性判断。

WXS提供了以下6种基础类库：
image.png
和js ES5标准一样。其他基础类库去ES5标准的js标准文档了解。

到目前为止，小程序的框架基本四个组成部分学完了

MINA框架讲解

image.png
三部分：
视图层（wxml、wxss样式）、逻辑层（manager处理逻辑，服务中心，封装API接口，只有一个App Service）、系统层（原生能力，视图层和逻辑层双线程通信，提供了数据传输，事件系统，二者通过系统层提供的jsBridge通信，逻辑层把事件变化通知到视图层，页面更新）

AppService调用setData函数将数据从逻辑层传到视图层，将差异应用到节点树。可以了解ES5的原理。

小程序运行机制

第一次启动很慢，后面打开就快了

1、冷启动：
首次打开后，被微信销毁后，再次打开；
销毁：

  • 小程序进入后台时，一定时间内，客户端会帮助维护状态，超过时间后被销毁，目前是5min
  • 短时间内收到两次告警时，会被销毁，时间是5s

2、热启动：
用户已打开，一定时间再次打开，后台切换为前台。

3、更新
如果再次打开时，小程序程序包已经更新版本，这是后微信怎么处理？
冷启动发现有新版本，如发现有版本更新，则会异步下载新包，同时用本地包打开小程序，再下次启动时会用新包。如果要立即使用新包，可以调用API，这个在后面讲。

小程序加载流程

image.png

CDN（内容分发网络）提供响应速度，提高效率。

生命周期

应用生命周期

image.png

第一次进入时，客户端会初始化运行环境，同时在CDN或者本地拿到代码包，注入到运行环境，初始化完毕，会向逻辑层AppJs的App实例发送OnLaunch事件，逻辑层App.js的APP构造器的参数的onLaunch方法会被调用，进入后，用户点击左上角关闭，或手机Home建离开小程序后，没被销毁，进入后台，逻辑层App.js的APP构造器的参数的onHide方法会被调用，再次打开时，唤醒后台进入前台，逻辑层App.js的APP构造器的参数的onShow方法会被调用，当脚本错误，或API调用错误，会触发OnError方法，给其传错误信息，GlobalData代表，应用全局数据。

页面生命周期

image.png

初始化时，会逻辑层定义的配置实例发送onLoad，onLoad会被调用，再销毁前只被调一次，onLoad回调，会拿到当前页面的打开参数，页面显示后，会调用onShow方法。其他页面返回到当前页面也会调用onShow。初次渲染完成后onReady方法被调用，同样，页面没销毁前只被调用一次。当onReady调用完后，逻辑层和视图层就可以交互，从当前打开新的页，会调用onHide方法，关闭当前页会触发onUnload方法。data表示当前页面小程序数据。

image.png

两个线程：view、appservice
appservice创建后一次调用onLoad、onShow，可请求服务器数据
view创建后告诉appservice已初始化好，appservice会给view初始化好的数据，view拿到后触发首次渲染，告诉appservice渲染完毕，appservice会接收到onReady调用，onReady调用后，服务器上数据就拿到了，再次发送给view，view拿到后再次渲染……

页面路由

多页面小程序，路由都由框架管理，用栈的方式维护页面。
image.png

初始化：a打开，栈里只有a
打开新页面：a基础上打开b，b入栈，有啊a、b两个页面
页面重定向：b重定向到c，c入栈，b出栈，只有啊a、c两个页面。
页面返回：c页面点返回，c出栈，只剩a页面
Tab切换：所有页面都出栈，只留tab页
重加载：所有页面都出栈，只留tab页

触发方式

image.png

事件流

image.png

如何绑定组件上某个事件呢？
image.png

点击后，控制台打印内容：
type：触发事件类型；
timestamp：时间戳；
target：事件根源组件；组件id，类型，data自定义属性集合；
currentTarget：事件绑定当前组件，当前组件id，类型，data自定义属性集合；
二者区别：后面讲事件流时会讲到；
touches：数组，每个元素都是一个touch对象，表示停留在屏幕上触摸点信息，
changedTouches：和touches数据格式一样，表示有变化的触摸点，从有到无，无到有，位置变化。
detail：表示绑定各个事件所携带的数据，格外信息。比如，点击时x，y表示触摸点距离文档左上角的距离，媒体播放状态的事件会携带些媒体状态，时间戳等。
_requireActive：

当给某一个组件绑定事件，并触发时，小程序怎么处理？
小程序的事件模型处理：
image.png

三阶段：自上向下
事件捕获阶段：所绑定的事件会才从最外层节点，向下传播到目标节点元素，依次检查，元素经过的节点，是否绑定了同一事件类型的监听函数，如果有就执行对应函数；

事件处理函数：到达目标节点，执行事件函数；

事件冒泡函数：目标节点自下而上冒泡到最外层节点，依次检查经过节点是否绑定同样事件类型定义的回调函数，有则执行。
target：事件根源组件；组件id，类型，data自定义属性集合；
currentTarget：事件绑定当前组件，当前组件id，类型，data自定义属性集合；

image.png

可捕获事件：
touchstart：手指按下屏幕的事件；
touchmove：手指在按下屏幕后移动的事件；
touchcancel：手指在屏幕上时，被来电提醒打断事件；
touchend：离开屏幕事件；
tap：手指点击屏幕一次操作，小于350ms；
longpress：手指长按，超过350ms；不会触发tap事件；
longtap：手指长按，超过350ms；会触发tap事件；
推荐使用longpress

可冒泡事件：
可捕获事件都是可冒泡。
还包括动画事件：
transitionend：界面动画结束时触发；
transitionstart：wxss动画开始；
transitioniteration：wxss动画执行一次迭代；
animationend：wxss动画结束；
touchforcechange：在iphone设备下，有3Dtouch触发后；

image.png
image.png

点container-C后，控制台打印click container-C、click container-B、click container-A，向上冒泡，可以看到bind属性不会阻止事件冒泡。
image.png

image.png

image.png

点击B后，先A到B的捕获事件，后B到A的冒泡事件。可以看出bind不会阻止冒泡，capture可以绑定捕获阶段，catch阻止捕获和冒泡事件。

不懂。。。。

view容器

image.png

提供了8类组件：
image.png

视图容器组件

控制页面内容，理解为盒子，盒子里可以有更小的盒子
image.png

view：最常用容器组件

官方文档：https://developers.weixin.qq.com/miniprogram/dev/component/view.html
image.png

image.png

点击红色后变为70%透明度的黑色，同时绿色块也被点击；加了hover-stop-propageation=”true”后，点击红色块时，绿色块没有点击效果。

scroll-view：滚动容器组件

可滚动的视图区域组件。
官网文档：
https://developers.weixin.qq.com/miniprogram/dev/component/scroll-view.html

image.png

示例有点儿复杂，再视频中消化。第31讲：scroll-view容器。

swiper：轮播组件

滑块容器。
https://developers.weixin.qq.com/miniprogram/dev/component/swiper.html
image.png

示例有点儿复杂，再视频中消化。第32讲：swiper滑块容器。
wx:key=”this” this表示当前元素item，但只能是数字和字符串。

movable-view：移动、缩放组件

可移动的视图容器，在页面中可以拖拽滑动。movable-view必须在 movable-area 组件中，并且必须是直接子节点，否则不能移动。
https://developers.weixin.qq.com/miniprogram/dev/component/movable-view.html
image.png

示例有点儿复杂，再视频中消化。第33讲：movable-view移动，缩放容器。

调试器、模拟器中是不能缩放的，需要在真是机器上做。

cover-view原生视图容器

和view不同，可以盖原生组件，比如clrs、radio
https://developers.weixin.qq.com/miniprogram/dev/component/cover-view.html
image.png

cover-view和cover-image结合使用，播放视频，暂停和播放图片会覆盖在cover-view上显示。

基础内容

image.png

icon

图标组件
https://developers.weixin.qq.com/miniprogram/dev/component/icon.html
icon的类型，有效值：success, success_no_circle, info, warn, waiting, cancel, download, search, clear
image.png
image.png

文本组件text

最基本文本展示。
selectable表示是否可选，可选即可复制。
image.png

rich-text富文本

可以去展示文本的html标签。
https://developers.weixin.qq.com/miniprogram/dev/component/rich-text.html

image.png

progress进度条

https://developers.weixin.qq.com/miniprogram/dev/component/progress.html

image.png

表单组件

image.png

button

https://developers.weixin.qq.com/miniprogram/dev/component/button.html
image.png

查看API文档，可以获取用户手机号码。

checkbox多选组件

https://developers.weixin.qq.com/miniprogram/dev/component/checkbox.html
image.png

form

表单提交
https://developers.weixin.qq.com/miniprogram/dev/component/form.html
image.png

input

https://developers.weixin.qq.com/miniprogram/dev/component/input.html
image.png

label

https://developers.weixin.qq.com/miniprogram/dev/component/label.html

picker

https://developers.weixin.qq.com/miniprogram/dev/component/picker.html
从底部弹起的滚动选择器。底部弹起的收货地址。
image.png

picker-view

嵌入页面的滚动选择器。其中只可放置 picker-view-column组件，其它节点不会显示。https://developers.weixin.qq.com/miniprogram/dev/component/picker-view.html
有时候不让组件从底部弹起，而是让用户页面选择。
image.png

radio

单选项目。
https://developers.weixin.qq.com/miniprogram/dev/component/radio.html
image.png

slider

滑动选择器。
https://developers.weixin.qq.com/miniprogram/dev/component/slider.html

switch

开关选择器。一个checkbox时可以用switch代替，可以绑定bindChange事件。
image.png

textarea

多行输入框。
https://developers.weixin.qq.com/miniprogram/dev/component/textarea.html

导航

navigator

帮助我们小程序应用页面内跳转。

值 说明 最低版本
navigate 对应 wx.navigateTo 或 wx.navigateToMiniProgram 的功能 表示最新打开的页面
redirect 对应 wx.redirectTo 的功能 当前页面重定向到另一个页面，原地跳转
switchTab 对应 wx.switchTab 的功能 当前页面切换到另一个tab页面
reLaunch 对应 wx.reLaunch 的功能 在当前页重新加载
navigateBack 对应 wx.navigateBack 的功能 当前页进行返回操作
exit 退出小程序，target="miniProgram"时生效 2.1.0

image.png

媒体组件

image.png

audio

音频

image.png

image

image.png

video

image.png

camera

系统相机组件，需要用户授权。

live-pusher

直播，不同类目权限不一样。不能模拟，需在真机上调试。

live-player

实时音视频录制

地图

https://developers.weixin.qq.com/miniprogram/dev/component/map.html
image.png

画布

https://developers.weixin.qq.com/miniprogram/dev/component/canvas.html

开放能力

opon-data

用于展示微信开放的数据。用户昵称、用户性别等
https://developers.weixin.qq.com/miniprogram/dev/component/open-data.html

web-view

承载网页的容器。会自动铺满整个小程序页面，个人类型的小程序暂不支持使用。
https://developers.weixin.qq.com/miniprogram/dev/component/web-view.html

API概述

image.png
image.png
image.png
海底捞排队等餐就是直调函数，等排到了，服务员过来让你开始就餐，就是回调函数。

两种方式创建动画。
1、Animation wx.createAnimation(Object object)
创建一个动画实例 animation。调用实例的方法来描述动画。最后通过动画实例的 export 方法导出动画数据传递给组件的 animation 属性。可以链式调用。
image.png

image.png

2、

置顶

第58讲open-data。动态设置置顶栏文字内容，使用wx.setTopBarText(Object object) API