学习（微信小程序 开发入门及案例详解 --李骏，边思编著）

第一章 初识小程序

1.小程序不仅在商业上具备很大潜力，同时在技术上解决了一套代码多端运行和动态发版的两大痛点，用户在微信中扫一扫或搜一下即可打开具备原生体验的应用，这给开发者带来了很大的想象空间

2.一套代码，多端运行

3.目前小程序名称一旦确定后便不可修改

4.只有绑定的开发者才能使用开发者工具编写小程序，一个小程序最多可以绑定20个开发者，未认证的小程序最多可以绑定10个开发者

5.只有填写了AppID的项目才能通过手机微信扫码进行真机测试

6.编译器:sublime,atom,brackets

第二章 小程序开发核心

1.小程序框架将整个系统划分为视图层和逻辑层，视图层是由框架设计的标签语言WXML和用于描述WXML组件样式的WXSS组成，它们的关系就像HTML和CSS的关系
2.在小程序中没有DOM的概念

3.小程序中的视图层和逻辑层的交互是通过数据绑定和时间响应实现的，这是一种单向绑定的机制。

这套机制需要首先将逻辑层和视图层的数据和事件进行绑定，当需要修改页面时，逻辑层只需要调用特定的setDate方法修改已绑定的数据，这时框架会自动触发WXML重新渲染，达到逻辑层对视图层的控制；当框架接收到用户交互操作时，会根据视图层绑定的事件，执行逻辑层对应的事件函数，达到逻辑层对视图层的响应

4.框架首先会解析配置文件app.json，通过pages设置找到默认首页页面（pages第一个路径默认为首页），然后加载目录中.wxml、.wxss、.js、.json这四个文件进行页面渲染

5.视图层和逻辑层之间相互通信的机制便是小程序的数据绑定和事件响应系统

6.在一个完整的小程序中，文件主要分为框架程序主体文件和页面文件两大类

框架主题文件是系统级别文件，一个项目只有一份，分别是app.json，app.js和app.wxss，他们分别控制小程序整体配置、逻辑和整体样式，小程序启动时只会执行一次。这3个文件必须放在项目根目录，且文件名必须是app,其中app.json和app.js是必须的

页面文件，.wxml文件和.js文件是必须的，按照框架规定，同一个页面的这4个文件必须具有相同的路径和文件名，

7.app.json：小程序公共设置，配置小程序全局设置

app.js：小程序逻辑文件，主要用于注册小程序全局实例，编译时会和其他页面逻辑文件打包成一份JavaScript文件

app.wxss：小程序公共样式表，对所有页面的布局文件都有效

8.app.json是小程序配置文件，编写时要严格遵循json的格式规范。app.json在程序加载时加载，负责对小程序的全局配置，其配置项有：

pages:设置页面路径，必填项

window：设置默认页面的窗口表现

tarBar:设置tab的表现

networkTimeout:设置网络超时时间

debug:设置是否开启debug模式，默认关闭

9.pages配置，由页面“路径 + 文件名” 组成

10.为了便于管理，建议文件名和目录名保持一致

11.小程序中各种网络请求API的超时时间只能通过networkTimeout统一设置，不能再API中单独设置

12.App()函数用于注册一个小程序，参数为一个Object对象，在这个参数对象中我们可以注册自定义方法和属性供全局使用。

​ App()函数必须在app.js中注册，且不能注册多个，其参数属性如下：

onLaunch:声明周期函数，监听小程序初始化。当小程序初始化完成时，就会触发onLaunch,onLoaunch事件全局只会触发一次

onShow:生命周期函数，监听小程序显示。当小程序启动，或者从后台进入前台显示时都会触发onShow

onHide:生命周期函数，监听小程序隐藏。当小程序从前台进入后台会触发

13.只有当小程序进入后台一定时间，或者系统资源占用过高，才会被真正销毁

14.页面逻辑文件主要功能有：设置初始化数据，注册当前页面生命周期函数，注册事件处理函数等。

15.在小程序中，每个逻辑文件有独立的作用域，并具备模块化能力

16.在WXML中编写一些HTML标签或自定义标签仍然会被正常解析，这会给开发者造成一种小程序能直接支持HTML标签的误解。这是因为微信开发者工具内核是浏览器内核，同时小程序框架并没对WXML中的标签和WXSS中的内容进行强验证，所以HTML和CSS能直接被解析，但这种不合法的WXML在手机端微信中是不能正常显示的

17.开发过程中我们一定要拿真机进行测试，保证程序能正常运行

18.WXML具有数据绑定（Mustache语法，双大括号）、列表渲染、条件渲染、模板、事件等能力

19.组件属性为boolean类型时，不要直接写checked=“false”，这样checked的值是一个false的字符串，转成boolean类型后代表为true，这种情况一定要使用关键字输出:checked="{{false}}"

20.wx:if在条件第一次为真时才局部渲染，hidden 组件始终会被渲染

​ 由于wx:if会触发框架局部渲染过程，在频繁切换状态的场景中，会产生更大的消耗，这时尽量使用hidden;在运行时条件变动不大的场景中我们使用wx:if，这样能保证页面有更高效的渲染，而不用把所有组件都渲染出来

21.通过对比发现，import更适合引用模板定义文件，include更适合引入组件文件

22.小程序目前不支持直接引入node_modules，开发者需要使用node_modules时建议拷贝出相关代码到小程序目录中

23.通过模块化我们能实现代码真正的隔离，可以多人并行开发，降低大型项目管理难度，这对前端工程化具有很大促进作用

24.微信小程序逻辑代码运行在三端:iOS,Android和用于调试的开发者工具，这三端是各自不同的三个解析引擎

第三章 布局

1.开发者工具功能“开启上传代码时样式文件自动补全”，否则flex布局会存在不同终端兼容性问题

2.一个块级元素的元素框与其父元素的width相同，块级元素的width+marginLeft+marginRight+paddingLeft+paddingRight刚好等于父级元素内容区宽度，显示时默认撑满父元素内容区

3.当设置块级元素宽度为100%时，如果当前块级元素存在padding,margin会导致块级元素溢出父元素

4.当设置元素clear时，可以确保当前元素的左边、右边或左右两边同时不能出现浮动的元素

5.父元素虽然会忽略浮动元素（如浮动高度示例中产生的坍塌），但是不会忽略其他元素（包括清除浮动的元素），而清除浮动的元素总是在浮动元素下方，所以在显示时视觉上父元素就把所有元素都包含进去了，无论非浮动元素在哪里，父元素边框都包含了非浮动元素。

利用这个特性，把清除浮动的高度设置为0使其看不见，这时父元素仍然会包裹它，这样就能防止浮动元素高度坍塌，网上利用after伪属性清除浮动就是这个道理

第四章 组件

1.与HTML元素一样，一个组件是指从组件开始标签到结束标签的所有代码，由于组件可能会被转译

为不同端对应的代码，所以在页面创建过程中，不能使用小程序组件标签以外的标签。

2.组件的定义：

①组件是视图层的基本组成单元

②组件自带一些功能与微信风格的样式

③一个组件通常包括开始标签和结束标签，属性用来修饰这个组件，内容在两个标签之内

按类型可以将组件划分为七大类：视图容器，基础内容，表单，导航，多媒体，地图，画布

3.属性只能用在开始标签或单个自闭合标签上，不能用于结束标签

4.组件的属性类型:Boolean,Number,String,Array,Object,EventHandler（事件处理函数名）,Any（任意属性）

5.在前端项目中我们常使用DIV+CSS进行页面布局，其中

没有任何语义和功能，仅作为容器元素存在，在小程序中，有一套类似div的容器组件，那就是,和

6.view具备一套关于点击行为的属性：

hover：是否启动点击态，默认值为false

hover-class:指定按下去的样式。当hover-class="none"时，没有点击态效果，默认值为none

hover-start-time:按住后多久出现点击态，单位毫秒，默认值为50

hover-stay-time:手指松开后点击态保留时间，单位毫秒，默认值为400

<view style="background-color:red; flex-grow:1;height:80rpx;"></view>
<view style="display:flex;height:400rpx">

8.<scroll-view> ，scroll-x:允许横向滚动，默认为false,scroll-y允许纵向滚动，默认为false,

9.需要注意的是，在使用纵向滚动时，需要先给<scroll-view.>一个固定高度

10.一个完整的滑动视图组件由<swiper>和<swiper-item>两个标签组成的，它们不能单独使用，一个<swiper>中只能放置一个或多个<swiper-item>，放置其他内容点会被删除，<swiper-item>内部能放置任何组件，默认宽高自动设置为100%,、<swiper-item/>组件作为容器没有任何特殊属性

基础组件：

11. <icon>,是页面中非常常见的组件，它通常用于表示状态，起到引导作用。

12.text组件

​ 主要用于文本内容的展示，类似HTML中p标签，在小程序中，只有text节点内部的内容能被长按选中，大家在展示文本的时候一定要根据这个特性注意场景的使用。text是行内元素，除了组件共同属性外并没有提供其他属性，文本中的内容支持转义字符""，text组件内只支持text嵌套

13.progress组件，用于显示进度状态，比如资源加载、用户资料完成度、媒体资源播放进度等

表单组件：

14.表单是应用中获取用户输入的重要手段，它对于系统极其重要，用户在应用中输入的大部分内容都是在表单元素中完成的，

15.radio组件

​ 适用于可用有效数据不多的情况，小程序中单选框是由<radio-group>（单向选择器）和<radio>（单项项目）两个组件组合而成的，一个包含多个<radio/>的<radio-group/>表示一组单选框，在同一组单选项的<radio/>是互斥的，当一个按钮被选中，之前选中的按钮就变为非选中。当需要用户在待选项中选择唯一的答案时，就需要使用到单项框

16.checkbox组件

​ 与单选框一样，小程序中的复选也是由<checkbox-group/>（多项选择器）和<checkbox/>（多项项目）两个组件组合而成。一个包含多个<checkbox/>的<checkbox-group/>表示一组多选项，一组多选型允许在待选项中选中一项以上的选项

17.整体来看复选框和单选框的使用方式基本一致，最大的区别在于交互上单选框在同一组单选项中只能选中一个，而复选框可以选中多个；选中状态切换时change方法传入的参数数值一个是传入单值，一个是传入数组。

18.switch组件

​ <switch/>是一个可以在两种状态切换的开关选择器，是一个单独控件

​ 在小程序中当<switch/>的type属性值为checkbox时，它的UI表现和<checkbox/>非常接近

19.label组件

​ 在radio和checkbox中，点击文案时不能选中对应的单选框或复选框，这是我们可以利用<label/>改进表单组件的可用性，通过绑定for属性让用户点击<label/>时触发对应的控件，目前可以绑定的控件有<button/>,<checkbox/>,<radio/>,<switch/>

20.小程序中label的触发规则有两种

​ ①将控件放在标签内。当用户点击时触发label中第一个控件

​ ②设置label的for属性，当用户点击时触发for属性对应的控件。for属性优先级高于内部控件

​ label只有一个for属性：绑定控件的id

21.避免交互体验混乱，一个label尽量只包裹一个组件

22.slider组件

​ 滑动选择器是一种在移动端常用的交互组件，亮度调节工具

​ 滑动选择器一般有水平和垂直两种，小程序中只提供了水平的形式，滑动到最左边是最小值，滑动到右边是最大值

23.picker组件

​ <picker/>可以在屏幕底部弹出一个窗口，供用户在所提供的选择项中选择一个

​ 普通选择器，时间选择器和日期选择器

24.picker-view组件

​ 多种形态选择器 ，<picker-view/>自定义滚动选择器

25.input组件

​ <input/>是单行输入框，用于收集用户信息。属性很多，大部分和HTML的Iinput类似

26.textarea组件

​ 多行输入框，与HTML中多行输入框不一样的是，小程序中textarea是一个自闭合标签，它的值需要赋值给value属性，而不是被标签包裹

27.button组件

通常在一个小程序中一个按钮至少有3中状态：默认点击(default),建议点击(primary),谨慎点击（warn）

28.form组件

​ 用于嵌套其他组件，使之形成表单

29.导航组件

​ <navigator/>是小程序中的页面链接，其作用和HTML中超链接标签一样，主要控制页面的跳转

30.媒体组件 image

​ 小程序中的image除了可以显示图片外，还提供了图片的裁剪，缩放模式属性，这大大丰富了image的显示功能。默认宽度为300px,默认高度为225px

31.audio

​ 样式像朋友圈分享歌曲的样式，播放等功能需要配合API实现

32.地图组件

​ map主要负责展示性的功能，目前地图具备绘制图表，路线，半径等功能，在<scroll-view/>中不能使用<map/>组件

33.画布组件

​ <canvas/>主要用于绘制图形，在页面上放置一个canvas，就相当于在页面设置了一块“画布”，可以在其中进行图形绘制，仅仅是图形容器

34.客服会话

​ <contact-button/>用于在页面上显示一个客服会话按钮，用户点击后会进入客服会话

第五章 API

1.运用组件可以完成很多需要的UI界面，但小程序的一些功能就要依赖框架提供的API来完成

2.小程序提供的API，包括网络、媒体、文件、数据缓存、位置、设备、界面、开放接口8大类，这些API由微信本身提供，通过逻辑层 JS代码进行调用

3.微信API按命名规则可分为两种：

​ ①以wx.oon开头的API，如：wx.onSockectOpen,wx.onBackgroundAudioPlau(),wx.on-CompassChange()等，均代表监听某个事件发生的API接口，这类接口一般来说参数均为一个callback回调函数，当该事件触发时，会回调callback函数

​ ②其他不以wx.on开头的API，如：wx.request,wx.uploadFile,wx.chooseImage,这类接口如果没有特殊约定，通常都接受一个Object对象作为参数，在Object中可以指定success,fail,complete来接受接口调用接过，这三个回调函数在有些API中具有返回值，有些没有

4.网络

每个微信小程序需要事先设置一个通信域名，小程序可以跟指定的域名进行网络通信。包括不同HTTPS请求(wx.request),WebSocket通信（wx.connectSocket),上传文件(wx.uploadFile)和下载文件(wx.downloadFile)。设置通信域名需要登录小程序“后台->设置->开发设置，”在服务器配置中添加受信任的域

5.wx.request(Object)

​ request用于发起HTTPS请求，默认超时时间和最大超时时间都是60秒。在小程序中只能使用HTTPS请求不能使用HTTP请求，一个微信小程序，同时只能有5个网络请求连接。

​ data数据最终发送给服务器的数据是String类型，如果传入的data不是String类型，则会被转化成String,

6.wx.uploadFile(Object)

​ 如需提交带有本地资源的数据，便需要调用此接口将本地资源上传到指定服务器。调用这个uploadFile时，客户端会向服务端发起一个HTTP POST请求，header中Content-Type为multipart/form-data。上传文件最大并发限制为10个，默认超时时间和最大超时时间都是60秒

7.wx.downloadFile(Object)

从服务端下载资源到本地。调用API后，客户端直接发起一个HTTP GET请求，把文件下载到本地并返回文件的本地临时路径，临时文件在小程序本次启动期间可以正常使用，如需持久保存需要主动调用wx.saveFile进行保存

8.WebSocket

上节中介绍的网络通信方法都是通过客户端主动向服务端发起请求，由服务端相应返回数据来达到通信的目的，这种方式有个缺点，不能实现服务端主动向客户端推送信息。采用这种短连接方式实现客户端和服务端之间的即时通信技术只能使用轮询，即在特定时间间隔（如每1秒），由客户端向服务端发起请求，然后由服务端返回最新的数据。这种方式需要客户端要不断的向服务端发送请求，在处理即时通信时，这种方式既浪费性能又占带宽。面对这种情况，在需要即时通信时，我们可以利用小程序提供的WebSocket相关API创建WebSocket,实现长连接达到即时通信的目的。长连接服务端比短连接更耗资源，在技术选项上要慎重

9.wx.connectSocket(Object)

创建一个WebSocket连接。一个小程序 同时只能有一个WebSocket连接，创建新连接时，如果当前已存在一个WebSocket连接，会自动关闭该连接，并重新创建一个新的WebSocket连接，创建连接时默认和最大超时时间都是60秒

10.wx.chooseImage

​ 从本地相册选择图片或者使用相机照片。拍照时产生的临时路径，在小程序本次启动期间可以正常使用，如需持久保存，需要主动调用wx.saveFile,这样才能保证小程序下次启动时能访问到

11.wx.startRecord

​ 开始录音。当主动调用wx.stopRecord，或者录音超过1分钟时自动结束录音，返回录音文件的临时文件路径当用户离开小程序时，此接口无法调用

12.wx.playVoice

​ 开始播放语言，同时只允许一个语音文件播放，如果前一个语音文件还没播放完，将中断前一个语音播放

13.wx.saveFile

​ 保存文件到本地，本地文件存储大小限制为10MB

14.数据缓存

​ 每个小程序都可以有自己的本地缓存，local Storage是永久存储的，本地缓存最大为10MB，数据操作API分为同步和异步两种

15.将数据存在本地缓存指定的key中， 会覆盖原来该key对应的内容

​ wx.setStorage(Object) 异步接口 wx.setStorageSync(KEY,DATA) 同步接口

16.wx.getStorage 从本地缓存中异步获取指定key对应的内容

17.wx.getStorageinfo 异步获取当前storage的相关信息

18.wx.removeStorage 根据key值异步删除本地数据

19.获取位置

​ 在国际上，坐标体系有多套标准，小程序支持WGS84标准和GCj02标准，WGS84是地球坐标系🌏，国际上通用的坐标系。设备一般包括的GPS芯片或者北斗芯片所获取的经纬度为WGS84地理坐标系。GCj02坐标系为火星坐标系，是由中国国家测绘局制订的地理信息系统的坐标系统，它是由WGS84坐标系经加密后的坐标系， 它是在小程序中，查看位置需要使用GCj02标准坐标

20.wx.getLocation用于获取当前的地理位置，速度，需要用户开启定位功能，当用户离开小程序后，此接口无法调用；当用户点击“显示在聊天顶部”时，此接口可继续调用

21.wx.chooseLocation用于打开地图选择位置，用户选中后返回选中信息

22.wx.createMapContext用于创建并返回map上下文mapContext对象，map-Context通过,mapId根一个<map/>组件绑定，通过它可以操作对应的<map/>组件

23.wx.getSystemInfo 异步获取系统信息

24.wx.makePhoneCall用于调用手机拨打电话功能

25.scanCode调起客户端扫码界面，扫码成功后返回对应结果

26.界面-交互反馈 wx.showToast 显示信息提示框 wx.showModal 显示模拟弹窗

27.wx.showActionSheet 显示操作菜单

28.设置导航条

​ wx.setNavigationBarTitle 动态设置当前页面的标题

​ wx.showNavigationBarLoading 在当前页面显示导航栏加载动画

​ wx.hideNavigationBarLoading 隐藏导航条加载动画

29.导航

​ wx.navigateTo 保留当前页面，跳转到应用内的某个页面，使用wx.navigateBack可以返回到原页面，小程序中页面路径最多5层

​ wx.redirectTo 关闭当前页面，跳转到应用内的某个页面

​ wx.switchTab 跳转到tarBar页面，并关闭其他所有非tarBar页面

​ wx.navigateBack 关闭当前页面，返回上一页面或多级页面

30.动画

​ wx.createAnimation 用于创建一个动画实例animation。可以调用动画实例的方法来描述动画，最后通过动画实例的export方法到处动画数据，传递给组件animation属性，每此调用exports方法会清掉之前的动画操作

31.动画描述方法按类型可分为样式，旋转，缩放，偏移，倾斜，矩阵变形

32.调用动画操作方法后要调用step()来表示一组动画完成，可以在一组动画中调用任意多个动画方法，一组动画中的多有动画会同时开始，一组动画完成后才会进行下一组动画，step可以传入一个跟wx.createAnimation()一样的配置参数，用于指定当前组动画的配置

33.路径

​ 路径绘制并不会在画布上绘制形状，而是创建一个线条路径，创建的路劲可被stroke()绘制线条，也可被fill()填充区域，绘制路径开始时需要调用beginPath()方法，结束时需要调用closePath()方法，上文rect()方法可认为是绘制矩形路径的一个快捷方法，通过路径方法组合，我们可以绘制任何形状图形

34.wx.getUserInfo 获取用户信息，需要首先调用wx.login接口

​ wx.requestPayment 用于发起微信支付

35.access_token是全局唯一的接口调用凭证，调用很多接口都需要使用access_token,access_token存储至少需要512个字符空间，

36.排重