01. 尚硅谷_Mpvue_mpvue简介

大家好，我是上微谷前端讲师，我叫闫志勇，之前呢给大家录制了原生小程序，以及小程序的一个框架叫map微友的项目。我们之前卖朋友的项目是同原生小程序的项目一样，这一次呢，我将会带大家去学习一个新的项目，这个项目呢也是用慢步用框架去写，那这一次的项目呢，相对于我们之前的项目来说，功能更加全面，哎，覆盖的知识点呢更多，好在这儿呢，我先给大家介绍一下我们将会用到的一些资料。那在这个文件夹下面呢，有这么呃一些资料，呃，上面这这个文件夹呢，是我之前写好的项目，那下面这个压缩包对应就是当前项目的压缩包，那之后呢，上传这个视频的时候呢，会把这个压缩包上传下来啊，也就是说大家要参考的时候，把这个压缩包解压了以后，哎，就是当前的这一个项目，到时候启动这个项目就可以。

好，那大家也看到了，我这写的名字呢，叫map豆瓣，那这一次的项目呢，我们是以豆瓣的一款。呃，小程序的项目呢，为参照物啊，我们就去写那个项目，那下边呢，再往下看，这有一个mapu的接口文档，那这个文档呢，就是我们在项目中要涉及到前后端的交互，这一次呢，我机会带大家去写前端的项目呢，也会呢，用NOEGS去当一个服务器，哎，在服务器里边我们去做一些接口，那到时候我们的接口呢，就参照我写好的这个接口文档去写就OK，好，那这个呢，我先关掉它，我们用的时候到时候再来看。藏影像呢，是我给大家写的一个啊，当前map项目的一个课件，来我呢先把这个课件打开一下。好，那这个课件呢，内容还是比较多的啊，分为这么几个章节，从启动项目一直到讲小程序的支付，好那在介绍这个之前呢，可能有的同学没有了解过原生的小程序，也没有了解过map用，如果说大家对小程序嗯压根不熟悉的话，建议大家。

先去看一下我们之前的视频，哎，去把原生的小程序去复习一下，或者学习一下，也有的同学呢，对这个map view的框架哎，比较陌生了，那在这呢，我先大概带大家再去看一下我们的map view，哎，这个框架。来在这儿呢，我这儿有一个书签，那其实呢，大家想要访问mapu官网的时候，你直接去输输一下这个地址就可以买map.com，好来到他的官网以后呢，我们来看一下。那map view，哎，他说了是一个使用VGS开发小程序的前端框架，哎，这是我们前端人员的一个福音，就是说我可以使用VGS直接去写什么，写小程序。

那再往下看呢，在这儿大家看一下它的实践案例啊，在这儿呢，说是美团下边的酒旅啊，餐饮啊，到店等等一些业务的接入，哎，那为什么是美团旗下的呢？因为map view这个框架就是美团的开发团队，哎，推出的一个框架叫map view，那现在市面上比较火的小程序框架还有什么呢？比如说VPN，那这个呢，是腾讯团队推出的框架，哎，包括现在呢，还有一个比较火的叫unipp，那之后呢，我尽可能的再给大家去录一下UNIAPP这个框架如何去开发小程序，那这一次呢，我们先来看什么，先来看这个map费用。好，那再往下来看，这说了，哎，Map view名称的由来，Map呢，指的是迷你program，哎，就是小程序的意思。

那map view呢，其实指的就是v g SE program啊，意思就是说可以用VG去开发我们的小程序，那下边呢，再往下看，这说的是map view主要的特性啊，其实呢，在当前页面就没什么东西了啊，没什么东西了，那在他官网这儿，我们需要看什么看这儿。啊，这有个map选项，来我们去看一下这个主页。看他说了什么，在这儿呢，相当于是map view的一个，呃，使用手册，来这有一个五分钟的教程，在这呢是告诉大家我们需要安装哪些东西啊，如果大家之前学过VU的话，或者说你开发过无U的话，那这些东西其实你都能看懂。

那第一步呢，是让我们全局去安装一个V的啊命令和工具，它呢用来调我们V脚手架的命令，那下面这呢，其实告诉我们就是快速的去初始化一个什么map view的项目。在这呢，哎，前边这些内容是固定不变的，那后边这呢，其实是我们项目的名称。那这个项目名称呢，大家是可以根据自己的需求去自定义的啊，但是呢，在这要注意一下，这个项目里边不能有中文，不能有那些，因为这是你们项项目的名称，这个名称呢，也会写入到项目里边的package Json文件里面。的name属性，那pack监测的name属性呢？对于哎，我们命名的要求就是不能有中文，不能有大写，这个是大家需要注意的地方。来，我们接着往下来看，这说的是哎，初始化完，然后呢进入项目，然后去安装依赖，最后呢，启动项目，哎，那这个呢，我们待会儿都能看到啊。

再往下看，哎，这其实我们之前也说过，哎，生命周期在map view里面，它呢，不仅什么支持。来，往下看，我去给他找一句话。嗯，应该是在上边这样，嗯，看这一句话，除了view本身的生命周期以外，它呢，还兼容了什么小程序的生命周期。但是哎，这也说了，除特殊的情况以外呢，不建议使用小程序的生命周期钩子，那也就是说我们应该尽可能的去使用唯有的生命周期去解决啊我们需要解决的问题。啊，那这些呢，是我们需要注意的地方，好了，了解了这个以后呢，我可以带大家去初始化一个项目，那我呢在桌面去创建一个文件夹啊，在这呢，我去给它命名map view I的硅谷，那当前这个文件呢，就作为我们即将学习去写项目的一个根目录，那来到这个文件里边，我呢通过命令行啊打开它，然后呢，我去初始化一个这个，呃，Map v项目啊在这儿呢，大家看一下，我们只需要执行这一行代码就OK，好，那在这呢，我把这个项目的名称呢给切换一下，就叫它卖，嗯，硅谷来。

让这个命令一执行呢，他就去下载对应的依赖包啊，到时候呢，大家也可以去执行这个命令啊。好，那在这儿呢，他是问我们，哎项目的名称是不是用这个名字，那这个名字呢，其实就是我们刚才起的这个根目录，在这儿呢，我们只需要回车就行了，在这儿大家看第二步啊，这呢是让我们提供一个APPID，哎，了解原生小程序的同学大家都知道，我们注册一个小程序的账号以后，是能拿到一个小程序的APPID，那这个呢，是在我们开发的时候，相当于是我们的唯一标识。

如果说大家提前准备好了以后，你就可以在这儿去输一下你的APPID啊，如果说没有也没有关系啊，在这儿呢，如果说一回车的话，那这呢，它默认是会给我们分配一个tourist apd就是游客ID。啊，只不过是用游客ID的话，一些权限呢，啊，我们是使用不了的，这个呢，咱们之前也说过，待会儿呢，我会带大家去看一下啊看一下来我们接着往下回撤，来下面描述呀，作者啊，这些都可以回撤，在这儿呢，大家可以看一下，来这儿提醒我们是否使用VX。

那通过这个工具提示呢，我们也能想到一个事情，那就是说在map view的框架里面支持VIVO X，但是呢，呃，这个东西吧，大家都知道小程序的项目本身不大。啊，数据交互呢，也不是太多啊，包括组件和组件的交互，所以呢，在这儿呢，我们可以不使用VS都没关系啊，但是呢啊大家得知道这儿可以用vvox，包括呢，我自己也测过vvo X没有一点问题，来我们先选个no继续往下。哎，ESD呢可以选择一下，让他呢帮我们去检查这个代码的规范，那再往下，哎，这呢就是我们需要CD到我们项目的根目录，然后呢去NPM到就可以了，好，那我们当前这一节课呢，先讲到这里，我呢把视频听一下。