mpvue——小程序开发及文件结构

最新推荐文章于 2024-03-18 02:30:57 发布

欣馨密语

最新推荐文章于 2024-03-18 02:30:57 发布

阅读量429

点赞数

分类专栏： mpvue

本文链接：https://blog.csdn.net/qq_35095295/article/details/90295049

版权

mpvue 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

起手式：必要的开发环境

在开始写代码之前，请确保你已经安装了必要的开发环境和工具，以下是几个必需的和可选的工具：

1）node.js
前端工具链基本都依赖Node.js，先安装Node.js。

下载地址：https://nodejs.org/en/download/

安装完成后，打开你的命令行输入如下命令，验证安装是否成功：

node --version
//成功的话输出类似：v10.6.0

npm --version
//成功的话输出类似：6.1.0

然后，执行以下命令，将npm的下载源切换到国内淘宝的镜像，以提高下载时的速度和成功率：

npm set registry https://registry.npm.taobao.org/

2）vue-cli
vue-cli是一个vue专用的项目脚手架工具，可以用于方便的创建vue项目骨架代码。
通过安装node.js后里面包含的npm工具来安装vue-cli，在命令行输入如下命令：

npm install vue-cli -g

安装完成后，输入如下命令进行验证：

vue

// 成功的话会输出如下内容：
// Usage: vue <command> [options]
//
// Options:
//
//    -V, --version  output the version number
//    -h, --help     output usage information
//
// Commands:
//
//    init           generate a new project from a template
//    list           list available official templates
//    build          prototype a new project
//    create         (for v3 warning only)
//    help [cmd]     display help for [cmd]

3）微信开发者工具
这个工具是开发、调试和模拟运行微信小程序的最核心的工具，必须安装。

下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

4）Visual Studio Code + Vetur
Visual Studio Code（简称vscode）是现在非常流行的一个轻量级代码编辑器，拥有非常多好用的辅助开发插件。
Sublime Text、WebStorm等，同样可以达到我们的开发目的，用你自己最喜欢的代码编辑器来写代码。

下载地址：https://code.visualstudio.com

安装完vscode后，在它的插件管理器中，查找Vetur并安装，然后重启一下vscode后，插件即生效：

安装Vetur插件

Vetur是一款可以提供Vue语法高亮、语法检查和代码快捷输入等功能的插件，可以为我们的开发过程提供很多便利。

创建第一个基于mpvue的小程序项目代码，这里将用到前面已安装的vue-cli：

vue init mpvue/mpvue-quickstart firstapp

命令行将一步步的引导我们选择或填写项目的配置信息，如果你还不太明白这些内容的含义，可以先直接全部按回车：

? Project name firstapp
? wxmp appid touristappid
? Project description A Mpvue project
? Author kevinzhang <kevin.zhang@moredist.com>
? Vue build runtime
? Use Vuex? Yes
? Use ESLint to lint your code? Yes
? Pick an ESLint preset Standard
? 小程序测试，敬请关注最新微信开发者工具的“测试报告”功能 

   vue-cli · Generated "firstapp".

   To get started:
   
     cd firstapp
     npm install
     npm run dev
   
   Documentation can be found at http://mpvue.com

这个过程vue-cli主要是先从远程的代码仓库中下载了一份注册名为mpvue/mpvue-quickstart的模板代码，然后根据开发者在命令行提示过程中输入的信息，生成一份经过配置后的代码。

这份代码暂时还运行不起来，因为它还缺少依赖的库，我们需要执行以下命令进行依赖库的安装：

cd firstapp 
npm install

经过几分钟的下载安装，依赖库安装到了firstapp目录下，你可以看到该目录下多出了一个node_modules目录。

然后，执行命令让这个代码运行起来，进入开发模式：

npm run dev

成功运行后，这个项目代码就进入开发模式，一旦有源代码发生修改，就会触发自动编译。因为mpvue使用的是Vue + HTML Web的开发方式开发小程序，它最终还是需要被转换成小程序的代码才可以在小程序环境运行，所以这里的自动编译的目的就是要把Web代码编译成小程序代码。编译后的代码会在dist目录下：

运行并查看结果

上面的步骤中，我们开启开发模式后，其实并不能看到小程序的执行效果，要真正看小程序的运行界面的话，我们还是要借助微信开发者工具。

打开微信开发者工具，选择新增项目，项目目录选择指向firstapp目录：

点击“新建”按钮，进入小程序开发主界面，在左边的小程序模拟器中就能看到firstapp小程序的执行结果了：

【提醒】记得在微信开发者工具的菜单>设置>编辑设置中，将“保存时自动编译小程序”勾选上，这样当mpvue的代码自动编译完成后，模拟器才会自动刷新界面。

文件结构

在Visual Studio Code里面打开项目文件夹，我们可以看到类似如下的文件结构：

firstapp
├── package.json  //项目的主配置文件
├── project.config.json  //小程序项目的配置文件    
├── static //存放各种小程序本地静态资源     
├── src
│    ├── components
│    ├── pages
│    ├── utils
│    ├── App.vue
│    └── main.js
├── node_modules
├── dist  //编译后的代码
├── config
│   ├── index.js
│   ├── dev.env.js
│   └── prod.env.js
└── build

1）package.json文件

package.json是项目的主配置文件，里面包含了mpvue项目的基本描述信息、项目所依赖的各种第三方库以及版本信息、以及可执行的脚本信息。

我们看到该文件中的scripts部分配置了4个可执行的命令：

"dev": "node build/dev-server.js",
"start": "node build/dev-server.js",
"build": "node build/build.js",
"lint": "eslint --ext .js,.vue src"

dev和start是两个等价的命令，执行其中之一都可以将项目以开发模式启动。执行方式是：

npm start
npm run dev

lint指令是使用ESLint来进行代码语法和格式检查，以及修复一些可自动修复的问题。执行方式是：

npm run lint  #检查语法和格式
npm run lint -- --fix #检查代码语法和格式，并修复可自动修复的问题

build指令是用于生成发布用代码的，它会对代码进行一些压缩优化处理。当小程序开发完成后，将要提交审核时，请使用build来生成发布的代码。

2）project.config.json文件

project.config.json文件是用于管理微信开发者工具的小程序项目的配置文件，其中记录了小程序的appid、代码主目录、以及编译选项等等信息，在微信开发者工具中导入小程序项目的时候主要是通过该配置文件读取和写入配置信息。

3）static目录

static目录可以用于存放各种小程序本地静态资源，如图片、文本文件等。代码中可通过相对路径或绝对路径进行访问，如：

<img src="/static/button.png" />
<img src="../../../static/button.png" />

4）build目录

build目录下是一些用于项目编译打包的node.js脚本和webpack配置文件。一般情况下不需要修改这些文件。

5）config目录

config目录下包含了用于开发和生产环境下的不同配置，dev.env.js用于开发环境，prod.env.js用于生产环境，你可以将开发阶段和生产阶段不一样的信息（如后台API的url地址等）配置到这两个文件中去，然后在代码中以变量的形式进行引用。例如，这2个文件中分别配置了不同的API_BASE_URL值：

// dev.env.js
module.exports = merge(prodEnv, {
  NODE_ENV: '"development"',
  API_BASE_URL: '"http://127.0.0.1:8080/api"'
})

// prod.env.js
module.exports = {
  NODE_ENV: '"production"',
  API_BASE_URL: '"https://www.my-domain.com/api"'
}

那你在编写请求后端API的代码时，你就可以使用这个环境配置，像这样：

const baseURL = process.env.API_BASE_URL
wx.request({
  url: `${baseURL}/products`
})

这样一来，开发阶段和上线发布阶段的环境可以清楚的区分开来。

5）src目录

src目录是我们主要进行小程序功能编写的地方。默认生成的demo代码为我们创建了几个子目录：components、pages和utils，还有2个文件：App.vue和main.js。其实它们都不是必须的，可以按照自己的风格进行定义和配置。不过默认创建的这个结构基本上是一个约定俗成的结构了，比较易于理解，所以我们可以遵循这个结构进行开发。