Vue企业开发实战（第2版）-课件 项目9 大觅项目中插件的使用

《Vue企业开发实战》·Vue3企业级项目教程项目9大觅项目中插件的使用任务1百度地图·任务2Pinia·任务3二维码授课教师：XXX第三方接入·状态管理·出票·按需引入学习目标地图能显示、状态能跨页、订单能出码01接入地图会申请ak、用vue-baidu-map-3x，挂载后出图，容器有高度02密钥规范ak不进公共仓库；课堂可用教师提供的测试密钥03会用PiniacreatePinia+defineStore，两页共享同一份数据04登录态进storetoken/登录信息可持久化，未登录购票先去登录05会出二维码npminstallqrcode，有支付链接或订单号再toCanvas项目知识导图三件插件，按业务需要接入，不堆生态任务1百度地图JSAPI、ak、vue-baidu-map-3x、弹窗标点任务2Pinia跨组件状态、计数器示例、userstore任务3二维码微信支付链路、QRCode.toCanvas项目导读超出基础组件时，再请插件场馆位置、跨页登录态、支付后扫码，都不是自己从零画。项目1脚手架当时不选Pinia，现在按需引入，这是渐进，不是前后矛盾。父子仍优先props/emit；隔很多页再用store。密钥和码里的内容都要守规范。地图列表点剧院地址，弹窗出标注。状态确认页要选座结果和登录token。出票后台给支付链接，前端画成码。原则封装成组件；页面只传数据和时机。TASK01百度地图插件01申请密钥02引入03地图组件9.1.1百度地图JSAPI是什么在网站里做功能丰富、可交互的地图，支持PC/移动/HTML5免费开放，支持HTTP和HTTPS。自v1.5起必须先申请密钥ak。大觅教材按JavaScriptAPIv2.0；v3.0大多向下兼容，改版本参数即可切换。01能做什么浏览官方jsdemo，先建立“能标点、能弹窗、能检索”的印象。02文档上有完整说明，课上以组件封装为主。03和自己画场馆、周边检索自己画不现实，用现成服务就要守密钥规范。04课上达标组件里能出地图，控制台无关键报错。申请密钥ak没有ak，接口调不起来01注册百度账号，按提示完成。02成为开发者开放平台申请成为百度开发者。03获取ak按图9.1四步拿到专属密钥；不要把ak提交到公共仓库。04课堂可用教师提供的测试密钥。前端明文仍有风险，本课先不乱传。9.1.2安装并在入口引入地图只是Vue工程里的一个功能模块npminstallvue-baidu-map-3x--save//main.jsimportBaiduMapfrom'vue-baidu-map-3x'app.use(BaiduMap,{ak:'百度开放平台申请的ak',v:2.0,//版本})对照Router/Pinia•都是app.use装插件•ak用环境变量更稳，不要写死进git•v:2.0对应教材版本•漏use时组件标签无效配额和域名白名单以开放平台为准。密钥无效、容器高度为0、初始化过早，是上机三大坑。业务逻辑：列表点地址→弹窗地图每个票务项都有剧院地址，单击后看当前位置和标注01入口商品列表页，点剧院地址，而不是进详情才出图。02形态地图以弹窗形式出现，不要撑破整页布局。03标注当前剧院以Marker标在中心点。04数据经纬度由父组件通过props传入，子组件响应式更新。示例1地图组件容器要有宽高；BmMarker标点；center来自props<baidu-mapclass="map"type="API":center="center":zoom="zoom":scroll-wheel-zoom="true"><BmMarker:position="center":dragging="true"/></baidu-map>import{ref}from'vue'import{BmMarker}from'vue-baidu-map-3x'constprops=defineProps({mapitem:{type:Object,required:true}})constcenter=ref(props.mapitem)//经纬度constzoom=ref(15).map{width:1020px;height:800px;}//高度为0就是空白地图标注效果图9.2标注点；图9.3列表页调用地图组件图9.2地图标注展示图9.3列表页弹窗地图组件代码怎么读模板放容器，样式定尺寸，script接经纬度01scroll-wheel-zoom允许滚轮缩放，演示时好用，移动端可按需关掉。02dragging标注可拖，课上用来确认Marker生效。03props.mapitem父把剧院经纬度传入；新坐标来了，地图跟着更新。04API文档标点、信息窗、检索都要对照官方API，不要猜方法名。上机1地图基本显示看得见才算接入成功要求•安装vue-baidu-map-3x，在main.js配置ak与版本•封装地图组件，容器写死宽高•父组件传入一组经纬度，弹出或直接显示地图•加上标注；可选：单击标注出信息窗（教材上机）•能说明密钥为什么不能进仓库合格页面出现地图，控制台无关键报错。容器无高度、初始化时机错误、密钥无效不算过。TASK02状态管理与Pinia01何时用02计数器03登录store9.2.1组件内的数据出不去数据和方法默认只在当前组件，别的页读不到<h1>{{msg}}</h1><button@click="handleClick">Changeword</button>constmsg=ref('HelloWorld.')consthandleClick=()=>{msg.value='HelloVue.'}图9.5HelloWorld.图9.6点按钮后变HelloVue.不是所有SPA都必须上Pinia。项目不复杂、短期见效，要先问有没有跨页共享。团队和技术储备也决定用不用。什么放store，什么不放隔三层props就该考虑；本页输入框不要进全局适合•登录态、token•所选演出、购物车•订单号（给二维码页）•多个页面都会读的用户信息•未登录购票要提示先登录不适合•只在本页用的输入框•临时开关、一次性提示•还能用props/emit说清的父子•把所有接口数据一股脑塞进去•和项目7：能父传子就先父传子安装与注册：和Router同一套路src/store当数据仓库，漏use则store不可用npminstallpinia--save//main.js示例4import{createPinia}from'pinia'constapp=createApp(App)app.use(router)app.use(createPinia())app.mount('#app')顺序•createApp→use插件→mount•一个应用一个pinia•仓库文件建议src/store•项目1不选，现在才装，是按需课上用组合式defineStore（setup函数写法），和scriptsetup一致。选项式state/getters/actions也能看懂即可。示例3计数器store官方入门：count、increment、decrementimport{defineStore}from'pinia'import{ref}from'vue'exportconstuseCounterStore=defineStore('counter',()=>{constcount=ref(0)constincrement=()=>{count.value++}constdecrement=()=>{count.value--}return{count,increment,decrement}})记住•第一个参数是id：'counter'•必须return要暴露的东西•改状态走函数，不要在组件里乱改细节•getters类似computed，课上计数器先不加•更多用法看Pinia官网示例5组件里怎么用useXxxStore()拿到同一份仓库<p>{{count}}</p><button@click="increment">+</button><button@click="decrement">-</button>import{computed}from'vue'import{useCounterStore}from'./store/counterStore'constcounterStore=useCounterStore()constcount=computed(()=>counterStore.count)constincrement=()=>counterStore.increment()constdecrement=()=>counterStore.decrement()图9.7初始0图9.8点+图9.9点−。两页读同一份count。示例6大觅登录store多页共享token；登录写入，退出清空conststorageKey='loginInfo'exportconstuseUserStore=defineStore('user',()=>{constsLoginInfo=ref(JSON.parse(localStorage.getItem(storageKey)||'{}'))constmLogin=(loginInfo)=>{sLoginInfo.value=loginInfolocalStorage.setItem(storageKey,JSON.stringify(loginInfo))}constmLogout=()=>{sLoginInfo.value={}localStorage.removeItem(storageKey)}return{sLoginInfo,mLogin,mLogout}})接到购票•未登录点购买→去登录•登录成功拿到token写入store•再redirect回原来的页•刷新后localStorage还能恢复•不要把密码明文存进store上机2两页共享一处修改另一处可见要求•安装并app.use(createPinia())•定义counter或ticket/userstore•两个路由页面读写同一状态•能说明何种数据不该放进全局•可选：登录信息写入localStorage合格应用能启动，store结构正确，两页同步。未use、defineStore写错、仍只用props，不算过。TASK03二维码插件01支付流程02QRCode03和Pinia配合9.3.1微信支付流程里前端干什么核心是把后台给的链接画成码，不是自己造支付协议01①订单号给后台确认支付时把当前订单号发给服务端。02②后台问微信查订单金额、商品名等，按微信要求组包，换回支付链接。03③前端出码拿到字符链接，用二维码插件画到页面，用户用微信扫。04课上模拟可用测试URL或模拟订单号；不要把身份证、完整卡号编进码。9.3.2安装QRCode上线还要用，所以--save；市面库很多，课上这一款npminstallqrcode--save<canvasref="canvas"></canvas>importQRCodefrom'qrcode'import{ref,onMounted}from'vue'constcanvas=ref(null)必须有一块真实DOM容器。未挂载就toCanvas会失败。数据后到（订单号从store来）就watch或等props再生成。空字符串不要出码。支付宝支付在项目10：本质是跳转地址；微信才出码。示例7toCanvas测试地址换成后台返回的支付链接即可constgenerateQRCode=()=>{if(!canvas.value)returnQRCode.toCanvas(canvas.value,'',//换成支付链接function(error){if(error)console.error(error)})}onMounted(()=>{generateQRCode()})图9.10QRCode.toCanvas出码上机3支付成功页出码项目9三件套收齐要求•安装qrcode，成功页放canvas•根据模拟订单号或测试链接生成可识别的码•有数据再生成；空串直接return•可选：订单号从Pinia读•能说明三件插件分别解决什么问题合格页面出现可识别码图。空字符串生成、容器不存在、未装库不算过。作业方向：多关键字检索综合地图+状态，地图与列表联动01框架Vite工程；引入百度地图插件。02检索在页面完成多关键字检索（对照官方示例）。03列表联动点地图下方列表项，地图定位到对应标注并显示信息。04状态当前选中项可放Pinia，列表和地图读同一份。作业效果：多关键字检索图9.11点列表项，地图定位并显示信息上机还要求：单击标注出信息窗教材：复杂型信息窗口，由文本等构成<baidu-map:center="center":zoom="15"><BmMarker:position="center"><BmInfoWindow:show="showInfo":title="title"><p>{{address}}</p></BmInfoWindow></BmMarker></baidu-map>//以官方文档为准核对组件名//点标注→showInfo=true图9.4单击标注出信息窗store两种写法都要认得课上默认setup函数；教材也提state/getters/actions组合式（示例3）defineSt