目录
微信小程序是什么
- 微信小程序是运行在微信内部的一个应用
- 微信小程序可以在微信内被便捷地获取和传播，同时具有出色的使用体验。
- 特点：①无需安装 ②触手可及 ③用完即走 ④无需下载
对比（APP，公众号，小程序 ）
1. APP
- 面向所有智能手机用户
- 可实现完整功能
- 从应用商店（App Store、应用市场等）下载安装
- 安装于手机内存，一直占用内存空间，太多的 App 可能会导致内存不足
- 需适配各种主流手机，开发成本大
- 开发周期相对长
- 产品发布时，需要向各个应用商店提交审核，且各应用商店所需资料不一样，相对繁琐
- 需要用户主动下载十几M的安装包，在没有Wi-Fi的情况下推广困难
- 使用流畅
2. 公众号
- 面向所有微信用户
- 功能围绕信息展示与营销
- 关注微信公众号
- 无需安装，和微信共用内存使用，占用内存空间忽略不计
- 基于H5实现简单的交互
- 操作延时较大
3. 小程序
- 面向所有微信用户
- 限于微信平台提供的功能，面向产品与服务
- 通过微信（扫描二维码、搜索、分享）即可获得（入口少）
- 无需安装，和微信共用内存使用，占用内存空间忽略不计
- 基于微信自身开发环境与开发语言，多终端适配
- 开发周期相对短
- 产品发布时，提交到微信公众平台审核，云推送
- 体验接近原生App，相对流畅
- 用户体验不够好，中途接了电话之后就退出小程序
总结
- 小程序优于公众号
小程序还未面世前，微信搜索结果首先展现公众号。但如今微信公众平台力推小程序，所以目前的搜索结果排位是：小程序>公众号>朋友圈>文章。功能局限。
- 小程序优于App
相比于App，小程序无需下载安装即可使用，用户的接受度更高。小程序的功能基本接近于原生App，却不会消耗手机内存。Android用户还有一个“特权”，可将小程序直接添加到桌面，在桌面的展现形态跟App一模一样。
开发小程序
1. 准备工作
- 注册小程序账号（不必须，没有账号也可以开发），注册后有AppID，可连接真机调试。
- 安装小程序的开发工具
2. 目录结构
根目录
- app.js(必须)
- app.json(必须)
- app.wxss(可选)
- pages
+ index
+ index.wxml(必须)
+ index.js(必须)
+ index.json(可选)
+ index.wxss(可选)
1. app.json
- 小程序的全局配置文件
- 配置项
- page：页面路径
- window：窗口的默认样式
- tabBar：窗口底部的tab样式
- networkTimeout：网络超时时间
- debug：是否开启debug模式
各项用法参考 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
2. app.js
- 全局的脚本文件，需要调用App()函数，来对程序进行注册。app({})
- 需要一个对象作为参数，对象中的属性：
- onLaunch 函数，初始化时调用
- onShow 函数，程序显示时调用
- onHide 函数，程序隐藏时调用
- onError 函数，发生错误时调用
- 其他 任意值，可以在整个项目中访问
参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/app.html
3. app.wxss
- 全局样式文件
- wxss文件相当于网页的css文件，语法也类似但是有所简化
- app.wxss是全局样式表，它里边的样式会对所有的页面有效
- 每个页面中也有对应的wxss文件，如果发生冲突以页面自己的为准
参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxss.html
3. 页面
- 小程序中页面由四个文件组成
- 每个页面中的四个文件必须有相同的名字
- 在app.json的page项定义新的page路径，则工具会在这个路径下新建相关文件
- xxx.wxml
- xxx.js
- xxx.wxss (可省略)
- xxx.json (可省略)
1. 页面.json
- 对当前页面的窗口样式进行配置
- 配置项
- navigationBarBackgroundColor 导航栏背景颜色
- navigationBarTextStyle 导航栏标题颜色
- navigationBarTitleText 导航栏文字内容
- backgroundColor 窗口背景色
- backgroundTextStyle 下拉背景字体
- enablePullDownRefresh 是否开启下拉刷新
- disableScroll 页面是否可以滚动
参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/config.html
2. 页面.wxml
- 页面的结构文件，作用和网页中html类似
- 语法也和html类似，但是标签却完全不同了，大部分的标签比如div、span等都被新的标签替换了
参考文档 https://developers.weixin.qq.com/miniprogram/dev/framework/view/wxml/
3. 页面.js
- 当前页面的脚本文件，和app.js类似，不同的是只对当前页面起作用
- 需要使用Page()函数进行注册，Page中需要一个对象作为参数
参考 https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page.html
4. js函数说明
1. 小程序生命周期
- onLaunch监听小程序初始化，当完成初始化时会触发（全局只触发一次）
- onShow 监听小程序显示，当小程序启动或由后台进入前台显示会触发
- onHide 监听小程序影藏，当小程序从前台进入后台时会触发
2. 小程序其他函数
- onError 错误监听函数 当小程序发生脚本错误或者api调用失败时会触发，并带上错误信息
- onPageNotFound 页面不存在监听函数，当小程序出现要打开的页面不存在的情况，会带上页面信息回调该函数
- 其他：可以添加任意的函数或数据到 Object 参数中，用 this 可以访问（所有页面）
3. 页面生命周期
- onLoad监听页面加载，一个页面只会调用一次，可以在 onLoad 中获取打开当前页面所调用的 query 参数。
- onReady 监听页面初次渲染完成，每次打开页面都会调用一次
- onShow监听页面显示，一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互，对界面的设置如wx.setNavigationBarTitle在onReady之后设置
- onHide监听页面隐藏，当navigateTo或底部tab切换时调用
- onUnload 监听页面卸载，当redirectTo或navigateBack的时候调用
4. 页面其他函数
- onPullDownRefresh 监听用户下拉事件，需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。当处理完数据刷新后，wx.stopPullDownRefresh可以停止当前页面的下拉刷新。
- onReachBottom 页面上拉触底事件处理函数，可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间，本事件只会被触发一次。
- onShareAppMessage 用户点击右上角转发，用户点击转发按钮的时候会调用，需要 return 一个 Object，用于自定义转发内容
- onPageScroll 页面滚动触发事件处理函数，page元素和class为.body的view元素切记不可同时设置“height:100%;” ，否则，不论class为.pfIndex的view的高度超过窗口高度有多明显，onPageScroll都不会触发 。
- onTabItemTap 当前是 tab 页时，点击 tab 时触发
- 其他 添加任意的函数或数据到 object 参数中，在本页面的函数中用 this 可以访问
5. 路由
- wx.navigateTo(OBJECT)
保存当前页面，跳转到应用内的某个页面，可以使用wx. navigateBack返回到原页面。目前页面路径最多只能十层。不能跳tabBar的页面路径，可以带参数
- wx.redirectTo(OBJECT)
关闭当前页面，跳转到应用内的某个页面，不能跳tabBar的页面路径，可以带参数
- wx.reLaunch(OBJECT)
关闭所有页面，打开应用的某个页面，可以带参数。但若跳转至tabBar页面则不可带参数
- wx.switchTab(OBJECT)
跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面，不能带参数
- wx.navigateBack(OBJECT)
返回上一页或上多页。可通过 getCurrentPages() 获取当前的页面栈，决定需要返回几层。如果参数delate大于现有页面数，则返回到首页
6. 视图层
- 数据绑定
使用data中的数据必须加上{{ }}两个大括号。若在属性中使用则需要加上双引号"{{ }}"
- 模板
模板定义的饿时候需要加上name="name"，使用的时候用is="name"来确定是使用哪一个模板。
- 事件
bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡。例如：点击事件bindtab和catchtab
- 引用
- import: 可以在该文件中使用目标文件定义的template. 只会 import 目标文件中定义的 template，而不会 import 目标文件 import 的 template
- include: 将目标文件除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置.
- wxss
支持以下选择器
- .class
- #id
- element
- element,element
- ::after
- ::before
7. 自定义组件
组件的.json文件中需要配置"component": true
使用组建的时候需要在本页面的.json文件里添加配置
"usingComponents": {
"component-tag-name": "path/to/the/custom/component"
}默认情况下一个组件页面只有一个slot，若想要有多个slot则需要在js的component({})中设置
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},每个slot都有自己的name，在页面使用时根据name（slot="name"）来确定是哪一个插槽
:host css选择器是制定组件所在节点的默认样式。还可以设置外部样式。
父组件可以通过this.selectComponent获取子组件实例对象
1. 组件事件
组件的事件用于子组件向父组件传递数据，可以传递任意数据。
2. behaviors
用于组件间代码共享的特性
8. 微信小程序组件
微信小程序自带的组件有很多，用法参考
https://developers.weixin.qq.com/miniprogram/dev/component/
9. 微信小程序api
微信小程序有很多的api，用法参考
https://developers.weixin.qq.com/miniprogram/dev/api/
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
