|
|
@@ -1,3 +1,21 @@
|
|
|
+# 项目的目录结构
|
|
|
+| 目录 | 名称 | 备注 |
|
|
|
+|--------|------|--------|
|
|
|
+| api | 接口请求 | 按服务端接口模块创建js文件,关联后端请求 |
|
|
|
+| compontents | 全局前端组件 | 和业务属性无关联的通用组件 |
|
|
|
+| ｜－common | 公共组件 | u-dropdown-select 分类选择(支持一级或二级) <br/> u-scroll-view (自动全屏的滚动视图) <br/> u-swiper 实现各类轮播 |
|
|
|
+| ｜－layout | 布局组件 | nav-bar 顶部导航 <br/> tab-bar 底部导航 |
|
|
|
+| locales | 多语种 | 实现前端多语种 |
|
|
|
+| pages | 小程序页面 | 所有的小程序页面与页面片段 (与业务属性相关) |
|
|
|
+| static | 静态资源 | 图片/字体/CSS (图片尽可能放到oss,小程序有限制大小) |
|
|
|
+| ｜－style/pages | 页面样式 | 页面可复用的样式放置到这个文件夹, 不可复用的样式仍放到page的style标签内 |
|
|
|
+| store | 数据存储 | 固定或临时数据的存储 |
|
|
|
+| unpackage | hbuilder编译的微信小程序代码 |
|
|
|
+| utils | 工具类 | request.js 网络请求 <br/> event-bus.js <br/> font.js <br/> auth.js 授权token <br/> index.js 公共函数
|
|
|
+| wxcomponents | 小程序原生组件 |
|
|
|
+| ｜－ vant | vant-weapp组件(请不要重新下载覆盖, 部分组件js有修改, 非必要不修改) |
|
|
|
+
|
|
|
+# 配置文件
|
|
|
## process.env 配置
|
|
|
## package.json 的 env节点
|
|
|
`
|
|
|
@@ -18,6 +36,84 @@
|
|
|
},
|
|
|
```
|
|
|
`
|
|
|
-## 登录与授权
|
|
|
-store/user.js
|
|
|
-utils/auth.js
|
|
|
+
|
|
|
+# 基本开发规范
|
|
|
+## 缩进
|
|
|
+样式与javascript的缩进统一为2个空格,通过修改hbuilder的配置实现
|
|
|
+## CSS样式表
|
|
|
+- 只允许使用class选择器
|
|
|
+- class定义需使用英文小写 + "-" 组成, 与第三方组件保持统一
|
|
|
+- style不加scope属性
|
|
|
+- 字体大小使用uni.scss中定义的变量
|
|
|
+- 通用的主题色值,必须使用uni.scss中定义的变量
|
|
|
+- 所有尺寸都使用rpx单位进行定义
|
|
|
+- 已在app.scss定义了全局字体Arial, 页面与组件不需要再定义了
|
|
|
+
|
|
|
+## javascript
|
|
|
+- 变量与属性使用驼峰命名法
|
|
|
+- 常量用const, 变量let, 不允许使用var
|
|
|
+- 每个代码行结尾不要加";"
|
|
|
+## 数据的存储与引用
|
|
|
+- 使用数据 this.$store.gettings.数据名
|
|
|
+- 存储数据 this.$store.commit(方法名, 数据值)
|
|
|
+## 文件目录
|
|
|
+- pages/功能模块/components 用于存放业务相关的组件
|
|
|
+- 根目的components用于存放通用组件
|
|
|
+
|
|
|
+# FAQ
|
|
|
+## uni.scss 与 app.scss有什么区别?
|
|
|
+uni.scss可用于定义变量, mixin等, 编译小程序代码后,它会被复制到每一个style元素中.易造成冲突且体积较大<br/>
|
|
|
+app.scss定义全局公共样式,一次引用,所有页面生效
|
|
|
+## 怎么引用第三方字体?
|
|
|
+- 不支持全局引用且只支持网络链接字体(上传到OSS)
|
|
|
+- 在每个需要使用第三方字体的page的created里调用 this.loadFontFace(字体名字), 修改main.js的loadFontFace方法以支持新字体
|
|
|
+- 不要使用过多的第三方字体,以免卡顿.
|
|
|
+- 部分情况可以使用图片替换特殊字体
|
|
|
+## App.vue里的onLaunch不执行?
|
|
|
+这个文件应该是uniapp针对web应用的, 微信小程序不会执行
|
|
|
+## 页面的 created 和 onShow 有什么区别?
|
|
|
+created只要页面第一次打开时执行, 如果跳转到其它页面再返回则不会执行, 可使用onShow
|
|
|
+## 如何创建一个新页面?
|
|
|
+- 在pages里创建页面.vue(或模块目录)并在根目录的pages.json文件里配置路径
|
|
|
+- 如编译时默认打开该页面,在微信开发者工具里的添加编译模式选择特定页面
|
|
|
+## 怎么实现样式的穿透?
|
|
|
+- 穿透指的是上级页面或组件想覆盖子组件的样式
|
|
|
+- 并不支持::v-deep这类写法
|
|
|
+- 需在页面或组件中的script增加styleIsolation,并设置为shared
|
|
|
+```javascript
|
|
|
+export default {
|
|
|
+ options: {
|
|
|
+ styleIsolation: 'shared'
|
|
|
+ },
|
|
|
+```
|
|
|
+## 定义事件用@还是小程序原生的bind...?
|
|
|
+- 为保证代码风格统一尽量使用@事件名来监听
|
|
|
+- @和bind对应的event数据结构会略有不同, 如遇问题可用console.log查看
|
|
|
+## 第三方的vant组件的字体过大
|
|
|
+- vant默认是使用单位px, 需要在style/vant.scss文件中覆写样式
|
|
|
+## 如何更新iconfont图标
|
|
|
+- 从iconfont网站下载解压后,拷贝iconfont.ttf和iconfont.woff2
|
|
|
+- iconfont.woff2用于微信开发者工具
|
|
|
+- iconfont.ttf用于真机
|
|
|
+- iconfont.css不要直接覆盖, 因为最顶部的@font-face定义已修改, 复制时需保留原有的@font-face 注意!!!
|
|
|
+## 每个页面都需要放1个nav-bar吗?
|
|
|
+- 是的, 即使不显示nav-bar(如user/login页面)也需要,可以设置组件属性为透明色.
|
|
|
+- nav-bar可以解决浏海屏状态栏高度的问题
|
|
|
+## 如何在小程序中访问网页
|
|
|
+- 需要微信小程序后台配置安全域名
|
|
|
+- 通过pages/index/webview组件进行返回
|
|
|
+- this.navigateTo支持访问网络地址,自动调用webview
|
|
|
+
|
|
|
+## 页面常用的函数?
|
|
|
+### 导航
|
|
|
+- this.navigateTo(地址) 导航下一个页面(支持https网格地址或pages本地页面地址)
|
|
|
+- this.redirectTo(地址) 切换当前页面到另一个页面(支持https网格地址或pages本地页面地址)
|
|
|
+### 消息提示
|
|
|
+- this.showToast(消息文本) 不带图标的消息提示
|
|
|
+- this.showSuccessToast(消息文本) 带成功图标的消息提示
|
|
|
+- this.showFailToast(消息文本) 带失败图标的消息提示
|
|
|
+- this.showLoading() 显示加载中
|
|
|
+- this.hideLoading() 隐藏加载中
|
|
|
+### 对话框
|
|
|
+- this.showAlertDialog(消息文本) 带1个确认按钮的对话框
|
|
|
+- this.showConfirmDialog(消息文本) 带1个确认按钮和1个取消按钮的对话框
|
luxf
