石家庄app开发简述前端制作app
使用技术：vue
ECMAScript6
css3
Html5
vue-cli脚手架
vue-swiper
axios技术
better-scroll滚动插件
vuex管理库
本地存储localStorage
keep-alive
vue-router路由
开发模式：MVVM开发模式
项目环境搭建：
1.安装node.js和git （官网下载安装，新版node.js中自带npm）
yarn的安装：npm install yarn -g
2.在码云或者Github上建立仓库 wherego（wherego 名字可自取）
3.下载到本地：Git clone "路径地址"
4.改变路径到该文件夹下：cd wherego
5.安装cue-cli脚手架
1）npm i webpack -g 或 yarn add webpack -g
2) npm i vue-cli -g 或 yarn add vue-cli -g
3) vue init webpack projectName (projectName项目名)
4) cd projectName
5)npm i/npm install
6)npm run dev （启动服务,生成一个端口地址如：8080）
7)打开网页输入：localhost:8080
模拟软件制作步骤：
1.使用Sublime Text软件或 WebStorm软件制作静态页面
2.静态页面数据改变为后台json数据
3.更改配置文件
1)package.json 加入 --host 0.0.0.0
"scripts": {
"dev": "webpack-dev-server --inline --host 0.0.0.0 --progress --config build/webpack.dev.conf.js",
"start": "npm run dev",
"build": "node build/build.js"
},
2)config文件下index.js
build: {
// Template for index.html
index: path.resolve(__dirname, '../dist/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../dist'),
assetsSubDirectory: 'static',
assetsPublicPath: './',
//这里将 '/' 变成 './'
4.使用 npm run build 命令自动生成dist文件夹
5.使用HBuilder软件
1）新建移动端App项目,删除css。img等文件，只保留manifest.json文件和unpackage文件夹
2）导入构建好的dist文件（导入时要注意勾选相关文件）
3）选择主项目名称->右键->选择发行->选择云打包-打原生安装包
4)使用手机助手连接手机,在电脑版手机助手中选择已安装软件,打开,安装本地app
5）安装成功后手机打开试用
6）如果要发布到网上,需要在应用宝等软件商店注册账号信息
项目技术使用方式：
1.模块 xxx.vue文件
1）由三部分组成：template,script,style
2) <template>
<div>
</div>
</template>//此处模块内必须要一个父级(div或其他标签)包裹,内容写在里面
<script>
export default({
data(){
return{
}
},
methods:{
}
})
</script>
<style scoped><syle>
//scoped 如果写上意味着属性为局部属性
3)引入vue模块: import Div from './pages/div.vue'
4)注册模块：
<script>
export default({
components:{
Div:Div // 名称相同可简化为一个 Div
},
mothods:{
}
})
</script>
5)在template模块下的父级盒子中使用：
<template>
<div>
<Div></Div>
</div>
</template>
2.引入全局属性样式
1） import './assets/css/reset.css' //全局属性初始设置
// 引入
2） import FastClick from 'fastclick'
// 使用
FastClick.attach(document.body);
3） import './assets/css/iconfont.css' //字体图标库：iconfont
3.文件目录结构
src -> 放源文件的地方
assets -> css/img
components -> 放组件
router -> 配置路由 router-link => a this.$router.push()/this.$router.replace()/this.$router.go() => location.href = ''
static -> 放静态资源文件的地方 data / img
App -> 整个项目的入口，也是路由的出口
main.js -> 进行全局配置
4.css变量 stylus
1）官网： https://www.zhangxinxu.com/jq/stylus/
2）安装： npm i stylus stylus-loader -S
3)使用时相当于less写法，形成的文件的扩展名为.styl
4)例：
定义：$bgColor = #00bcd4;
使用：<style scoped>
@import '~@/assets/css/css.styl'
.header{
background: $bgColor;
}
</style>
5)@表示的是'src'目录，如果style中要引入src下面的内容，要在@前加~，其它地方不需要加。
/api为 localhost:8080
5.vue-swiper 轮播图
1）官网：https://github.com/surmon-china/vue-awesome-swiper
2）安装： npm install vue-awesome-swiper --save
3)挂载： import VueAwesomeSwiper from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
Vue.use(VueAwesomeSwiper)
4)布局：
<swiper :options="swiperOption">
<!-- slides -->
<swiper-slide>I'm Slide 1</swiper-slide>
<swiper-slide>I'm Slide 2</swiper-slide>
<swiper-slide>I'm Slide 3</swiper-slide>
<swiper-slide>I'm Slide 4</swiper-slide>
<swiper-slide>I'm Slide 5</swiper-slide>
<swiper-slide>I'm Slide 6</swiper-slide>
<swiper-slide>I'm Slide 7</swiper-slide>
<!-- Optional controls -->
<div slot="pagination"></div>
<div slot="button-prev"></div>
<div slot="button-next"></div>
<div slot="scrollbar"></div>
</swiper>
5）配置：
<script>
export default {
name: 'carrousel',
props:["swiperList"],
data() {
return {
swiperOption: {
pagination: {
el: '.swiper-pagination'
},
loop:true,
autoplay: {
delay: 2000,
stopOnLastSlide:false,
disableOnInteraction:true
}
},
"swiperList":[
{
url:require("@/assets/img/01.jpg")
},
{
url:require("@/assets/img/02.jpg")
}
]
}
},
methods:{
}
}
</script>
6)"imgUrl":require("@/assets/img/swiper01.jpg") 拿本地图片时，要用require()
6.掉块处理：
height: 0;
padding-bottom: 26.67%; /*100px/375px*/
background-color: #ddd;
7.把一维数组拆分成二维数组，主要用于实现分页
var arr = [1,2,3,4,5,6,7,8,9,10,11,234,546,57,3,34,456,2,12,43];
var newArr =[]
for(var i=0;i<arr.length;i++){
var idx = Math.floor(i/8);
if(!newArr[idx]){
newArr[idx] = [];
}
newArr[idx].push(arr[i]) //newArr[0].push
}
例：
//html
<swiper :options="swiperOption">
<swiper-slide v-for="icons of page" :key="icons.index">
<div v-for="item of icons" :key="item.id" >
<div>
<img :src="item.url" alt="">
</div>
<p>{{item.title}}</p>
</div>
</swiper-slide>
<div slot="pagination"></div>
</swiper>
//script
computed:{
page(){
let pages=[];
this.iconsList.forEach((item,index)=>{
let idx = Math.floor(index/8);
if(!pages[idx]) pages[idx]=[];
pages[idx].push(item);
})
return pages;
}
}
8.文本溢出
white-space: nowrap;
text-overflow: ellipsis;
overflow: hidden;
9.axios的使用
1）安装： npm i axios -S 或 yarn add axios
2) 引入：
在main.js中添加：
import axios from 'axios'
Vue.prototype.$http = axios //将axios定义到原型方法中
3) 发送请求：
在Home.vue文件的script标签中添加：
data(){
return{
swiperList:[]
}
},
mounted(){
this.$http.get('http://localhost:8080/static/mock/data/home_data.json').then((res)=>{
console.log(res);
let data = res.data.data[0];
this.swiperList = data.swiperList;
}
}
4）绑定数据到组件上
在Home.vue文件中添加：
<home-swiper :swiperList="swiperList"/>
5）子组件接收传值
在SwiperList.vue文件中添加：
在script标签中写：
props:['swiperList']
注意：图片地址不能用require，要改成:http://localhost:8080......
10.服务器代理：
定义：代理服务器英文全称是（Proxy Server），其功能就是代理网络用户去取得网络信息。
在index.js文件中的代码proxyTable: {}中添加：
proxyTable: {
'/api':{
target:'http://localhost:8080',//代理的IP地址
pathRewrite:{//重写路径
'^/api':'/static/mock/'
}
}
}
注意：修改配置文件后一定要重启服务！！！
11.滚动插件的使用：
1）安装
yarn add better-scroll
或：npm install better-scroll --save
2）导入
import BScroll from 'better-scroll'
3）修改结构（布局）
在要加滚动条的部分外层套两层div
html格式：
<div>
<div ref="container">
<div>
//<Swiper :swiperList="swiperList"></Swiper>
//<Icons :iconsList="iconsList"></Icons>
//<Localtion></Localtion>
//<Hot :hotList="hotList"></Hot>
//<Like :likeList="likeList"></Like>
//<Where :whereList="whereList"></Where>
//<Footer></Footer>
</div>
</div>
</div>
4）在mounted()中添加：
let container = this.$refs['container'];//获取DOM节点
const scroll = new BScroll(container)
5）写CSS样式：
.container{
position: absolute;
left:0;
right:0;
bottom: 0;
top:.88rem;
}
12.vuex 管理库
1）安装
yarn add vuex
2）在src目录中创建目录store
3）在store目录中创建index.js文件
4）在main.js中全局引入：
import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
});
5）在index.js中添加代码：
提示：
本地存储有：localStorage 永久存储
sessionStorage 临时存储
存值：
localStorage.city = cityName;
取值：
let changecityname = localStorage.city;
// let changecityname = sessionStorage.city || "西安"
let changecityname = localStorage.city || "西安"
let state = {
city:changecityname
}
let mutations = {
changeCity(state,cityName){
this.state.city = cityName
// sessionStorage.city = cityName
localStorage.city = cityName
}
}
export default new Vuex.Store({
state,//抛出state的内容
mutations
})
6）组件引用仓库中的数据
a.引入仓库
import { mapState } from 'vuex'
b.调用state中的内容
computed:{
...mapState(['city']);
}
c.使用数据
{{ city }}
7）更改 Vuex 的 store 中的状态的唯一方法是提交 mutation
8）动态改变数据
利用vuex中的mutations来实现。
a.在index.js中添加方法
let mutations = {
changeCity(state,cityName){//这里的changeCity和此文件的事件名不能相同
this.state.city = cityName;
//console.log(this.state.city)
}
};
b.抛出mutations
export default new Vuex.Store({
state,//抛出state的内容
mutations
})
c.在应用数据的组件中引入
import { mapMutations } from 'vuex'
d.在methods中引入方法：
...mapMutations(['changeCity'])
e.调用方法
changecity(name,index){
// console.log(name,index)
this.changeCity(name);//这里的changeCity和此文件的事件名changecity不能相同，单击事件要传值@click="changecity(item.name)"
this.$router.push("/")//路由跳转
}
13.keep-alive
a.keep-alive是Vue提供的一个抽象组件，用来对组件进行缓存，从而节省性能，由于是一个抽象组件，所以在v页面渲染完毕后不会被渲染成一个DOM元素
b.当组件在keep-alive内被切换时组件的activated、deactivated这两个生命周期钩子函数会被执行,被包裹在keep-alive中的组件的状态将会被保留。
c.在App.vue的router-view标签的外层套一个keep-alive的抽象组件。
<keep-alive>
<loading></loading>
</keep-laive>
d.当数据发生改变时，页面并没有刷新，得重新发请求！下面是解决方案：
操作步骤：
1）定义变量存储
data(){
return{
changeCity:""
}
}
2）把仓库中的city拿出来：
import { mapState } from 'vuex'
computed:{
...mapState(['city'])
}
3）遍历JSON中的数据，找出city值是仓库中city值的这一组数据，存入对应的组件需求的变量中。
methods:{
getHttp(){
this.$http.get('/api/data/home_data.json').then(res => {
let data = res.data.data;
data.forEach((item, index) => {
if(item.city == this.city){
this.swiperList = item.swiperList;
this.iconsList = item.iconsList;
this.hotImgs = item.hotImgs;
this.likeList = item.likeList;
this.vacationList = item.vacationList;
}
});
})
}
},
mounted(){
this.getHttp();
this.changeCity = this.city;
},
activated(){
if(this.changeCity != this.city){
this.getHttp();
this.changeCity = this.city;
}
}
14.下拉一定位置显示,返回顶部消失
1）下拉时原来的v-show消失,目标内容v-show显示
2）返回顶部时原来的v-show显示,目标内容v-show消失
3）利用opacity
html：
<div :style="Opacity"></div>
sxript:
export default({
data(){
return{
Opacity:{
opacity:0
}
}
},
mounted(){
window.addEventListener('scroll',()=>{
let topH = document.documentElement.scrollTop || document.body.scrollTop;
let topOpacity = topH / 100;
if(topOpacity >6){
topOpacity=1;
}
this.Opacity.opacity=topOpacity;
// console.log(topOpacity)
})
}
}
15.vue-router
1) 在src文件夹下建立文件夹router
2）在router文件夹下建立index.js
3）
import Vue from 'vue'
import Router from 'vue-router'
// import HelloWorld from '@/components/HelloWorld'
import Home from '@/components/home/home'
import City from '@/components/city/city'
import Details from '@/components/details/details'
import Img from '@/components/details/pages/img'
Vue.use(Router)
export default new Router({
routes: [
{
path: '/',
name: 'Home',
component: Home
},
{
path: '/city',
name: 'City',
component: City
},
{
path: '/Details',
name: 'Details',
component: Details
},
{
path: '/Img',
name: 'Img',
component: Img
}
]
})
4）单击事件
methods:{
gohome(){
this.$router.push("/") //返回Home文件中
//this.$router.go(-1) //返回上一级
},
goimg(){
this.$router.push("/img") //返回img文件中
}
}
项目解决阻碍方式：百度,论坛，贴吧,朋友,曾经的老师和同学
