行业动态 website
当前位置: 首页>>新闻资讯>>行业动态
石家庄app开发简述前端制作app
发布日期:2022-06-13 阅读次数: 字体大小:


7.jpg

石家庄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文件中

}

}

项目解决阻碍方式:百度,论坛,贴吧,朋友,曾经的老师和同学