小程序的入门基础/常用API/重要流程

1.官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/
2.申请帐号
3.安装开发工具:https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
4.小程序后台:https://mp.weixin.qq.com/

项目结构
pages->页面
app.js全局js
app.json全局配置
app.wxss全局样式
project.config.json项目配置
sitemap.json页面收录配置

app.js全局方法/全局变量globalData,其他页面调用getApp()获取实例,app.js则直接使用this
页面中调用:
1.获取全局变量
getApp().globalData.变量名
2.改变全局变量
getApp().globalData.变量名 = 改变全局变量
3.调用全局方法
getApp().方法名()
4.改变页面变量
this.setdata({
变量名:变量值
})
5.调用页面方法
this.方法名()

app.json全局配置
1.pages页面路径列表
当没有配置entryPagePath启动页时, 默认pages第一项为启动页
2.window全局的默认窗口
navigationBarBackgroundColor 导航栏背景颜色
navigationBarTextStyle导航栏标题颜色，仅支持 black / white
navigationBarTitleText导航栏标题文字内容
navigationStyle导航栏样式，仅支持以下值default(默认) custom(定义导航栏，只保留右上角胶囊按钮)
enablePullDownRefresh是否开启全局的下拉刷新
3.tabBar底部tab栏
color tab上的文字默认颜色，仅支持十六进制颜色
selectedColor tab上的文字选中时的颜色，仅支持十六进制颜色
list只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象，其属性值如下
pagePath页面路径
text tab 上按钮文字
iconPath本地40kb内图片路径
selectedIconPath选中时本地40kb内图片路径
4.networkTimeout各类网络请求的超时时间

page.json页面配置
navigationBarBackgroundColor导航栏背景颜色
navigationBarTextStyle导航栏标题颜色，仅支持 black / white
navigationBarTitleText导航栏标题文字内容
navigationStyle导航栏样式，仅支持以下值default(默认) custom(定义导航栏，只保留右上角胶囊按钮)
backgroundColor窗口的背景色
enablePullDownRefresh是否开启当前页面下拉刷新
onReachBottomDistance页面上拉触底事件触发时距页面底部距离，单位为px
disableScroll 是否禁用页面上下滚动 只在页面配置中有效，无法在 app.json 中设置
usingComponents页面自定义组件配置

场景值
App的onLaunch和onShow或wx.getLaunchOptionsSync中获取上述场景值

应用生命周期(onLaunch/onShow/onHide)
用户首次打开小程序，触发onLaunch（全局只触发一次）
小程序初始化完成后，触发onShow方法，监听小程序显示
小程序从前台进入后台，触发onHide方法
小程序从后台进入前台显示，触发onShow方法
小程序后台运行一定时间，或系统资源占用过高，会被销毁

页面生命周期(onLoad/onShow/onReady/onHide/onUnload)
onLoad function 生命周期回调—监听页面加载
onShow function 生命周期回调—监听页面显示
onReady function 生命周期回调—监听页面初次渲染完成
onHide function 生命周期回调—监听页面隐藏
onUnload function 生命周期回调—监听页面卸载
小程序注册完成后，加载页面，触发onLoad方法
页面载入后触发onShow方法，显示页面
首次显示页面，会触发onReady方法，渲染页面元素和样式，一个页面只会调用一次
当小程序后台运行或跳转到其他页面时，触发onHide方法
当小程序有后台进入到前台运行或重新进入页面时，触发onShow方法
当使用重定向方法wx.redirectTo或关闭当前页返回上一页wx.navigateBack()，触发onUnload

应用生命周期影响页面生命周期
小程序初始化完成后，页面首次加载触发onLoad，只会触发一次
当小程序进入到后台，先执行页面onHide方法再执行应用onHide方法
当小程序从后台进入到前台，先执行应用onShow方法再执行页面onShow方法

页面常用函数
下拉刷新
1.全局/页面配置中设置enablePullDownRefresh(是否开启当前页面下拉刷新)
2.onPullDownRefresh监听页面下拉用户下拉刷新事件
3.使用wx.stopPullDownRefresh停止当前页面下拉刷新

上拉加载
1.全局/配置中onReachBottomDistance设置上拉触底事件触发时距页面底部距离px:如20
2.页面高度大于100%+设置的高度,用户才能触发上拉加载事件
3.使用onReachBottom监听页面下拉用户上拉加载事件

分享
1.页面只要有写onShareAppMessage这个函数,右上角菜单才会显示“转发”按钮
2.事件中包含from可判断页面内转发按钮button还是右上角转发菜单menu触发
3.return一个对象，用于自定义转发内容
title转发标题,默认为当前小程序名称
path转发路径默认当前页面path
imageUrl自定义图片路径,显示图片长宽比是 5:4,默认使用默认截图

转发到朋友圈
1.页面只要有写onShareTimeline这个函数,右上角菜单才会显示“分享到朋友圈”按钮
2.return一个对象，用于自定义转发内容
title朋友圈列表页上显示的标题,默认为当前小程序名称
path页面参数
imageUrl自定义图片路径,显示图片长宽比是 5:4,默认使用小程序Logo

小程序更新机制
1.非常重要的一步,第一期必须加,否则后期将出现用户必须删除小程序重新进入才能更新的情况
2.冷启动和热启动的概念
3.需要执行下面这个方法,正常应该在onLaunch执行,但是

 // 小程序检查/更新版本
  checkUpdateVersion() {
    if (!wx.canIUse("getUpdateManager")) return // 检测是否可以调用getUpdateManager检查更新
    const updateManager = wx.getUpdateManager()//创建 UpdateManager 实例
    //检测版本更新
    updateManager.onCheckForUpdate(function (res) {// 请求完新版本信息的回调
      if (res.hasUpdate) {//监听小程序有版本更新事件
        updateManager.onUpdateReady(function () {
          wx.showModal({
            title: '更新提示',
            content: '新版本已经准备好，是否重启应用？',
            success(res) {
              if (res.confirm) {
                updateManager.applyUpdate()// 新的版本已经下载好，调用 applyUpdate 应用新版本并重启
              }
            }
          })
        })
        updateManager.onUpdateFailed(function () {// 新版本下载失败
          wx.showModal({
            title: '已经有新版本咯~',
            content: '请您删除当前小程序，到微信 “发现-小程序” 页，重新搜索打开呦~',
          })
        })
      }
    })
  },

页面传参
普通:onLoad中的参数(A页面拼接参数,B页面onload事件中参数就为 参数对象)
获取实例:getCurrentPages()[getCurrentPages().length - 1].options

事件传参
1.wxml事件中,以data-属性名的方法传值
2.js事件中e.target.dataset.属性名 接收使用

事件绑定
1.bind+事件的类型，如bindtap
2.catch+事件的类型，如catchtap
3.bind事件绑定不会阻止冒泡事件向上冒泡，catch事件绑定可以阻止冒泡事件向上冒泡

常用组件:
1.view(其实就是html中的div标签)
2.button(open-type微信开放能力)
share 触发用户转发
contact 打开客服会话，bindcontact回调
getPhoneNumber 获取用户手机号，bindgetphonenumber回调
getUserInfo 获取用户信息，bindgetuserinfo回调
launchApp 打开APP，app-parameter属性设定向APP传的参数
openSetting 打开授权设置页
feedback 打开“意见反馈”页面，用户可提交反馈内容并上传日志，开发者可以登录小程序管理后台后进入左侧菜单“客服反馈”页面获取到反馈内容
3.image
1.默认宽度320px、高度240px
2.mode图片裁剪、缩放的模式
3.注意点:background-image仅支持网络图片/base64,如果是本地图片,建议用image定位设置背景图

4.navigator(open-type) (功能类似:html中的a标签)
navigate 对应wx.navigateTo 或 wx.navigateToMiniProgram的功能
redirect 对应wx.redirectTo 的功能
switchTab 对应wx.switchTab 的功能
reLaunch 对应wx.reLaunch 的功能
navigateBack 对应wx.navigateBack 的功能
exit 退出小程序，target="miniProgram"时生效

5.input
value输入框内容
type输入框类型
placeholder输入框为空时占位符(部分版本仍存在重影bug)
disabled是否禁用
maxlength最大长度
auto-focus是否自动聚焦
bindinput输入事件
bindfocus聚焦事件
bindblur失焦事件
bindconfirm点击完成按钮事件

6.canvas
7.textarea
8.swiper/swiper-item
9.scroll-view
10.text

常用API:
1.基础
wx.canIUse判断小程序的API，回调，参数，组件等是否在当前版本可用。
wx.getSystemInfoSync获取系统信息
2.路由
wx.switchTab跳转到tabBar页面
wx.reLaunch关闭所有页面，打开到应用内的某个页面(非tabBar页面)
wx.redirectTo关闭当前页面，跳转到某个页面(非tabBar页面)
wx.navigateTo保留当前页面，跳转到应用内的某个页面(非tabBar页面)
wx.navigateBack关闭当前页面，返回上一页面或多级页面

小程序api和对应的原生js方法:
1.wx.navigateTo     window.location.href
2.wx.navigateBack   window.history.go(-1)/window.history.back()
3.wx.redirectTo     window.location.replace

3.界面
wx.showToast显示消息提示框
wx.showModal显示模态对话框
wx.showLoading/wx.hideLoading显示loading/隐藏loading
wx.setNavigationBarTitle动态设置当前页面的标题
wx.setNavigationBarColor动态设置页面导航条颜色
wx.stopPullDownRefresh停止当前页面下拉刷新
wx.pageScrollTo将页面滚动到目标位置
4.缓存
wx.setStorageSync设置/更改缓存中某个key
wx.removeStorageSync删除缓存中某个key
wx.getStorageSync获取缓存中某个key
wx.clearStorageSync清理本地所有数据缓存
5.网络请求
wx.request网络请求
wx.uploadFile文件上传请求(需要配置uploadFile域名)
6.媒体
wx.saveImageToPhotosAlbum保存图片到系统相册
wx.previewImage在新页面中全屏预览图片。预览的过程中用户可以进行保存图片、发送给朋友等操作
wx.getImageInfo获取图片信息。网络图片需先配置download域名才能生效
wx.chooseImage从本地相册选择图片或使用相机拍照
7.位置
wx.getLocation获取当前的地理位置
wx.openLocation使用微信内置地图查看位置
wx.chooseLocation打开地图选择位置
8.开放能力
wx.login获取登录凭证code
wx.checkSession检查登录态是否过期
wx.navigateToMiniProgram打开另一个小程序
wx.requestPayment微信支付
wx.getSetting获取用户授权设置
wx.openSetting打开设置界面
wx.chooseAddress获取用户收货地址
wx.requestSubscribeMessage订阅消息
wx.createSelectorQuery返回一个SelectorQuery对象实例

重要概念:
1.openid和unionid
openid(小程序内用户唯一标识)
unionid(多平台用户唯一标识)
2.微信公众平台和微信开放平台
微信公众平台
微信开放平台(多平台关联/微信登录)
3.开发版/体验版/正式版
开发版:开发中,微信开发者工具直接扫码预览效果即为开发版,需要有小程序的开发者权限才能预览
体验版:在开发中工具中右上角菜单中上传代码后,在小程序后台中,可以选择某个版本为体验版,有小程序的开发者权限/体验者即可扫码体验版二维码预览
正式版:发布后的小程序
4.调试vConsole
开发版/体验版中,有小程序的开发者权限/体验者可 点击右上角…->点击开发调试->打开开发调试->重新进入小程序即存在vConsole调试器,并且开发调试模式中,将不校验任何域名
5.rpx
可以根据屏幕宽度进行自适应。规定屏幕宽为750rpx。如在 iPhone6上，屏幕宽度为375px，共有750个物理像素，则750rpx = 375px = 750物理像素，1rpx = 0.5px = 1物理像素

重要流程
1.wx.login登录(获取登录凭证code值,有效期五分钟)
2.获取openid
可以静默获取(前端传递code到服务器,服务器调用auth.code2Session返回openid)
3.获取unionid
通过wx.login返回code值,用code去服务器换取seeionkey
用户授权设置后,会返回加密信息encryptedData和iv,把三个值传给服务端解密返回openid和unionid
4.解密手机号
通过wx.login返回code值,用code去服务器换取session_key
用户授权设置后,会返回加密信息encryptedData和iv,把三个值传给服务端解密返回手机号
3丨4注意点:
1.需要提前获取session_key,防止刷新登录态
2.用户授权后,需要wx.checkSession检查session_key是否有效,无效则重新获取
5.微信支付
wx.requestPayment
6.订阅消息
1.在小程序后台选择/申请模板,获取模板ID
2.wx.requestSubscribeMessage弹窗,用户选择同意或拒绝
3.将用户openid和模板id等字段传到服务端
4.服务端下发信息
5.用户点击多少次允许,服务端就能发送多少条信息给该用户,超过则失败, 次数可累计
6.用户点击不再询问,只是看不到弹窗,还是需要触发wx.requestSubscribeMessage的事件才能计入累积次数

编译模式
1.微信开发者工具中,默认为普通编译,点击后添加编译模式,可选择页面和模拟参数

域名配置(小程序后台中 开发-开发设置-服务器域名/业务域名)
1.服务器域名
1.一次可改多条,每月还可修改50次
2. request合法域名:访问的接口服务器域名
socket合法域名:访问的socket接口服务器域名
uploadFile合法域名:文件上传(wx.uploadFile)请求访问的接口服务器域名
downloadFile合法域名:下载文件资源到本地(wx.downloadFile)请求访问的接口服务器域名
2.业务域名
1.需要下载校验文件放在对应的域名根目录下,需要运维配合
2.最多可以添加100个业务域名

提审发布过程
提审:
1.微信开发者工具右上角点击上传代码
2.小程序后台中 管理-版本管理-开发版本-提审
发布:
审核通过后,小程序后台中 管理-版本管理-审核版本-发布-全量发布

其他知识点
1.云开发
2.插件模式
3.小程序框架mpvue/wepy/uniapp
4.小游戏
5.自定义组件
6.wxml模板
7.分包加载
8.画布canvas
9.基础库
10.web-view和h5的交互
11.h5中使用JS-SDK
小程序跳转按钮：
App跳转按钮：
12.WXS

案例知识点:
1.全局/页面配置
2.配置tabbar
3.组件button/view/image
4.生命周期
5.页面使用全局变量和方法
6.数据渲染{{}}
7.列表渲染wx:for
8.条件渲染wx:if/hidden
9.动态类名/动态样式
10.rpx
11.事件绑定/事件传参
12.页面传参
13.缓存api
14.界面api
15.路由api
16.请求api
17.分享页面

练习:
1.页面结构
1) 文字view
2) 输入框input
3) 按钮button
2.将页面标题改成"测试"
3.用户点击按钮后,提示或者打印出当前输入的文字是什么,并清空输入框
4.当输入框输入的时候,文字显示"用户正在输入中…",当输入框失去焦点的时候,文字显示"用户离开了键盘…"