h5-introduce.md 2.1 KB

H5介绍

Qimall的H5是使用HbuilderX开发,我们的H5源码可以打包放在微信公众号使用,也可以打包成小程序,打包成安卓APP,苹果APP。是一码多用,高效效率开发,快速迎合市场的需求。

H5引入了目前比较流行的框架,vue.js。

项目注意事项

  1. 项目的基础公共组件uview: uview
  2. 如果导入其他公共组件放到components里,如果只是某个页面用到的组件建议放到该页面的目录下
  3. iconfont: iconfont

目录解读

scss: {
	_base.scss: 这里面写公共样式
	_icon.scss: 这里面是全局的字体图标
	_mixins.scss: 公共混合器
	_variables.scss: 存放scss变量
}
common: {
	tui-clipboard: 剪贴板(兼容h5/app/小程序)
	api.js: 接口统一存放目录
	env.js: 程序配置(这里的代码不提交,避免合代码时冲突)
	env.js.copy: 程序配置的模板
	request.js: 封装的请求
}
filters: {
	functions.js: 
	index.js: 
}
mixins: {
	globalMixins.js: 全局的一些Mixin,比如分页,刷新
}
utils: {
	day.js: 时间日期处理库
	payments.js: 支付
	share.js: 分享
	util.js: 其他封装的函数放这里
	validation.js: 表单验证
	wechatJsSdk.js: 基于微信环境的h5的一些业务逻辑处理
}

tui-clipboard 使用教程

const thorui = require("@/common/tui-clipboard/tui-clipboard.js")

//event 当需要异步请求返回数据再进行复制或者异步方法转为同步方法时,需要传入此参数(H5端)
// getClipboardData  复制文本   data:需要复制的文本   callback:回调函数,返回成功或者失败
clipboard: function(event) {
	let data="605135318";
	thorui.getClipboardData(data, (res) => {
		if (res) {
			//复制成功
		} else {
			//复制失败
		}
	},event)
}

uview-ui 修改过的组件

// u-upload: 上传组件
action: '上传的接口地址,可传可不传,不传则为默认上传接口'
formData: '接口额外的参数,比如:上传图片需要传 { upload_type: "images" }'