微信开发的概念
什么是微信开发
微信这个软件，提供了聊天、支付、分享、收藏等各种功能，同时用户基数庞大；
微信对外开放了很多接口和能力，程序员基于这些功能进行的二次开发，叫做微信开发
微信开放平台
微信开放平台是微信对外提供微信开放接口的一个平台，这些开放出来的微信接口，供第三方的网站或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
- 点击新建按钮
预览小程序
**作用：**通过预览功能，可以在真机环境下，快速查看小程序的实际效果
-
点击 工具栏 -> 预览 即可弹出预览窗口
-
预览方式：扫描二维码预览、自动预览
开发者工具主界面功能介绍
开发者工具主界面，从上到下，从左到右，分别为五大部分：
- 菜单栏
- 工具栏
- 模拟器
- 编辑器
- 调试器
小程序的结构和组件
├── pages ······································ 【目录】存放所有的小程序页面
│ │── index ······································· 【目录】index 页面
│ │ ├── index.wxml ··························· 【文件】 index 页面的结构
│ │ ├── index.js ·································· 【文件】 index 页面的逻辑
│ │ ├── index.json ····························· 【文件】 index 页面的配置
│ │ └── index.wxss ···························· 【文件】 index 页面的样式
│ └── logs ·········································· 【目录】 logs 页面
│ ├── logs.wxml ································【文件】 logs 页面的结构
│ └── logs.js ·······································【文件】 logs 页面的逻辑
└── utils ········································ 【目录】 存放小程序中用到的工具函数
├── app.js ···································· 【文件】 小程序逻辑
├── app.json ······························· 【文件】 小程序的公共配置
├── app.wxss ······························ 【文件】小程序公共样式表
├── project.config.json ··········· 【文件】 开发工具配置文件
注意：
-
对于小程序来说：
- app.js 和 app.json 文件是必须的
-
对于小程序的页面来说：
- .js 和 .wxml 文件是必须的
小程序页面和Vue组件的对比
- 每个.vue组件，是由 template 模板结构、script 行为逻辑、 style 样式3个部分组成的
- 每个小程序的页面，是由 .wxml 结构、.js 逻辑、.json 配置、.wxss 样式表 这4个文件组成的
小程序页面中每个组成部分的作用
.wxml用来描述当前这个页面的结构，同时提供了类似于Vue中指令的语法.js用来定义当前页面中用到的数据，交互逻辑和响应用户的操作.json用来定义当前页面的个性化配置，例如，为每个页面单独配置顶部颜色，是否允许下拉刷新等- .wxss 用来定义样式来美化当前的页面
入门使用
创建自己的小程序页面
- 在 pages 目录上右键，选择 “新建目录”，并将目录命名为 home
- 在新建的 home 目录上右键，选择 “新建page”,并将页面命名为 home
- 选择“新建page”后，开发者工具会自动创建页面相关的4个文件
设置小程序项目的默认首页
- 打开 app.json 全局配置文件，找到 pages 节点。这个 pages 节点是一个数组，存储了项目中所有页面的访问路径。其中，pages 数组中第一个页面路径，就是小程序项目的默认首页
- 修改 pages 数组中路径的顺序，即可修改小程序的默认首页
小程序常用的UI组件
text文本
text是一个行内组件，一行显示多个
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| selectable | Boolean | false | 文本是否可选，除了text组件之外，其它组件都无法长按选中 |
| space | String | false | 显示连续空格，可选值：ensp(每一个空格英文的长度)、emsp(每一个空格中文的长度)、nbsp(每一个空格对应当前一个文字的长度) |
| decode | Boolean | false | 是否解码，可解析 < > & '     |
view视图容器
view 是一个块级组件，每个view独自占据一行
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| hover-class | String | none | 指定按下去的样式类。当 hover-class=“none” 时，没有点击态效果 |
| hover-stop-propagation | Boolean | false | 指定是否阻止本节点的祖先节点出现点击态 |
| hover-start-time | Number | 50 | 按住后多久出现点击态，单位毫秒 |
| hover-stay-time | Number | 400 | 手指松开后点击态保留时间，单位毫秒 |
button按钮
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| size | String | default | 按钮的大小 default为块级按钮、mini为小按钮 |
| type | String | default | 按钮的样式类型；primary、default、warn—-primary提交成功、default默认灰色、warn警告色 |
| plain | Boolean | false | 按钮是否镂空，背景色透明；true、false—-按钮是否镂空，背景色透明 |
| disabled | Boolean | false | 是否禁用；true、false—-是否禁用 |
| loading | Boolean | false | 名称前是否带 loading 图标；true、false—-名称前是否带 loading 图标 |
input输入框
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | String | 输入框的初始内容 | |
| type | String | “text” | input 的类型：text-文本输入键盘；number-数字输入键盘；idcard-身份证输入键盘；digit-带小数点的输入键盘 |
| password | Boolean | false | 是否是密码类型 |
| placeholder | String | 输入框为空时占位符，提示文本 | |
| disabled | Boolean | false | 是否禁用 |
| maxlength | Number | 140 | 最大输入长度，设置为 -1 时不限制最大长度 |
image图片
常见的属性：
-
src ：支持本地和网络上的图片
-
mode ：指定图片裁剪、缩放的模式
- 注意：image组件默认宽度300px、高度225px
更多属性用法请翻阅 image 官方文档：
https://developers.weixin.qq.com/miniprogram/dev/component/image.html
| 属性 | 类型 | 默认值 | 必填 | 说明 |
|---|---|---|---|---|
| src | string | 否 | 图片资源地址 | |
| mode | string | scaleToFill | 否 | 图片裁剪、缩放的模式 |
| lazy-load | boolean | false | 否 | 图片懒加载，在即将进入一定范围（上下三屏）时才开始加载 |
| show-menu-by-longpress | boolean | false | 否 | 开启长按图片显示识别小程序码菜单 |
| binderror | eventhandle | 否 | 当错误发生时触发，，event.detail = {errMsg} | |
| bindload | eventhandle | 否 | 当图片载入完毕时触发，event.detail = {height, width} |
WXSS目前支持的选择器
- 标签选择器
- id选择器
- class选择器
- 伪类选择器
- data-*属性选择器
- :nth-of-type() 等常用的 css3 选择器
- etc…
