微信小程序教程

微信小程序
    一、小程序简介
        小程序类型：微信小程序、支付宝小程序、京东小程序、头条小程序等等。运行在App应用中的小程序应用。
小程序特点：无须安装，只能运行指定的APP中，小而美。
    二、怎么学习
        准备工作：1.注册小程序账号（后台）、2.下载开发者工具（开发）、3.会使用小程序文档（查阅）。

开发范式：原生小程序 / uniapp / Taro / [wepy / mpvue]
    环境搭建、路由、状态管理、功能开发。。。

跨平台APP开发：uniapp / [Taro / ReactNative / Flutter]
    三、准备工作
        小程序管理后台的使用：
            注册：建议用QQ邮箱注册，注册个人版本。
            登录：建议扫码登录（当然也可用账号登录），进入到小程序管理后台。
                1、成员管理（开发）：添加开发者、添加体验者。
                2、版本管理（上线）：使用开发者工具提交代码 -> 开发版本 -> 审核版本 -> 线上版本
                3、开发管理（开发）：开发设置（各种URL配置、appid、app密钥）、接口配置（第三方SDK）
        小程序开发者工具的使用：
         1、要求会下载、会安装
         2、会使用开发者工具创建“原生小程序”项目（创建项目要填写appid）
         3、会导入老项目（注意appid有没有）
         4、常用功能：模拟器、编辑器、调试器、四个调试工具、上传、详情。
        小程序文档：
            开发（指南、框架、组件、API） 社区（相当百度、查询各种问答）
    四、语法范式（罗列知识点）
        1、小程序页面或组件的四种文件：wxml视图、wxss样式、js逻辑、json配置。
        2、小程序页面（路由），在 app.json中配置的路径，都是页面。
        3、小程序目录结构：project【po jue te】.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、动态样式：
        10、1.事件绑定：  使用bind*绑定事件支持冒泡，使用catch*绑定事件会阻止冒泡。组件有哪些事件，看组件文档。事件对象默认就是事件处理器的第一个参数。如果要事件传参，使用dataset进行传参。

2.tap事件，是大多数组件都有的，代表的是移动端的触屏事件，所以用得多。
        11、表单绑定，默认使用单向绑定（像React那样）；自2.9开始，小程序表单也支持双向绑定了（model:value）。
        12、微信原生小程序也支持“类DOM操作”，wx.createSelectorQuery()创建选择器。
        13、小程序动画  this.animate() / this.clearAnimation()，具体语法参考文档。
    原生小程序中，可以 this.animate() / this.clearAnimation() 这种动态。如果在uniapp/Taro中，这种动画用不了。
        14、自定义组件封装，使用 Component({}) 构造函数。
            父传子，使用 properties 接收自定义属性。
            子传父，使用 this.triggerEvent() 触发自定义事件。
            提示：事实上，小程序自定义组件可以玩得非常花哨，比如支持slot、mixins。（量力而行）
        15、调接口 wx.request({ url, data, method, success, fail, complete })
            在本地开发时，无须 https 协议，这时需要在微信小程序开发者工具中勾选“不校验合法域名。。。”
            小程序上线时，必须在小程序管理后台中配置合法的 https协议。如果不配置，小程序上线，调接口受阻。
            问题：在小程序开发中，调接口，要配置代理吗？（不需要，因为小程序不是web浏览器）。
            注意：小程序上线，务必把代码中的baseURL改成 https的线上地址，并在小程序管理后台的开发设置配置合法域名。
        16、小程序也有本地存储能力 wx.setStorage / wx.setStorageSync ....
        17、画布（聊一聊）
            场景：把一个界面（图片、奖券、二维码）保存到手机相册，必须得使用画布。
        18、小程序分包技术
            小程序代码包上传（提交体验），默认不能超出2M，如果超出2M，将无法提交。小程序有这个限制，是为了用户体验。
            问题：如果代码实在没有办法再优化了，代码体积仍然大于2M，怎么办？使用分包技术来解决这个问题。
            实现：在app.json中，使用subpackages【suo pu pa ke ags】进行分包配置（实际是把页面装在不同的包中，按需加载）。
            注意：在微信小程序中，最多可以分10包，并且每个包的代码都不能超过2M。所以一个小程序最大最大只能是20M。在设计小程序时，一些主要的被频繁访问的页面放在主包中。
        19、在app.json中，使用 tabBar属性可以配置小程序的TabBar（最少2个，最多5个）。
            场景：小程序底部Tabbar可以自已封装，也可以配置。
        
20、小程序登录（真实的登录，就是那种获取token的登录）
            描述：在App的onLaunch中，使用wx.login() 获取临时凭证code（有效期为5分钟），调接口wx.request()把code发送给后端；你的后端再使用appid和app密钥，调微信官方接口，获取openid（用户在微信生态中的唯一标识），后端使用openid生成token，返回给小程序端；小程序端收到token存储到storage。以后每次调接口，都带上token。
        21、登录授权（交互性的登录，就是那种获取用户信息、手机号等，这种授权登录，需要用户触发然后弹授权框；只有用户同意授权，你才能得到这些信息。）
            注意：最新小程序中，个人版本的小程序不能获取手机号，只有企业版本的小程序才能获取手机号。
            如何获取用户信息？在事件处理器中，调用 wx.getUserProfile()获取用户信息。
            如何获取手机号？只有企业版本的小程序才能获取手机， 这里获取的是手机信息密文，还需要进一步调接口把密文发给后端，让后端解析出真正的手机号。
        22、权限授权（相册、相机、麦克风、电话本、蓝牙等等
            有两种方式可以打开授权弹框：如果调用了相关的功能API会自动打开授权框；还可以调用wx.authorize()手动打开授权框。
            注意：一旦授权框弹出并且被用户拒绝了，那么这个授权框将无法再次弹出了。这时， 我们可以从产品交互设计的角度，使用wx.openSetting()打开微信内置的授权页面，让用户选择性地勾选授权。
            问题：从代码的角度，我怎么知道用户同意过哪些授权、拒绝过哪些授权呢？使用wx.getSetting()可以查询到。
            文档：https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/authorize.html
        23、权限授权（地理位置 scope.userLocation）
            它是唯一的一个能够自动弹出的授权（需要我们进行若干配置）。
            地理位置授权，和相册授权一样，一旦用户拒绝了，将无法再弹出。这需要从产品设计的角度，引导用户打开微信内置的授权页（wx.openSetting()）。
            关于地理位置的开发需求：使用经纬度请求商家列表，使用经纬度计算与商家的距离，监听当前用户的位置变化。
            那么问题来了，怎么获取用户当前的经纬度？wx.getLocation()
            如何计算距离？推荐使用“腾讯位置服务SDK”，具体用法参考文档。
            如何监听位置的变化？wx.onLocationChange()
        24、小程序转发（有两种方法）
            用户点击右上角胶囊按钮的“三个点”进行转发，还可以使用点击转发。这两种转发，都会触发当前Page页面的onShareAppMessage()这个钩子函数，使用这个钩子函数可以自定义转发哪个页面。
            注意：在同一个页面中，只能使用一次。
        25、全局配置：pages路由配置、window窗口配置、tabBar底部导航配置、subpackpages分包技术、permission地理位置授权。
            页面配置：几乎都常用。罗列几个重要的，navigationStyle自定义顶部导航栏，enablePullDownRefresh开启下拉刷新（配合onPullDownRefresh一起用），onReachBottomDistance指定滚动条小于多少时触发onReachBottom钩子，usingComponents使用Component自定义组件。
        26、提问：在小程序怎么保存全局数据（类似Web开发中的window全局变量）？
            在App.js中使用 globalData属性保存全局数据
            在Page或Component中，使用 getApp() 可以获取app实例并访问全局数据。
            注意：这种全局数据，只是全局，是没有响应式的。
        27、理解并使用小程序组件
            注意：小程序中不支持HTML标签；只支持小程序组件，可以直接用。
            /文本、/轮播图、设计横向菜单
            功能丰富（当按钮使用、提交或重置表单、open-type开放能力、获取手机号、分享等）
            

            注意：小程序表单支持手动取值（value+bind*)，也支持双向绑定（model:）