# 项目的目录结构
| 目录   | 名称 | 备注   |
|--------|------|--------|
| 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节点
`
```json
"uni-app": {
	"scripts": {
		"dev": {
			"title": "小程序-开发环境",
			"env": {
				"UNI_PLATFORM": "mp-weixin",
				"NAME": "dev",
				"TOKEN_KEY": "token",
				"BASE_API": "https://starify-api-dev.matchexpo.cn"
			},
			"define": {
				"MP-CJN": true
			}
		},
```
`

# 基本开发规范
## 缩进
样式与javascript的缩进统一为2个空格,通过修改hbuilder的配置实现
## CSS样式表
- 只允许使用class选择器
- class定义需使用英文小写 + "-" 组成, 与第三方组件保持统一
- style不加scope属性
- 字体大小使用uni.scss中定义的变量
- 通用的主题色值,必须使用uni.scss中定义的变量
- 所有尺寸都使用rpx单位进行定义
- 已在app.scss定义了全局字体Arial, 页面与组件不需要再定义了

## javascript
- 变量与属性使用驼峰命名法
- 常量用const, 变量let, 不允许使用var
- 每个代码行结尾不要加";"
- 慎用hbuilder的自动代码格式化
## 数据的存储与引用
- 使用数据 this.$store.gettings.数据名
- 存储数据 this.$store.commit(方法名, 数据值)
## 文件目录
- pages/功能模块/components 用于存放业务相关的组件
- 根目的components用于存放通用组件
## 参考文档
- vant-weapp官方文档[vant参考文档](https://vant-ui.github.io/vant-weapp)
- uniapp文档: [参考文档](https://zh.uniapp.dcloud.io/component/scroll-view.html)
# 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'
	},
```
## 怎么控制用户的授权
- 正常情况下，若page不允许非授权状态下的访问，可以created里加上**this.checkAuth(当前页面的路径)**，会自动跳转登录
## 定义事件用@还是小程序原生的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
## 如何实现滚动底部加载更多?
- 监听 u-scroll-view的scroll-near-lower事件
- uniapp文档: [参考文档](https://zh.uniapp.dcloud.io/component/scroll-view.html)
## 如何修改小程序appId
- 通过hbuilder修改manifest.json
## 页面常用的函数?
### 导航
- **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个取消按钮的对话框