微信小程序 简易教程 第1篇
（1）导航到 tabBar 页面 ①tabBar 页面指的是被配置为 tabBar 的页面。 ②在使用 组件跳转到指定的 tabBar 页面时，需要指定 url 属性和 open-type 属性，其中：
③示例代码如下： （2）导航到非 tabBar 页面 ①非 tabBar 页面指的是没有被配置为 tabBar 的页面。 ②在使用 组件跳转到普通的非 tabBar 页面时，则需要指定 url 属性和 open-type 属性，其中：
③示例代码如下：
④注意：为了简便，在导航到非 tabBar 页面时，open-type=“navigate” 属性可以省略。 （3）后退导航 ①如果要后退到上一页面或多级页面，则需要指定 open-type 属性和 delta 属性，其中：
②示例代码如下：
③注意：为了简便，如果只是后退到上一页面，则可以省略 delta 属性，因为其默认值就是 1。 ④tabBar 页面是不能实现后退的效果的，只能在非tabBar 页面实现后退
（1）导航到 tabBar 页面 ①调用 (Object object) 方法，可以跳转到 tabBar 页面。其中 Object 参数对象的属性列表如下：
②示例代码 （2）导航到非 tabBar 页面 ①调用 (Object object) 方法，可以跳转到非 tabBar 的页面。其中 Object 参数对象的属性列表如下： ②示例 （3）后退导航 ①调用 (Object object) 方法，可以返回上一页面或多级页面。其中 Object 参数对象可选的属性列表如下：
②示例：
（1）声明式导航传参 ①navigator 组件的 url 属性用来指定将要跳转到的页面的路径。同时，路径的后面还可以携带参数：
②代码示例如下： （2）编程式导航传参 调用 (Object object) 方法跳转页面时，也可以携带参数，代码示例如下：
（3）在 onLoad 中接收导航参数 通过声明式导航传参或编程式导航传参所携带的参数，可以直接在 onLoad 事件中直接获取到，示例代码如下：
微信小程序 简易教程 第2篇
(1)在login中的编写一个
（2）在login中的编写获取头像、昵称的值的事件
(3)在uesrinfo中的先给data两个值分别为“mingzi”,_touxiang_并且给一个空值和一个默认的头像，然后用options在编写获取其他页面的值
(4)然后在里面把
（5）最终实现效果 注意：如果没有提示框可以在左上角详情里面找需要把调试基础库调试到以下
微信小程序 简易教程 第3篇
(1)在login里面的中在
注意：要使用 open-type=_contact_
（2）在login里面的中编写样式
（3）效果图
注意：需要真机调试，也可以自己在小程序里面添加客服
微信小程序 简易教程 第4篇
（1）我们可以把每个小程序运行的过程，概括为生命周期： ①小程序的启动，表示生命周期的开始 ②小程序的关闭，表示生命周期的结束 中间小程序运行的过程，就是小程序的生命周期 （2）在小程序中，生命周期分为两类，分别是： ①应用生命周期 特指小程序从启动 -> 运行 -> 销毁的过程 ②页面生命周期 特指小程序中，每个页面的加载 -> 渲染 -> 销毁的过程
（1）生命周期函数：是由小程序框架提供的内置函数，会伴随着生命周期，自动按次序执行。 （2）生命周期函数的作用：允许程序员在特定的时间点，执行某些特定的操作。例如，页面刚加载的时候，可以在 onLoad 生命周期函数中初始化页面的数据。 （3）注意：生命周期强调的是时间段，生命周期函数强调的是时间点。
（1）小程序中的生命周期函数分为两类，分别是： ①应用的生命周期函数：特指小程序从启动 -> 运行 -> 销毁期间依次调用的那些函数 ②页面的生命周期函数：特指小程序中，每个页面从加载 -> 渲染 -> 销毁期间依次调用的那些函数 （2）小程序的应用生命周期函数需要在 中进行声明，示例代码如下：
（3）小程序的页面生命周期函数需要在页面的 .js 文件中进行声明，示例代码如下：
微信小程序 简易教程 第5篇
组件的引用方式分为“局部引用”和“全局引用” （1）局部引用：组件只能在当前被引用的页面内使用，在哪个页面的 .json文件中引用，就在哪个页面的 .wxml文件中使用 （2）全局引用：在 全局配置文件中引用组件的方式，叫做“全局引用”。在任意页面都可以使用
从表面来看，组件和页面都是由 .js、.json、.wxml 和 .wxss 这四个文件组成的。但是，组件和页面的 .js 与 .json 文件有明显的不同： （1）组件的 .json 文件中需要声明 “component”: true 属性 （2）组件的 .js 文件中调用的是 Component() 函数，页面是Page()函数 （3）组件的事件处理函数需要定义到 methods 节点中，页面的事件处理函数跟data平级即可
（1）默认情况下，自定义组件的样式只对当前组件生效，不会影响到组件之外的 UI 结构，如图所示： ①组件 A 的样式不会影响组件 C 的样式 ②组件 A 的样式不会影响小程序页面的样式 ③小程序页面的样式不会影响组件 A 和 C 的样式 （2）好处： ①防止外界的样式影响组件内部的样式 ②防止组件的样式破坏外界的样式 （3）组件样式隔离的注意点： ①中定义的全局样式在组件中使用是无效的 ②只有class选择器会有样式隔离效果，id选择器、样式选择器、标签选择器不受样式隔离的影响。 建议：在组件和引用组件的页面中使用class选择器，不要使用id、属性、标签选择器 （4）修改组件的样式隔离选项 默认情况下，自定义组件的样式隔离特性能够防止组件内外样式互相干扰的问题。但有时，我们希望在外界能够控制组件内部的样式，此时，可以通过 styleIsolation 修改组件的样式隔离选项，用法如下： ①styleIsolation 的可选值
②可以在组件的 .js文件/ .json中配置
（1）data 数据 在小程序组件中，用于组件模板渲染的私有数据，需要定义到 data 节点中，示例如下：
（2）methods 方法 在小程序组件中，事件处理函数和自定义方法需要定义到 methods 节点中，示例代码如下：
（3）properties 属性 在小程序组件中，properties 是组件的对外属性，用来接收外界传递到组件中的数据，示例代码如下： （4）data 和 properties 的区别 在小程序的组件中，properties 属性和 data 数据的用法相同，它们都是可读可写的，只不过： ①data 更倾向于存储组件的私有数据 ②properties 更倾向于存储外界传递到组件中的数据 （5）使用 setData 修改 properties 的值 由于 data 数据和 properties 属性在本质上没有任何区别，因此 properties 属性的值也可以用于页面渲染，或使用 setData 为 properties 中的属性重新赋值，示例代码如下：
（1）数据监听器用于监听和响应任何属性和数据字段的变化，从而执行特定的操作。它的作用类似于 vue 中的 watch 侦听器。在小程序组件中，数据监听器的基本语法格式如下： （2）数据监听器的基本用法 ①组件的 UI 结构如下： ②组件的 .js 文件代码如下：
（3）监听对象属性的变化 数据监听器支持监听对象中单个或多个属性的变化，示例语法如下：
（1）概念：纯数据字段指的是那些不用于界面渲染的 data 字段。 （2）应用场景：例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。 （3）好处：纯数据字段有助于提升页面更新的性能。 （4）使用规则 在 Component 构造器的 options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段，示例代码如下：
（1）在自定义组件的 wxml 结构中，可以提供一个 节点（插槽），用于承载组件使用者提供的 wxml 结构。slot只是一个占位，让使用者来决定这里填充什么。
在小程序中，默认每个自定义组件中只允许使用一个 进行占位，这种个数上的限制叫做单个插槽。
在小程序的自定义组件中，需要使用多 插槽时，可以在组件的 .js 文件中进行启用。
微信小程序 简易教程 第6篇
（1）出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制： ①只能请求 HTTPS 类型的接口 ②必须将接口的域名添加到信任列表中 （2）发起 GET 请求 （3）发起 POST 请求 （4）跳过 request 合法域名校验 ①如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https 协议的接口。此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启「开发环境不校验请求域名、TLS 版本及 HTTPS 证书」选项，跳过 request 合法域名的校验。
②注意：跳过 request 合法域名校验的选项，仅限在开发与调试阶段使用！ （5）跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。Ajax 技术的核心是依赖于浏览器中的 XMLHttpRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Ajax 请求”，而是叫做“发起网络数据请求”。 （6）在页面刚加载时请求数据 在很多情况下，我们需要在页面刚加载的时候，自动请求一些初始化的数据。此时需要在当前页面的.js文件中 onLoad 事件调用获取数据的函数，示例代码如下：
微信小程序 简易教程 第7篇
(1)在中编写退出按钮 要用bind:tap
(2)在编写退出事件
（3）效果图
微信小程序 简易教程 第8篇
（1）WXSS (WeiXin Style Sheets)是一套样式语言，用于美化 WXML 的组件样式，类似于网页开发中的 CSS。 （2）WXSS 具有 CSS 大部分特性，同时，WXSS 还对 CSS 进行了扩充以及修改，以适应微信小程序的开发。 与 CSS 相比，WXSS 扩展的特性有： ①rpx 尺寸单位 ②@import 样式导入
（1）rpx 的实现原理非常简单：鉴于不同设备屏幕的大小不同，为了实现屏幕的自动适配，rpx 把所有设备的屏幕，在宽度上等分为 750 份（即：当前屏幕的总宽度为 750rpx）。小程序在不同设备上运行的时候，会自动把 rpx 的样式单位换算成对应的像素单位来渲染，从而实现屏幕适配。 ①在较小的设备上，1rpx 所代表的宽度较小 ②在较大的设备上，1rpx 所代表的宽度较大
@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。示例如下：
（1）全局样式：定义在 中的样式为全局样式，作用于每一个页面。 （2）局部样式：在页面的 .wxss 文件中定义的样式为局部样式，只作用于当前页面。 注意：当局部样式和全局样式冲突时，根据就近原则，局部样式会覆盖全局样式
微信小程序 简易教程 第9篇
1.在顶部编写标题
2.在中编写头部内容，在中编写样式
3.在中编写账号密码内容，在中编写样式
4.在中编写微信授权内容，在中编写样式
5.在中编写微信账号切换内容，在中编写样式
6.实现切换内容
(1)在
(2)在里面编写date方法,使loginMod为true
(3)如果rdvalue的值等于0则跳转微信授权页面反之账号登录页面。
7.输入正确账号密码登录跳转
(1)在中编写，在中写样式
（2）在中建一个uesrinfo页面
（3）在编写代码判断账号密码是否正确，在中不要忘了给name值。
（4）输入正确的账号密码实现跳转页面效果图如下：
微信小程序 简易教程 第10篇
[如有不足欢迎补充评论]
（1）在任何浏览器中搜索“微信小程序官方”在里面进行注册
（3）填写信息登记，完成注册。
(1)每一个界面都在默认生成的pages文件下。默认叫
注意：
后续写动态效果代码的位置 特效与后台交互获取数据
引用其它组件内容的配置文件位置
类似于html页面，写布局的
类似与写的css文件
（2）在中编写页面，每个页面都需要配置文件中
（2）在tabBar中编写导航栏
(3)图片路径要和pages同一目录
微信小程序 简易教程 第11篇
（1）手机微信是小程序的宿主环境 （2）小程序宿主环境包含的内容 ①通信模型 ②运行机制 ③组件 ④API
（1）小程序中通信的主体是渲染层和逻辑层，其中： ①WXML 模板和 WXSS 样式工作在渲染层 ②JS 脚本工作在逻辑层 （2）小程序中的通信模型分为两部分： ①渲染层和逻辑层之间的通信：由微信客户端进行转发 ②逻辑层和第三方服务器之间的通信：由微信客户端进行转发
（1）小程序启动的过程 ①把小程序的代码包下载到本地 ②解析 全局配置文件 ③执行 小程序入口文件，调用 App() 创建小程序实例 ④渲染小程序首页 ⑤小程序启动完成 （2）页面渲染的过程 ①加载解析页面的 .json 配置文件 ②加载页面的 .wxml 模板和 .wxss 样式 ③执行页面的 .js 文件，调用 Page() 创建页面实例 ④页面渲染完成
（1）view ①普通视图区域 ②类似于 HTML 中的 div，是一个块级元素 ③常用来实现页面的布局效果 （2）scroll-view ①可滚动的视图区域 ②常用来实现滚动列表效果
（3）轮播图容器组件swiper和轮播图 item 组件 swiper-item ①实现如图的轮播图效果： ②swiper 组件的常用属性
（1）text：文本组件，类似于 HTML 中的 span 标签，是一个行内元素。
（2）rich-text：富文本组件，支持把 HTML 字符串渲染为 WXML 结构
（1）button ①按钮组件 ②功能比 HTML 中的 button 按钮丰富 ③通过 open-type 属性可以调用微信提供的各种功能（客服、转发、获取用户授权、获取用户信息等）
（2）image ①图片组件 ②image 组件默认宽度约 300px、高度约 240px ③image 组件的 mode 属性用来指定图片的裁剪和缩放模式，常用的 mode 属性值如下：
（3）navigator ①页面导航组件 ②类似于 HTML 中的 a 链接
小程序中的 API 是由宿主环境提供的，通过这些丰富的小程序 API，开发者可以方便的调用微信提供的能力，例如：获取用户信息、本地存储、支付功能等。小程序官方把 API 分为了如下 3 大类： （1）事件监听 API ①特点：以 on 开头，用来监听某些事件的触发 ②举例：(function callback) 监听窗口尺寸变化的事件 （2）同步 API ①特点1：以 Sync 结尾的 API 都是同步 API ②特点2：同步 API 的执行结果，可以通过函数返回值直接获取，如果执行出错会抛出异常 ③举例：(‘key’, ‘value’) 向本地存储中写入内容 （3）异步 API ①特点：类似于 jQuery 中的 $.ajax(options) 函数，需要通过 success、fail、complete 接收调用的结果 ②举例：() 发起网络数据请求，通过 success 回调函数接收数据
微信小程序 简易教程 第12篇
（1）小程序根目录下的 文件是小程序的全局配置文件。常用的配置项如下： ①pages：记录当前小程序所有页面的存放路径 ②window：全局设置小程序窗口的外观 ③tabBar：设置小程序底部的 tabBar 效果 ④style：是否启用新版的组件样式
（2）小程序窗口的组成部分
（1）什么是 tabBar ①tabBar 是移动端应用常见的页面效果，用于实现多页面的快速切换。小程序中通常将其分为： a.底部 tabBar b.顶部 tabBar ②注意： tabBar中只能配置最少 2 个、最多 5 个 tab 页签 当渲染顶部 tabBar 时，不显示 icon，只显示文本 （2）tabBar 的 6 个组成部分
（3）tabBar 节点的配置项 （4）list中每个 tab 项的配置选项 （5）实例 ①通过 文件的 pages 节点，快速新建 3 个对应的 tab 页面，示例代码如下： 其中，home 是首页，message 是消息页面，contact 是联系我们页面。
②打开 配置文件，和 pages、window 平级，新增 tabBar 节点 ③tabBar 节点中，新增 list 数组，这个数组中存放的，是每个 tab 项的配置对象 ④在 list 数组中，新增每一个 tab 项的配置对象。对象中包含的属性如下：