学习笔记：小程序学习和实践

### 问题和解决汇总
[vue 子组件绑定事件无效](https://www.jianshu.com/p/b33c079308af)
[父子组件传值，在子组件页面点击事件传父组件](https://blog.csdn.net/qq_45495460/article/details/108010254)

### 教程
[uni-app的组件](https://uniapp.dcloud.net.cn/component/README?id=基础组件)
[uni-app的vue3教程](https://uniapp.dcloud.io/vue3-basics)
[uni-app-框架学习](https://uniapp.dcloud.io/frame)
[白话uni-app 【也是html、vue、小程序的区别】](https://ask.dcloud.net.cn/article/35657)

[uni-app小程序——从工具下载到运行项目](https://blog.csdn.net/weixin_38633659/article/details/120313891?spm=1001.2014.3001.5501)

* [小程序的页面跳转](https://blog.csdn.net/weixin_42881768/article/details/124886403)

### 小程序应用包大小限制问题
* 如何理解分包？
  在小程序启动时,默认会下载主包并启动主包内页面,当用户进入分包内某个页面时,客户端会把对应分包下载下来,下载完成后再进行展示。
* 官方单个小程序大小限制为2M
* 目前小程序分包大小有以下限制：
    整个小程序所有分包大小不超过 20M
    单个分包/主包大小不能超过 2M
  
  [小程序 分包](https://blog.csdn.net/weixin_43294560/article/details/120604914)

##### 解决办法
* 资源压缩 或者 资源CDN处理（放在服务器）
* 分包

### 环境搭建
##### 1、开发工具 和 配置
[官方推荐hbuilderx](https://www.dcloud.io/hbuilderx.html)
[微信官方开发工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html)

* 「hbuilderx」 需要配置 「微信开发工具」的路径

* 「微信开发工具」的配置
  设置 - 安全设置 - 服务接口（开启）
  

 企业微信  和 游戏 的插件（根据需要）
  

 小程序后台账号配置，需要开发者添加到开发组中。

##### 2、「hbuilderx」编译运行
* 打开工程目录 - 运行 - 可以选择运行在浏览器或者小程序中
  
* 「微信开发工具」HTTPS的关闭（默认开启）
    

* 真机运行，需要下载真机运行的插件

##### 3、常见异常
* 代码使用了scss/sass语言，未安装插件报错（安装对应插件后解决）

* 微信账号需要绑定手机号认证，否则报以下错误

### 小程序开发与网页H5开发的差异
* 网络模型(b/s -> c/s)
   之前的网页，服务端代码混合在页面里；现在前后端分离，通过js api获取json数据，把数据绑定在界面上渲染。

* 运行环境区别（从浏览器变成v8引擎）
  浏览器特有：window、document、navigator、location对象，包括cookie等存储，只有在浏览器中才有；app和小程序都不支持。
  app和小程序支持web-view组件，里面可以加载标准HTML，这种页面仍然支持浏览器专用对象window、document、navigator、location。

* 以前的dom操作，改成vue的MVVM模式
  现在前端趋势是去dom化，改用mvvm模式，更简洁的写法，大幅减少代码行数，同时差量渲染性能更好。
  例如，uni-app使用vue的数据绑定方式，以此解决js和dom界面交互的问题。

* uni-app的工程结构和页面管理
  - 每个可显示的页面，都必须在 pages.json中注册。
    例如，支持配置原生的导航栏和底部tabbar，但事件的响应需要在vue页面中实现。

* uni-app布局推荐使用flex。

### uni-app的核心文件

* pages.json，全局配置文件
  决定页面文件的路径、窗口样式、原生的导航栏、底部的原生tabbar 等。它类似微信小程序中app.json的页面管理部分。
  其中文件中pages数组中第一项表示应用启动页。
  
* manifest.json，应用的配置文件
  用于指定应用的名称、图标、权限等。

* package.json，应用的打包配置文件
  可以增加uni-app扩展节点，可实现自定义条件编译平台（如钉钉小程序、微信服务号等平台）。

* App.vue，uni-app的主组件文件
  所有页面都是在App.vue下进行切换的，是页面入口文件。但App.vue本身不是页面，这里不能编写视图元素。
  这个文件的作用包括：调用应用生命周期函数、配置全局样式、配置全局的存储globalData。
  应用生命周期仅可在App.vue中监听，在页面监听无效。

* main.js，uni-app的入口文件
  主要作用是初始化vue实例、定义全局组件、使用需要的插件如vuex。

* uni.scss，应用风格统一文件
  用途是为了方便整体控制应用的风格。比如按钮颜色、边框风格，uni.scss文件里预置了一批scss变量预置。
  uni.scss是一个特殊文件，在代码中无需 import 这个文件即可在scss代码中使用这里的样式变量。uni-app的编译器在webpack配置中特殊处理了这个uni.scss，使得每个scss文件都被注入这个uni.scss，达到全局可用的效果。如果开发者想要less、stylus的全局使用，需要在vue.config.js中自行配置webpack策略。

* vue.config.js，应用的vue页面配置文件，仅vue页面生效。
  是一个可选的配置文件，如果项目的根目录中存在这个文件，那么它会被自动加载，一般用于配置 webpack 等编译选项。

* .hbuilderx/launch.json，应用启动配置文件
  可以用来配置本地运行还是云端运行，属于hbuildex编译器的一部分。

* unpackage 存放打包后的文件目录

### 生命周期（应用生命周期、页面生命周期、组件生命周期）
[生命周期](https://uniapp.dcloud.io/collocation/frame/lifecycle?id=应用生命周期)

### 页面路由
[页面路由](https://uniapp.dcloud.io/api/router?id=navigateto)

### uni-app 使用 纯小程序代码
[uni-app使用小程序原生组件](https://blog.csdn.net/qq_28912983/article/details/110262513)

### uni-app发布小程序
* 需要配置微信小程序的id（微信后台申请）
* 发布-上传
* 微信开发工具中，点击上传
* 如果需要接入服务器请求，需要在开发后台配置域名信息，并且只支持https。
  

* 小程序版本可以分为正式版本、审核版本、开发版本（可以选为体验版本）
  可以进行远端调试，即在微信直接运行小程序。

  [官方设置文档](https://developers.weixin.qq.com/miniprogram/dev/framework/ability/network.html)