14-小程序知识点串讲
码路教育 8/16/2001
# 一，小程序简介与准备工作
# 1，小程序介绍
- 小程序类型：微信小程序、支付宝小程序、京东小程序、字节小程序等等。运行在App应用中的小程序应用。
- 小程序特点：无须安装，只能运行指定的APP中，小而美。
- 小程序场景：工具类，营销类（转发，拼团...）
- React独立架构 > CreateReactApp >Umi3 > Vue3 > Vue2 > Angular > Node > Uniapp > 小程序 > ReactNative > Java前后端不分离 > 低代码开发(更边周边技术)
# 2，小程序内容
- 注册小程序账号（后台）、下载开发者工具（开发）、会使用小程序文档（查阅）。
- 大概看一下各种小程序文档，各种小程序都是周边技术。
- 开发范式：原生小程序 / uniapp / Taro / wepy(out了) / mpvue(out了)...
- 内容：环境搭建、组件、路由、状态管理、功能API...
- 跨平台APP开发：uniapp / Taro / ReactNative / Flutter
# 3，准备工作
小程序管理后台的使用：
- 注册：建议用QQ邮箱注册，注册个人版本。
- 登录：建议扫码登录（当然也可用账号登录），进入到小程序管理后台。
- 成员管理（开发）：添加开发者、添加体验者。
- 版本管理（上线）：使用开发者工具提交代码 -> 开发版本 -> 审核版本 -> 线上版本
- 开发管理（开发）：开发设置（各种URL配置、appid、app密钥）、接口配置（第三方SDK）、设置。
小程序开发者工具的使用（演示）:
- 要求会下载、会安装
- 会使用开发者工具创建“原生小程序”项目（创建项目要填写appid）
- 会导入老项目（注意appid有没有）
- 常用功能：模拟器、编辑器、调试器、四个调试工具、上传、详情。
小程序文档：
- 开发（指南、框架、组件、API） 社区（相当百度、查询各种问答）
# 二，语法范式串讲（看文档串讲）
# 1，小程序页面或组件的四种文件
- wxml视图、wxss样式、js逻辑、json配置。
# 2，小程序页面（路由）
- 在 app.json中配置的路径，都是页面。
- 一个小程序基本上都是2，3十个页面，开发周期都是一两个月。
# 3，小程序目录结构
- project.config.json
- app*全局文件
# 4，小程序是基于配置的
- 很多功能都是配置出来的，有全局配置（路由、tabbar、权限配置），还是页面配置（窗口表现）
- 在框架模块中有小程序的配置文档
# 5，三种组件（三个构造函数）
- 看框架模块文档
- App、Page、Component，这三个构造函数的选项完全不同。
- App生命周期：onLaunch小程序启动的入口
- Page生命周期：onLoad / onShow / onReady页面渲染完成 / onHide / onUnload
- 路由跳转
# 6，模块化
- 在小程序中不支持ES6模块化语法，只支持CommonJS语法（module.exports / request）。
# 7，指令
- {{}}文本渲染
- wx:for/wx:for-index/wx:for-item/wx:key列表渲染
- wx:if/wx:elif/wx:else条件渲染
# 8，样式的单位问题
- 在小程序中写css样式时，尺寸单位一律使用 rpx，不要使用px单位。
- 什么 rpx ？这是一个相对单位，在任何手机上，750rpx都等于满屏。
# 9，动态样式
<view style='color:{{c}};font-size:{{f}}rpx;' class='{{a}} box' />
1
# 10，事件绑定
- 使用bind绑定事件支持冒泡，使用catch绑定事件会阻止冒泡。
- 组件有哪些事件，看组件文档。
- 事件对象默认就是事件处理器的第一个参数。如果要事件传参，使用dataset进行传参。
- tap事件，是大多数组件都有的，代表的是移动端的触屏事件，所以用得多。
# 11，表单绑定
- 默认使用单向绑定
- 自2.9开始，小程序表单也支持双向绑定了（model:value）
# 12，微信原生小程序也支持“类DOM操作”
- wx.createSelectorQuery()创建选择器
# 13，小程序动画
- this.animate() / this.clearAnimation()，具体语法参考文档。
- 原生小程序中，可以 this.animate() / this.clearAnimation() 这种动态。如果在uniapp/Taro中，这种动画用不了。
# 14，小程序运行时
- 自行学习
# 15，自定义组件
- 使用 Component({}) 构造函数
- 父传子，使用 properties 接收自定义属性。
- 子传父，使用 this.triggerEvent() 触发自定义事件。
- 事实上，小程序自定义组件可以玩得非常花哨，比如支持slot、mixins。（量力而行）
- 组件的生命周期基本上用不到
# 16，调接口
- wx.request({ url, data, method, success, fail, complete })
- 在本地开发时，无须 https 协议，这时需要在微信小程序开发者工具中勾选“不校验合法域名...”
- 小程序上线时，必须在小程序管理后台中配置合法的 https协议。如果不配置，小程序上线，调接口受阻。
- 问题：在小程序开发中，调接口，要配置代理吗？（不需要，因为小程序不是web浏览器）。
- 注意：小程序上线，务必把代码中的baseURL改成 https的线上地址，并在小程序管理后台的开发设置配置合法域名。
# 17，页面的生命周期
- 直接看官方的图
# 18，本地存储
- 小程序也有本地存储能力 wx.setStorage / wx.setStorageSync ....
# 19，画布
- 场景：把一个界面（图片、奖券、二维码）保存到手机相册，必须得使用画布。
# 20，分包
- 小程序代码包上传（提交体验），默认不能超出2M，如果超出2M，将无法提交。小程序有这个限制，是为了用户体验。
- 问题：如果代码实在没有办法再优化了，代码体积仍然大于2M，怎么办？使用分包技术来解决这个问题。
- 实现：在app.json中，使用subpackages进行分包配置（实际是把页面装在不同的包中，按需加载）。
- 注意：在微信小程序中，最多可以分10包，并且每个包的代码都不能超过2M。所以一个小程序最大最大只能是20M。在设计小程序时，一些主要的被频繁访问的页面放在主包中。
# 21，自定义tabbar
- 在app.json中，使用 tabBar属性可以配置小程序的TabBar（最少2个，最多5个）。
- 场景：小程序底部Tabbar可以自已封装，也可以配置。
# 22，小程序真正登录
- 你在微信中使用小程序员，默认就已经登录了。因为微信已经登录了。
- 假"登录"，请求授权你的用户信息，手机号。
- 真正的登录，看官方的图，面试必问。
- 真实的登录，就是那种获取token的登录的描述：在App的onLaunch中，使用wx.login() 获取临时凭证code（有效期为5分钟），调接口wx.request()把code发送给后端；你的后端再使用appid和app密钥，调微信官方接口，获取openid（用户在微信生态中的唯一标识），后端使用openid生成token，返回给小程序端；小程序端收到token存储到storage。以后每次调接口，都带上token。
# 23，小程序登录授权假登录
- 交互性的登录，就是那种获取用户信息、手机号等，这种授权登录，需要用户触发然后弹授权框；只有用户同意授权，你才能得到这些信息。
- 最新小程序中，个人版本的小程序不能获取手机号，只有企业版本的小程序才能获取手机号。
- 如何获取用户信息？在事件处理器中，调用 wx.getUserProfile()获取用户信息。
- 如何获取手机号？只有企业版本的小程序才能获取手机，《button open-type="getPhoneNumber" bindgetphonenumber="getMobile" /》 这里获取的是手机信息密文，还需要进一步调接口把密文发给后端，让后端解析出真正的手机号。
# 24，功能权限授权（相册、相机、麦克风、电话本、蓝牙等等）
- 有两种方式可以打开授权弹框：如果调用了相关的功能API会自动打开授权框；还可以调用wx.authorize()手动打开授权框。
- 注意：一旦授权框弹出并且被用户拒绝了，那么这个授权框将无法再次弹出了。这时， 我们可以从产品交互设计的角度，使用wx.openSetting()打开微信内置的授权页面，让用户选择性地勾选授权。
- 问题：从代码的角度，我怎么知道用户同意过哪些授权、拒绝过哪些授权呢？使用wx.getSetting()可以查询到。
- 文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html
# 25，功能权限授权（地理位置 scope.userLocation）
- 它是唯一的一个能够自动弹出的授权（需要我们进行若干配置）。
- 地理位置授权，和相册授权一样，一旦用户拒绝了，将无法再弹出。这需要从产品设计的角度，引导用户打开微信内置的授权页（wx.openSetting()）。
- 关于地理位置的开发需求：使用经纬度请求商家列表，使用经纬度计算与商家的距离，监听当前用户的位置变化。
- 那么问题来了，怎么获取用户当前的经纬度？wx.getLocation()
- 如何计算距离？推荐使用“腾讯位置服务SDK”，具体用法参考文档。
- 如何监听位置的变化？wx.onLocationChange()
# 26，小程序转发（有两种方法）
- 用户点击右上角胶囊按钮的“三个点”进行转发，还可以使用《button open-type='share'》点击转发。这两种转发，都会触发当前Page页面的onShareAppMessage()这个钩子函数，使用这个钩子函数可以自定义转发哪个页面。
- 注意：在同一个页面中，《button open-type='share'》只能使用一次。
# 27，全局配置
- pages路由配置、window窗口配置、tabBar底部导航配置、subpackpages分包技术、permission地理位置授权。
# 28，页面配置
- 几乎都常用。罗列几个重要的，navigationStyle自定义顶部导航栏，enablePullDownRefresh开启下拉刷新（配合onPullDownRefresh一起用），onReachBottomDistance指定滚动条小于多少时触发onReachBottom钩子，usingComponents使用Component自定义组件。
# 29，保存全局数据
- 类似Web开发中的window全局变量
- 在App.js中使用 globalData属性保存全局数据
- 在Page或Component中，使用 getApp() 可以获取app实例并访问全局数据。
- 注意：这种全局数据，只是全局，是没有响应式的。
# 30，小程序组件
- 程序中不支持HTML标签；只支持小程序组件，可以直接用。
- view文本、swiper/swiper-item轮播图、scroll-view设计横向菜单
- button功能丰富（当按钮使用、提交或重置表单、open-type开放能力、获取手机号、分享等）
- form input picker picker-view picker-view-column
- 小程序表单支持手动取值（value+bind*)，也支持双向绑定（model:）
- image map canvas ad web-view
- web-view帮助我们在小程序中混合H5网页，如果小程序上线，要小程序管理后台配置安全域名。
# 31，常用API
- 小程序API有什么特点？大多数API都有使用场景和兼容性的；大多数默认都是异步的（像JQ的api那样有success/fail/complete，默认都不支持Promise）；有些是同步的（函数名中带有'sync'标记）
- 系统API：用于获取手机硬件或宿主环境的基本信息。
- 路由API：路由跳转API方法有5种，每个的使用场景都是不同的；在小程序中怎么进行路由传参？只能合适query传参，在页面中使用onLoad()来接收路由参数；在小程序中路由栈最多只能放下10个路由信息。
- 跳转API：指的是小程序之间的跳转，意思是从一个小程序跳转到另一个小程序。
- 界面API：弹出提示框、窗口表现设置、页面滚动、置顶操作。
- 网络API：调后端接口、下载文件、上传文件。（本地开发都可以不校验https证书等，上线时这些网络baseURL都要在小程序管理台进行配置，并且都要求是https协议的）
- 支付API：准备工作（开通微信支付平台、小程序备案、在小后台接入微信支付商户号），使用wx.requestPayment()进行支付调用。
- 数据缓存API：本地Storage的增删改查。
- 画布API：和动画API一样，都是旧接口的，不推荐使用了。如果要用画布，建议使用HTML5 Canvas API。
- 媒体API：图片API（保存图片到相册、裁剪图片、预览图片、压缩图片。）
- 位置API：监听位置变化、获取用户当前位置、打开微信内置的腾讯地图。
- 开放接口API：登录、用户信息获取、授权、打开设置。
- 设备API：剪贴板、打电脑、扫码。
- DOM操作： wx.createSelectorQuery()