微信小程序环境下获取网络类型_腾讯研发部公开：小程序开发常用API技巧，让你的小程序飞起来...

前言

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

第一章 认识微信小程序

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

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

前后端分离的开发方式

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

小程序的特点

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

小程序对开发者的影响

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

学习小程序需要的基础

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

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

小程序开发环境

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

AppID选择使用测试号(因为注册小程序号比较麻烦)
其他选项设置好之后选择创建，进行创建新的小程序项目
平台会自动生成一个小程序HelloWorld的demo

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

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

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

1、不能上传和发布小程序
2、不能趁机运行，只可以在PC模拟器中运行
3、录音、网络状态、罗盘、拨打电话等功能无法使用
4、获取用户信息的流程是模拟的而不是真实的
但是，不影响我们学习小程序开发

调试的几个区域

在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)。

无限多个无限多个无限多个应用程序入口一级页面二级页面三四五级页面--最多五级每一个页面由以下文件组成wxmlwxssjsonjs

小程序自生成的目录结构

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

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

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

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

图片大小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方法，里面什么都不写就可以。

第四章 开发新闻阅读列表

1、在page文件夹下新建posts文件夹，在其中建立.js.wxml.wxss文件，并在.js文件中填入空的Page函数(如果不填会报错)。
2、将原先的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命名的。

页面跳转

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

2、目的：点击欢迎页的按钮，跳转到之前做好的新闻展示页中(上图页面对应posts)

3、绑定事件–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模板的使用(核心)