最新如何使用mpvue构建项目，我的腾讯前端面试经历分享

最后

总的来说，面试官要是考察思路就会从你实际做过的项目入手，考察你实际编码能力，就会让你在电脑敲代码，看你用什么编辑器、插件、编码习惯等。所以我们在回答面试官问题时，有一个清晰的逻辑思路，清楚知道自己在和面试官说项目说技术时的话就好了

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

3. 方便的 Vuex 数据管理方案：方便构建复杂应用

4. 快捷的 webpack 构建机制：自定义构建策略、开发阶段 hotReload

5. 支持使用 npm 外部依赖

6. 使用 Vue.js 命令行工具 vue-cli 快速初始化项目

7. H5 代码转换编译成小程序目标代码的能力

基础使用

---

1. 全局安装vue-cli

npm install --global vue-cli

2. 创建一个基于mpvue-quickstart模板的新项目

vue init mpvue/mpvue-quickstart 项目名称

3. 安装依赖

cd my-project

npm install

4. 启动构建

npm run dev

实现项目功能

---

点击位置跳转城市页面

点击跳转

wx.navigateTo({

url: “…/city/main”

});

实现定位功能

获取定位信息

// 需要获取定位信息的页面

wx.getLocation({

type: “wgs84”,

success: res => {

console.log(res); // 获取到经纬度

}

});

// app.json配置permission字段

{

“pages”: [

…

],

“permission”: {

“scope.userLocation”: {

“desc”: “你的位置信息将用于小程序位置接口的效果展示”

}

}

}

将经纬度转换成地址

1. 借助腾讯地图小程序JavaScript SDK

链接：https://lbs.qq.com/qqmap_wx_jssdk/index.html

2. 申请地图开发者秘钥(key)

3. 下载微信小程序JavaScriptSdk

链接：http://3gimg.qq.com/lightmap/xcx/jssdk/qqmap-wx-jssdk1.2.zip

4. 引入qq.map-wx-jssdk

// 引入SDK核心类

var QQMapWX = require(“…/…/utils/qqmap-wx-jssdk.js”);

注意： 这里需要解决mpvue不支持commonjs规范的问题

处理： 修改.babellrc文件，plugins添加"transform-es2015-modules-commonjs"

“plugins”: [“transform-runtime”,“transform-es2015-modules-commonjs”]

5. 逆地址解析reverseGeocoder

qqmapsdk.reverseGeocoder({

location: {

latitude: res.latitude,

longitude: res.longitude

},

success: r => {

this.city = r.result.address_component.city;

}

});

渲染城市选择页面

• 引入城市数据cityData.js

• 循环数据

{{item.letter}}

{{city}}

点击字母定位到对应的城市位置

• 通过scroll-view来实现；

…

点击选中城市

• 通过全局变量来带参数，并返还上一层

let app = getApp();

export default {

…
最后

开源分享：【大厂前端面试题解析+核心总结学习笔记+真实项目实战+最新讲解视频】

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它

记+真实项目实战+最新讲解视频】](https://bbs.csdn.net/topics/618166371)**

最后写上我自己一直喜欢的一句名言：世界上只有一种真正的英雄主义就是在认清生活真相之后仍然热爱它