更新记录

1.0（2022-12-20）

首次发布

平台兼容性

项目目录

uniapp-template
├─api 【接口 API 集中管理】通用的 api 可以放在 `common.js` 中，其他模块，如果需要可以自行新建文件管理；
├─common 【公用资源】 公用资源，需要被编译打包的，放这里；
├─components 【公用组件】 需要符合 `uni-app` 的 [`easecom`规范](https://uniapp.dcloud.io/collocation/pages?id=easycom)
├─config 【配置信息】 存放一些配置信息，目前主要是请求域名，本次存储的key；
├─packaging-resources 【打包资源】 打包需要的资源，包括证书，logo 等；
├─pages 【页面】
│ ├─index 【首页】
│ │ └─components 【当前页面专用组件】 非公用组件，可以放在当前页面同名文件夹的 `components` 文件夹中；
│ ├─msgCenter 【消息中心】
│ └─my 【我的】
├─static 【静态资源】不需要被编译的资源放在这里；
│ └─images 【图片】
├─store 【vuex】参考 [`uview` 的建议](https://v1.uviewui.com/guide/globalVariable.html#%E5%85%B7%E4%BD%93%E5%AE%9E%E7%8E%B0)进行了混入，详情见下方说明；
├─tools 【一些第三方工具库等】
│ ├─luch-request 【第三方数据请求库】 暴露的 api 和 `axios` 类似，具体可以访问[luch_request 官网](https://www.quanzhan.co/luch-request/)；
│ ├─http_request.js 【基于`luch-request`对请求进行的封装】根据后台接口返回数据格式的不同，这个文件中的响应拦截器中的逻辑要进行修改；
│ ├─md5.js 【加密工具】；
│ ├─utils.js 【工具方法】；
│ └─pagingMixin.js 【简单分页混入代码】；
├─unpackage 【临时打包文件】；
├─uview-ui 【`uview`组件库】当前版本 1.8.5，详见[官网](https://v1.uviewui.com/components/intro.html)；
├─.gitignore 【GIT 忽略配置】写在这里的文件或文件夹将不被 `GIT` 管理；
├─App.vue 【略】
├─index.html 【略】
├─main.js 【略】
├─manifest.json 【略】
├─pages.json 【略】
├─README.md 【项目说明】
└─uni.scss 【全局样式变量】

Vuex

需要被 vuex 管理的数据声明在 state 中，变量名称以 vx_ 开头，避免和其他变量命名冲突，比如 vx_test； 页面中使用这些变量可以直接 this.变量名称，比如： this.vx_test； 修改 vx_test 的值：this.$u.vuex('vx_test', '目标值')；

需要持久化存储的变量需要把变量名添加至数组 saveStateKeys 中；

Api 的集中管理

默认POST 请求：

export const getDemoData = (data) => {
  return httpRequest.request({
    url: 'assets/demo/getDemoData',
    data,
  });
};

GET 请求:

export const getDemoData = (data) => {
  return httpRequest.request({
    url: 'assets/demo/getDemoData',
    data,
    method: 'get',
  });
};

默认是 JSON 传输，如果使用表单传输：

export const getDemoData = (data) => {
  return httpRequest.request({
    url: 'assets/demo/getDemoData',
    data,
    contentType: 'form',
  });
};

默认显示 loading，如果不想显示：

export const getDemoData = (data) => {
  return httpRequest.request({
    url: 'assets/demo/getDemoData',
    data,
    showLoading: false,
  });
};

全局样式变量

@/common/css/app.scss 中定义了全局样式类名，可以直接在页面的 CSS 中引用，而不用引入；

更多功能

项目启动后（App.vue）做了一些初始化的工作，包括：

1. 获取了设备信息，并存在 store.state.vx_systemInfo 中，其中包括:

• 状态栏高度 statusBarHeight;
• 导航栏高度 navigationBarHeight;
• 微信小程序胶囊按钮信息;
• 其他信息，详情见 uni.getSystemInfoSync

2. APP 下检查应用更新，逻辑是每天第一次进入会检查一次是否有新版本，具体接口逻辑需要自行补充在 @/tools/utils.js 的 checkAppUpdate 方法中；
3. APP 下会初始化 unipush，收到推送消息和点击推送消息的具体逻辑需要自行实现，代码在 @/App.vue 的 initPush 方法中，注意：如果要使用 unipush需要在manifest.json的APP模块配置中勾选Push(消息推送)，并在开发者后台配置相关参数；
4. @/tools/pagingMixin.js 中定义了一组和简单分页列表相关的 mixin 代码，这些代码提供了最基本的分页功能。需要的页面中可以导入并混入，index.vue 中有示例;
5. 为上架考虑，项目配置隐私协议弹窗，其配置位于项目根目录的 androidPrivacy.json 文件中，其中《隐私政策》和《用户协议》访问地址需要更新，在 packaging-resources 文件夹中提供了供参考的两个Markdown文件；

代码规范

1. JS 中使用单引号，模板中使用双引号；
2. 变量使用驼峰命名；
3. 页面文件的名称使用驼峰命名，比如：msgCenter.vue；
4. 组件名称避免使用一个单词，且应该能够体现此组件的功能，不使用缩写，全部使用小写，多个单词之间使用横线（-）连接，比如：todo-item.vue；
5. 为组件样式设置作用域：<style scoped>；
6. 为 v-for 设置 key 值；
7. 避免 v-if 和 v-for 一起使用，v-if 应该设置在容器元素上，比如 ul；
8. 组件的 Prop 应该进行详细定义，说明属性的类型等信息，并加以注释；
9. 模板中能使用计算属性的，就不要使用方法（methods 中定义的方法）；