最近一直在做移动端微信公众号项目的开发,也是我首次用vue来开发移动端项目,前期积累的移动端开发经验较少。经过这个项目的锻炼,加深了对vue相关知识点的理解和运用,同时,在项目中所涉及到的微信api(微信分享,微信支付),百度地图api(如何实例化地图,给地图添加自定义覆盖物,给地图添加自定义标注,对地图进行缩放,拖拽等)的相关使用,开阔了自己的知识眼界;现将我开发过程中积累的相关经验与大家进行分享,希望和大家一起学习和进步….
- vux:Vue 移动端 UI 组件库的使用;
- vue-lazyload :一个简单易用的 Vue 图片延迟加载插件;
- vuex:vue状态管理工具详细入门;
- async/await:异步神器来封装接口请求文件fetch.js
- vue 项目中的迭代判断技巧;
- vue 项目中常用的图片引入方式;
- 微信api在vue项目中的使用:
- vue2实现微信分享坑点和经验 ;
- vue2实现微信支付坑点和经验;
- 百度地图api在vue项目中的使用:
- vue2.0项目中如何使用百度地图api
- vue2如何给地图添加房源覆盖物;
- 如何给地图添加自定义定位控件并更换控件的图标;
- 如何给地图添加自定义当前位置定位标注
- 几个常用的api(地图缩放,拖拽,获取当前位置)等功能的实现;
VUX – Vue 移动端 UI 组件库的使用;
vux介绍:详细请参见官方文档。
由于是做微信公众号移动端项目,我们对比了几个vuejs的移动端UI库,知道vux是基于WeUI和Vue(2.x)开发的移动端UI组件库,主要服务于微信页面;虽然它属于个人维护,体验上需要一些改进。但项目中几个组件的使用,大大提升了开发效率。
使用方法如下:
- 安装- vux:
npm install vux --save
注意事项:
vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置:vux2必须配合vux-loader使用, 请在build/webpack.base.conf.js里参照如下代码进行配置:
const vuxLoader = require('vux-loader') const webpackConfig = originalConfig // 原来的 module.exports 代码赋值给变量 webpackConfig module.exports = vuxLoader.merge(webpackConfig, { plugins: ['vux-ui'] })
- 以轮播组件swiper为例
如果你要使用的组件只是在当前页面中使用,我们可以只在当前页面中引入即可。如果在很多页面中都有使用,可以在main.js中以全局方式引用。使用组件方法如下:
<template> <swiper auto loop :interval="interval" :duration="duration" id="swiper-banner" class="swiper-banner" :height="height"> <swiper-item class="swiper-demo-img" v-for="(item, index) in bannerList" :key="index"> <img :src="item.img"> </swiper-item> </swiper> </template> <script> import { Swiper, SwiperItem } from "vux"; export default { name: "swiper", data() { interval:4000,// 轮播停留时间 duration:300// 切换动画时间 height:"10.19rem", // 高度值 bannerList:[ {img: 'https://static.vux.li/demo/1.jpg',title: '送你一朵fua'}, {img: 'https://static.vux.li/demo/5.jpg',title: '小花'} ] } } </script>
属性auto,默认为false,表示是否自动轮播;属性loop,默认为false,表示是否循环;
vue-lazyload :一个简单易用的 Vue 图片延迟加载插件
官方网址:vue-lazyload
介绍:
vue-lazyload主要应用于图片延迟加载。包含如下的特点:
- 小巧轻便,功能强大,易于使用
- 可以用于加载任何图像类型
- 支持Vue 1.0和Vue 2.0
理解图片延迟加载:
当某个网页中呈现的图片较多时,由于网络等原因,访问该网页时,所有的图片不会立马全部进行显示出来,会出现一定的网络延迟加载的现象,影响用户体验;但我们可以vue-lazyload插件来实现在图片加载的过程中,先显示出默认的加载图片,直到图片完全显示,默认图片消失,这样就会大大的提升用户体验。
使用方法如下:
1、通过npm安装
npm install vue-lazyload -s
2、在main.js中进行引用
import Vue from 'vue' import App from './App.vue' import VueLazyload from 'vue-lazyload' Vue.use(VueLazyload, { preLoad: 1.3, // 预压高度的比例 error: '../assets/img/no-pic.png', // 图像的加载失败时 显示的error图标 loading: '../assets/imgLoading.png', // 图像正常加载时 显示的loading图标 attempt: 1 // 图像尝试加载 次数 })
3、在组件中使用
<img v-lazy="item.picUrl" alt="">
4、实现效果以后,还可以根据API进行功能扩展。
相应的参数可参考官方API进行设置。
5、vue-lazyLoad文件整理,请参照:vue2-plugs-demo项目中src/components/LazyLoad/index.vue 和 src/main.js部分;;
vuex:vue状态管理工具详细入门;
vuex介绍:
详细介绍请参见官方网站。Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。
什么情况下我应该使用 Vuex?
如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。
使用方法:
- 安装vuex:
npm install vuex --save
- 在mins.js中引用:
import Vuex from "vuex"; Vue.use(Vuex);
理解vuex的5个基本对象:
- state:存储状态。也就是变量;
- getters:派生状态。也就是set、get中的get,有两个可选参数:state、getters分别可以获取state中的变量和其他的getters。外部调用方式:store.getters.personInfo()。就和vue的computed差不多;
- mutations:提交状态修改。也就是set、get中的set,这是vuex中唯一修改state的方式,但不支持异步操作。第一个参数默认是state。外部调用方式:store.commit(‘SET_AGE’, 18)。和vue中的methods类似。
- actions:和mutations类似。不过actions支持异步操作。第一个参数默认是和store具有相同参数属性的对象。外部调用方式:store.dispatch(‘nameAsyn’)。
- modules:store的子模块,内容就相当于是store的一个实例。调用方式和前面介绍的相似,只是要加上当前子模块名,如:store.a.getters.xxx()。
vue-cli中使用vuex的方式
一般来讲,我们都会采用vue-cli来进行实际的开发,在vue-cli中,开发和调用方式稍微不同。
├── index.html ├── main.js ├── components └── store ├── index.js # 我们组装模块并导出 store 的地方 ├── state.js # 跟级别的 state ├── getters.js # 跟级别的 getter ├── mutation-types.js # 根级别的mutations名称(官方推荐mutions方法名使用大写) ├── mutations.js # 根级别的 mutation ├── actions.js # 根级别的 action └── modules ├── index.js # 模块集合 ├── m1.js # 模块1 ├── m2.js # 模块2
state.js示例:
const state = { name: 'weish', age: 22 }; export default state;
getters.js示例(我们一般使用getters来获取state的状态,而不是直接使用state):
export const name = (state) => { return state.name; } export const age = (state) => { return state.age } export const other = (state) => { return `My name is ${state.name}, I am ${state.age}.`; }
mutation-type.js示例(我们会将所有mutations的函数名放在这个文件里):
export const SET_NAME = 'SET_NAME'; export const SET_AGE = 'SET_AGE';
mutations.js示例:
import * as types from './mutation-type.js'; export default { [types.SET_NAME](state, name) { state.name = name; }, [types.SET_AGE](state, age) { state.age = age; } };
actions.js示例(异步操作、多个commit时):
import * as types from './mutation-type.js'; export default { nameAsyn({commit}, {age, name}) { commit(types.SET_NAME, name); commit(types.SET_AGE, age); } };
modules/m1.js示例,m2同理。(如果不是很复杂的应用,一般来讲是不会分模块的):
export default { state: {}, getters: {}, mutations: {}, actions: {} };
modules/indes.js,将modules文件集中管理,如下:
import m1 from './m1'; import m2 from './m2'; export default { m1, m2 }
index.js示例(组装vuex):
// 如果项目中,使用的状态管理操作非常频繁,可以将状态管理的对象进行细分,最后汇集之后集中管理; import vue from 'vue' import vuex from 'vuex' import state from './state' import * as getters from './getters' import mutations from './mutations' import actions from './actions' import modules from './modules' vue.use(vuex) export default new vuex.Store({ state, getters, mutations, actions, modules })
最后将store实例挂载到main.js里面的vue上去就行了
import store from './store'; new Vue({ el: '#app', store, render: h => h(App) });
在vue组件中使用时,我们通常会使用mapGetters、mapActions、mapMutations,然后就可以按照vue调用methods和computed的方式去调用这些变量或函数,示例如下:
import {mapGetters, mapMutations, mapActions} from 'vuex'; /* 只写组件中的script部分 */ export default { computed: { ...mapGetters([ name, age ]) }, methods: { ...mapMutations({ setName: 'SET_NAME', // 映射 this.setName() 为 this.$store.commit('SET_NAME') setAge: 'SET_AGE' }), ...mapActions([ nameAsyn // 将 this.nameAsyn() 映射为 this.$store.dispatch('increment') ]) } };
mapGetters,mapMutations,mapActions的使用,相当与将已经定义好的状态管理数据(变量,函数)引用到vue对象的computed和methods中,我们在页面中,只管使用就行;使用方式,如:
获取computed中的变量:
this.name; this.age;
获取methods中的变量:
this.setName(this.name);// 映射为 `this.$store.commit('setName', this.name)` this.setAge(); this.nameAsyn();
总结:
1、如果项目中,使用的状态管理操作非常频繁,可以将状态管理的对象进行细分,如区分不同的对象文件夹(state,getters,mutations,actions,modules),最后汇集之后集中管理;
2、如果项目中使用的状态管理的变量较少时,可以采用一个文件进行集中管理;
vuex项目整理,请参照:vue2-plugs-demo项目中src/store 和 src/store2部分;
async/await:异步神器来封装接口请求文件fetch.js
在前后端分离的项目开发中,前端人员如果要通过接口获取后端数据时,我们一般会独立封装自己的接口异步请求方法,以便在整个项目中都能够轻松的进行引用;
项目中使用async/await 来处理异步请求,封装的方法(utils/fetch.js)如下:
export default async (url = '', data = {}, type = 'POST', method = 'fetch') => { type = type.toUpperCase() // get请求需要进行url和参数的重新拼接 if (type === 'GET') { let dataStr = '' Object.keys(data).forEach(key => { dataStr += key + '=' + data[key] + '&' }) if (dataStr !== '') { dataStr = dataStr.substr(0, dataStr.lastIndexOf('&')) url = url + '?' + dataStr } } // 如果支持fecth语法(es7语法)并且请求方式为'fetch' if (window.fetch && method === 'fetch') { let requestConfig = { credentials: 'include', method: type, headers: { 'Accept': 'application/json;charset=UTF-8', 'Content-Type': 'application/json;charset=UTF-8' }, mode: 'cors', cache: 'force-cache' } // 'POST'请求,将相关的请求参数添加到'body'中。 if (type === 'POST') { Object.defineProperty(requestConfig, 'body', { value: JSON.stringify(data) }) } // await fetch,以同步的方式将数据(json形式)进行返回,前端通过变量接收即可; try { const response = await fetch(url, requestConfig) const responseJson = await response.json() return responseJson } catch (error) { throw new Error(error) } } else { // 如果先浏览器不支持fetch语法,则用es6中promise()来封装异步接口请求; return new Promise((resolve, reject) => { let requestObj if (window.XMLHttpRequest) { requestObj = new XMLHttpRequest() } else { let ActiveXObject = window.ActiveXObject requestObj = new ActiveXObject() } let sendData = '' if (type === 'POST') { sendData = JSON.stringify(data) } requestObj.open(type, url, true) requestObj.setRequestHeader('Content-type', 'application/x-www-form-urlencoded') requestObj.send(sendData) requestObj.onreadystatechange = () => { if (requestObj.readyState === 4) { if (requestObj.status === 200) { let obj = requestObj.response if (typeof obj !== 'object') { console.log(obj) obj = JSON.parse(obj) } resolve(obj) } else { reject(requestObj) } } } }) } }
如登录界面的用到的api,统一管理在login/api/index.js中,如下:
import fetch from "@/utils/fetch"; /** * 登录 */ export const login = (reqData) => fetch("/v2/cotton/user/app_login", reqData);
api统一管理完成之后,我们需要在页面中进行调用,获取数据,方法如下:
import { getyancode, login } from "./api"; methods: { async login() { // 提交时,做验证; if (this.checkMobile() && this.checkMsgCode()) { this.loading.show = true; let reqData = { phone: mutils.replaceAllSpace(this.telphone), code: mutils.replaceAllSpace(this.yancode) }; try{ // try{}catch(){}用于处理异常 const res = await login(reqData); if (res.status.code == "200") { console.log('接口请求成功~'); } else { console.log('接口请求失败~'); } }catch(err){ console.log(err) } } } }
通过异步接口请求,我们就可以获取到相关的数据,开始后续的操作了。
异步接口请求封装方式分析:
async/ await来发送异步请求,从服务端获取数据,代码很简洁,同时async/await 已经被标准化。
async的用法,它作为一个关键字放到函数前面,用于表示函数是一个异步函数,也就意味着该函数的执行不会阻塞后面代码的执行。如:
async function timeout() { return 'hello world' } timeout(); console.log('虽然在后面,但是我先执行');
async 函数返回的是一个promise 对象,如果要获取到promise 返回值,我们应该用then 方法,如:
async function timeout() { return 'hello world' } timeout().then(result => { console.log(result); }) console.log('虽然在后面,但是我先执行');
执行结果:
虽然在后面,但是我先执行 hello world
async和await结合使用,await表示等待的意思,注意await 关键字只能放到async 函数里面。现在写一个函数,让它返回promise 对象,该函数的作用是2s 之后让数值乘以2。
// 2s 之后返回双倍的值 function doubleAfter2seconds(num) { return new Promise((resolve, reject) => { setTimeout(() => { resolve(2 * num) }, 2000); } ) }
现在再写一个async 函数,从而可以使用await 关键字, await 后面放置的就是返回promise对象的一个表达式,所以它后面可以写上 doubleAfter2seconds 函数的调用。
async function testResult() { let result = await doubleAfter2seconds(30); console.log(result); }
现在调用testResult 函数
testResult(); 结果为:60
当然我们在使用async/await来接口请求时,需要进行异常处理。它用的是try/catch 来捕获异常,把await 放到 try 中进行执行,如有异常,就使用catch 进行处理。
fetch.js文件整理,请参照:vue2-plugs-demo项目中utils/fetch.js 和 src/login部分;
vue 项目中的迭代判断技巧
比如我们有一个列表,我们希望能显示我们当前选中的那一个,如何实现呢?
基本思路是通过$index来判断是否是当前迭代对象,然后去增减class或者style来实现不同的样式。
<template> <ul> <!-- 方法1 class--> <li v-for="item in list" :class="{'active': $index === activeId}">{{item}}</li> <!-- 方法2 style--> <li v-for="item in list" :style="{backgroundColor: $index === activeId ? 'red' : 'white'}">{{item}}</li> </ul> </template> <script> data () { return { list: ['a', 'b', 'c'], activeId: 0 } }