hpinfo-front-h5

hpinfo-front-h5

Project setup

npm install

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Customize configuration

See Configuration Reference.

抢班侠小程序&H5前端项目

启动项目

MAC:
选择对应运行的平台（自定义的编译）
WINDOW:
选择对应运行的平台（自定义的编译）

发布项目

点击菜单栏发行  选择对应的发行平台

引入文件说明

 当前项目src目录(./src*)被替换 @/  所以src下文件均可使用 @/xxx访问 

页面使用 对Vue 的扩展

import Vue from 'vue';
export default Vue.extend({})
替换 
import Vue from '@/pages/base/Base';
export default Vue.extend({});

vue 页面代码块模板 设置-》用户代码片段-》vue.js

{
	"Print to console": {
		"prefix": "vts",
		"body": [
			"<!-- $0 -->",
			"<template>",
			"  <view></view>",
			"</template>",
			"",
			"<script lang='ts'>",
			"import Base from 'vue';",
			"export default Base.extend({",
			"  components: {},",
			"",
			"  data () {",
			"    return {",
			"    };",
			"  },",
			"",
			"  onLoad() {},",
			"",
			"  methods: {}",
			"});",
			"",
			"</script>",
			"<style lang='scss' scoped>",
			"</style>"
		],
		"description": "vue-ts 页面模板"
	}
}

类型和模块声明

./src/types/ 文件夹下 （需要.d.ts后缀文件）
sfc.d.ts 为系统自带

各个文件夹的作用

	├── components 里面都是公用组件, 如果是页面上拆分的组件建议还是写在单独的页面文件夹里
    ├── plugins 三方组件库 可以做按需加载;
	├── pages   里面都是页面
	├── router  使用的是uni-simple-router的路由配置，和vue2写法一样
	├── static
	   └── images  图片希望都在 https://tinypng.com/ 上面无损压缩一下
	   └──font     可能用到的自己的字体
	├── unpackage 打包后生成的文件位置
	├── utils 工具js
	├── store 存储文件夹; 每个模块建议写在modules里面,然后引入,这样好管理
	├── config 配置项
	

├── common────────────# 静态资源文件目录
│ 	└── base-cloud.scss─────────────────# BaseCloud样式类库入口文件
│ 	└── base-cloud-font.scss──────────────# BaseCloud图标样式文件
│ 	└── base-cloud-mobile.scss─────────────# BaseCloud移动端样式文件

功能模块uView接入

1、npm init y

2、npm install uview-ui

3、在uni.scss 增加颜色等的变量 @import "uview-ui/theme.scss";

4、在 app.vue 增加公用样式 @import "uview-ui/index.scss";

5、在page.json增加"easycom"配置

	"easycom": {  
	        // 下载安装的方式需要前面的"@/"，npm安装的方式无需"@/"  
	        // 下载安装方式  
	        // "^u-(.*)": "@/uni_modules/uview-ui/components/u-$1/u-$1.vue"  
	        // npm安装方式  
	     "^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"  
	},
	

6、在main.js 全局引入 （当前使用plugins 三方组件库 可以做按需加载;）

import uView from 'uview-ui'
Vue.use(uView)

7、高德地图 key

key名称: anxin_qbx

   key: ef567a44a8a9ef1a55616adadb9dff89

8、引入插件（需要的页面）

"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "首页",
				"navigationStyle":"custom",
				"usingComponents":"plugin://xxx"
			}
		}
		]

9、订阅通知 这个以前自己写 ，现在uniapp 居然直接提供了

			// callback(res) {
			// 	console.log("res: ", res);
			// 	uni.$off(['update', this.callback])
			// },
			// uni.$on('update',this.callback)

10、官方web api 不兼容

小程序报错：AMap JSAPI can only be used in Browser.
为了兼容多个平台版本：所以页面地图使用高德的定位，ui 使用uniapp map组件

11、sass 安装

npm uninstall --save sass-loader // 卸载
npm i -D sass-loader@8.x // 安装
npm uninstall --save node-sass // 卸载
npm i node-sass@4.14.1 // 安装 (目前发现只有这个版本活了)

12、yapi自动接口生成工具

    "wonderinit": "npm i axios && npm i request@^2.88.2 && npm i ajv@^6.12.2 && npm i lint-staged && npm i typescript-json-schema",