# mini-program-uni-temp **Repository Path**: zhangminAaron/mini-program-uni-temp ## Basic Information - **Project Name**: mini-program-uni-temp - **Description**: 小程序uni-app架构模板 - **Primary Language**: Unknown - **License**: Not specified - **Default Branch**: master - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2020-07-20 - **Last Updated**: 2020-12-19 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # #### 介绍 框架uni-app，一键打包H5、微信小程序 ### 软件架构 * [uni-app](https://uniapp.dcloud.io) 是一个使用 Vue.js 开发所有前端应用的框架，开发者编写一套代码，可编译到iOS、Android、H5、以及各种小程序（微信/阿里/百度/头条/QQ）等多个平台。 * [mescroll-uni](http://www.mescroll.com/uni.html) 是 uni-app 下拉刷新和上拉加载的组件 #### 主模块 ### 使用教程 ``` npm/yarn install 安装 yarn run dev:h5 本地H5运行 yarn run dev:mp-weixin 编译微信小程序代码(开发) yarn run dev:mp-weixin-debug 编译微信小程序代码(开发 - 真机调试) yarn run build:h5 打包h5代码 yarn run build:mp-weixin 打包微信小程序代码（发布 - 正式环境） yarn run build:mp-weixin-test 打包微信小程序代码（发布 - 测试环境） ``` ### 使用说明 1. H5 项目/dist/build/h5 (发布) 2. 小程序 项目/dist/dev/mp-weixin (开发) 项目/dist/build/mp-weixin (发布) ### 工具与文档 1. [微信开发者工具](https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html) 2. [微信小程序开发文档](https://developers.weixin.qq.com/miniprogram/dev/framework/) 3. [Node](http://nodejs.cn/) 4. [uni-app](https://uniapp.dcloud.io) Note:小程序注意事项 ```markdown 1. 使用oss存储或七牛云等存储图片的大资源 2. 监听页面后退（onBackPress）、this.$$$getQuery等方法，依托common/component.js方法 ``` ### 项目目录 ```text ┌─config ├─dist 打包文件 │ ┌─build 打包 │ ┌─dev 开发环境 ├─public 模板与资源 │ ├─colorui colorui组件样式 │ ├─common 工具集 │ │ ├─ajax 接口（basic.js为接口基础工具，其它js继承basic实现接口文件） │ │ ├─authorize 权限工具封装（全局this.$auth使用） │ │ ├─config 全局配置文件（接口域名配置等都在这里配置） │ │ ├─date 时间工具 │ │ ├─gzip 废弃 │ │ ├─io socket.io（封装） │ │ ├─lodash 防抖函数（lodash） │ │ ├─Login 登录相关封装 │ │ ├─lzw 废弃 │ │ ├─Map 地图封装（废弃） │ │ ├─Share 分享（废弃） │ │ ├─Storage 本地存储二次封装（全局this.$Storage使用） │ │ ├─Timer 定时器工具 │ │ ├─upload 上传二次封装 │ │ ├─Wechat 微信工具二次封装 │ │ ├─AzmComponentMixins.js 页面混入方法（升级版） │ │ ├─component.js 页面混入方法 │ │ ├─device.js 设备检查工具 │ │ ├─Router.js 废弃 │ │ ├─tools.js 全部工具引入文件 │ │ ├─util.js 工具集 │ ├─components 组件目录(全局) │ ├─js_sdk uni-app插件市场下载工具 │ ├─mixins 混入方法 │ ├─libs 公共工具 │ ├─mixins 公共混入工具 │ ├─store Vuex商店 │ ├─router 路由跳转二次封装（全局this.$$router使用，与vue路由区分） │ ├─static 静态文件 │ ├─style 全局样式 │ ├─pages 业务页面文件存放的目录 │ │ ├─temp 模板【模块】 │ └─App.vue │ └─main.js ``` ##### .env .env.production 配置说明（请相关开发人员自行建立）（该模板未配置，可以参考vue-cli环境配置修改） 配置范例 ```text # development：开发环境 NODE_ENV = development BASE_URL = / VUE_APP_PUBLIC_PATH = ./ # 环境域名（默认接口域名以及本地代理地址） VUE_APP_HOST = # 默认网络图片域名 VUE_APP_IMAGE_URL = # 是否关闭登录验证重定向 VUE_APP_CLOSE_LOGIN_REDIRECT = 1 # 公共路径 publicPath= / ``` ### 版本迭代 ##### 2.0.0 ```text 1、重构项目 ``` ##### 2.0.1 ```text 1、优化 【分享图片、企业图片、公共分享title】 2、修改AI报表弹窗文案 3、增加应用来源功能 4、修改报表城市统计样式bug ``` ### 代码规范说明 #### CSS、SCSS、LESS ```markdown 项目多人开发，为了统一，不至于产生样式代码冲突需要开发人员统一规范 命名：开发人员-class&id名 示例：azm-register_btn ``` #### 路由模块化说明 ```markdown 防止代码冲突，建立文件夹模块化与路由模块化。 页面模块化：相关页面模块统一在views建立模块文件夹 示例：比如，team代表组织架构（单级），【CRM】客户池属于二级，需要在views/crm建立cluePool文件夹 路由模块化：相关模块统一在router/routes/modules建立模块文件夹，直接建立不需要导出（router/routes/index已经将modules中的自动导出了） 示例：组织架构（单级）team.js {path:'/team'} 【CRM】客户池属于二级 cluePool.js {path:'/crm/cluePool'} Note：使用export default导出 ``` #### 接口模块化说明 ```markdown 防止代码冲突，apis管理模块化。 apis模块化：相关模块统一在apis/modules建立模块文件夹，直接建立不需要导出（apis/index.js已经将modules中的自动导出了） 示例：组织架构 Organize.js(Organize)；消息通知 message.js（Message） 使用：this.$ajax.Organize（模块）.接口方法 Note：通过this.$store 可以操作vuex。所有模块都是首字母大写 ``` Note：相同接口只允许拥有一个方法，请开发人员注意，不要写重复接口方法名 1. 页面调用 ```markdown this.$ajax.[模块名].[方法名] ``` 2. 请求方式 ```markdown this.get(opts) // GET请求方式 this.post(opts) // POST请求方式 参数传递形式 key1=value1&key2=value2 this.post_json(opts) // POST请求方式 参数传递形式 {key1:value1;key2:value2} ``` 3. 请求方式参数说明 Note：请将api接口参数说明写清楚，规格模板见下： ```javascript /** * GET | POST | POST_JSON请求 * * @param url {String} // api接口 不含域名 * @param isAuth {Boolean} // 验证登录状态 * @param isBlob {Boolean} // 是否后台返回blob对象文件 * @param data {Object} // 该接口是否需要验证登录 true就需要验证 * @param isRedirect {Boolean} // config特殊状态码 验证通过 是否需要重定向特定页面 默认 true * @returns {Promise|Promise|Promise} */ ``` 4. 简单创建接口（标准写法） ```markdown async getUserInfo({page, pageSize, rid}) { const opts = { url: '/open/sea/sales', // api接口 不含域名 data: { page, pageSize, rid } // 参数, isAuth:true // 该接口是否需要验证登录 true就需要验证 } return this.get(opts) // GET请求方式 } ``` 5. 结合$store创建接口 ```markdown async getBasicUserInfo({} = {}, isRedirect = false) { let that = this; const opts = { url: '/user/get', data: {}, isAuth: true, isRedirect, }; const result = await that.get(opts); if (result && result.code === 0) { const token = result.data && result.data.token; if (!jude.isEmpty(token)) that.$store.commit('User/setToken', token); if (result.data) that.$store.commit('User/setUserInfo', result.data); } else { that.$store.commit('User/removeUserInfo'); } return Promise.resolve(result) } ``` ```markdown Note: 接口域名配置说明查看vue-cli环境配置 1. .env 默认配置 2. .env.development 开发配置（测试域名配置） 2. .env.development.local 开发配置（本地域名调试） ``` #### utils 工具说明 1. mapKeys 使用 Note：为了方便没有接口的时候，实现提前写页面逻辑后对接口，所做特殊工具 ```javascript // 调用调用方法 this.$util.mapKeys /** * 修改对象key转化 * * @param source {Object} 来源对象 * @param target {Object} 目标对象 可以传{} * @param map {Array|Object} 对象key转化关系 * @param opts * @returns {*} 返回 目标对象 */ // 对象用法 this.$util.mapKeys(source, target, { sourceKey1: "targetKey1", sourceKey2: "targetKey2", sourceKey3: "targetKey3", sourceKey4: "targetKey4", }) // 数组用法 this.$util.mapKeys(source, target, [ "targetKey1", "targetKey2", "targetKey3", ["sourceKey4", "targetKey4"] ]) ``` ### git版本说明 为规范源代码版本管理，现将各分支表述如下： * master分支 ``` 存放的应该是随时可供在生产环境中部署的代码 当开发活动告一段落，产生了一份新的可供部署的代码时，master分支上的代码会被更新。同时，每一次更新，都有对应的版本号标签（TAG）。 分支命名：master 该分支，由管理员负责维护，其它人只有拉取权限。来自于release分支的合并，供发版使用 生命周期：伴随着整个项目的生命周期，项目结束时结束。 ``` * develop分支 ``` develop分支是每次迭代版本的共有开发分支，从最新的master分支派生（管理员操作） 当develop分支上的代码已实现了软件需求说明书中所有的功能，派生出release分支（管理员操作） 分支命名：dev-版本号 该分支，由开发人员在各自的feature分支开发完成后，合并至该分支。 生命周期：一个阶段功能开发开始到本阶段结束 ``` * release分支 ``` 从develop分支派生（管理员操作） 测试环境中出现的bug，统一在该分支下进行修改，并推送至远程分支。修改内容必须合并回develop分支和master分支。 分支命名惯例：release-版本号 生命周期：一个阶段功能开发结束开始，完成阶段功能测试并修复所有发现bug，合并会develop分支结束。 ``` * feature分支 ``` 在开发一项新的软件功能的时候使用，这个分支上的代码变更最终合并回develop分支 分支命名惯例：feature-姓名全拼-分支说明-日期 / feature-分支说明-日期 例：接到一个开发关于cc视频点播替换的任务，你需要从develop分支拉出一个分支，并命名为：release-yuruixin-ccVideo-20171117。然后在该分支下进行开发，开发结束，将该分支合并至develop分支（此时的代码必须为可运行的，不能影响到他人），合并完成删掉该特性分支。 开发人员的每一个新功能开发都应该在该类分支下进行。 生命周期：开发一个新功能开始，完成新功能开发并合并回develop分支结束。 ``` * hotfixes分支 ``` 在master分支发现bug时，在master的分支上派生出一个hotfixes分支，修改完成后，合并至master分支以及develop分支，合并完成，删除该hotfixes分支。 分支命名惯例：hotfixes-姓名全拼-分支说明-日期 示例：hotfixes-yuruixin-cclivebug-20171117 生命周期：发现master分支bug开始，完成master分支bug结束。 ``` Note: 综上，开发人员需要操作的分支如下： ``` feature分支 （开发使用） release分支 （测试中出现的bug修改） hotfixes分支 （master中出现的bug修改） ``` ##### 整个流程可以下图展示 [![](https://img-blog.csdn.net/20180115102040347?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQveXVydWl4aW5fY2hpbmE=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)]