《微信小程序开发 入门与实践》
简介
最近有看完这本书，闲来无事整理个文档。
整理完成日期：2019/02/27。
并且 《微信小程序开发 入门与实践》 这本书是2017年4月发布第一版，时间有点久。特别是微信小程序还不稳定都情况下编写的，我看到书中有些接口已经有更新过了，所以最好还是参考官方文档接口，以官方接口为主。https://developers.weixin.qq.com/miniprogram/dev/api/
小程序理念
小程序不需要下载，安装即可使用的应用。来之即用，用之即走。方便快捷。
小程序对比h5
小程序优势：
- 提供更多手机系统原生接口，弥补h5的不足。
小程序接口：震动、扫码、陀螺仪、指南针、设备方向、加速、电话、电量、蓝牙、联系人、Wi-Fi、设备、微信运动、二维码等等。
- 微信使用人数多，易于推广产品。
小程序缺点： - 没有h5开放和自由，对个人开发不友好。
- 没有规范、文档不清晰。
- 开发环境和测试环境有兼容性问题，不统一，增加测试难度。
开发
小程序中没有dom,开发时不要有操作dom思想。时刻想着数据绑定、数据驱动视图。
对于有vue或者angular开发者来说，倒是简单很多。
对于没有开发经验的人
在书中：作者认为，对于没有开发经验的人，又想进入前端领域，小程序是很好的入门学习方式。
我持反对观点：小程序不规范，文档不清晰，还不成熟，对个人开发不友好。也就是说，很多企业都是有企业账号的，公司内部也是使用企业账号进行开发，有很多特性都用不上，再说开发完成了，上线和发布，审核都是个问题。
这么多的问题，还不如就学习个h5前端，有标准就有发展。
Native App 、Hybrid App 、Web App
小程序定位
做低频和业务逻辑不复杂的应用。
pc已死论
pc为生产力（办公等），还是不可替代的。
常用快捷键
ctrl + shift + [ 折叠代码块
ctrl + alt + f 代码格式化
shift + alt + up 向上复制一行
shift + alt + down
ctrl + i 选中当前行
文件
json 文件为配置文件
wxss 样式文件
wxml 页面结构
js 逻辑
MINA 框架
flex
小程序能很好的支持Flex 布局，也是官方推荐的布局方式。
rpx
建议 以iPhone 6 width 750 像素作为标准。
swiper
小程序官方提供来轮播组件。
swiper 子元素只能放置swiper-item，如果放置其他组件，会被自动删除。
生命周期 5 个
onLoad 加载
onUnload 卸载
onShow 显示，每次打开页面都会调用
onHide 监听页面隐藏
onReady 页面初次渲染完成， 一个页面只会调用一次，代表页面已经准备完成，可以和视图进行交互。
一个页面必定触发3过周期：onLoad 、 onShow 、 onReady
3个特定事件处理函数
onPullDownRefresh 监听页面下拉动作处理函数
onReachBootm 页面触底事件处理函数
onShareAppMessage 用户点击右上角分享。
单项数据绑定
小程序仅仅实现来单项数据绑定，即只支持从逻辑层到view层的数据绑定。
初始化数据：在page方法中，传入Data参数：Object 类型参数。
更新数据： 使用this.setData(Object) 方法
setData 是Page 对象的原型链上。
setData 执行后会触发Render，并立刻渲染视图。
数据绑定
数据绑定使用 {{}}
属性绑定需要使用 src = “{{}}”
block标签
block标签没有任何意义，不会在页面渲染。
wx:for = "{{Arr}}"
item, index 为关键词，不用声明可直接使用
json配置
页面json文件只能配置和window相关的属性。
app.json 可以配置window 还可以配置pages、tabBar 等选项。
事件
事件是 view -> js , 视图到逻辑层的通信方式。
页面跳转
wx.redirectTo 关闭当前页面（卸载当前页面）、跳转到指定页面
wx.navigateTo 保留当前页面、跳转到指定页面
wx.switchTap 只能跳转到带tabbar的页面
事件冒泡
target元素向父元素进行传递，直到页面顶级元素。
冒泡事件
touchstart
touchmove
touchcancel
touchend
tap
longtap
bing和catch区别
catch不会冒泡
bing会冒泡
模板
使用模板只是为了简化wxml 的写法，只是组件，因为没有逻辑层。
inclue 与import 引入模板的区别。
import 需要先引入template ，然后在使用。
include 在需要的地方直接引入模板在使用。
include 使用方式非常简单，就是简单的代码替换，不存在作用域，也不能像import一样可以使用data传递变量。
include 文件中，不能含有template元素。
include 很简单，就是一个占位符，只做简单的代码替换。
样式文件的引入，使用@import "page.wxss"
App 方法
可以在app.js 文件中使用App(object) 来注册小程序。object 可指定生命周期函数。
onLaunch 小程序初始化完成，会触发该函数。
onShow 小程序启动 会触发该函数。
onHide 小程序隐藏
onError 小程序错误
缓存
缓存一直存在，没有过期概念，如果不清楚，则一直存在。
缓存上限10M。
缓存操作方法存在同步和异步两种，Sync 结尾为同步方法。
缓存数据：使用wx.setStorage({})
清除数据：wx.removeStorage 清除单个key 数据。 wx.clearStorage 清除所有数据。
获取数据：wx.getStorageSync
if (!wx.getStorageSync) {wx.setStorage}
template 和block 元素注册事件?
在template 和block 上注册事件都是无效的。
页面间传递参数
1 使用全局变量
2 使用缓存
3 通过页面间的url 传参。
获取3 方式的url 参数：
onLoad:function(query) {
console.log(query)
}
自定义属性
和html 自定义属性一致。 使用data 关键词。
<view data-id = "{{id}}"> </view>
获取自定义属性： event.currentTarget.dataSet.id
app.json
如果在app.json 进行配置，则是全局行为。
如果在页面json文件进行配置，则单页面生效
wxSetNavigationBarTitle(object) 动态设置导航栏标题。
条件渲染
<view wx:if="{{true}}"> </view>
<view wx:else> </view>
实现图片预览
小程序提供了图片预览窗口。 wx.previewImage(object)
hidden 和 wx:if
使用方式类似。
wx:if 元素会销毁或者重新渲染。
hidden 元素只是简单的进行显示和隐藏。
input 元素4个事件
bindinput 输入
bindfocus 获取焦点
bindblur 失去焦点
bindconfirm 键盘事件
从相册选择图片或者拍照
使用wx.chooseImage(object)
音乐
歌曲只能是网络流媒体，不能播放本地文件。
全局变量
声明：
App({
globalData:{
key: value
}
})
获取和使用：
// 获取
let App = getApp();
let global = App.globalData
分享
微信小程序只能分享给好友，不能分享到朋友圈。
每个页面都可以调用分享功能，并配置每个页面参数。
使用：
page({
onShareAppMessage: function() {
return {
title: '',
desc: '',
path: ''
}
}
})
书中说分享图片是不能自定义的，但目前已经可以指定分享图片了，时间：2019/02/28
event.target 和event.currentDarget
在冒泡事件中，event.target指的是触发事件的元素。
event.currentTarget 指的是普获事件的元素。
小程序动画
创建实例，wx.createAnimation(object)
将动画也当作一个变量，动画对所有配置都完善时，动画变量绑定到页面中。
<image animation="{{animationUP}}"></image>
this.setData({
animationUp: this.animationUp.export();
})
小程序tab
小程序有实现tab切换，只需要在json文件中进行简单的配置就能直接使用。
推荐直接使用小程序对tab切换。因为tab会涉及到导航接口。redirctTo 和 navigateTo，
如果自己使用view来实现，是使用redirctTo还是使用navigateTo？。
我在开发中这两种方式都有使用，使用navigateTo带来对缺点是，小程序页面不会卸载，当不停的切换tab时，你会发现，点击多次后，tab将不能工作，这是因为，小程序对隐藏页面对数量有作控制。如果使用redirctTo ，则不能使用返回操作返回到上一个页面，而是直接推出来小程序。
小程序tab切换提供了自己的接口：wx.switchTab(object)
app.json网络连接配置
可以配置网络请求对超时时间。
小程序只提供了异步发送http请求的方法。
小程序强制要求使用https，且所有地址域名需要配置到可信域名中。
小程序提供了下拉刷新api
小程序实现了上滑加载更多数据。
input 组件的输入文本是无法设置字体的，字体必须使用系统字体。所以无法设置font-family。
wx.login
这个话题要讲明白需要很多演示。等有时间，详细得用一篇文章来写。
简单对描述：前后端如果需要交互，并需要带有用户状态时。就需使用要登录。前后端交互并不使用session，而是使用code来进交互，并且每次交互的code都是不一样的。 code 由wx.login 返回。
