更新记录

1.0.0（2021-02-26）

封装request、集成vuex等

平台兼容性

小程序通用基建模板-lqc

前言：

此项目是由HbuildX创建的uni-app项目，建议使用HbuildX进行开发。

在初始项目的基础上增加了分包配置示例、request封装、过滤器封装示例、公共方法封装示例、状态管理等。

运行测试环境：运行→运行到小程序模拟器→微信开发者工具（需安装并配置路径）

发布正式环境：发行→小程序-微信→（打包完成）→上传（微信开发者工具）

项目结构：

┌─ components 复用组件目录

│ └─ a.vue 复用组件

├─ pages 页面目录

│ ├─ index

│ │ └─ index.vue index页面

│ └─ list

│ └─ list.vue list页面

├─ pages_xxx 分包页面目录

│ ├─ xxx

│ │ └─ xxx.vue 分包页面

│ └─ static 分包静态资源目录

├─ static 主包静态资源目录

├─ unpackage 运行、发行的代码包

├─ utils

│ ├─ filter 过滤器(main.js导入)

│ └─ validate 使用时导入对应方法(import {xxx} from '@/utils/validate')

├─ Vuex 状态管理

├─ App.vue 应用配置，配置App全局样式以及应用生命周期

├─ main.js 入口文件

├─ manifest.json 配置应用名称、appid、logo、版本等打包信息

├─ pages.json 配置页面路由、导航条、选项卡等页面类信息

└─ uni.scss 常用样式变量(无需导入)

开发文档：

​ 部分常用说明，更多请参考uni-app官方文档

• 开发、生产环境判断

if (process.env.NODE_ENV === 'development') {
    console.log("测试环境")
}
if (process.env.NODE_ENV === 'production') {
    console.log("正式环境")
}

• 生命周期

  应用级(app.vue)：

  ​ onLaunch:初始化完成时触发（全局只触发一次）

  ​ onShow:启动，或从后台进入前台显示

  ​ onHide:从前台进入后台

  ​ onPageNotFound:页面不存在监听函数

  页面级(page.vue)：

  ​ onLoad:监听页面加载，用于页面传参

  ​ onUnload:监听页面卸载

  ​ onPullDownRefresh:页面下拉，一般用于下拉刷新

  ​ onReachBottom:页面滚动到底部,一般用于加载更多

  ​ onPageScroll:监听页面滚动

  组件级(components.vue)：

  ​ 同vue生命周期

• 页面跳转

  uni.navigateTo:跳转页面(保留当前页面)

  uni.navigateBack:返回上一页

  uni.redirectTo:跳转页面(关闭当前页面)

  uni.switchTab:跳转到 tabBar 页面

• 本地存储

  异步、同步

  uni.setStorage、uni.setStorageSync 添加指定数据缓存

  uni.getStorage、uni.getStorageSync 获取指定数据缓存

  uni.getStorageInfo、uni.getStorageInfoSync 获取所有数据缓存

  uni.removeStorage、uni.removeStorageSync 移除指定数据缓存

  uni.clearStorage、uni.clearStorageSync 移除所有数据缓存

• 数据请求

  this.$request(options).then((res)=>{})
  options:{
  method, //请求方式、非必传(默认get)
  url,    //接口地址后缀、必传
  data,   //请求参数、非必传
  header, //请求头、非必传
  loading，//loading动画、非必传(默认为true)
  }