Mini计划框架简介教程

我已经写了《 Mini 框架蹲指南》，它失控了。今天，当我周末有空闲时间时，我将为（没有朋友）写一个简单的介绍性教程。本教程仅适用于初学者，所以不要喷洒老鸟。

此外，我还为本文做了一个简单的项目。如果您懒得从头开始穿该项目的儿童鞋子，可以将其直接克隆到当地并安装依赖项，并且可以直接开发此基础而无需任何配置。如果您认为这个项目很有帮助，请顺便给出我明星。您的支持是我最大的动力，谢谢！

好的，让我们开始讨论这个话题。首先，请允许我引用的正式介绍

它是使用vue.js开发小程序的前端框架。该框架基于vue.js核心，并修改了vue.js和vue.js的实现，以便它可以在环境中运行，从而引入了一套完整的vue.js开发经验，以供开发。

主要功能

使用开发迷你计划，您将根据MINI计划技术系统获得以下一些能力：

彻底的组件开发能力：提高代码可重复性，完整的vue.js开发经验，方便的VUEX数据管理解决方案：构建快速且复杂的应用程序施工机制的方便：自定义构造策略，支持NPM在开发阶段中使用NPM，外部依赖性使用VUE.JS Line工具VUE-CLI VUE-CLI，快速汇编目标H5代码对 代码的快速初始化，

最好的学习方法是开始。我们只是用裸露的手运行一个演示项目，看看它是否和官方的项目一样好。如果您有Vue开发经验，我相信您会非常熟悉此过程。您甚至不需要安装其他工具。您可以直接使用Vue-CLI创建一个项目。如果您尚未一起安装Vue-CLI，则必须先运行命令。

npm install --g vue-cli 复制代码

安装Vue-CLI后，我们可以运行该命令自动构建一个项目（在此期间，我们会询问您是否使用某些工具/插件。请根据您的实际情况选择Y或N。对于那些不知道是选择Y还是N的人，请选择N）

vue init mpvue/mpvue-quickstart test-wxapp 复制代码

然后转到我们创建的项目并安装依赖项

cd test-wxapp npm i 复制代码

最后，运营我们的开发服务

npm run dev 复制代码

项目开始运行。目前，我们打开微信开发人员工具，选择Mini程序，然后创建一个新程序，填写我们项目目录中的Dist Test-/dist，您可以看到效果。

到目前为止，已经完成了一个基本项目，但是本文的目的不是让您学会构建一个空的项目。如果这是一个空的项目，我认为官方教程做得很好。接下来，让我们删除一些示例文件，然后逐步添加页面。首先，让我们看一下项目配置文件 /src/main.js中的初始内容如下：

import Vue from 'vue' import App from './App' Vue.config.productionTip = false App.mpType = 'app' const app = new Vue(App) app.$mount() export default { // 这个字段走 app.json config: { // 页面前带有 ^ 符号的，会被编译成首页，其他页面可以选填，我们会自动把 webpack entry 里面的入口页面加进去 pages: ['pages/logs/main', '^pages/index/main'], window: { backgroundTextStyle: 'light', navigationBarBackgroundColor: '#fff', navigationBarTitleText: 'WeChat', navigationBarTextStyle: 'black' } } } 复制代码

本字段下方的内容是整个迷你程序的全局配置。其中包括页面的路由，该页面是页面的某些配置（其中大多是顶级栏的配置）。这些配置最终将包装到本机迷你程序的app.json中。如果您不知道这些配置，建议您查看微信方法的迷你程序文档，这将在此处不描述。

我们首先删除以下/src/和logs下方的两个文件夹，然后仅保留一个文件夹，然后删除以下/src/文件夹的所有文件，然后删除/src/main.js内部的额外路由，然后仅保留一个['^// main']，因此目前只有一个页面。

然后我们打开/src///.vue，我们在内部删除额外的代码，只留下基本的骨架

export default { data () { return { } }, methods: {}, created () {} } 复制代码

TIP/SRC//.js是一个公共功能库，只有一个简单的格式日期函数。如果您不想，可以删除它。

到目前为止，即使一个干净的空项目还可以，我们也可以优化一些微信本来的反人类事物。

1。首先使用组件，而不是wx。，wx。我不会谈论很多不便。关键是仍然有陷阱。迷你程序的基本库相对较低。无论您如何设置它，都将始终在弹出窗口中添加钩子。有时我想弹出错误消息，这也是一个挂钩，这严重误导了用户。单词数量有限制。图标不超过7个单词。如果您说，那么7个字是什么？让我们看看。根据官方介绍，它具有轻巧的特征，很少的配置，较少的冗余，简单的使用和强大的自定义。

根据官方介绍，我们将从NPM介绍和配置。

npm i vuex npm i mptoast -D 复制代码

将以下代码添加到项目的主要配置文件（通常位于src/main.js中）

import mpvueToastRegistry from 'mptoast/registry' mpvueToastRegistry(Vue) 复制代码

在页面中，您需要弹出，介绍组件，注册，然后在页面中添加您注册的组件。您可以在JS中调用此。$（）。以下是一个简单的示例

复制代码

使用非常简单

2。在迷你程序的环境中使用封装的异步请求功能。如果我们想发送外部请求，我们只能使用WX。 Mini计划提供的方法。但是，此方法的代码样式就像时代的Ajax一样。他们依靠回调来处理请求响应。如果有许多回调层，将会有许多嵌套层，这会使我们被宠坏接受它吗？

因此，在构建基本项目之后，我们需要做的第一件事是使用WX封装基于基于的异步请求方法。让我们首先看一下WX的官方示例代码。

wx.request({ url: 'test.php', //仅为示例，并非真实的接口地址 data: { x: '' , y: '' }, header: {

'content-type': 'application/json' // 默认值 }, success: function(res) { console.log(res.data) } }) 复制代码

可以看出，每个请求都需要发送很多东西。重点较少，大多数是为项目修复的。那不是多余的吗？

提示：有关更多WX。参数，请参阅官方微信文档以获取更多信息。

让我们分析它。第一个参数是URL，这是我们要求的地址。每次都应该有所不同。但是，不同的应该只是URL的最后部分。接口名称的位置不同。以前的服务器地址通常相同。例如，同一项目中的所有接口服务器地址都应相同。不同的只是继母的界面名称/。然后，我们可以将URL分为服务器地址 +接口名称。这也将有助于在稍后启动时切换服务器地址。

第二个参数是请求的参数，所请求的参数每次都应不同，因此我们不会修改此内容（实际上，在实际应用程序中，通常需要随身携带每个接口，我们也可以在此处添加它，但是我们不会在此处深入其中）。

第三个参数是请求标头。通常，这些在同一项目中是相同的，因此我们将其写为死。这里还有一个参数请求方法。由于使用默认值获取，因此未列出。我们需要在此处进行设置，因为当前的分离模式基本上是现在的发布请求，因此我们还将其写入：'post'

最后一个是处理请求结果回调函数。示例中只有一个带有成功请求的回调。实际上，我们应该添加请求实例的另一个处理功能，失败。封装此功能的关键是使用这两个回调函数，以便它们可用于使用-

// 假设以下代码在 `/src/utils/requestMethod.js` let serverPath = 'http://www.abc.com/api/' export function post(url,body) { return new Promise((resolve,reject) => { wx.request({ url: serverPath + url // 拼接完整的url data: body method:'POST', header: { 'content-type': 'application/json' }, success(res) { resolve(res.data) // 把返回的数据传出去 }, fail(ret) { reject(ret) // 把错误信息传出去 } }) }) } 复制代码

通过此封装，我们可以在其他地方介绍上面的文件，然后使用Post功能请求。

import {post} from '/src/utils/requestMethod.js' // 需要注意的是，这行代码必须要在async修饰的函数里面才能正确调用 let res = await post('member/login',{name:myname}) 复制代码

如果您认为每次都有此文件很麻烦，那么我们也可以将其挂在vue（）的（）上，打开 /src/main.js文件，然后向其添加以下代码。

import {post} from '/src/utils/requestMethod.js' Vue.prototype.$post = post 复制代码

这样，我们可以直接使用此。$ post（）在Vue（）的所有实例中都称其为单行代码。

// 这行代码同样需要在async修饰的函数里面才能正确调用 let res = await this.$post('member/login',{name:myname}) 复制代码

怎么样？这不是比本地的方便吗？

当然，跑步后，您可能会遇到各种问题。在这里，我总结了我遇到的问题。 迷你计划框架下蹲指南。我希望这对您有帮助。官方文件也非常好。