day01-微信开发概念&小程序概念&工具使用&页面搭建

微信开发的概念

什么是微信开发

微信这个软件，提供了聊天、支付、分享、收藏等各种功能，同时用户基数庞大；
微信对外开放了很多接口和能力，程序员基于这些功能进行的二次开发，叫做微信开发

微信开放平台

微信开放平台是微信对外提供微信开放接口的一个平台，这些开放出来的微信接口，供第三方的网站或App使用；
平台登录地址：https://open.weixin.qq.com

微信开放平台的能力

• 微信分享
• 微信支付
• 微信登录
• 微信收藏
• etc…

谁会使用微信开放平台

• 第三方的网站
• 第三方的App
• 后台开发人员

开发者资质认证

• 只有通过 开发者资质认证 后，才能使用开放平台提供的能力；
• 个人名义，无法申请资质认证；
• 只有企业类型的主体，才能申请资质认证

微信公众平台

• 微信公众平台：是运营者通过公众号这个媒介，为微信用户提供资讯和服务的平台；
• 微信公众平台开发：是指基于微信公众号进行的业务开发；
• 平台登录地址：https://mp.weixin.qq.com

微信公众平台

微信公众平台的账号分类

如何选择适合自己的公众号类型

• 如果想简单的发送消息，达到宣传效果，建议选择订阅号；
• 如果想用公众号获得更多的功能、提供更多的服务，例如开通微信支付，建议选择服务号；
• 如果想用来管理内部企业员工、团队，对内使用，可申请企业微信（原企业号）；
• 如果想提供类似于手机App的服务体验，建议选择小程序；

开放平台与公众平台的区别

开放平台：

• 是微信对外开放API接口的平台
• 开放的API接口，供第三方网站和App调用
• 后端程序员是开放平台开发的主力军

公众平台：

• 是基于微信公众号，为微信用户提供服务的平台
• 所有公众号，都属于微信内开发
• 前端程序员是公众平台开发的主力军

小程序

相关概念

什么是小程序

**官方定义：**微信小程序是一种全新的连接用户与服务的媒介，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
**小程序的特点：**体积小、方便获取与传播；
**小程序的理念：**用完即走；

小程序出现的目的

拦截用户流量入口，今后，用户每天的大多数应用需求，都可从微信小程序中得到满足

小程序和订阅号、服务号的区别

发布时间不同

• 2012-07 公众平台发布
• 2017-01 小程序发布

入口方式不同

• 订阅号、服务号是作为微信联系人存在的
• 小程序有自己的独立入口

体验效果不同

• 订阅号、服务号体验差、无法提供类似于App的体验
• 小程序模拟了手机App的体验，更人性化

小程序适合的业务

适合做用完即走的应用：

• 例如：点外卖、打车、代驾、共享单车等；

不适合做重度依赖的应用：

• 例如：音乐视频播放类、大型手机游戏类等；

小程序和传统手机App的区别

开发原理不同

• App：基于手机操作系统提供的API进行开发；
• 小程序：基于微信提供的API进行开发；

运行方式不同

• App：直接安装并运行在手机操作系统之上；
• 小程序：必须基于手机微信才能安装和运行；

小程序使用

小程序组件

组件是视图层的基本组成单元，它自带一些功能与微信风格一致的样式；

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

注意：所有 组件名称 与 属性名称 都是小写

API

API（Application Programming Interface，应用程序编程接口）是一些预先定义的函数

目的是提供应用程序与开发人员基于某软件或硬件得以访问一组例程的能力。通过API，开发人员无需访问程序的源码，或理解其内部工作机制的细节。

微信同样提供了对外访问的 API ，这些 API 是微信开放给小程序开发者使用的能力。例如：微信扫码、获取用户的地理位置、微信支付等等。丰富的微信 API 和庞大的用户群体，是小程序开发的魅力所在

API 的三种分类

事件监听 API

• 特点：这类 API 以 on 开头，用来监听某个事件是否触发
• 举例：wx.onNetworkStatusChange(function callback) // 当网络状态更改时触发此事件

同步 API

• 特点1：以 Sync 结尾的 API 都是同步 API
• 特点2：同步 API 的执行结果，可以通过函数返回值直接获取
• 举例：var batteryInfo = wx.getBatteryInfoSync() // 获取电池信息

异步 API

• 特点：通常需要指定回调函数接收调用的结果；小程序中，大多数 API 都是异步 API
• 举例：wx.request(Object object) // 发起 HTTPS 网络请求

官方示例中展示的API接口

可以扫码体验小程序中的API接口，例如：发起支付、获取手机网络状态、发起网络请求等

组件和API的异同点

相同点：

• 组件 和 API 都是微信官方提供的
• 组件 和 API 的目的，都是为了方便小程序的快速开发

不同点：

• 组件以UI结构布局为主，一般不需要处理业务逻辑
• API 以纯业务逻辑为主，一般没有对应的UI结构

小程序开发账号

注册小程序开发账号

• 官网申请开发者账号的教程：

https://developers.weixin.qq.com/miniprogram/introduction/index.html?t=18101214

• 填写账号信息

• 去邮箱中激活

• 信息登记，选择个人就好，如果后续公司开发，选择公司

小程序账号设置

刚注册的小程序账号，基本信息尚未被初始化，推荐进行账号设置：

基本信息设置

• 登录小程序后台 -> 设置 -> 基本设置
• 在基本设置中，可以设置小程序头像、小程序名称、介绍、服务类目等基本信息

开发者设置

• 登录小程序后台 -> 开发 -> 开发设置
• 开发者ID 是唯一的
• 服务器域名 可以去阿里云，腾讯云申请相应域名

成员管理

一个团队进行小程序的开发，那么团队成员的身份管理是很有必要的

管理员可在小程序管理后台统一管理项目成员、设置项目成员的权限

管理员可以为项目成员分配的权限如下：

• 开发者权限：开发模块权限，可使用体验版小程序、开发者工具（IDE）
• 运营者权限：管理、推广、设置等模块权限，可使用体验版小程序
• 数据分析者（基础分析）：统计模块权限，可使用体验版小程序

添加成员和分配权限

• 登录小程序后台 -> 管理-> 成员管理。
• 可以添加小程序项目成员，并配置成员的权限。
• 详细文档地址：http://kf.qq.com/faq/170302zeQryI170302beuEVn.html

小程序开发者工具的使用

下载并安装微信开发者工具

根据自己的操作系统下载对应的安装包进行安装。

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

创建一个小程序项目

• 打开小程序开发者工具，用微信扫码登录开发者工具
• 点击左侧菜单中的小程序选项
• 点击+号新建小程序项目
• 填写项目名称
• 选择项目存放路径（必须选择空目录）
• 填写AppID
• 点击新建按钮

预览小程序

**作用：**通过预览功能，可以在真机环境下，快速查看小程序的实际效果

• 点击 工具栏 -> 预览 即可弹出预览窗口

• 预览方式：扫描二维码预览、自动预览

开发者工具主界面功能介绍

开发者工具主界面，从上到下，从左到右，分别为五大部分：

• 菜单栏
• 工具栏
• 模拟器
• 编辑器
• 调试器