1 小程序与普通网页开发的区别

(1) 运行环境的不同

网页运行在浏览器汇总,小程序运行在微信环境中

(2) api不同

(3) 开发模式不同

2 小程序代码的构成-项目结构

(1) 目录结构

 (2) 页面的组成部分

 组件: 一个完整的前端功能的整体,页面(html),功能(script),样式(style)

(3) json配置文件

① app.json

• page: 用来记录当前小程序所有页面的路径
• windows: 全局定义小程序所有页面的背景色,文字颜色等
• style: 全局定义小程序组件所使用的的样式版本(v2表示新版样式)
• tabBar: 小程序的tabBar效果的配置
• sitemapLocation: 用来指明sitemap.json的位置

② project.config.json(用来记录小程序开发工具所做的个性化配置)

• setting: 保存了编译相关的配置(在设置中进行的设置会体现在setting中)

• projectname: 保存的是项目名称

③ sitemap.json

④ 页面.json

小程序中的每一个页面,可以使用.json文件来对本页面的窗口外观进行配置,页面中的配置项会覆盖app.json的window中相同的配置项,不需要写window对象名,直接写

3 新增小程序页面

在app.json -> pages 中新增页面存放路径,小程序开发者工具可帮助我们自动创建对应的页面文件: 'pages/list/list',pages配置项的第一项作为首页显示

4 小程序代码的构成

4.1 WXML模板

(1) WXML和HTML的区别

标签名称不同

• HTML(div, span, img, a)
• WXML(view, text, image, navigator)

属性节点不同

• <a href="#"></a>
• <navigator url="/pages/home/home"></navigator>

提供了类似于Vue中的模板语法

• 数据绑定
• 列表渲染
• 条件渲染

4.2 WXSS

新增了rpx尺寸单位

• CSS中需要手动进行像素单位换算,例如rem
• WXSS在底层支持新的尺寸单位rpx,在不同大小的屏幕上小程序会自动进行换算

提供了全局的样式和局部的样式

• 项目根目录中的app.wxss会作用于所有小程序页面
• 局部页面的wxss会作用域局部

WXSS仅支持部分CSS选择器

• .class和#id
• element
• 并集选择器,后代选择器
• ::after和::before等伪类选择器

4.3 小程序中的js逻辑交互

4.3.1 小程序中js文件的三大类

app.js

• 是整个小程序项目的入口文件.,通过调用App()函数来启动整个小程序

页面的.js文件

• 是页面的入口文件,通过调用Page()函数来创建并运行页面

普通的.js文件

• 是普通的功能模块文件，用来封装公共的函数或属性供页面使用

5 小程序的宿主环境

宿主环境指的是程序运行所必须的依赖环境,例如安卓和ios系统是两个不同的宿主环境

手机微信是小程序的宿主环境

借助此宿主环境提供的能力,可以完成许多普通网页无法完成的功能

5.1 小程序宿主环境包含的内容

5.1.1 通信模型

(1) 通信的主体

小程序通信的主体是渲染层和逻辑层,其中:

• WXML模板和WXSS样式工作再渲染层
• JS脚本工作在逻辑层

(2) 而所谓的通信模型指的是:

• 渲染层和逻辑层之间的通信
• 逻辑层和第三方服务器之间的通信

5.1.2 运行机制

小程序的启动过程:

• 把小程序的代码包下载到本地
• 解析app.json全局配置文件
• 执行app.js小程序入口文件,调用App()创建小程序的实例(一个小程序中,只有一个App对象,可能会有多个实例Page对象,一个页面中会有多个Component实例对象)
• 渲染小程序首页
• 小程序启动完成

5.1.3 组件(哪些标签可以使用)

(1) 组件的分类

5.1.4 API

(1) 概述

小程序中的API是由宿主环境提供的，通过这些丰富的小程序API，开发者可以方便的调用微信提供的能力

(2) 3大分类

事件监听API

• 特点：以on开头，用来监听某些事件的触发
• 举例：wx.onWindowResize(function callback)监听窗口尺寸变化的事件

同步API

• 特点1：以Sync结尾的API都是同步API
• 特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常
• 举例：wx.setStorageSync('key', 'value')向本地存储中写入内容

异步API

• 特点：类似于jQuery中的$.ajax(options)函数，需要通过success、fail、complete接收调
• 用的结果
• 举例：wx.request()发起网络数据请求，通过success回调函数接收数据

顶级对象: wx

6 协同工作和发布

6.1 协同工作

(1) 项目成员的组织结构

 (2) 开发流程

 6.2 小程序成员管理

(1) 成员管理的两个方面

项目成员: 表示参与小程序开发, 运营的成员, 可以登录小程序的管理后台

体验成员: 表示参与小程序内测体验成员,可使用体验版小程序,但不属于项目成员

(2) 不同项目成员对应的权限

(3) 开发者的权限说明

 (4) 添加项目成员和体验成员

左侧菜单的管理 -> 成员管理

6.3 小程序的版本

(1) 软件开发过程中的不同的版本

• 开发者编写代码的同时,对项目代码进行自测(开发版本)
• 直到程序达到一个稳定可体验的状态时，开发者把体验版本给到产品经理和测试人员进行体验测试

(2) 小程序的版本

6.4 发布上线

(1) 步骤

上传代码->提交审核->发布

(2) 上传代码

① 点击开发者工具顶部工具栏中的“上传”按钮

② 填写版本号以及项目备注

(3) 提交审核

① 为什么需要提交审核：为了保证小程序的质量，以及符合相关的规范，小程序的发布是需要经过腾 讯官方审核的。

② 提交审核的方式：在开发版本的列表中，点击“提交审核”按钮之后，按照页面提示填写相关的信息，就能把小程序提交到腾讯官方进行审核。

(4) 基于小程序码进行推广

相对于普通二维码来说，小程序码的优势如下：

① 在样式上更具辨识度和视觉冲击力

② 能够更加清晰地树立小程序的品牌形象

③ 可以帮助开发者更好地推广小程序

获取小程序码的5个步骤：

登录小程序管理后台->设置->基本设置->基本信息->小程序码及线下物料下载

(5) 查看小程序的运营数据

在"小程序后台"查看

在"小程序数据助手"查看(下载小程序"小程序数据助手查看")

7 WXML模板语法

7.1 数据绑定

(1) 数据绑定的基本原则

• 在data中定义数据
• 在WXML中使用

(2) 在data中定义页面的数据

在页面对应的.js文件中，把数据定义到data对象中即可

(3) 在WXML中使用,Mustache语法

<>{{ 变量名 }}</>(标签属性中仍一样)

7.2 事件绑定

(1) 常用事件

(2) 如何定义事件处理函数

在页面.js文件中,和data保持平级的关系,定义事件处理函数 

(3) 事件对象的属性列表(e)

当事件回调触发时,会收到一个事件对象event,他的详细属性如下:

 (4) target和currentTarget的区别

target是触发该事件的源头组件,而currentTarget则是当前事件所绑定的组件

// e.target 指向的是触发事件的源头组件，因此， e.target 是内部的按钮组件
// e.currentTarget 指向的是当前正在触发事件的那个组件，因此， e.currentTarget 是当前的 view
组件
<view bindtap="outerHandler">
    <button>按钮</button>
</view>

(5) 事件传参

• 传参比较特殊,不能再绑定事件的同时为事件处理函数传递参数,否则会把整体作为事件名
• 可以通过组件提供的data-*自定义属性传参,其中*代表参数的名字:
• <buttonbindtap="onBtnString"data-info="2">事件传参-拼接字符串</button>

(6) info会作为名字存储在事件对象的target中的dataset中, 2会被解析为值

(7) 如何访问data中的数据, this.data.xxx

如何修改data中的数据, this.setData({})

7.3 条件渲染

(1) wx:if

在小程序中,使用wx:if="{{show}}"来判断是否需要渲染该代码块,也可以配合wx:elif和wx:else来添加else判断

<!-- wx:if wx:else-if wx:else 条件渲染 -->
<view wx:if="{{ type === 1 }}" class="text">男</view>
<view wx:elif="{{ type === 2 }}" class="text">女</view>
<view wx:else>保密</view>

(2) 结合<block>使用wx:if

如果要一次性控制多个组件的展示与隐藏,可以使用一个<block></block>标签进行包裹，只是包裹性值，不会再页面渲染

注意:block并不是一个组件，它只是一个包裹性质的容器，不会在页面中做任何渲染

(3) hidden

在小程序中,直接使用hidden="{{show}}"也能控制元素的显示与隐藏

(4) 区别

① 运行方式不同

• wx:if以动态创建和移除元素的方式，控制元素的展示与隐藏
• hidden以切换样式的方式（display: none/block;），控制元素的显示与隐藏

② 使用建议

• 频繁切换时，建议使用hidden
• 控制条件复杂时，建议使用wx:if搭配wx:elif、wx:else进行展示与隐藏的切换

7.4 循环渲染

(1) wx:for

语法: wx:for="{{ 数据名称 }}"

{{ index }} {{ item }}

(2) 手动指定索引和当前项的变量名

• 使用wx:for-index可以指定当前循环项的索引的变量名
• 使用wx:for-item可以指定当前项的变量名

(3) wx:key的使用

类似于Vue列表渲染中的:key,小程序在实现列表渲染时,也建议为渲染出来的列表加key提高渲染的效率

<!-- 手动指定索引和当前项的变量名 -->
<view wx:key="index" wx:for="{{ arr1 }}" class="text" wx:for-index="i" wx:for-item="item"> 索引是 {{ i }} 当前项是： {{ item }} </view>
<!-- wx:key 提高渲染效率 -->
<view wx:key="id" wx:for="{{ arr2 }}" class="text1"> 当前项是： {{ item.username }} </view>

8 WXSS 模块样式

8.1 wxss和css的关系

wxss具有css大部分特性,同时,wxss还对css进行了扩充以及修改以适应微信小程序的开发,与css相比,wxss扩展的特性有:

• rpx尺寸单位
• @import样式导入

8.2 rpx

(1) 什么是rpx单位

rpx是微信小程序独有的,用来解决屏幕适配的尺寸单位,rpx把所有的屏幕等分为750份(即: 当前屏幕的总宽度为750rpx)

(2) rpx和px之间的单位换算(了解)

8.3 样式导入

(1) 语法格式: @import ""引号里需要导入的外联样式表的相对路径,用;结束

(2) 全局样式: 作用于每一个页面

(3) 局部样式: 只会作用于当前页面

注意:

• 当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
• 当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式

9 全局配置

9.1 全局配置文件及常用的配置项

小程序根目录的app.json文件是小程序的全局配置文件,常用配置项如下:

9.1.1 window小程序窗口的组成部分

 9.1.2 了解window节点常用的配置项

 (1) 设置导航栏标题

步骤: app.json -> window -> navigationBarTitleText

(2) 设置导航栏的背景色

步骤: app.json -> window -> navigationBarBackgroundColor(只支持16进制的颜色写法)

(3) 设置导航栏的标题颜色

步骤: app.json -> window -> navigationBarTextStyle(可选值只有white和black)

9.1.3 全局下拉刷新功能

"enablePullDownRefresh": true

(1) 设置下拉刷新窗口的颜色

backgroundColor(颜色只能是16进制)

(2) 设置下路刷新时loading的样式

当全局开启下拉刷新功能之后，默认窗口的loading样式为白色，如果要更改loading 样式的效果,设置步骤为app.json->window->为backgroundTextStyle指定dark值。

 (以color结尾的配置一般都是16进制的颜色,style一般都是配置固定的可选值)

(3) 在页面.js中的onPullDownRefresh: function () {}里写用户下拉逻辑代码

(4) 设置上拉触底的距离

上拉触底是移动端的专有名词，通过手指在屏幕上的上拉滑动操作，从而加载更多数据的行为。

设置步骤：app.json->window->为onReachBottomDistance设置新的数值

注意：默认距离为50px，如果没有特殊需求，建议使用默认值即可。

onReachBottom: function() {} 上拉触底事件的处理函数

9.2 tabBar

(1) 什么是tabBar

tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为：

• 底部tabBar
• 顶部tabBar

注意：

• tabBar中只能配置最少2个、最多5个tab页签
• 当渲染顶部tabBar时，不显示icon，只显示文本

 (2) tabBar的6个组成部分

• ①backgroundColor：tabBar的背景色
• ②selectedIconPath：选中时的图片路径
• ③borderStyle：tabBar上边框的颜色
• ④iconPath：未选中时的图片路径
• ⑤selectedColor：tab上的文字选中时的颜色
• ⑥color：tab上文字的默认（未选中）颜色

(3) tabBar配置项

和window配置平级(标红的表示必选项)

 (4) 每个tab项(list数组中每一个对象)的配置项

 如果是tabBar的页面就必须放在pages配置的前面

(5) 页面配置

小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现。

如果某些小程序页面想要拥有特殊的窗口表现，此时，页面级别的.json配置文件就可以实现这种需 求。 注意：当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准。

注意：

① 这些配置项,在刚才学习的全局配置下的window节点我们已经都学习过了,无需额外记忆.

② 一般我们不需要每个页面都有下拉刷新的效果，因此，再全局配置文件中，不推荐全局配置下拉刷 新，而是某个列表页面需要开启时，在页面配置文件中，单独开启下拉刷新

10 网络数据请求

(1) 小程序中网络数据请求的限制

处于安全性方面的考虑,小程序官方数据接口的请求做出了如下两个限制:

① 只能请求HTTPS类型的接口

② 必须将接口的域名添加到信任列表中

(2) 配置request合法域名

配置步骤：登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名

注意事项

① 域名只支持https协议

② 域名不能使用IP地址或localhost

③ 域名必须经过ICP备案

④ 服务器域名一个月内最多可申请5次修改

(3) 发送get请求

调用微信小程序提供的wx.request()方法,可以发起GET数据请求,实例代码如下:

(4) 发起post请求

// 发起GET请求
onTapPost () {
    wx.request({
        // 请求地址，必须是以https://开头
        // 必须是配置在request合法域名
        url: 'https://www.escook.cn/api/post',
        // 请求方式
        method: 'POST',
        // 请求参数
        data: { name: 'lisi', age: 18 },
        // 请求成功的回调
        success: (res) => {
            console.log(res)
        }
    })

 (5) 在页面刚加载时请求数据(生命周期onLoad)

在js文件中的onLoad: function() {} 调用请求函数

(6) 跳过request合法域名效验

如果后端程序员仅仅提供了http协议的接口、暂时没有提供https协议的接口

此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验合法域名、web-view(业务域名)、TLS版本及HTTPS证书」选项，跳过request 合法域名的校验

注意：

跳过request合法域名校验的选项，仅限在开发与调试阶段使用！

(7) 关于跨域和Ajax的说明

跨域问题只存在于基于浏览器的Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端， 所以小程序中不存在跨域的问题。

Ajax技术的核心是依赖于浏览器中的XMLHttpRequest这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起Ajax请求”，而是叫做“发起网络数据请求”。

11 页面导航

11.1 声明式导航

（1）导航到tabBar页面

在使用<navigator>组件跳转到指定的tabBar页面时,需要指定url属性和open-type属性,其中:

• url表示要跳转的地址,必须以/开头
• open-type表示跳转的方式,必须为switchTab

(2) 导航到非tabBar页面

• url表示要跳转的地址,必须以/开头
• open-type表示跳转的方式,必须为navigate(可以简写)

(3) 后退导航

如果要后退到上一页面或多级页面,则需要指定open-type和delta属性

• delta属性默认是1(可以不写)
• open-type表示跳转的方式,必须为navigateBack

11.2 编程导航

(1) 导航到tabBar页面

调用wx.switchTab(Object object)方法，可以跳转到tabBar页面。其中Object参数对象的属性列表如下

 wx.switchTab({

  url: ''

})

(2) 导航到非tabBar页面(wx.navigateTo)

(2) 后退导航wx.navigateBack

 11.3 导航传参

(1) 声明式导航传参

navigator组件的url属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：

• 参数与路径之间使用?分隔
• 参数键与参数值用=相连
• 不同参数用&分隔

(2) 编程式导航传参

调用wx.navigateTo(Object object)方法跳转页面时，也可以携带参数，代码示例如下：

小程序中: 导航传参的方式,全部都是用的查询字符串

(3) 在onLoad中接收导航的传参

通过声明式导航或编程式导航传参所携带的参数，可以直接在onLoad事件中直接获取到(跳转到非tabBar页面才可以接收)

(4) wx.showLoading显示加载提示效果wx.hideLoading隐藏加载提示效果,{ title: 加载显示文本 }

(5) complete: wx.request中网络请求完成后(无论成功还是失败)进入的回调函数

12 小程序的生命周期

12.1 应用的生命周期

(1) 特指小程序从启动 -> 运行 -> 销毁的过程

(2) 小程序的应用生命周期函数需要在app.js中进行声明

(3) 应用生命周期函数

• onLaunch钩子函数: 小程序初始化完成后, 会触发onLaunch
• onShow: 小程序启动, 或从后台进入前台显示时触发
• onHide: 小程序从前台进去后台时触发

12.2 页面的生命周期

(1) 特指小程序中, 每个页面的加载-> 渲染 -> 销毁过程

(2) 在对应页面的js文件中声明

(3) 应用的生命周期函数

• onLoad: 监听页面加载,一个页面触发一次
• onShow: 页面显示/切入前台时触发
• onReady: 页面初次渲染完成,一个页面触发一次
• onHide: 页面隐藏
• onUnload: 页面卸载,一个页面触发一次

其中, 页面的生命周期范围较小, 应用程序的生命周期范围较大

13 wxs

13.1 概念

WXS（WeiXin Script）是小程序独有的一套脚本语言，结合WXML，可以构建出页面的结构。

wxml中无法调用在页面的.js中定义的函数（不包括事件绑定），但是，wxml中可以调用wxs中定义的函数。因此，小程序中 wxs的典型应用场景就是“过滤器

13.2 wxs和js的关系

虽然wxs的语法类似于JavaScript，但是wxs和JavaScript是完全不同的两种语言：

①wxs有自己的数据类型

• number数值类型、string字符串类型、boolean布尔类型、object对象类型、
• function函数类型、array数组类型、date日期类型、regexp正则

②wxs不支持类似于ES6及以上的语法形式

• 不支持：let、const、解构赋值、展开运算符、箭头函数、对象属性简写、etc...
• 支持：var定义变量、普通function函数等类似于ES5的语法

③wxs遵循CommonJS规范

• module对象
• require()函数
• module.exports对象

13.3 基础语法

(1) 内嵌wxs脚本

wxs代码可以编写在wxml文件中的 标签内，就像Javascript代码可以编写在html 文件中的标签内一样。

<!-- 定义一个文本，调用wxs中的方法 -->
<view>{{ m1.toUpper(username) }}</view>
<!-- 定义一个wxs的标签，并指定module模块名称 -->
<wxs module="m1">
<!-- 向外暴露一个方法 -->
module.exports.toUpper = function(str) { return str.toUpperCase() }
</wxs>

wxml文件中的每个标签，必须提供module属性，用来指定当前wxs 的模块名称，方便在wxml 中访问模块中的成员

(2) 外联wxs

wxs代码还可以编写在以.wxs为后缀名的文件内，就像Javascript代码可以编写在以.js 为后缀名的文件中一样。

在wxml中引入外联的wxs脚本时，必须为 标签添加module和src 属性，其中：

• module用来指定模块的名称
• src用来指定要引入的脚本的路径，且必须是相对路径

wx.stopPullDownRefresh合并下拉刷新

14 自定义组件

14.1 组件的创建和使用

(1) 创建组件

① 在项目的根目录中，鼠标右键，创建components->test文件夹

② 在新建的components->test文件夹上，鼠标右键，点击“新建Component”

③ 键入组件的名称之后回车，会自动生成组件对应的4个文件，后缀名分别为.js，.json，.wxml 和 .wxss

注意：为了保证目录结构的清晰，建议把不同的组件，存放到单独目录中

(2) 局部引用组件

在页面的.json配置文件中引用组件的方式，叫做“局部引用”。示例代码如下：

{

        "usingComponents": {

                "my-test1":"/components/test/test"

        }

}

(3) 全局引入

// 在组件的.js 文件中新增加如下配置
Component({
        options: {
                // 默认值isolated: 代表启动样式隔离
                // apply-shared: 代表页面wxss样式将影响自定义组件
                // shared: 代表双向的影响
                styleIsolation: 'isolated'
                }
})
// 或在组件的.json 文件中新增加如下配置
{
        "styleIsolation": "isolated"
}

 (4) styleIsolation的可选值

 14.3 组件数据, 方法和属性

(1) 页面布局

<!--components/test/test.wxml-->
<button>N1的值: {{ n1 }}</button>
<button>N2的值: {{ n2 }}</button>
<button>N1 + N2的值: {{ sum }}</button>
<button bindtap="addN1" type="warn">N1 + 1</button>
<button bindtap="subN2" type="warn">N2 - 1</button>

/**
* 组件的初始数据
*/
data: {
n1: 0,
n2: 5,
sum: 0
},

/**
* 组件的方法列表
*/
methods: {
        // 点击事件处理函数
        addN1 () {
        },
        subN2 () {
        },
        // 自定义方法： 建议和事件绑定区分开： 以 _开头
        _toast () {
        }
},

(4) properties属性

在小程序组件中，properties是组件的对外属性，用来接收外界(父组件)传递到组件中的数据

<my-test1 max="10"></my-test1>

(5) data 和 properties的区别

在小程序的组件中，properties属性和data数据的用法相同，它们都是可读可写的，只不过

Components({
// observers: 观察者
observers: {
    '对象.属性A， 对象.属性B': function(属性A的新值， 属性B的新值) {
        // 触发此侦听器的 3 种情况：
        // 【为属性A赋值】：使用setData 设置this.data.对象.属性A 时触发
        // 【为属性B赋值】：使用setData 设置this.data.对象.属性B 时触发
        // 【为对象赋值】：使用setData 设置this.data.对象 时触发
    }
})

observers: {
    '_rgb.**': function (obj) {
        this.setData({
            fullColor:`${obj.r}, ${obj.g}, ${obj.b}`
        })
    }
}

Component({
    options: {
        // 指定所有_开头的数据字段为 纯数据字段
        pureDataPattern: /^_/
    },
    data: {
        a: true, // 普通数据字段
        _b: true // 纯数据字段
    }
})

lifetimes: {

        attached() {}, // 在组件实例进入页面节点树时执行

        detached() {}, // 在组建实例被从页面节点树移除时执行

}

Component({
        // 组件在页面的生命周期函数在该节点定义
        pageLifetimes: {
                show () {}, // 页面被展示
                hide () {}, // 页面被隐藏
                resize () {} // 页面尺寸变化
        }
})

Component({
        options: {
                multipleSolts: true // 在组件定义时的选项中启用多 slot支持
        },
        properties: { /* ...*/ },
        methods: { /* ...*/ }
})

data: {
        // 父组件中的data节点
        count: 0
}
// 父组件的wxml结构
<my-test3 count="{{count}}"></my-test3>
<view>------</view>
<view>父组件中，count值为 {{count}}</view>

// 子组件的properties 节点
properties: {
        count: Number
}
// 子组件的wxml结构
<text>子组件中， count值为：{{count}}</text>

// 调用 Behavior()方法， 创建实例对象
// 并使用 module.exports 将 behavior 实例对象共享出去
module.exports = Behavior({
        // 属性节点
        properties: {},
        // 私有数据节点
        data: {
                username: 'zs'
        },
        // 事件处理函数和自定义方法节点
        methods: {},
        // 其他节点...
})

// 1.使用 required() 导入需要的自定义 behavior 模块
const myBehavior = required("../../behaviors/my-behavior")
// 2.将导入的behavior 实例对象， 挂载在 behaviors 数组节点中， 即可生效
Component({
// 在组件内部 与data节点平级的位置定义该属性，挂载behavior模块
        behaviors: [myBehavior]
})
// 3.在子组件中使用behavior中的东西
<view>在组件中共享的behavior是： {{username}}</view>