零基础学习微信小程序，个人整理的笔记，都是精华_微信小程序程序员笔记

什么是微信开发

微信对外开放了很对接口和能力，程序员基于这些功能进行的二次开发，叫做微信开发

微信开放平台

微信开放平台是微信对外提供微信开放接口的一个平台，这些开放出来的微信接口，供第三方的网站或App使用；

平台登录地址：微信平台登录网址

微信开放平台的能力

• 微信分享

• 微信支付

• 微信登录

• 微信收藏

• etc…

使用微信开放平台的人员

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

 

微信公众平台

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

微信公众号分类

公众号：

• 订阅号   --  偏于为用户传达资讯（类似报纸杂志）
• 服务号   --  偏于服务交互 （类似银行、114）
• 小程序   --  一种新的开放能力， 具有类似于手机App的使用体验
• 企业微笑（企业号）   --  企业的专业办公管理工具，用于企业员工内部通讯、打卡、审批等

如何选择适合自己的微信公众号

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

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

1. 开放平台

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

1. 公众平台

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

什么是小程序

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

小程序出现的目的

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

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

• 发布时间不同

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

• 入口方式不同

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

• 体验效果不同

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

小程序适合的业务场景

• 适合做用完即走的应用：      

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

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

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

小程序和传统app的区别

• 1. 开发原理不同

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

• 小程序：基于微信提供的API进行开发；  

• 运行方式不同

• App：直接安装并运行在手机操作系统之上；

• 小程序：必须基于手机微信才能安装和运行；

 

小程序中的组件和API

组件

• 组件是视图层的基本组成单元，它自带一些功能与微信风格一致的样式。
• 一个组件通常包括 开始标签 和 结束标签，属性 用来修饰这个组件，内容 在两个标签之内。
• 注意：所有 组件名称 与 属性名称 都是小写。

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 的目的，都是为了方便小程序的快速开发

• 不同点：

•  组件以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  推荐稳定版

小程序项目结构

• 对于小程序整体而言

• app.js和app.json文件是必须的

• 对于小程序的页面来说

• .js和.wxml文件是必须的

小程序页面和Vue组件的对比

• 每个.vue组件，是由 template 模板结构、script 行为逻辑、 style 样式3个部分组成的
• 每个小程序的页面，是由 .wxml 结构、.js 逻辑、.json 配置、.wxss 样式表 这4个文件组成的  4个页面组成一个完整的小程序页面

小程序页面中每个组成部分的作用

• .wxml : 用来描述当前这个页面的结构，同时提供了类似于Vue中指令的语法
• .js : 用来定义当前页面中用到的数据、交互逻辑和响应用户的操作
• .json : 用来定义当前页面的个性化配置，例如，为每个页面单独配置顶部颜色、是否允许下拉刷新等
• .wxss : 用来定义样式来美化当前的页面

创建自己的小程序页面

• 注意：创建之后自动生成4个文件
• 在 pages 目录上右键，选择 “新建目录”，并将目录命名为 home
• 在新建的 home 目录上右键，选择 “新建page”,并将页面命名为 home

设置小程序项目页的默认首页

• 打开 app.json 全局配置文件，找到 pages 节点。这个 pages 节点是一个数组，存储了项目中所有页面的访问路径。其中，pages 数组中第一个页面路径，就是小程序项目的默认首页。
• 修改 pages 数组中路径的顺序，即可修改小程序的默认首页。

小程序常用UI组件

• text文本

• view视图容器

• button按钮

• input输入框

• image图片
• ​​​​​​​常见的属性： src ：支持本地和网络上的图片 mode ：指定图片裁剪、缩放的模式
• 注意：image组件默认宽度300px、高度225px
• 更多属性用法请翻阅 image 官方文档： https://developers.weixin.qq.com/miniprogram/dev/component/image.html

小程序中的样式

什么是WXSS

• WXSS(WeiXin Style Sheets)是一套样式语言，用来决定 WXML 的组件应该怎么显示；
• WXSS 具有 CSS 大部分特性；
• WXSS 对 CSS 进行了扩充以及修改，以适应微信小程序的开发；
• 与 CSS 相比，WXSS 扩展的特性有： 尺寸单位 样式导入

WXSS支持的选择器

• 标签选择器
• id选择器
• class选择器
• 伪类选择器

• data-*属性选择器 :比较特殊

• nth-of-type() 等常用的
• css3 选择器 etc…

什么是rpx尺寸单位

• ​​​​​​​rpx（responsive pixel）: 是微信小程序独有的、解决屏幕自适应的尺寸单位。

• 可以根据屏幕宽度进行自适应。不论大小屏幕，规定屏幕宽为750rpx。

• 通过rpx设置元素和字体的大小，小程序在不同尺寸的屏幕上，可以实现自动适配。

rpx与px之间的换算关系

• 以 iPhone6 为例，iPhone6 的屏幕宽度为375px，共有750个物理像素，
• 则750rpx = 375px = 750物理像素，
• 1rpx = 0.5px = 1物理像素。
• 在iPhone6上，如果要绘制宽100px，高20px的盒子，换算成rpx单位，宽高分别为 200rpx 和 40rpx。

 

rpx和iPhone设计稿之间的关系

官方建议：开发微信小程序时，设计师可以用 iPhone6 作为视觉稿的标准。如果要根据iPhone6的设计稿，绘制小程序页面，可以直接把单位从 px 替换为 rpx 。例如，假设iPhone6设计稿上，要绘制一个 宽高为 200px 的盒子，换算为 rpx 为 200rpx。

@import样式导入

• 使用 @import 语句可以导入外联样式表；
• 语法格式为： @import  “wxss样式表的相对路径”;

全局样式和局部样式

• 全局样式：定义在 app.wxss 中的样式为全局样式，作用于每一个页面。
• 局部样式：

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

注意：当局部样式的权重大于或等于全局样式的权重时，才会覆盖全局的样式效果！