微信小程序-经常使用API开发技巧学习笔记

前言

已经很久没动过微信小程序了，周五的时候，有一个朋友说有一个外快，问我干不干，几个朋友一块儿搞一下，我想了一下，正好周末也没啥事，女友回家了，就答应下来了，几个朋友聚到一块儿整了两天整完了，由于自己程序要求就不是很高，很久也没写什么技术文了，就顺手也整理了一篇微信小程序经常使用的API开发技巧，想作小程序的朋友能够看一下

第一章 认识微信小程序

  微信小程序是一种不须要下载安装便可使用的全新的链接用户与服务的方式，它能够在微信内被便捷地获取和传播，同时具备“用完即走，不用关心是否安装太多应用”的使用体验。
  微信小程序作成了一个开放式的平台，它让开发者能够将本身的想法作成微信小程序的服务放在平台上供人们使用。经过微信小程序的开发，应用将无处不在，随时可用。在进行开发以前，须要进行注册，绑定开发者等一系列操做。详情移步微信官方文档。

  笔者观看的教学视频于2017年初拍摄，因此当时最新的开发者工具版本为0.11.122100版，现官方文档中提供的最新版本为1.02.1907112版本。
是真的不须要下载安装便可使用吗？
不是的，微信小程序的安装包小于1MB(最新版改成2MB)，在用户点击使用的时候，就不到1MB的安装包，下载安装的时候，用户本人是感觉不到的。

先后端分离的开发方式

  前端先制造假数据，能够将假数据在页面很好的展现以后再和服务器的数据进行相应的对接。
  前端驱动服务器开发的设计理念。由此目的在于设计比较合理，api较方便。

小程序的特色

• 小程序适合作简单的、用完即走的应用
• 小程序适合作低频的应用
• 小程序适合性能要求不高的应用（被折叠放入微信，在操做系统之间仍是隔了一层的，不能知足性能高的应用）
  【此处可查阅小程序、外部，混合app、原生应用的性能区别】
  哪些应用适合小程序开发？
  例子：
  一、知乎------不太适合小程序开发
  缘由：
  （1）知乎是数据型应用，用户停留时间较长，不能知足用完即走的特色。（若是阅读的时候忽然来了一条消息，则会被迫退出。回来的时候找不到原来的位置）
  （2）知乎的使用频度较高，不能知足低频使用的特色。让用户屡次打开微信再打开小程序会用户体验很差。
  （3）知乎的消息发布依赖于系统推送，可是小程序的推送是一种模板推送，属于一种被动触发。当用户作一些操做的时间能够做为一个消息反馈给用户。
  （4）小程序不支持UIView。也就是说，小程序没办法去加载一个网页(服务器静态化好的HTML页面)。
  二、饿了么/猫眼电影/滴滴打车------适合小程序开发
  特色：
  （1）业务逻辑简单
  （2）使用频度不算高
  （3）提交订单（表单）性能要求不高
  三、对于中大型应用，能够将某些功能拆分出来作成小程序
  好比：
  美团的点外卖、银行的信用卡查询等单点的服务
  

小程序对开发者的影响

• 短时间内将提高市场对JavaScript程序员的需求量
• 小程序是0基础开发者很好的入门平台
• 小程序不可使用现有的JavaScript组件库
• 由于小程序的平台是封闭的，小程序是不支持不少组件
  库，好比DOM的，因此以DOM为对象的组件库都是用不了的。
  小程序的思想是数据优先，因此不能操做DOM。
• 开发环境和开发逻辑较简单，适合新手入门

学习小程序须要的基础

• JavaScript
• CSS
• ES6-很好的特性构建简洁的小程序代码
  

第二章 小程序环境搭建与开发工具介绍

小程序开发环境

前往开发工具下载地址去下载
下载完成以后，经过微信扫一扫打开开发者工具，选择新建项目

AppID选择使用测试号（由于注册小程序号比较麻烦）
其余选项设置好以后选择建立，进行建立新的小程序项目
平台会自动生成一个小程序HelloWorld的demo

  此工具左边是效果区，右边是代码区。它有一个特色就是修改某些参数不须要编译就能够预览。直接Ctrl+S就能够看见修改的效果。

调试区用来打断点调试代码。点击上方菜单栏的调试工具按钮打开调试区。
在调试区的js文件：
  带sm后缀的是用来打断点调试的文件，和写的代码是同样的。
  不带sm后缀的是编译事后的文件，和写的代码也是同样的。只不过第一行出现了一个编译的信息。

没有小程序号对开发者的限制

一、不能上传和发布小程序
二、不能真机运行，只能够在PC模拟器中运行
三、录音、网络状态、罗盘、拨打电话等功能没法使用
四、获取用户信息的流程是模拟的而不是真实的
可是，不影响咱们学习小程序开发

调试的几个区域

在debug的断点状态时，快捷键和Crome是同样的。

Console区域—系统编译区

• 编译错误的报错信息
• 警告信息
• 用console.log输出的调试信息

注：在打开调试区的状态下点击下图标注的按钮，能够单独将调试区打开一个窗口，并将Console折叠放在窗口下方。

NetWork区域—网络信息的列表

和Crome的NetWork如出一辙

• 网络连接的列表
• 加载的文件
• 加载耗费的时间
• 具体查看每个网络请求信息

Storage区域—本地缓存列表

用来查看小程序本地缓存数据

AppData区域—全部页面被绑定数据状况

wxml区域—小程序的UI界面和代码联调

鼠标停留在右边代码上面的时候左边页面显示对应的UI元素

模拟器的上面菜单栏有按钮切换先后台，用来模拟打开别的小程序，本程序在后台运行的动做。当后台运行时在小程序里会触发一个事件。

注：如何快速打开小程序api文档–点击上面菜单的：微信开发者工具–>关于–>打开api文档

第三章 从一个欢迎页开始制做小程序

生成HelloWorld小程序以后点击它的主页面进入一个子页面能够查看启动的日志信息。

小程序文件类型与目录结构

• js文件：行为文件
• json文件：配置文件，对应一个个配置
• wxml文件：对应html文件，编写小程序骨架
• wxss文件：对应css样式文件
• app文件：描述应用程序整个状态，是唯一的
  对于一个样式来说以离页面最近的配置为准

应用程序和页面之间的关系

注：下图的无限多个只是理论上的。过多的页面违背小程序的设计初衷。小程序的整体的压缩文件包的体积超过1MB将不能上传(最新版本上传限制在2MB)。

无限多个

无限多个

无限多个

应用程序入口

一级页面

二级页面

三四五级页面--最多五级

每个页面由如下文件组成

wxml

wxss

json

js

小程序自生成的目录结构

在app.json中设置打开的是哪一个页面

P.S.：json文件是不能够随意加注释的。

注册小程序页面，ViewImageText等组件用法

• View组件至关于html中的div标签，起到容器的做用而且能够分割小程序文档的不一样部分。
• Image组件用来表示一个图片。它的src属性用来添加路径。
• text在小程序中用来做为文本标签。
  只有text包围的文字在手机上才能长按选中
  text能够支持嵌套text内置样式，支持转义字符的转义。（好比将n转义为换行）

图片大小px与rpx:

  px在这里不是指图片属性的物理像素，而是Iphone6上的逻辑分辨率概念。Iphone6上物理分辨率和逻辑像素的2:1的关系。也就是说，在iphone6上面，2rpx=1px。
  为了动态去适应不一样分辨率的设备，咱们用rpx(逻辑分辨率)作适应。设计图是0-750的像素，大小能够直接转化成rpx。

如何设置样式:
方式一（动态样式）：在标签中加入style属性，写入当前标签样式
方式二（静态样式）：写wxss文件–在标签上加入一个class属性，经过class选择器写css样式。wxss文件不须要单独去引用。由于注册的是以某名字为名名的全部文件。
例子：
wxml文件：

wxss文件：

Flex弹性盒子模型

用来将堆叠在一块儿的元素变规整，显示成列排布
colum:列排布
row:横向排布

align-items用来设置对齐版式，center表示左右居中

全局同样的样式能够提到全局的样式设置里面设置。

关于背景：

  不能在容器中直接设置background-color的颜色。由于容器没有设置高度和宽度，它会自适应里面元素的高度和宽度。若是直接给一个高度的话，若是里面内容是一个动态内容，可能会超出规定的高度和宽度，形成内容溢出。
解决方案：
  通过调试咱们发现，系统在咱们规定的view容器外面还包了一层名叫page的容器。咱们去设置page的样式

设置导航栏背景色：
在app.json中有window配置项 用于设置小程序的标题、状态栏、导航条、窗口背景色。
其中navigationBarBackgroundColor用来设置导航栏背景色。

移动端分辨率及小程序自适应单位RPX

从一张设计图的实现提及

如何在比例不失真的状况下显示一张图片？

• pt:逻辑分辨率。能够理解为一个视觉长度单位。与屏幕尺寸有关系。
• px:物理分辨率。与屏幕尺寸无直接关系。理解为像素点。

1个pt能够有1个px构成，也能够有2个，3个甚至更多构成
一个pt下px越多，图像显示越细腻。两倍已经达到了人眼可以分辨的极限，因此plus版本并不能比6和6S更加清晰。
iphone6下2个px构成1个pt

• 屏幕尺寸：指的是屏幕对角线之间的距离。
• PPI:每英寸包含了多少个物理像素点

PPI=px开根号/屏幕尺寸

为何模拟器下的ip6的分辨率是375而设计图通常给750

由于微信小程序显示的375是逻辑分辨率，而设计图通常给的是物理分辨率。

如何适配不一样的机型

使用rpx做为单位，小程序会自动在不一样的分辨率下进行转换。
在iphone6的尺寸进行设计的话，一个像素就是一个rpx。

不是全部的单位都适合用rpx
好比，文字不适合用rpx，否则设备自适应之后看不清文字。
错误VM285:1 pages/index/index.js 出现脚本错误或者未正确调用 Page()
须要在这个js里写一个page方法，里面什么都不写就能够。

第四章 开发新闻阅读列表

一、在page文件夹下新建posts文件夹，在其中创建.js.wxml.wxss文件，并在.js文件中填入空的Page函数（若是不填会报错）。
二、将原先的app.json的pages属性数组之中加入新建的.wxml文件的地址（当把它放在第一个的时候，运行时默认先显示它）。
注：快捷键F1打开命令面板，有不少快捷选项

Swiper组件的应用-------轮播图

swiper标签表明轮播图，里面的字标签swiper-item表明每一个图片。

• swipper-item没办法设置高宽，系统自动将swipper-item的高宽设置成swipper高宽的100%，可是若是swipper-item里面有image，须要再在image里设置一下高宽。由于image不会继承上级的高宽。

• swipper不决定轮播的是什么内容，它只是一个容器。swipper-item里面放什么内容就轮播什么内容。

代码示例：

swiper的相关属性：

App.json里关于导航栏、标题的配置

  在子页面的json文件里能够配置页面的导航栏颜色等配置，从而不影响全局的配置。
  可是只能配置window这一个参数的属性，因此window就不标了。直接将app.json里的window参数展开，平铺到子页面的json文件中。

绝对路径与相对路径

• 以" / "为开头的是绝对路径，用来表示从根目录下一级一级往下找而找到的资源
• 以". . / . ."开头的是相对路径，用来表示资源相对当前文件的位置

部分代码示例
posts.wxss



经验：水平用rpx，垂直用px。（水平若是元素少到不可能发生换行也可用px）

posts.wxml

Page页面与应用程序的生命周期

在编码过程当中，可使用脚本文件将服务器的数据对接到小程序中。
编写脚本文件时，在js文件中输入page，开发工具会生成一个默认的脚本文件结构。
js文件全部的脚本代码都会在名叫Page的json结构体中运行。
其中包含下列生命周期函数：

• onLoad：页面加载后调用
• onReady：页面初次渲染完成后调用
• onShow：页面显示完成后调用
• onHide：页面隐藏完成后调用
• onUnload：页面卸载后调用
• onPullDownRefresh：用户下拉动做后调用
• onReachBottom：页面上拉触底事件的处理函数
• onShareAppMessage：用户点击右上角分享后调用

应用的生命周期：
先进行页面初始化(onLoad)—>页面显示(onShow)–>页面渲染完成(onReady)

注：js脚本中能够自定义函数进行调用

在公众平台之中小程序完整的生命周期图片以下

数据绑定（核心）

  在网页开发的过程当中，咱们要把一个数据显示到页面上的操做是：
先获取DOM对象，再对获取的节点的数据进行操做。

在小程序中提倡数据优先的思想。
在小程序中不支持DOM，因此在小程序的开发中的操做应该是：
在js脚本的data属性中以json格式放入数据，在wxml文件中使用双大括号调用。
示例以下：
js脚本：

wxml:

小程序在这里实现的数据绑定是单向数据绑定
  也就是说，数据能够从脚本文件向wxml文件传递的时候可直接赋值，可是若是数据被wxml文件所改变，脚本文件中的数据不会发生变化。若是要经过wxml改变脚本文件中的数据，则须要采起事件传递的形式。

显示从服务器动态获取的数据
  假设数据是从脚本文件向服务器动态获取的，那么应该在页面初始化以后显示数据。也就是说数据绑定的操做应该写在onLoad函数里面来，以后再使用setData()函数平铺入data数组之中。

示例：
js脚本

对应wxml文件

注：

• 若是绑定的数据是放在标签的属性中的，须要在双花括号外面加上双引号

数据绑定的运算与逻辑

当某个属性以"false"进行赋值时并不能获得想要的效果

缘由：赋给这个属性的false是个字符串，小程序在解析字符串的时候会将其转换成布尔值，此字符串的布尔值是true。
例子以下：

解决方法：使用数据绑定的语法，将false用双花括号括起来，这样才会解析成false。

同理，设置某个属性为true的时候，随便置入一个字符串的值，都会被解析成true。

若是js脚本外再包一层json对象，那么须要经过"{{对象名.属性名}}"进行调用
示例：


注：两个数据绑定挨在一块儿是能够正常解析的。

wx-if:控制标签元素的显示与隐藏

使用示例：

固然，能够经过脚本文件来动态控制标签元素的显示与隐藏。

数据绑定的双花括号里可进行简单的运算

好比：

同理，也能够在双花括号之中进行加减乘除的数字计算。

wx-for:循环显示数据

若是服务器拿过来的数据是一个json数组，那么须要小程序的for循环进行动态的展现。
json数组示例：

以上作法会出现显示不了的问题
缘由：this.setData方法是将参数平铺置入data数组中，在进行循环显示的时候会显示不全。
解决方法：给数据数组一个key并置入data中，这样data解析出来就会是一个数组。

wxml展现示例：

block标签：理解为括号，将循环体给包裹起来

• wx:for后面引入数组数据
• wx:for-item后面引入元素指代（默认命名：item）
• wx:for-index后面指代的子元素的序号（默认命名：index）

注：若是指代为item，则可省略。由于微信小程序默认的元素指代就是以item命名的。

页面跳转

一、在app.json的页面指定的位置将欢迎页设置为第一个页面。

二、目的：点击欢迎页的按钮，跳转到以前作好的新闻展现页中（上图页面对应posts）

三、绑定事件–tap事件(tap事件详情见以下表格)
标签事件绑定的写法：事件名前面加bind

4.在脚本文件中写入函数负责页面跳转

wx.navigateTo函数负责页面跳转

注：填入的url能够是相对路径也能够是绝对路径，可是须要和app.json中配置的形式一致（不要加.wxml）

5.设置将跳转进来的页面不设为上一个页面的子页面（取消左上角返回）

wx.redirectTo函数负责重定向页面(不可返回)

实现两个页面之间的平行跳转。

效果：

关于这两个函数完整的参数：

wx.navigateTo和wx.redirectTo的区别

  当调用wx.redirectTo方法时，脚本后台会调用onUnLoad（页面被卸载以后触发）事件。
  当调用wx.navigateTo方法时，脚本后台会调用onHide（页面被隐藏以后触发）事件。

事件与事件对象

什么是事件？

• 事件是视图层到逻辑层的通信方式。事件能够将用户的行为反馈到逻辑层进行处理。
• 事件能够绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
• 事件对象能够携带额外信息，如 id, dataset, touches。

使用WXS函数响应事件–基础库 2.4.4 开始支持，低版本需作兼容处理。

  从基础库版本2.4.4开始，支持使用WXS函数绑定事件，WXS函数接受2个参数，第一个是event，在原有的event的基础上加了event.instance对象，第二个参数是ownerInstance，和event.instance同样是一个ComponentDescriptor对象。

事件分类

事件分为冒泡事件和非冒泡事件：

• 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
• 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。

WXML的冒泡事件列表：

注：除上表以外的其余组件自定义事件如无特殊声明都是非冒泡事件，如 form 的submit事件，input 的input事件，scroll-view 的scroll事件，(详见各个组件)

事件绑定和冒泡

事件绑定的写法同组件的属性，以 key、value 的形式。

  key 以bind或catch开头，而后跟上事件的类型，如bindtap、catchtouchstart。自基础库版本 1.5.0 起，在非原生组件中，bind和catch后能够紧跟一个冒号，其含义不变，如bind:tap、catch:touchstart。
  value 是一个字符串，须要在对应的 Page 中定义同名的函数。否则当触发事件的时候会报错。
  bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定能够阻止冒泡事件向上冒泡。

第五章 小程序的模块化与模板化

  正常的流程应该是从脚本文件向服务器发一个请求去请求数据到js脚本文件，可是小程序目前没有服务器数据，将数据大量罗列到js脚本文件很是的不利于阅读。

解决方式：
  将所需数据全都放到一个单独的文件中去，从脚本文件加载数据文件，从而模拟从服务器加载数据的过程。

AppData区域介绍

小程序缓存

流量限制

列表渲染（核心）

Template模板的使用（核心）

关注公众号：Java架构师联盟，每日更新技术好文