目录
第一章、前言
该文章会将微信小程序内的一些文件结构、作用、以及小程序内的组件、语法等等都会做详细的赘述，同时我会类比为vue2让我们更加容易的理解小程序的知识。
1.1 小程序与网页开发的区别
(1)运行环境
·网页：运行在浏览器环境中
·小程序：运行在微信环境中
(2)API
因为运行环境的不同，所以在小程序中无法调用DOM和BOM的API;但是小程序可以调用微信程序提供的各种API，例如：扫码、支付、地理定位……
(3)开发模式
·网页：浏览器+代码编辑器
·小程序：有一套自己的开发模式——
- 申请小程序开发账号
- 安装小程序开发者工具
- 创建和配置小程序项目
1.2 首次开发小程序的准备工作
(1)注册登录小程序开发账号
(2)登录成功后需要获取AppID
(3)下载安装微信开发小程序、扫码登录
·下载
·安装、首次创建微信小程序项目
第二章、小程序基础结构了解
2.1 项目构成
2.1.1 项目的基本组成结构
· 根目录下的文件
（1）pages用来存放所有小程序的页面
（2）utils用来存放工具性质的模块(例如：格式化时间的自定义模块)
（3）app.js小程序项目的入口文件
（4）app.json小程序项目的全局配置文件
（5）app.wxss小程序项目的全局样式文件
（6）project.config.json项目的配置文件
（7）sitemap.json用来配置小程序及其页面是否允许被微信索引
2.1.2 小程序页面的组成部分
·pages目录中以单独的文件夹存在，每个页面由4个基本文件组成
（1）.js文件(页面的脚本文件，存放页面的数据、事件处理函数等等)
（2）.json文件(当前页面的配置文件，配置窗口的外观、表现等)
（3）.wxml文件(当前页面的模板结构文件) -- 类似html
（4）.wxss文件(当前页面的样式表文件) -- 类似css
2.2 JSON配置文件
2.2.1 JSON配置文件的作用
(1) JSON是一种数据格式，在实际开发中，JSON总是以配置文件的形式出现。小程序中也一样：通过不同的.json配置文件，可以对小程序配置项目进行不同级别的配置
(2) 4种json配置文件
· 项目根目录中app.json配置文件 ---> app.json是当前小程序的全局配置，包括小程序的所有页面路径、窗口外观、界面表现、底部tab等等
-- pags:用来记录当前小程序所有页面的路径
-- window：全局定义小程序所有页面的背景色、文字颜色等
-- style：全局定义小程序组件所使用的样式版本
-- sitemapLocation：指明sitemap.json的位置
· 项目根目录中project.config.json配置文件； ---> 用来记录我们对小程序开发工具所做的个性化配置
-- setting中保存了编译相关的配置
-- projectname中保存的项目名称
-- appid中保存的是小程序的账号ID
·项目根目录中sitemap.json配置文件 ---> 微信已经开放了小程序内搜索，效果类似与pc页面的SEO。它是用来配置小程序页面是否允许微信索引
·每个页面文件夹中的.json配置文件 ---> 对本页面的窗口外观进行配置，页面中的配置项会覆盖app.json的window中的相同配置项
2.2.2 新建小程序页面
在根目录app.json --> pages中新增页面的存放路径（填写路径，微信小程序会自动创建基本页面的文件夹）
"pages":[
"pages/home/home",
"pages/message/message",
"pages/contact/contact"
],2.2.3 修改项目首页
为了方便我们在开发中能看着对应页写代码，我们可以把将存放的路径放在首行，微信小程序就会展示放在首行路径对应的页面。
以上为例：我们直接展示的就是home页面
2.2.4 什么是WXML
(1)定义：WXML是小程序框架设计的一套标签语言，用来构建小程序页面的结构，其作用类似于网页的HTML。
(2)与HTML的区别:
· 标签名称不同
-- HTML:(div,span,img,a)
-- WXML:(view,text,image,navigator) --与上对应的
· 属性节点不同
-- HTML:
<a herf="#">超链接</a>-- WXML:
<navigator url="pages/home/home"></navigator>
· 提供了类似于Vue的模板语法（优先学习vue2）
-- 数据绑定
-- 列表渲染
-- 条件渲染
2.2.5 什么是WXSS
(1)一套样式语言，用于描述WXML的组件样式，类似于网页开发中的css
(2)WXSS与CSS的区别:
· 新增了rpx尺寸单位
-- 什么是rpx:可以根据屏幕宽度进行自适应。规定屏幕宽度为750rpx。
公式：1rpx = （屏幕宽度）/ 750rpx
-- CSS:需要手动进行像素单位换算，例如rem
-- WXSS:在底层支持新的尺寸单位rpx，在不同大小的屏幕上小程序会自动进行换算
· 提供全局样式和局部样式
项目根目录中的app.wxss会作用于所有小程序页面;局部页面的 .wxss 样式仅对当前页面生效
· WXSS仅支持部分CSS选择器
.class和#id、element(标签元素)、并集选择器，后代选择器、::after 和::before等伪类选择器/伪元素选择器
第三章、小程序的宿主环境了解
3.1 宿主环境简介
(1)什么是宿主环境:指的是程序运行所必须的依赖环境
(2)小程序的宿主环境:手机微信
(3)小程序宿主环境包括的内容：通信模式、运行机制、组件、API
3.2 通信模型
(1)小程序中通信的主体是渲染层和逻辑层
· WXML模板和WXSS样式工作在渲染层
· JS脚本工作在逻辑层
(2)小程序中的通信模型分为两部分：
·渲染层和逻辑层之间的通信——由微信客户端进行转发
·逻辑层和第三方服务器之间的通信——由微信客户端进行转发
3.3 运行机制
（1）小程序的启动过程
-- 把小程序的代码包下载到本地
-- 解析app.json全局配置文件
-- 执行app.js小程序入口文件，调用App（）创建小程序实例
-- 渲染小程序首页
-- 小程序启动完成
（2）页面的渲染过程
-- 加载解析页面的.json配置文件
-- 加载页面的.wxml模板和.wxss样式
-- 执行页面的.js文件，调用Page()创建页面的实例
-- 页面渲染完成
3.4 组件
官方组件库：视图容器 | 微信开放文档
3.4.1 组件分类
小程序中的组件也是由宿主环境提供的，开发者可以基于组件快速搭建出漂亮的页面结构。官方把小程序的组件分成9大类——
（1）视图容器
（2）基础内容组件
（3）表单组件
（4）导航组件
（5）媒体组件
（6）map地图组件
（7）canvas画布组件
（8）开放能力
（9）无障碍访问
3.4.2 常用的视图容器组件
（1）view
-- 普通的视图区域
-- 类似于HTML中的div，是一个块级元素
-- 常用来实现页面的布局效果
-- 使用方法：
当成写页面时的div使用
（2）scroll-view
-- 可滚动的视图区域
-- 常用来实现滚动列表效果
-- 使用方法：
·添加 scroll-y 属性：允许在纵向上滚动
·添加 scroll-x 属性：允许在横向上滚动
使用竖向滚动时，必须给scroll-view一个固定的高度
.container{
width: 100px;
height: 150px;
}scroll-view的使用--需要给高度/宽度
<scroll-view class="container" scroll-y>
<view>A</view>
<view>B</view>
<view>C</view>
</scroll-view>（3）swiper和swiper-item
-- 轮播图容器组件和轮播图item组件
-- 使用方法：
两者搭配使用，在swiper-item中加入对应的轮播图内容
常用属性--
· indicator-dots显示指示点
· indicator-color指示点的颜色
· indicator-active-color当前指示点的颜色
· autopaly 是否自动切换
· interval自动切换的时间间隔
· circular是否采用衔接滑动
.swiper-contaner{
height: 150px;
}
.item{
height: 100%;
line-height: 150px;
text-align: center;
}
swiper-item:nth-child(1) .item{
background-color: skyblue;
}
swiper-item:nth-child(2) .item{
background-color: red;
}
swiper-item:nth-child(3) .item{
background-color: greenyellow;
}<swiper class="swiper-container" indicator-dots>
<!-- 第一个轮播图 -->
<swiper-item>
<view class="item">A</view>
</swiper-item>
<!-- 第二个轮播图 -->
<swiper-item>
<view class="item">B</view>
</swiper-item>
<!-- 第三个轮播图 -->
<swiper-item>
<view class="item">C</view>
</swiper-item>
</swiper>3.4.3 常用的基础内容组件
（1）text
-- 文本组件
-- 类似于HTLML中的span标签，是一个行内元素
-- 使用方法：
可以通过text组件的selectable属性，实现长按选中文本内容效果
<view>
手机号支持长按选中效果:
<text selectable>1393294928</text>
</view>（2）rich-text
-- 富文本组件
-- 支持把HTML字符串渲染为WXML结构
-- 使用方法：
通过rich-text组件的nodes属性节点，把HTML字符串渲染为对应的UI结果
<rich-text nodes="<h1 style='color:red;'>标题</h1>"></rich-text>3.4.4 常用的其他组件
（1）button
-- 按钮组件
-- 功能比HTML的button按钮丰富
-- 通过open-type属性可以调用微信提供的各个功能(客服、获取用户授权、获取用户信息等)
-- 使用方法：
<view>----------通过type指定按钮类型--------</view>
<button>默认按钮</button>
<button type="primary">主色按钮</button>
<button type="warn">警告按钮</button>
<view>----------size="mini"小尺寸按钮------</view>
<button size="mini">默认按钮</button>
<button size="mini" type="primary">主色按钮</button>
<button size="mini" type="warn">警告按钮</button>
<view>----------plain镂空按钮------</view>
<button size="mini" plain>默认按钮</button>
<button size="mini" type="primary" plain>主色按钮</button>
<button size="mini" type="warn" plain>警告按钮</button>（2）image
--图片组件
--image组件默认宽约300px,高度240px
-- 使用方法：
<view>----------image图片组件------</view>
<image style="border: 1px solid red;"></image>
<image src="/images/1.jpg"></image>
<image src="/images/1.jpg" mode="aspectFill"></image>
<image src="/images/1.jpg" mode="aspectFit"></image>
<image src="/images/1.jpg" mode="heightFix"></image>
<image src="/images/1.jpg" mode="widthFix"></image>-- image常用属性：
·scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满image元素
·aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来
·aspectFill 保持纵横比缩放图片,使图片的短边能完全显示出来
·widthFix 宽度不变，高度自动变化
·heightFix 高度不变，宽度自动变化
（3）navigator
-- 页面导航组件
-- 类似于html中的a链接
-- 使用方法：
<navigator url="/pages/index/index">我的index</navigator>3.5 API
微信开发文档API：基础 | 微信开放文档
（1）事件监听API
·特点：以on开头，用来监听某些事件监听的触发
·例子：wx.onWindowResize(function callback)监听窗口尺寸变化的事件
（2）同步API
·特点1：以Sync结尾的API都是同步API
·特点2：同步API的执行结果，可以通过函数返回值直接获取，如果执行出错，会抛出异常
·例子：wx.setStorageSync('key','value')向本地存储写入内容
（3）异步API
·特点：类似jQuery中的$.ajax(options)函数，需要通过success、fail、complete接受调用结果
·例子：wx.request()发起网络数据请求，通过success回调函数接受数据
第四章、WXML模板语法
4.1 数据绑定
（1）数据绑定的基本原则(与vue的data用法相似)
-- 在data中定义数据
-- 在WXHL中使用数据
（2）在data中定义页面的数据
-- 在页面对应的.js文件中，把数据定义到data对象中即可
（3）Mustache语法格式
-- 把data中的数据绑定到页面中渲染，使用Mustache语法（双大括号）将变量包起来即可。
-- 使用方法：
// 页面初始的数据
data:{
info:'hello world',
imgSrc:'https://img1.baidu.com/it/u=3009731526,373851691&fm=253&fmt=auto&app=138&f=JPEG?w=800&h=500',
randomNum:Math.random()*10,
},<view>
{{info}}
<image src="{{imgSrc}}"></image>
<view>{{randomNum}}</view>
<view>{{randomNum > 5 ? '数字大于5':'数字小于5'}}</view>
<view>{{randomNum*100}}</view>
</view>-- Mustache语法的应用场景：
· 绑定内容 -->展示
· 绑定属性 -->元素属性上，例如：src
· 运算（三元运算、算术运算等）
4.2 事件绑定
（1）小程序中常用的事件
| tap | bind:tap | 手指触摸后马上离开，类似HTML中的click事件 |
| input | bind:input | 文本框的输入事件 |
| change | bind:change | 状态改变时触发 |
===>bindtap的语法
-- 通过bindtap可以为组件绑定tap触摸事件(点击事件)
-- 在页面的.js文件中定义对应的事件处理函数(也就是方法)，事件参数通过形参event接收：
===>bindinput的语法
-- 通过bindinput，绑定文本框输入事件
--在在页面的.js文件中定义对应的事件处理函数
（2）事件对象的属性列表
事件回调触发的时候，会收到一个事件对象event，它的详细属性有：使用*event.xxxx*
| 属性 | 类型 | 说明 |
|---|---|---|
| type | string | 事件类型 |
| timeSteamp | Integer | 页面打开到触发事件所经过的毫秒数 |
| targe | Object | 触发事件的组件的一些属性值集合 |
| currentTraget | Object | 当前组件的一些属性值集合 |
| detail | Object | 额外的信息 |
| touches Array | Array | 触摸事件，当前停留在屏幕中的触摸点信息数组 |
| changedTouched Array | Array | 触摸事件，当前变化的触摸点信息的数组 |
===>targe与currentTraget的区别
-- targe：是触发事件的源头组件；
-- currentTraget：是当前事件所绑定的组件
（3）事件传参
-- 小程序中的事件传参比较特殊，不能在绑定事件的同时为事件处理函数传递参数
-- 解决:
· 为组件提供'data-*'自定义属性传参，其中 *代表的是参数的名字，其中不加{{}}传入的参数为字符串
<button type="primary" bindtap="btnTap2" data-info="{{2}}" data-info2="{{3}}" data-info3="4">传参{{Num}}</button>·在事件处理函数中，通过，*event.target.dataset.参数名*，获取具体的参数的值
btnTap2(e){
console.log(e)
this.setData({
Num:this.data.Num+e.target.dataset.info
})
},（4）实现文本框和data之间的数据同步
-- 定义数据
-- 渲染结构
-- 美化样式
-- 绑定input事件处理函数
第五章、WXML模板语法
5.1 条件渲染
（1）wx:if --> (用法相当于vue中的v-if)
-- 使用*wx:if="{{判断语句}}"*来判断是否需要渲染该代码
-- 也可以搭配wx:elif和wx:else来添加判断
data:{
type:1
}
<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else>保密</view>（2）结合<block>(类似vue中的template)使用wx:if，一次控制多个组件
-- 如果一次性控制多个组件的展示与隐藏，可以使用一个<block></block>标签将多个组件包装起来，并在<block>标签上使用wx:if控制属性
<block wx:if="{{false}}">
<view>view1</view>
<view>view2</view>
</block>（3）hidden(隐藏) -->(相当于vue中的v-show:true/false显示)
-- 在小程序中，直接使用hidden="{{判断语句}}"也能控制元素的显示与隐藏
//dispalay:block/none
<view hidden="{{!flag}}">条件为 true 的时候隐藏元素，否则显示</view>
//节点的创建与销毁
<view wx:if="{{flag}}">这是使用 wx:if 控制的元素</view>5.2 列表渲染
（1）wx:for -->(相当于v-for)
-- 默认情况下，循环项为索引用index表示，当前循环项用item
-- 通过wx:for可以根据指定的数组，循环渲染重复的组件结构，语法示例如下：
data:{
arr: ['苹果', '华为', '小米']
}
<view wx:for="{{arr}}" wx:key="index">
索引是：{{index}}，item 项是：{{item}}
</view>（2）可以自行针对索引index,item名进行修改：wx:for-index和wx:for-item
-- wx:for-index="idx"
-- wx:for-item="itemName"
data:{
arr: ['苹果', '华为', '小米']
}
<view wx:for="{{arr}}" wx:for-index="idx" wx:for-item="itemName" wx:key="idx">
索引是：{{idx}}，item 项是：{{itemName}}
</view>（3）wx:key的使用
-- 类似于Vue列表渲染中的:key，小程序在实现列表渲染时，也指定唯一的key值，从而提高渲染的效率
data:{
userList: [
{ id: 1, name: '小红' },
{ id: 2, name: '小黄' },
{ id: 3, name: '小白' }
]
}
<view wx:for="{{userList}}" wx:key="id" class="username">{{item.name}}</view>第六章、配置
6.1 全局配置
6.1.1 window
（1）小程序中窗口组成部分
--nacigationBar：导航栏区域
--background：背景区域，默认不可见，下拉才显示
--页面主体区域：用来显示wxml的布局
（2）了解window节点常用的配置
-- 导航栏
| nacigationBarTitleText | String | 字符串 | 导航栏标题文字内容 |
| nacigationBarBackgroundColor | HexColor | #000 | 导航栏背景颜色 |
| nacigationBarTextStyle | string | white | 导航栏标题颜色，仅支持black/white |
-- 下拉背景区域
| backgroundColor | HexColor | #fff | 窗口的背景色 |
| backgroundTextStyle | string | dark | 下来loading的样式，仅支持dark/light |
-- 开启下拉刷新和上拉触底的距离
| enablePullDownRefresh | Boolean | false | 是否全局开启下拉刷新 |
| onReachBottomDistance | Number | Number | Number 页面上拉触底时距页面底部的距离，单位为px |
6.1.2 tabBar
（1）tabBar是移动端应用常见的页面效果，用于实现多页面的快速切换，分为：
-- 底部tabBar
-- 顶部tabBar
-- 注意：tabBar中配置项：最少2个、最多5个的tab页签
-- 当渲染顶部tabBar时，不显示icon,只显示文本
（2）tabBar的6个组成部分
-- backgroundColor:tabBar的背景色
-- selectedIconPath:选中时图片路径
-- borderStyle：tabBar上边框的颜色
-- iconPath：未选中时的图片路径
-- selectedColor：tab上的文字选中时候的
-- color:tab上文字的默认(未选中)颜色
（3）tabBar节点的配置项
| 属性 | 类型 | 必填 | 默认值 | 描述 |
| position | string | 否 | bottom | tabBar的位置，bottom/top |
| borderStyle | string | 否 | black | tabBar上边框的颜色，black/white |
| color | HexColor | 否 | tab上文字的默认（未选中）颜色 | |
| selectColor | HexColor | 否 | tab上文字选中的颜色 | |
| backgroundColor | HexColor | 否 | tabBar的背景色 | |
| list(重点) | Array | 是 | tab页签的列表，2-5个 |
（4）list每个tab项的配置选项
| pagePath | string | 必填 | 页面路径，页面必须在pages中预先定义 |
| text | string | 必填 | tab上显示的文字 |
| iconPath | string | 非必填 | 未选中时图标路径，position为top时，不显示icon |
| selectedIconPath | string | 非必填 | 未选中时图标路径 |
//全局配置中配置tabBar的选项
"tabBar": {
"list": [{
"pagePath": "pages/home/home",
"text": "首页",
"iconPath": "/images/tabs/home.png",
"selectedIconPath": "/images/tabs/home-active.png"
},{
"pagePath": "pages/message/message",
"text": "消息",
"iconPath": "/images/tabs/message.png",
"selectedIconPath": "/images/tabs/message-active.png"
},{
"pagePath": "pages/contact/contact",
"text": "联系我们",
"iconPath": "/images/tabs/contact.png",
"selectedIconPath": "/images/tabs/contact-active.png"
}]
},6.2 页面配置
（1）页面配置的作用
-- 小程序中，每个页面都有自己的.json配置文件，用来对当页面的窗口外观、页面效果等进行配置。
（2）页面配置和全局配置的关系
--小程序中，app.json中的window节点，可以全局配置小程序中每个页面的窗口表现
--如果某些小程序页面，想要拥有特殊的窗口表现，此时需要是使用页面级别的.json配置文件
--页面配置与全局配置冲突时，就近原则
（3）页面配置中常用的配置项
与6.1.1 windows常用配置项相同
6.3 网络数据请求
（1）小程序中网络数据请求的限制
·两个限制：
-- 只能请求HTTPS类型的接口
-- 必须将接口的域名添加到信任列表中
（2）如何配置request合法域名
配置步骤：登录微信小程序管理后台->开发->开发设置->服务器域名->修改request合法域名
（I）
（II）
(III)
（3）发起GET请求
·调用微信小程序提供的wx.request()方法，可以发起GET数据请求:
·wx.request()的常用api,如下：
wx.request({
//开发者服务器接口地址
url: 'https://……/api/get',
//HTTP 请求方法
method:'GET',
//请求的携带参数
data:{
name:'李四',
age:23
},
//设置请求头
header: {
'content-type': 'application/json' // 默认值
},
//接口调用成功的回调函数
success:(res) =>{
console.log(res)
console.log(res.data)
},
//接口调用失败的回调函数
fail:(err) =>{
console.log(err)
},
//接口调用结束的回调函数（调用成功、失败都会执行）
complete:(res,err) =>{
console.log(res,err)
},
})（4）发起POST请求
· 调用微信小程序提供的wx.request()方法，可以发起POST数据请求：
wx.request({
url: 'https://……/api/post',
method:'POST',
data:{
name:'李四',
age:23
},
success:(res) =>{
console.log(res)
}
})（5）跳过request合法域名校验
-- 如果后端程序员只提供了http协议的接口，没有提供https协议接口
-- 解决：详情->本地设置->勾选：不校验合法域名....
（6）关于跨域和Ajax的说明
-- 跨域问题只存在于基于浏览器Web开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题
之后内容接下：
扫一扫
3161
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
