[移动开发]uniapp开发知识点

/**
 * 创建uni-app项目
 *    HBuilder -> 文件 -> 新建项目 -> uni-ui项目 -> 创建
 * 
 * hbuilder中配置微信开发工具
 *    1. 工具 -> 设置 -> 运行配置 -> 小程序运行配置 -> 传入小程序在电脑中的安装地址(eg: D:\Software\微信web开发者工具\微信开发者工具.exe)
 *    2. 打开微信开发工具 -> 设置 -> 安全设置 -> 开启服务端口
 * 
 * uniapp中网络请求
 *    @escook/request-miniprogram: 因为小程序中无法使用axios, 而wx.request有局限，因此使用此包
 *    1. 项目下打开终端，npm init -y
 *    2. 安装 npm install @escook/request-miniprogram
 *    3. main.js引入
 *      import { $http } from '@escook/request-miniprogram'
 *      uni.$http = $http
 *      $http.baseURL = 'https://www.baidu.com' // 请求根路径
 *      拦截器配置(加载动画等)
 *      $http.beforeRequest = function(options) {
          uni.showLoading({
            title: '加载中...'
          })
        }
        $http.afterRequest = function() {
          uni.hideLoading()
        }
 *    4. 页面使用
 *      async getData() {
 *        let res = await uni.$http.get('url地址')
 *       }
 * 
 * uniapp中配置代理(以h5为例)
 *    1. manifest.json中添加配置
*       "h5": {
          "devServer": {
            "port": 8080,
            "proxy": {
              "/api": {
                "target": "代理地址",
                "changeOrigin": true,
                "pathRewrite": {
                  "/api": ""
                }
              }
            }
          }
        },
 * 
 * uniapp配置小程序分包
 *    1. 根路径下创建分包文件夹 以 packageA为例
 *    2. 在pagckageA上右键新建页面，取名goods_detail
 *    3. pages.json中配置，与pages同级
 *      "subPackages": [
            {
              "root":"packageA",
              "pages": [
                {
                  "path":"goods_detail/goods_detail",
                  "style": {}
                }
              ]
            }
          ]
 *    
 * 自定义封装uni.$showMsg()
 *    1. main.js中增加配置
 *      uni.$showMsg = function(title = '数据加载成功', duration = 1500) {
          uni.showToast({
            title,
            duration,
            icon: 'none'
          })
        }
      2. 页面中使用
        uni.$showMsg('加载成功啦!!')
 *
 * uni-app中(上拉加载更多 | 下拉刷新) 配置, 分包中也是同样配置
 *    1. pages.json -> pages[] -> style{} -> "onReachBottomDistance": 150
  *     "style" :                                                                                    
          {
            "navigationBarTitleText": "首页",
            "enablePullDownRefresh": false, // 下拉刷新
            "onReachBottomDistance": 150    // 上拉加载更多
        }
      2. 页面中 onReachBottom() | onPullDownRefresh() 函数实现代码逻辑
        onReachBottom() {
          console.log('触发了上拉加载')
        },
        onPullDownRefresh() {
          console.log('触发了下拉刷新')
		    }
 *
 */