# uniys

**Repository Path**: ai-wang-yu/uniys

## Basic Information

- **Project Name**: uniys
- **Description**: 医美端
- **Primary Language**: HTML/CSS
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2021-01-09
- **Last Updated**: 2021-02-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

### 目录简介

项目目录结构
```JS
RootDir
|- bin (可执行工具)
|- common (工具类js)
|- components (公共组件和插件市场下载的组件)
|- core (核心工具类文件)
   |- clz (公共行为类定义文件夹)
   |- iteraction (多端功能差异部分处理)
      |- andriod.service.ts (定义安卓处理方法)
	  |- interaction.service.ts (定义差异方法的接口)
	  |- ios.service.ts (定义苹果处理方法)
	  |- mp.service.ts (定义小程序处理方法)
	  |- web.service.ts (定义浏览器处理方法)
   |- browser.service.ts (浏览器相关处理方法：添加收藏夹，获取内核信息版本等)
   |- config.service.ts (http-header配置)
   |- core.service.ts (各工具类的归总类)
   |- date.service.ts (日期处理工具类，getMoment方法可以获取Moent对象实例)
   |- dom.service.ts (dom文档处理工具类，从url取参以及动态加载js资源)
   |- env.service.ts (环境判断工具类)
   |- http.service.ts (http请求工具类)
   |- img.service.ts (图片懒加载与预加载)
   |- math.service.ts (运算相关工具类)
   |- page.service.ts (页面滚动相关工具类：返回顶部，底部，到达页面任意元素等)
   |- regexp.service.ts (正则校验工具类)
   |- string.service.ts (string处理工具类)
   |- util.service.ts (加解密，摘要，coockie操作)
|- mock (本地mock数据文件)
|- node_modules (工程所依赖模块的文件夹)
|- pages (页面组件)
|- static (图片等静态资源)
|- store (vuex全局数据文件夹)
|- unpackage (编译预发布文件夹)
|- App.vue
|- main.js
|- mainfest.json
|- pages.json (页面路径配置文件)
|- uni.scss (uni-app组件预定义scss变量文件)
|- package.json (package文件)
```

### 创建一个页面
+ 在HbuildX中选择pages文件夹下右键创建页面，创建完成后页面路径自动注入到`pages.json`中

```JSON
{
	"path" : "pages/reply/reply",
	"style" : {
		"navigationBarTitleText": "问题申报"
	}
}
```


+ 在store中定义该页面的action以及state`store/replay/replay.action.ts`,`store/replay/replay.state.ts`

```JS
// replay.state.ts
  class Reply {
  	detail:{
  		/** 代理号 */
  		agentcode:string;
  		/** 详细分类 */
  		requestTypeId:string;
  		/** 问题分类 */
  		serviceDeskId:string;
  		/** 标题 */
  		summary:string;
  		/** 详细描述 */
  		description:string;
  		/** 图片路径 */
  		filesDfsFilePath:string[];
  	} = {
  		agentcode:"G2110000136",
  		requestTypeId:"",
  		serviceDeskId:"",
  		summary:"",
  		description:"",
  		filesDfsFilePath:[]
  	};
  	list:any[] =  [];
  	questionType:any[] = [];
  	subQuestionType:any[] = [];
  	/** 图片对象数组 */
  	imgArr:any[] = []
  }
  
  export { Reply }
  
```

```JS
//replay.action.ts

import { Reply } from './reply.state'
import { Common } from '../common.state'
import http from '../../core/http.service'
import unicore from '../../core/core.service'
import unistore from '../index'
import Moment from 'moment'

/**
 * 公共action参数
 */
interface ActionArgs {
    state: {
		reply: Reply,
		common:Common
	};
	commit: Function;
}


export default {
	async uploadImg({state,commit}:ActionArgs){
		// 上传附件 此处省略
		
	},
	async createQuestion({state,commit}:ActionArgs,formId:string){
		// 创建问题 此处省略
		
	},
	async getquestionType({state,commit}:ActionArgs){
		// 分页查询所有项目的简要信息(问题类型)
		const reqObj={
			APICode:'07001',
			body:{}
		}
		try{
			const res:any = await http.post('/servicedesk/getAllServiceDeskProjects',reqObj);
			state.reply.questionType = res.body.result.map((ele:any) => {
				if (ele.projectKey == 'WTSB') {
					state.reply.detail.serviceDeskId = ele.serviceDeskId;
				}
			})
			// state.reply.detail.serviceDeskId = res.body.result[0].serviceDeskId;
			unistore.dispatch('getSubquestionType', state.reply.detail.serviceDeskId)
		} catch(e) {
			uni.showToast({
				title:"获取问题类型失败",
				icon:"none",
			})
		}
	},
	async getSubquestionType({state,commit}:ActionArgs,val:string){
		// 细分类型 此处省略
		
	}
}
```

+ 将如上两个文件引入到`store/index.ts`文件中。

```JS
const store = new Vuex.Store({
	state: {
		regist: <Regist> {
			basicInfo: {},
			registResult: {},
			detail:{
				userType:'USER',
				idType:'15',// 下拉选框和时间日期选框需要初始化值
				birthday:'',
			}
		},
		common:<Common>{
			appid:'wxb2a029a9562935f6'
		},
		reply: new Reply(),
		replyList: new ReplyList(),
		replyDetail:new ReplyDetail()
	},
	mutations: {
		
	},
	actions: Object.assign({},commonAction,replyAction, registAction, replyListAction, replyDetailAction)
})
```
+ `replay.vue`文件中使用action和state
``` JS
// 使用action
choseImg() {
	this.$store.dispatch('uploadImg')
}
// 使用state
computed:{
	info(){
		return this.$store.state.reply.detail;
	},
	questionType(){
		return this.$store.state.reply.questionType;
	},
	subQuestionType(){
		return this.$store.state.reply.subQuestionType;
	},
	imgArr(){
		return this.$store.state.reply.imgArr;
	}
}
```

+ 可选，按照报文规范进行mock数据联调，在mock下编写对应接口的拦截并通过`npm run mock`启动本地mock服务。


### 配置项目环境
本章的前提是本地已有nodejs与npm环境。

+ 新项目专用：复制`package-origin.json`的内容至`package.json`,更改项目名(`name`),描述(`describe`)。
+ 运行 `npm install` 安装项目依赖

### 脚本工具
使用mock服务器,开发时使用。
```bash
npm run mock
```

### 编辑器

#### 安装、简介

+ 下载地址：http://www.dcloud.io/hbuilderx.html 选择app开发版，解压即可使用。
+ 预设Hbuilder X、VsCode、Sublime Text、IntelliJ Idea/Webstome的快捷键，可以根据自己的习惯来选择，当然也可以自定义快捷键
+ 内设有常用的html、css、js、vue代码块，也可以自定义代码块，其他类型的语言也可以。

#### 本项目需要的相关编辑器插件

点击编辑器顶部菜单栏的‘工具’项，选择‘插件安装’安装插件。

+ Js-beautify: vue、html、js、css、json代码格式化
+ Prettier：格式化less、sass、vue、stylus（vue内嵌）、ts代码
+ Htmllint：html语法校验
+ Stylelint：less、css、sass语法校验
+ Typescript语言服务：支持ts文件及vue中内嵌ts的代码提示、转到定义
+ Scss/sass编译：编译sass为css
+ Es6编译：babel编译es6的js为es5格式
+ Typescript编译：编译typescript为js

### 跨端兼容
uni-app 已将常用的组件、JS API 封装到框架中，开发者按照 uni-app 规范开发即可保证多平台兼容，大部分业务均可直接满足。
但每个平台有自己的一些特性，因此会存在一些无法跨平台的情况。

+ 大量写 if else，会造成代码执行性能低下和管理混乱。
+ 编译到不同的工程后二次修改，会让后续升级变的很麻烦。

在 C 语言中，通过 #ifdef、#ifndef 的方式，为 windows、mac 等不同 os 编译不同的代码。 uni-app 参考这个思路，为 uni-app 提供了条件编译手段，在一个工程里优雅的完成了平台个性化实现。

### 条件编译

条件编译是里用特殊的注释作为标记，在编译时根据这些特殊的注释，将注释里面的代码编译到不同平台。

写法：以 #ifdef 或 #ifndef 加 %PLATFORM% 开头，以 #endif 结尾。

+ #ifdef：if defined 仅在某平台存在
+ #ifndef：if not defined 除了某平台均存在
+ %PLATFORM%：平台名称

+ %PLATFORM% 可取值如下：

|值				|平台											   |
| -             | -                                                |
|APP-PLUS		|5+App											   |
|APP-PLUS-NVUE	|5+App nvue										   |
|H5				|H5												   |
|MP-WEIXIN		|微信小程序									       |
|MP-ALIPAY		|支付宝小程序									   |
|MP-BAIDU		|百度小程序										   |
|MP-TOUTIAO		|头条小程序										   |
|MP-QQ			|QQ小程序										   |
|MP				|微信小程序/支付宝小程序/百度小程序/头条小程序/QQ小程序|

##### 支持的文件

+ .vue
+ .js
+ .css
+ pages.json
+ 各预编译语言文件，如：.scss、.less、.stylus、.ts、.pug

Tips： 条件编译是用注释实现的，在不同的语法里注释写法是不一样的；

##### 在js、ts、pages.json中
```js
// #ifdef %PLATFORM% 
平台特有的API实现 
// #endif
```
##### 组件的条件编译
```template
<!-- #ifdef %PLATFORM% --> 
平台特有的组件
<!-- #endif -->
```
##### 样式的条件编译
```scss、css
/* #ifdef %PLATFORM% */ 
平台特有样式 
/* #endif */
```
##### 参考资料

+ 参考资料 https://uniapp.dcloud.io/platform?id=%e6%9d%a1%e4%bb%b6%e7%bc%96%e8%af%91

### 注意事项

##### 使用vue注意事项
+ 完整支持vue实例的生命周期
+ 支持vue的模板语法
+ 非h5端不支持在自定义组件上使用class和style绑定
+ 几乎支持全部vue事件
+ 为兼容多端需要使用v-on或@进行绑定，请勿使用小程序的bind和catch进行事件绑定
+ 事件修饰符的支持情况：
```
	事件修饰符：
		.stop:各平台均支持，使用时会阻止事件冒泡，在非h5端也会阻止事件默认行为
		.prevent:仅h5平台支持
		.self:仅h5平台支持
		.once:仅h5平台支持
		.capture:仅h5平台支持
		.passive:仅h5平台支持
	uni-app在手机端运行，没有键盘事件，不支持键盘修饰符
```
+ v-html指令：由于非h5端不支持dom和普通html元素，所以非h5端不支持v-html。如果页面需要显示html字符串，可以使用rich-text插件
+ 组件：有且只能使用单文件组件（.vue文件）的形式进行支持。其他的诸如：动态组件，自定义 render，和<script  type=”text/x-template”></script>字符串模板等非h5端都不支持。
##### js注意事项
+ 非h5端不能使用浏览器自带对象，比如document、window、localstorage、cookie等，更不能使用jquery等依赖这些浏览器对象的框架。因为各家小程序快应用都不支持这些对象。
+ 没有这些浏览器自带对象并不影响业务开发，uni提供的api足够完成业务。uni的api在编译到web平台运行时，其实也会转为浏览器的js api。
+ uni的api是多端可用的。在条件编译区，每个平台的专有api也可以使用，比如wx、plus等api可以分别在微信和app下使用。
+ 出于降低小程序向uni-app迁移成本的考虑，wx的api在app里也可以直接运行，比如写wx.requst和uni.requst是一样的，但仍然建议仅在微信的条件编译区使用wx.requst。
##### css注意事项
+ 虽然大部分css样式在小程序和app中都可以支持，但推荐使用flex布局模型，这种布局更灵活高效且支持更多平台（比如nvue、快应用只支持flex布局）
+ 单位方面，项目使用upx。这是一种可跨端的通用单位
##### Tag注意
+ uni-app的tag同小程序的tag，和html的tag不一样，比如div要改成view，span要改成text、a要改成navigator。
+ 出于降低h5应用向uni-app迁移成本的考虑，写成div、span也可以运行在app和小程序上，因为uni-app编译器会把这些HTML标签编译为小程序标签。但仍然建议养成新习惯。
##### 工程目录
+ 每个要显示的页面都要放在pages目录下。新建一个页面所在的目录，然后放同名目录的vue文件，比如project/pages/lista/lista.vue，并且在pages.json里配置。这与小程序的策略相同。
+ 自定义组件和插件市场下载的组件要放在components目录下
+ 静态资源，如图片，固定放在static目录下。这是webpack、mpvue的规则
##### 详细资料信息参考地址
+ 参考地址：https://uniapp.dcloud.io/README