H5移动端开发
开发前准备
环境:
Node.js LTS版本
git 最新版
文档:
本项目技术栈基于
快速开始
1.克隆项目
git clone https://gitee.com/Fntys/met_h5.git
2.进入项目
cd met_h5
3.安装依赖
npm install
4.启动构建
npm run dev
5.访问 localhost:9999/#/
Tips : 若想在手机访问,请前往
config/index.js
下,修改dev
的host
为本机IP,确保电脑和手机处于同一路由下,访问该IP即可。
目录结构
├── build // 构建相关
├── config // 配置相关
├── dist // 打包相关
├── node_modules // 第三方模块
├── src // 源代码
│ ├── utils // 全局公用方法
│ ├── api // 接口方法
│ ├── pages // 所有页面文件
│ ├── components // 业务组件
│ ├── assets // 图片 字体等静态资源
│ ├── components // 业务组件
│ ├── styles // 公共样式文件
│ ├── icon // SVG图标文件
│ ├── router // 路由文件
│ ├── main.js // 入口文件 加载组件 初始化等
│ ├── App.vue // 入口页面
├── static // 第三方不打包资源
├── test // 测试相关
├── .babelrc // babel-loader 配置
├── .eslintrc.js // eslint 配置项
├── .postcssrc.js // 后处理器
├── .gitignore // git 忽略项
├── index.html // html模板
└── package.json // package.json
页面路由
全局配置
首先,我们看一下项目的配置文件 /src/main.js
里面的初始内容如下:
// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue';
import FastClick from 'fastclick';
import VueRouter from 'vue-router';
import App from './App';
import router from './router'
import './icons'
import './styles/index.scss'
Vue.use(VueRouter);
/* 全局注册组件 */
import { Swiper,SwiperItem} from 'vux'
Vue.component('swiper', Swiper)
Vue.component('swiper-item', SwiperItem)
FastClick.attach(document.body);
Vue.config.productionTip = false;
/* eslint-disable no-new */
new Vue({
router,
render: h => h(App),
}).$mount('#app-box');
这里我们引入了:
vue-router // Vue官方的路由组件
fastclick // 解决移动端点击300ms延迟的问题
icons // 自定义的SVG图标解决方法
styles/index.scss // 全局样式
Swiper,SwiperItem // 轮播图组件
路由配置
在router/index.js
中,我们配置了全局路由。
import Vue from 'vue'
import Router from 'vue-router'
import Layout from '@/pages/layout/Layout'
Vue.use(Router)
import Layout from '@/pages/layout/Layout'
export const constantRouterMap = [
{
path: '/', //父页面的路径
component: Layout, //父页面的组件
redirect: '/home/index', //父页面重定向后的路径
children: [
{
path: '/home/index', //子页面的路径
component: () => import('@/pages/index/index'), //子页面的组件
meta: { title: '主页', column: '1' } //子页面的信息
}
]
}
export default new Router({
routes: constantRouterMap
})
通过上述代码我们配置了一个包含index页面的首页路由,继续向constantRouterMap
中添加元素就可配置其他的页面的路由。
Tips : 关于更多路由配置的知识可以查阅 Vue Router
页面配置
页面结构
本项目共有7个页面,分别为:
├── pages // 页面文件
│ ├── layout // 布局页
│ │ ├──Layout.vue // 主页面
│ │ ├──components // 组件
│ │ │ ├──AppMain.vue // 主体内容区域组件
│ │ │ ├──index.js // 导出组件
│ │ │ ├──MetFooter.vue // 底部区域组件
│ │ │ ├──MetHeader.vue // 头部区域组件
│ ├── about // 简介
│ │ ├──index.vue // index页面
│ ├── index // 首页
│ │ ├──index.vue // 主页面
│ ├── news // 新闻列表页
│ │ ├──index.vue // 主页面
│ ├── product // 产品列表页
│ │ ├──index.vue // 主页面
│ ├── shownews // 新闻详情页
│ │ ├──index.vue // 主页面
│ ├── showproduct // 产品详情页
│ │ ├──index.vue // 主页面
新增页面
- 新增了页面
pages/abc/index.vue
- 然后在
router/index.js
中新增路由:
{
path: '/abc', //父页面路径
component: Layout, //父页面继承layout组件
children: [
{
path: 'index', //子页面路径
name: 'abc',
component: ()=>import('@/pages/adc/index'), //子页面组件
meta: { title: 'abc',column:'1'}
}
]
}
页面跳转
- 使用
<router-link>
标签,比如我们想从列表页跳到详情页面:<router-link to="/shownews/index"></router-link>
,只需在to
处填写详情页面路由的path
即可。 - 元素绑定
click
事件,调用router.push({...})
方法。
样式
样式编写采用了 Scss
全局样式
全局样式文件存放于/src/styles/
中
在/src/main.js
中通过import './styles/index.scss'
被全局引入
├── styles // 公共样式文件
│ ├── common.scss // 公共样式
│ ├── index.scss // 全局样式
│ ├── mixin.scss // 混合器
│ ├── varable.scss // 变量
页面样式
由于页面大多是由组件组成,所以一个页面的样式被分散到各个组件。如:src/components/IndexAbout.vue
中的
<style lang="scss" scoped>
.index_about {
.about-img img {
width: 100%;
margin-bottom: 20px;
}
.about-content p {
font-size: 13px;
color: rgb(89, 89, 89);
}
}
</style>
影响了index
页面的about区块的样式。
其中lang="scss"
规定编译器按照何种语法来解释css语言,这里我们是用的scss。scoped
表示它的样式作用于当下的模块,很好的实现了样式私有化的目的,这是一个非常好的机制。
Tips : 对于高复用的公共组件谨慎使用
scoped
属性
组件
前面我们说到页面大多都是组件组成,在src/components/
下存放了项目所有组件。
├── components // 全部组件
│ ├── index // 首页组件
│ │ ├──IndexAbout.vue // 简介
│ │ ├──IndexNews.vue // 新闻
│ │ ├──IndexProduct.vue // 产品
│ │ ├──IndexService.vue // 服务
│ │ ├──index.js // 导出组件
│ ├── inside // 内页组件
│ │ ├──News.vue // 新闻列表
│ │ ├──Product.vue // 产品列表
│ │ ├──ShowNews.vue // 新闻详情页
│ │ ├──ShowProduct.vue // 产品详情页
│ │ ├──index.js // 导出组件
│ ├── common // 公共组件
│ │ ├──Banner.vue // 轮播图
│ │ ├──Sidebar.vue // 侧边栏
│ │ ├──SubcolumnNav.vue // 二级栏目导航
│ │ ├──index.js // 导出组件
组件新建与引入
1.新建文件,命名采用 PascalCase (驼峰式命名),如:HelloWorld.vue
2.同时新建index.js
文件,将组件暴露出来
export { default as HelloWorld}
from './HelloWorld'
2.在页面引入你的组件:
import { HelloWorld } from '@/components/xxx/HelloWorld'` //引入组件
components: {
HelloWorld //组件注册
}
3.在字符串模版中使用<hello-world></hello-world>
Tips :
@
是webpack
的alias
,指向src
,目的是让后续引用的地方减少路径的复杂度
网络请求
这里我们进行了axios的封装。
1.在utils/
下新建request.js
import axios from 'axios'
import qs from 'qs'
const service = axios.create({
baseURL: process.env.BASE_API, // api的base_url
timeout: 30000 // 请求超时时间
})
// request拦截器
service.interceptors.request.use(
config => {
if (config.method === 'post') {
config.data = qs.stringify(config.data)
config.headers['Content-Type'] = 'application/x-www-form-urlencoded'
}
return config
},
error => {
// Do something with request error
console.log(error) // for debug
Promise.reject(error)
}
)
// respone拦截器
service.interceptors.response.use(
response => {
if (response.data.status === 401) {
} else {
return response
}
},
error => {
console.log('err' + error) // for debug
return Promise.reject(error)
}
)
export default service
2.在api/
下的每个方法中引用
import request from '@/utils/request'
export function getIndexBanner(username) {
return request({
url: '/Process/Process/getMemberList',
method: 'post',
data: {
username
}
})
}
3.在其他地方引入,调用即可
import getIndexBanner from '@/api/index'
getIndexBanner(username)
H5移动端开发的更多相关文章
- H5移动端开发入门知识以及CSS的单位汇总与用法
说到css的单位,大家应该首先想到的是px,也就是像素,我们在网页布局中一般都是用px,但是近年来自适应网页布局越来越多,em和百分比也经常用到了.然后随着手机的流行,web app和hybrid a ...
- H5移动端开发vue+vux
项目src中用到的npm包有(从编译打包到最终部署仍不能移除)1:vue 渐进式 JavaScript 框架 http://cn.vuejs.org/v2/guide/2: ...
- H5 移动端开发中 ios/安卓坑 和经验总结
1. ios new时间对象,需要用逗号隔开传日期的方式, 不支持 new Date('2019-03-01 08:00:00') 格式: 支持以下两种方式: 2. ios个别版本对fixed的属性的 ...
- h5 移动端开发自适应 meta name="viewport"的使用总结
本文系个人理解,可能有误差,仅供参考,谨慎采纳! 布局视口: 系统自带 一般大于屏幕宽度 理想宽度: 设置页面的viewport 的一个宽度,使不同的手机的布局视口宽度尽量接近可视窗口的值: 可视视 ...
- 关于H5移动端开发 iPhone X适配
一. 媒体查询. @media screen and (device-width:375px) and (device-height:812px){ #header { height: 88px; p ...
- H5移动端开发遇见的东西
常见的有viewport.强制浏览器全屏.IOS的Web APP模式.可点击元素出现阴影 本文主要讲一些其他的或者实用的优化手段. 1. 弹出数字键盘 <!-- 有"#" & ...
- 整理几个经常在H5移动端开发遇到的东西。
本篇主要是我个人的学习分享. 1.弹出数字键盘 <!-- 有“#” “*” 符号输入 --> <input type="tel"> <!-- 纯数字 ...
- h5移动端常见虚拟键盘顶起底部导航栏解决办法
在h5移动端开发中相信很多朋友跟我一样都会遇到页面底部导航被虚拟键盘顶起的问题,自己在网上找到的解决办法拿出来与大家分享,有不完美之处还望见谅,有更好的解决办法可以贴出来大家一起互相学习!! var ...
- H5移动端手势密码组件
项目简介 最近参加了2017年360前端星计划,完成了一个有趣的UI组件开发大作业,借机和大家分享一下移动端开发的技术啦~~ 本项目采用原生JS和Canvas实现移动端手势密码组件,支持手势密码设置和 ...
随机推荐
- 根据文件url,下载文件到本地
/// <summary> /// 根据文件url,下载文件到本地 /// </summary> /// <param name="fileUrl"& ...
- c#修改密码后实现重新登录
C#中密码修改成功后,提示"密码修改成功,请重新登录.当用户一点确定的时候就跳到登录界面 直接重启程序就是了,在弹出个Messages.show("密码修改成功,请重新登录.&qu ...
- (第三章)TF框架之实现验证码识别
这里实现一个用神经网络(卷积神经网络也可以)实现验证码识别的小案例,主要记录本人做这个案例的流程,不会像之前那么详细,主要用作个人记录用... 这里是验证码的四个字母,被one-hot编码后形成的四个 ...
- Tableau学习Step4一数据解释、异常值监测、参数使用、分析结果如何对外发布
Tableau学习Step4一数据解释.异常值监测.参数使用.分析结果如何对外发布 本文首发于博客冰山一树Sankey,去博客浏览效果更好. 一. 前言 本教程通过一个案例从浅到深来学习Tableau ...
- 操作系统以及python的简介
今日笔记 操作系统 文件的概念 编程语言的发展史 编程语言的分类 python简介 python解释器的版本说明 内容详细 操作系统 操作系统(Operating System,简称OS),是管理 ...
- elasticsearch通用工具类
这几天写了一个关于es的工具类,主要封装了业务中常用es的常用方法. 本文中使用到的elasticsearch版本6.7,但实际上也支持es7.x以上版本,因为主要是对springboot提供的:El ...
- tp5 缩略图自写
1:php终端 安装扩展 使用Composer安装ThinkPHP5的图像处理类库: composer require topthink/think-image2:控制器代码: public func ...
- tp 5 三级联动查询(自写)
思路: 1.定义路由 2.查询顶级分类(pid=0)发送至制图 3.循环展示 4.给顶级分类下拉框绑定内容改变事件(JS:onchange.JQ:change) 5.获取到选中的option的valu ...
- 华为三层交换机5700 DHCP配置
交换机配置DHCP配置 1,交换机作DHCP Server『配置环境参数』1. PC1.PC2的网卡均采用动态获取IP地址的方式2. PC1连接到交换机的以太网端口0/1,属于VLAN10:PC2连接 ...
- LGP4199题解
因为没有简化题意一直没去做,直到今天讲这道题才口胡出来 要求对称,很明显这样一个"子序列"的对称中心只可能有一个,那么先枚举这个对称中心. 然后我们需要判断两个位置是否相同.看上去 ...