首页  思维导图  详情

微信小程序

2018-05-28 15:43:30   139  举报





AI智能生成

微信小程序授课思维导图，目前只完善了一个模块，会尽快完善发布并更新

作者其他创作

大纲/内容

模块五：微信小程序开发之原生API

1.网络API

2.媒体API

3.文件API

4.数据缓存API

5.位置API

6.设备API

7.界面API

8.WXML节点API

模块六：微信小程序开发进阶之核心技能

1.微信小程序开发之登录授权

2.微信小程序之WebSocket

3.微信小程序开发之微信支付

4.微信小程序开发之模板消息

5.微信小程序开发之客服消息

6.微信小程序开发之分享与二维码

7.微信小程序开发之打开APP

模块七：微信小程序开发项目实战案例

1.项目分析

2.前后端项目讲解

3.数据库设计

4.搭建后端项目

5.前端UI素材准备及微信小程序项目创建

6.微信小程序后端接口准备

7.注册登录模块

8.评论模块

9.模板消息推送及分享模块

10.微信支付模块

11.项目部署及发布运营

模块八：微信小程序开发实战注意事项与进阶指导

1.微信小程序开发实战常见问题

2.微信小程序基础库及运行机制

3.Wepy框架介绍

4.微信小程序开发架构设计与工程化构建

5.微信小程序开发性能优化

6.微信小程序产品开发创意设计

模块一：微信小程序介绍与开发准备

1.微信小程序背景介绍及特色

1.1 小程序的背景

1.1.1 为什么会有小程序？（也就是微信小程序的诞生背景）

更好的体验

浏览网页的时候经常会出现加载缓慢的情况，甚至有些页面还会出现短暂白屏的问题，那么微信小程序的诞生就是为了拥有更好的原生应用体验，保证页面的资源能够进行快速的加载，

规范与管理

对于微信来说，可以更加方便的接入和管理我们开发的微信小程序应用，为什么这么说呢？其实在微信推出小程序之前，曾经推出过一款针对网页开发者的工具包，我们称之为JSSDK，这套JSSDK让网页开发者根据微信的原生能力来做一些事情，比如我们的微信支付，微信定制化分享，微信卡卷等等。但是网页开发者是根据网页开发标准来进行开发的，那么我们就可以轻易的绕过微信平台的一些审核和管控，所以我们后面会看到微信小程序它其实有自己的一套框架描述语言，让开发者根据小程序的开发规范来进行开发，所以说微信它帮助我们在对应用质量上，可以做一个严格的把控，基于以上两点，微信推出了小程序

1.1.2 什么是小程序？

小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想

用户扫一扫或者搜一下即可打开应用，也体现了“用完即走”的理念

用户不用关心是否安装太多应用的问题，应用将无处不在，随时可用，但又“无需安装卸载”

概括上来讲，也就是小程序可以让我们通过更好的用户体验，在微信内使用我们应用程序的功能，

1.1.3 小程序和移动应用程序区别？

1.1.4 小程序能做什么？

2.从业人员就业前景及职业发展

3.微信小程序开发准备工作

3.1 申请微信小程序账号

3.1.1 注册小程序账号

3.1.2 激活邮箱

3.1.3 信息登记

3.1.4 登录小程序管理后台

3.1.5 完善小程序信息

3.1.6 绑定开发者

3.2 安装微信开发者工具

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html?t=2018426

4.安装并使用微信开发者工具

下载之后进行安装，同意协议，下一步。。，最后安装成功

第一步：选择创建微信小程序项目

第二步：选择要创建的小程序的项目目录，以及输入AppID(在开发设置那栏就可以找到)，接下来输入要开发的小程序项目名称

第三步：如果输入的是空目录的话，会创建一个快速启动的模板

第四步：进入微信开发者工具界面

模块二：上手第一个微信小程序

1.微信小程序代码结构及基本配置

1.1 四个目录结构

首先，在这里我们看到了这个目录结构下，他有四个文件，这四个文件的作用就是，帮我们注册一个文件小程序，然后帮我们配置一个微信小程序他的一个全局配置信息，以及帮我们去设置一下微信小程序他的一个全局样式，还有一个project.config.json文件，这个文件的作用就是保存微信开发者工具的配置信息，因为我们平常在使用一个工具的时候，都会根据各自的喜好，去做一个个性化的设置，例如界面的颜色，配置编译等等，如果我们换了一个电脑，重新安装这个工具的时候，往往还需要自己重新配置，考虑到这个点，微信小程序的开发者工具会帮我们在每一个项目的根目录下去生成这样的一个文件，当我们重新安装工具或者换电脑，我们只需要将这个项目的代码导入进去，开发者工具就可以自动的帮我们去恢复这个项目的个性化设置，

app.js就是帮我们的微信小程序去注册一个这样的微信小程序应用

app.json就是帮我们去进行一个微信小程序的一个全局配置，包括我们的一些网络请求的超时时间，还有一些窗口的表现，还有各个页面的注册路径，

app.wxss设置微信小程序的全局样式

pages文件夹里面存放的是微信小程序所有的一个小程序页面，每个小程序页面最多是由四个文件组成，分别是js文件，json文件，wxml文件，wxss文件。 js文件时帮我们去处理小程序页面的逻辑和一些数据交互，json文件是帮我们配置微信小程序的一个页面的一个配置信息，wxml是用来帮我们去展示小程序页面的元素和内容，wxss文件是帮我们去设置小程序页面的元素以及样式，untils文件一般会存放我们的一些工具函数，可以达到一个代码复用的目的。

2.1 文件结构

刚刚我们讲了微信小程序的目录结构，我们可以知道我们小程序它的配置文件其实是有两个，分别是：app.json全局配置文件，另一个是页面的配置文件，在这里全局的配置有五项，分别是pages，tabBar,networkTimeout,debug,navgationStyle，window

pages主要是注册我们微信小程序的所有页面

tabBar是因为如果我们小程序多tab的应用，我们就可以通过这个tabBar的配置项来指定tab栏的表现

networkTimeout可以去设置我们各个网络请求的一个超时时间

通过开启debug在微信开发者工具控制台里面打印出我们所需要的调试信息，

在这张图里面我们并没有展示window对象，是因为我们在微信小程序页面也可以去设置它的一些window对象的配置属性，比如我们导航栏的相关信息设置，其中包括导航栏的背景颜色，导航栏的标题颜色，导航栏标题的文字内容，以及窗体的表现，窗体的表现主要是窗体的一个背景颜色，还有窗体在下拉时的文本样式，通过enablePullDownRefresh这个选项呢，可以去设置微信小程序全局或单个页面下拉刷新的一个表现。如果页面想设置滚动，我们也可以通过disabledScroll设置我们页面是否开启滚动。如果维微信小程序全局和单个页面window的一些配置项重复了，页面的配置项会覆盖我们全局的配置项，

最后说明一下，我们每个文件结构里面的方法都有很多相关设置的参数，大家可以结构官方开发文档来进行学习

2.微信小程序开发者工具详解

3.写一个HelloWorld

3.1 当我们创建了一个小程序项目之后，就会进入到微信开发者工具界面，在代码编辑区这里我们可以看到有一个project.config.json文件，这个文件是开发者工具自动帮我们项目生成的一个开发者工具的配置文件，这个文件主要是保存了我们对开发者工具的一些个性化设置，

3.2 在前面我们提过，构建一个微信小程序应用至少要有两个文件，一个是app.js文件，一个是app.json文件

3.2.1 app.js是帮我们去注册一个微信小程序的应用

3.2.2 app.json是对我们微信小程序应用的一个全局配置，

3.3 创建一个app.js文件

3.3.1 通过调用一个app函数来注册我们小程序的一个应用，这个app函数里面需要去传一个参数，这个参数是object类型的一个参数，在这个参数里面可以传入一些生命周期的钩子和一些事件处理函数，以及一些全局的数据。在这里我们可以传入一个空的类型的参数

3.4 创建一个app.json文件

3.4.1 在app.json这个文件里面，我们需要去注册我们的微信小程序所有页面的一个路径，我们通过page的属性来注册

3.4.2 在app.json这个文件里面，page属性的值是一个list类型的值。list里面是我们所有页面的一个路径

3.5 因为我们要写一个hello world，所以我们至少要有一个页面，在这里我们要去创建一个helloworld的页面，前面我们说过，要创建一个未见小程序的应用，我们需要有四个文件，js文件，json文件，wxml文件，wxss文件

3.5.1 在这里我们去创建一个文件名叫helloworld的wxml文件（wxml就是要描述页面上都有哪些内容）

3.5.2 通过view标签来包含helloworld，（view标签我们后面在小程序的框架和组件的时候我们会提到）

3.6 接下来在创建一个helloworld.js文件

3.6.1 helloworld.js文件是帮助我们去注册一个微信小程序页面，类似于app.js一样，他是通过page函数去帮我们注册的

3.6.2 这个page函数也需要一个参数，这个参数的类型也是object，我们可以在这个参数传入一些我们页面的生命周期钩子，和一些事件处理函数，以及我们页面的一些默认数据等等。我们可以先暂时传入一个空的对象参数

3.7 然后我们在创建一个helloworld.json文件，这个helloworld.json文件是我们helloworld页面的一些配置，这里我们至少要传入一个空的page对象

3.8 我们在创建一个helloworld.wxss文件，这个文件用来描述我们小程序页面的样式

3.9 在这里helloworld算是创建完成了，这四个文件我们需要保持他们的命名一致，

3.10 接下来在app.json文件里面去注册我们刚刚创建的helloworld这个页面的路径，因为这个helloworld页面是在我们的根目录下面，所以我们就填入这个根目录里面对应的文件路径，保存之后，我们可以看到在开发者工具编译之后，我们的模拟器上就显示了一个helloworld，这个就是我们刚刚写的helloworld页面

3.11 在这里大家可以思考一下，如果我们的页面文件过多，我们都放在根目录下面，是不是就会显得杂乱无章？

3.11.1 在这里我们建议是要有一个专门去管理微信小程序页面的文件夹

3.11.2 首先在这里我们先创建一个名称叫pages的文件目录

3.11.3 然后在创建一个名称叫helloworld的文件目录，这个目录是管理这个页面对应的四个代码文件，将这个四个文件放入helloworld的这个文件目录里面

3.11.4 然后我们在将helloworld的这个文件目录在放到名称叫pages的这个目录里面

3.11.5 我们可以看到，在我们的文件路径更改之后，其实开发者工具会自动的再去编译一次，编译之后我们可以看到控制台报了一个错，报的错误的内容是没有找到在我们的app.json文件里面定义的这个helloworld页面对应的wxml文件，所以我们需要重新去配置一些，更改helloworld文件的路径，这个时候保存一下，我们在开发者工具页面左侧就可以看到我们的helloworld页面的内容了

3.11.6 接下来我们可以通过wxss文件的样式让我们helloworld页面的内容显得更好看一些

模块三：微信小程序开发框架

1.WXML

1.1 开发框架组成介绍

1.1.1 wxml

主要是描述页面的内容

1.1.2 wxss

主要是描述页面的样式

1.1.3 wxs

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

1.1.4 javascript

处理页面的交互逻辑，及数据通信

1.2 WXML之语法

1.2.1 什么是wxml？

wxml（Wei Xin Markup Lanuage）是框架设计的一套标签语言，结合组件，wxs和事件系统，可以构建出页面的结构

1.2.2 wxml语法

1.3 WXML特性之数据绑定

1.3.1 WXML 中的动态数据均来自对应 Page 的 data

1.3.2 WXML中的数据绑定分为3种：

简单绑定：

文本内容绑定

组件属性绑定

控制属性绑定

关键字绑定

运算绑定：

三元运算

算数运算

逻辑判断

字符串运算

数据路径运算

组合：

数组

对象

1.4 WXML特性之列表渲染

wx:for

在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。

默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item

语法

wx:for-item="自定义的变量名"

使用 wx:for-item 可以指定数组当前元素的变量名

wx:for-index="自定义的下标"

使用 wx:for-index 可以指定数组当前下标的变量名

类似 block wx:if，也可以将 wx:for 用在<block/>标签上，以渲染一个包含多节点的结构块。

wx:key

如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容，<switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。

wx:key 的值以两种形式提供：

字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。

保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。

注意：如不提供 wx:key，会报一个 warning，如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。

1.5 WXML特性之条件渲染

wx:if

语法：

在框架中，使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块,其中condition的值可以通过data数据来设置

wx:else

语法：

也可以设置一个else块

wx:elseif

语法：

进行多重条件判断

wx:block

语法:

因为 wx:if 是一个控制属性，需要将它添加到一个标签上。如果要一次性判断多个组件标签，可以使用一个 <block/> 标签将多个组件包装起来，并在上边使用 wx:if 控制属性。

注意： <block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

wx:if vs hidden

因为 wx:if 之中的模板也可能包含数据绑定，所有当 wx:if 的条件值切换时，框架有一个局部渲染的过程，因为它会确保条件块在切换时销毁或重新渲染。

同时 wx:if 也是惰性的，如果在初始渲染条件为 false，框架什么也不做，在条件第一次变成真的时候才开始局部渲染。

相比之下，hidden 就简单的多，组件始终会被渲染，只是简单的控制显示与隐藏。

一般来说，wx:if 有更高的切换消耗而 hidden 有更高的初始渲染消耗。因此，如果需要频繁切换的情景下，用 hidden 更好，如果在运行时条件不大可能改变则 wx:if 较好。

1.6 WXML特性之模板及引用

模板

WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。

定义模板

使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：

<template name="msgItem">

<view>

<text> {{index}}: {{msg}} </text>

<text> Time: {{time}} </text>

</view>

</template>

Page({

data: {

item: {

index: 0,

msg: 'this is a template',

time: '2016-09-15'

}

}

})

使用模板

is 属性可以使用 Mustache 语法，来动态决定具体需要渲染哪个模板：

引用

WXML 提供两种文件引用方式

import

import只能引用我们所定义的模板文件里面的模板内容块

import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template。

也就是说，我们只能引用目标文件它所定义的template模板，如果说目标文件里面你嵌套了其他文件的template模板是不会被引用的

include

include 可以将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置

2.WXSS

像素单位

rpx

样式表

导入样式表

@import css文件的路径

内联样式表

选择器

class选择器

id选择器

元素选择器

分组元素器

伪元素选择器

::after

::before

全局样式和局部样式

定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

3.WXS

4.自定义组件

5.生命周期

5.2 应用声明周期

onLaunch

第一次进入小程序，客户端帮我们初始化小程序的一个运行环境，那么同时会从cdn上下载，或者是本地缓存中，拿到小程序的一个代码包，然后注入到运行环境里面，初始化完毕之后，微信客户端会给逻辑层的app.js的app实例来派发onLaunch事件，那么，在逻辑层，app.js的app构造器参数里面onLaunch事件就会被调用，我们可以在onLaunch这个事件方法里面对我们的程序功能进行一些操作

onShow

当我们再一次回到微信，或者说打开小程序，微信客户端会将我们后台态的小程序会被唤醒，并进入前台状态，在app构造器里面所定义的onShow方法就被调用

onHide

进入小程序之后，用户可以点击我们左上角的关闭，或者是按住手机的home键离开小程序，这个时候小程序是没有被销毁的，小程序进入后台状态，那么在逻辑层我们的app构造函数他的参数所定义的onHide方法就会被调用

onError

当我们小程序发生脚本错误或者api调用失败时，会触发我们在app构造器里面所定义的onError方法，这个时候程序会给onError方法里面传入一些信息，

globaldata

这个globaldata表示小程序应用全局的一个数据

5.1 页面声明周期

onLoad

进入小程序之后，加载小程序的页面入口文件，载入小程序页面之后，会执行onload方法

onShow