引言
本文主要从什么是微信小程序、微信小程序的介绍、小程序开发流程、小程序代码构成、小程序安装使用、配置分析、开发特点、实战项目等多角度手把手带你详解微信小程序。
第一章-什么是微信小程序？（以下都有直接用小程序称）
- 微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用。
- 全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程序、订阅号、服务号、企业号是并行的体系。
- 2017年1月9日，微信之父张小龙在2017微信公开课Pro上发布的小程序正式上线。
- 2017年度百度百科十大热词之一
- 2018年2月，微信官方发布公告称：已对涉及假货高仿、色情低俗和违规“现金贷”等超过2000个小程序，进行永久封禁处理。
- 小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。
- 小程序刚发布的时候要求压缩包的体积不能大于1M,，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M；
第二章-小程序可以干什么？
- 同App进行互补，提供同app类似的功能，比app操作更加简洁的轻应用
- 通过扫一扫或者在微信搜索即可下载
- 用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选
- 连接线上线下
- 开发门槛低， 成本低
第三章-小程序开发流程
- 注册小程序
官网：https://mp.weixin.qq.com/ - 注册小程序账号
进入小程序注册页 根据指引填写信息和提交相应的资料，就可以拥有自己的小程序帐号。
- 登录 小程序后台 ，我们可以在菜单 “设置”-“开发设置” 看到小程序的 AppID 了 。
- 小程序的 AppID 相当于小程序平台的一个身份证，后续你会在很多地方要用到 AppID ,直接复制保存到txt文档中。
- 前往 开发者工具下载页面 ，根据自己的操作系统下载对应的安装包进行安装（直接下载安装稳定版）
第四章-小程序代码构成
.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件
- JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
- app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。
- pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。
- window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等
- 工具配置 project.config.json
- 通常大家在使用一个工具的时候，都会针对各自喜好做一些个性化配置，例如界面颜色、编译配置等等，当你换了另外一台电脑重新安装工具的时候，你还要重新配置。
- 考虑到这点，小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。
- 其他配置项细节可以参考文档 开发者工具的配置 。
- 页面配置 page.json
- 这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
- 如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。
- JSON 语法
- 这里说一下小程序里JSON配置的一些注意事项。
- JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。
- JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。
- 还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。
- WXML 模板
从事过网页编程的人知道，网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。
第五章-小程序和其他的技术的区别
1.标签名字有点不一样:小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力，我们还提供了地图、视频、音频等等组件能力。
2.wx:if 这样的属性以及 表达式:{{}} JS只需要管理状态:this.setData({msg:‘哈哈’})
3.wxss样式不同:
- 新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差。
- 提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效。
- 此外 WXSS 仅支持部分 CSS 选择器
- JS逻辑交互(事件操作)
<view>{{ msg }}</view> <button bindtap="clickMe">点击我</button> Page({ clickMe: function() { this.setData({ msg: "Hello World" }) } }) - 小程序中使用rpx—1rpx=1物理像素=0.5px,推荐使用flex
第六章-小程序协同工作和发布
第七章-小程序特点
- 是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或搜一下即可打开应用
- 小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务
- 没有数据代理
- 没有DOM
- 没有双向绑定
第八章-源码分析
全局配置-app.json文件中进行配置☛（举栗配置）
pages string[] 是 页面路径列表
window Object 否 全局的默认窗口表现
tabBar Object 否 底部 tab 栏的表现
{
"pages": ["pages/index/index", "pages/logs/logs"],
"window": {
"navigationBarBackgroundColor": "#02a774",
"navigationBarTextStyle": "white",
"navigationBarTitleText": "图书",
},
"tabBar": {
"list": [
{
"pagePath": "pages/books/main",
"text": "图书列表",
"iconPath": "/static/imgs/book.png",
"selectedIconPath": "/static/imgs/book-active.png"
},
{
"pagePath": "pages/search/main",
"text": "搜索图书",
"iconPath": "/static/imgs/todo.png",
"selectedIconPath": "/static/imgs/todo-active.png"
},
{
"pagePath": "pages/personal/main",
"text": "个人中心",
"iconPath": "/static/imgs/me.png",
"selectedIconPath": "/static/imgs/me-active.png"
}
]
}
}
框架接口
App({
data:{
这里写的数据和Vue中data一样
}
onLaunch (options) {
// Do something initial when launch.
},
onShow (options) {
// Do something when show.
},
onHide () {
// Do something when hide.
},
onError (msg) {
console.log(msg)
},
// 这里写方法--Vue中方法在methosd中书写,这里方法直接上面的方法同级
})
页面接口
Page({
data: {
text: "This is page data." //需要使用this.setData({})来管理数据
},
onLoad: function(options) {
// Do some initialize when page load.
},
onReady: function() {
// Do something when page ready.
},
onShow: function() {
// Do something when page show.
},
onHide: function() {
// Do something when page hide.
},
onUnload: function() {
// Do something when page close.
},
onPullDownRefresh: function() {
// Do something when pull down.
},
onReachBottom: function() {
// Do something when page reach bottom.
},
onShareAppMessage: function () {
// return custom share data when user share.
},
onPageScroll: function() {
// Do something when page scroll
},
onResize: function() {
// Do something when page resize
}
})
小程序全局对象
Object wx
小程序 API 全局对象，用于承载小程序能力相关 API
数据绑定
<view id="item-{{id}}"> </view>
Page({
data: {
id: 0
}
})
列表渲染
在组件上使用 wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。
默认数组的当前项的下标变量名默认为 index，数组当前项的变量名默认为 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
wx:key
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 input 中的输入内容，switch 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
wx:key 的值以两种形式提供
字符串，代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
保留关键字 *this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
如不提供 wx:key，会报一个 warning， 如果明确知道该列表是静态，或者不必关注其顺序，可以选择忽略。
模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。
定义模板
使用 name 属性，作为模板的名字。然后在<template/>内定义代码片段，如：
<!--
index: int
msg: string
time: string
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
使用模板
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如：
<template is="msgItem" data="{{...item}}"/>
Page({
data: {
item: {
index: 0,
msg: 'this is a template',
time: '2016-09-15'
}
}
})
模版引入
import
import可以在该文件中使用目标文件定义的template，如：
在 item.wxml 中定义了一个叫item的template：
<!-- item.wxml -->
<template name="item">
<text>{{text}}</text>
</template>
在 index.wxml 中引用了 item.wxml，就可以使用item模板：
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
import 的作用域
组件
详细使用请戳这里☛组件使用
swiper
滑块视图容器。其中只可放置swiper-item组件，否则会导致未定义的行为。
indicator-dots boolean false 否 是否显示面板指示点 1.0.0
indicator-color color rgba(0, 0, 0, .3) 否 指示点颜色 1.1.0
indicator-active-color color #000000 否 当前选中的指示点颜色 1.1.0
autoplay boolean false 否 是否自动切换 1.0.0
current number 0 否 当前所在滑块的 index 1.0.0
button
按钮。
属性 类型 默认值 必填 说明 最低版本
size string default 否 按钮的大小 1.0.0
type string default 否 按钮的样式类型 1.0.0
plain boolean false 否 按钮是否镂空，背景色透明 1.0.0
disabled boolean false 否 是否禁用 1.0.0
loading boolean false 否 名称前是否带 loading 图标 1.0.0
input 文本框
输入框。该组件是原生组件，使用时请注意相关限制
属性 类型 默认值 必填 说明 最低版本
value string 是 输入框的初始内容 1.0.0
type string text 否 input 的类型 1.0.0
password boolean false 否 是否是密码类型 1.0.0
placeholder string 是 输入框为空时占位符 1.0.0
placeholder-style string 是 指定 placeholder 的样式 1.0.0
placeholder-class string input-placeholder 否 指定 placeholder 的样式类 1.0.0
第九章-图解介绍小程序
第十章-小程序API汇总
详细请戳这里☛官方API文档
路由
wx.switchTab-------如果界面中有tapbar那么使用这个路由进行跳转
wx.redirectTo------不能跳tapbar
wx.navigateTo------不能跳tapbar
wx.showToast-------显示提示消息(收藏的时候使用过)
wx.request---------发送请求(获取用户的openid的时候使用过)
wx.setStorageSync-----同步缓存数据
wx.setStorage---------异步缓存数据
wx.getStorageSync-----同步获取缓存数据
wx.getStorage---------异步获取缓存数据
wx.playBackgroundAudio----播放音乐方法
wx.pauseBackgroundAudio---暂停音乐方法
wx.onBackgroundAudioPlay---监视播放音乐操作
wx.onBackgroundAudioPause---监视暂停音乐操作
wx.login 登录---一般放在小程序初次加载
wx.getUserInfo---获取登录后的用户信息--一般放在onoad事件中(page中)
支付wx.requestPayment-----涉及到整个的支付流程
wx.requestPayment------发起微信支付操作
第十一章-组件总结
详细请戳这里☛官方组件文档
swiper 用来做轮播图,相关属性可直接设置轮播图是否有按钮,样式等等
template 用来使用模版组件的,需要配合name属性,is属性及import 引入
button
open-type这个属性一定要多看,点击按钮可以直接弹出对话框让用户授权登录操作
bindgetuserinfo用户点击该按钮时，会返回获取到的用户信息，回调的detail数据与wx.getUserInfo返回的一致，open-type="getUserInfo"时有效
input
placeholder 可以设置提示信息
placeholder-class 提示信息样式操作
第十二章-事件总结
- 冒泡事件：当一个组件上的事件被触发后，该事件会向父节点传递。
- 非冒泡事件：当一个组件上的事件被触发后，该事件不会向父节点传递。
- bindtap 冒泡
- catchtap 非冒泡
- 小程序的事件都是以bind或者catch开头
- 如果到了mpvue中,那么可以把小程序中的bind或者catch干掉,直接使用@
第十三章-适配总结
- 物理像素:屏幕的分辨率,设备能控制显示的最小单元，可以把物理像素看成是对应的像素点
- 设备独立像素:(也叫密度无关像素)，可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素(比如：CSS 像素,只是在android机中CSS 像素就不叫”CSS 像素”了而是叫”设备独立像素”)，然后由相关系统转换为物理像素。
- dpr: 设备像素比，物理像素/设备独立像素 = dpr， 一般以Iphon6的dpr为准 dpr = 2
- 小程序的适配方案:
- Iphon6： 1rpx = 1物理像素 = 0.5px
- 微信官方提供的换算方式：
- 以iPhone6的物理像素个数为标准: 750;
- 1rpx = 目标设备宽度 / 750 * px;
- 注意此时底层已经做了viewport适配的处理
第十四章-其他问题
小程序访问http出现的问题
- 小程序出于安全考虑所有的协议都是https协议，且如果没有在开发设置中配置请求的连接是无法访问指定的链接的。
- 一个微信小程序的并发网络请求数量被限制在最多5个
小程序路由传值
- 以其中一个路由方法举例说明:
- wx.navigateTo
- url属性
- 需要跳转的应用内非 tabBar 的页面的路径, 路径后可以带参数。参数与路径之间使用 ? 分隔，参数键与参数值用 = 相连，不同参数用 & 分隔；如 ‘path?key=value&key2=value2’
- 可以在另一个路由组件中的onload(options){}的toptions中获取传过来的参数
第十五章-mpvue
使用Vue.js的开发小程序的前端框架(基于Vue)
mpvue:Vue.js in mini program
特点:
- 组件化开发,提高代码复用
- 可以使用vuex进行数据管理(小程序的时候一般不用,没必要)
- 支持npm
- H5代码转换编译,es6都支持
mpvue源码:
- main.js/app.json/app.vue
- main.js----小程序中的app.js
- app.json—小程序中的app.json
- app.vue—小程序中的wxml和wxss
第十六章-Wepy
小程序支持组件化开发的框架
特点：
- 支持Props传值,自定义事件,组件复用,computed,slot
- 组件化,npm,promist,es2015
- 支持多种插件,文件压缩,图片压缩,内容替换,扩展简单
- 框架小,压缩后24.3KB
问题：小程序是什么？它有着什么样的功能？
答：
小程序是一种不需要下载安装即可使用的应用，它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又无需安装卸载。对于开发者而言，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用，适合生活服务类线下商铺以及非刚需低频应用的转换。小程序能够实现消息通知、线下扫码、公众号关联等七大功能。其中，通过公众号关联，用户可以实现公众号与小程序之间相互跳转。由于小程序不存在入口。
总结
- 实战（未完待续）
- 本文一共用了十六章分析详解了一下小程序，从小程序的详细安装到每一个细节的知识点的分析，希望可以帮你入门小程序的开发及理解
- 加油吧骚年！
- 愿你在这个代码繁杂、头发渐秃的编码世界里，可以温暖疲倦的自己，坚持学习
在人生的黄昏时，一代不幸的人在摸索徘徊：一些人在斗争中死去；一些人堕入深渊；种种机缘，希望和仇恨冲击着那些被偏见束缚着的人；在那黑暗泥泞的道路上同样也走着那些给人点亮灯光的人，每一个头上举着火种的人尽管没有人承认他的价值，但他总是默默地生活着劳动着，然后像影子一样消失。——普鲁斯
