微信小程序学习总结

因疫情严重，近日在家学习了微信小程序的开发，写这篇博客对学习过程进行一个总结，希望疫情早日退散，中国加油，逆战加油

微信小程序学习

1. 简易教程—介绍小程序开发的一些基本情况，开发方式，项目目录等等，看完这些，基本能了解怎么跑起来项目，在哪块写代码，各个文件的作用。
2. 框架— 这部分是小程序开发的核心，小程序采用视图和逻辑层代码相分离的结构。
3. 组件—小程序的每个标签相当于一个组件，官方已经预定义了一些常用的标签组件，能够满足日常基本功能的使用，这部分分时小程序开发高效的一个原因，基础的组件都定义好，需要用就行。这部分的文档，只要过一下，大概有那些组件，用的时候再仔细阅读文档。
4. API—主要部分，可以调起微信提供的能力，如果你在前端开发中没有遇到过的功能，都能在这里查到，比如小程序的头部，页面的刷新，本地存储，获取用户信息等。
5. 工具— 微信开发刚开始还是用微信自己的开发工具比较方便。

微信开发者工具不足，主要在几方面：

编写不便，没有智能输入
模拟器与真机表现不一致。主要是微信版本兼容性，例如低版本微信video层级处于置顶位置；

前期工作准备：

1、申请开发者账号，完善信息，开发者资质认证
2、配置接口服务器域名及业务域名

3、不是使用本地接口时代理配置需使用系统代理，以防真机出现接口访问不到

4、记得勾选不校验合法域名，接口访问问题

5、上传时，项目的基本信息APPID需要是管理者APPID，代码才可以上传，上传成功即可在微信公众平台-管理-版本管理-开发版本看到提交信息，可在成员管理添加体验者；

项目结构

常用组件

• 视图容器 view scroll-view swiper
• 基础内容 text
• 媒体 image video audio
• 表单 button input checkbox label picker
• 画布 canvas
• 地图 map

常用语法

• 数据绑定
  
• 列表渲染

列表中的wx:key 是一个比较令人迷惑的地方 ，不写会报错，但是随便给一个字符也不合理，最好是循环中的一个标记唯一性的键值，比如id

• 条件渲染
  
• 事件绑定
  
  小程序的事件绑定，写法上有些区别，主要2种 bind:youevent=“eventhandle” catch:youevent=“eventhandle” catch 能阻止事件冒泡
• 模块开发

小程序可以使用common.js 的模块开发方式。moudle.exports /exports 导出模块， require (‘file.js’) 的方式引入模块

页面的生命周期

request异步，app.js的onLaunch和page的onLoad？
onLaunch和onLoad是异步的，各执行各的，里面的代码，谁先谁后，完全不可知。onLaunch是只有冷启动时候才会被再执行的 其它时候是不会被执行的 ；
业务场景：
在onLaunch一般用来获取用户信息的 而在page.js的onLoad也要拿着这个信息去后台获取数据，这个时候就获取不到了~
onLaunch 调用 wx.redirectTo 没有效果是因为这个时候页面还没注册（页面跳转尽量不放在onLaunch）
解决方案：
1、添加启动页
2、在页面onLoad里判断app.js里拿到openid了吗，没拿到的话，传个回调方法给app.js，让他拿到之后执行这个回调方法
3、onLaunch用来获取用户信息，相关数据获取放到页面上

request异步，onload 和onshow？
业务场景：
每个页面都有获取用户的登录信息而调用接口进行操作，获取用户登录信息这步可能涉及到调用接口，写在onload上，可能会导致onshow调用接口的方法还没来得及获取到用户信息就执行了，如果我把逻辑都写在onload上，后退到页面还要有部分数据要刷新状态。
解决方案：
1、写在onShow中，登陆后缓存登陆状态，下次执行onShow时，判断一下登陆状态（在缓存里面增加一个状态判断，如果之前执行过就不再重复执行，没执行再进行执行）
2、首次加载的写onLoad，需要即时刷新的在onShow里面加this.onLoad()

小程序如何获取用户openid和unionId
注：没有在微信开放平台做开发者资质认证的就不要浪费时间了，没认证无法获取unionId，认证费用300元/年，emmmm…

流程
第一步：wx.login获取 用户临时登录凭证code
第三步：把步骤一code、appid传到开发者自己服务端
第三步：服务端结合code、appid、secret进行解密获取openid、unionId

登录授权

新的授权需用button组件调用getUserInfo，所以在这之前无法调用wx.login，但是如果先调用获取用户信息再调用wx.login的话，解密过程会出错。

解决办法：
在页面的onLoad生命周期里调用wx.login，获取的code存入data以备需要的时候使用，但是code失效时间为5分钟，如果用户停留页面时间过长后点击授权登录，此时的code已经过期了，所以，获取code的函数应该每4分钟左右调用一次

wxml按钮授权：

外部链接跳转：

添加外链链接需要到业务域名配置（业务域名目前仅支持自己已备案成功的域名）