小程序项目总结

小程序框架

每个小程序的结构都是由两个主要部分构成：主体部分 + 各个页面。

类似于许多框架，主体部分主要用于核心的配置，各个页面主要用于不同业务场景。

1.1，主体部分主要由3个文件构成

1）app.js：小程序逻辑，初始化APP

2）app.json ：小程序配置，比如导航、窗口等

3）app.wxss：公共样式配置

1.2，页面由4个文件构成

1）js：页面逻辑，相当于控制层（Control层）；也包括部分的数据（Model层）

2）wxml：页面结构展示，相当于视图层（View层）

3）wxss：页面样式表，纯前端，用于辅助wxml展示

4）json：页面配置，配置一些页面展示的数据，充当部分的模型（Model层）

# 常用钩子解析
钩子执行流程
onLoad -> onShow -> onReady -> onHide -> onUnload

 下面的钩子在vue组件里面是不会执行的，因为他们是专门给小程序页面调用而存在的。
- onLoad 首次进入小程序页面便会加载，但是加载完毕之后程序就会缓存起来，下次再进入页面就不会再触发了(tabbar方式切换的时候)，但如果是折返navigateBack或者页面跳转navigateTo会重新触发。其实这里觉得onLoad钩子最核心的地方就是获取各页面跳转过来的query参数。
- onShow 每次进入小程序页面便会加载，不管什么情况都会加载。
- onHide 每次离开某个小程序页面便会加载，不管什么情况都会触发
- onUnload 点击小程序页面左上角返回按钮便会执行
- onTabItemTap 当点击tabBar切换的时候，在小程序页面内触发该钩子
- onReachBottom 小程序页面触底了会触发该钩子
- onPullDownRefresh 小程序页面需要有下拉刷新的功能的时候往pages.json里面设置enablePullDownRefresh 属性为true，搭配onReachBottomDistance属性一起用

- mounted  vue组件的钩子，有点类似小程序里面的onLoad钩子

上面又说到一个概念，叫做小程序页面，基于vue框架开发的我们，怎么才能知道什么时小程序页面呢？很简单，你在pages.json里面定义路由的时候，那么对应路由那个页面就叫做小程序页面。


navigateTo, redirectTo 只能打开非 tabBar 页面。navigateBack可以返回上一级
switchTab 只能打开 tabBar 页面。
reLaunch 可以打开任意页面。不受tabBar影响。
页面底部的 tabBar 由页面决定，即只要是定义为 tabBar 的页面，底部都有 tabBar。
调用页面路由带的参数可以在目标页面的onLoad中获取

PS：onShow在搭配v-if的时候有点需要注意的是，this.$refs.xxx在onShow钩子里面是undefined， 在onLoad里面是可执行的；所以如果你业务需求是页面加载完毕之后进行数据的加载，那么就需要在对应组件的mounted钩子里面进行数据的获取。这样做的好处就是mounted只会触发一次，也就是获取数据的请求仅仅会有一次，在小程序页面的onShow钩子函数里面编写获取数据，可以满足页面切换后获取数据的业务情景

综上：在vue组件内部不要使用小程序的钩子，如果页面要返回一次刷新一次，可以使用onShow，当然，如果只考虑navigateBack或者navitageTo路由跳转，不考虑tabbar的切换刷新的话，onLoad也是一个方法。

钩子调用触发的函数：https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/route.html

在循环数组中不允许使用解构赋值、slice的方式

# 改变导航栏背景色,注意，frontColor只有两种，一种白色，一种黑色，设置其它颜色不生效
uni.setNavigationBarColor({
    frontColor: '#ffffff',
    backgroundColor: '#4143E4'
});

# 登陆获取code，如果不知道什么是code，可以看一下时序图
uni.log();

# 拨打电话
uni.makePhoneCall()

# 获取微信用户信息
uni.getUserInfo()

非常诡异的错误

this.$refs.xxx不能写成计算属性的形式，也不能弄成@Ref()的形式,只能写成this.$refs.xxx的形式，不然JSON.stringify的时候会报错。

背景图片可以通过:style="variable"方式添加，但是背景图片不能直接使用相对路径或者绝对路径，因为css里面的url只认base64和网络地址的图片，其它形式的路径的不认。