使用mpvue开发小程序--学习笔记

1、简介：mpvue是美团的开源项目
2、开发环境：
1）node.js 注：现在前端工具链基本都依赖Node.js
2）vue-cli vue-cli是一个vue专用的项目脚手架工具，可以用于方便的创建vue项目骨架代码，包括我们要讲到的mpvue的项目代码。我们可以通过安装node.js后里面包含的npm工具来安装vue-cli，在命令行输入如下命令：npm install vue-cli -g
3）微信开发者工具 这个工具是开发、调试和模拟运行微信小程序的最核心的工具了，所以必须安装。
下载地址：https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
4）Visual Studio Code + Vetur vscode是现在非常流行的一个轻量级代码编辑器
下载地址：https://code.visualstudio.com
安装完vscode后，在它的插件管理器中，查找Vetur并安装，然后重启一下vscode后，插件即生效。
3、创建一个基于mpvue的小程序项目代码
1）vue init mpvue/mpvue-quickstart firstapp //初始化一个mpvue项目
2）cd firstapp //进入项目目录
npm install //安装依赖
3）npm run dev //进入开发模式
注：编译后的代码会在dist目录下
4）运行并查看结果：打开微信开发者工具，选择新增项目：项目目录选择刚初始化创建好的项目文件夹； AppID选择自己注册的ID号。
4、mpvue项目的主要目录和文件结构
firstapp
├── package.json
├── project.config.json
├── static
├── src
│ ├── components
│ ├── pages
│ ├── utils
│ ├── App.vue
│ └── main.js
├── config
│ ├── index.js
│ ├── dev.env.js
│ └── prod.env.js
└── build
1）package.json文件
package.json是项目的主配置文件，里面包含了mpvue项目的基本描述信息、项目所依赖的各种第三方库以及版本信息、以及可执行的脚本信息。
npm run lint #检查语法和格式
npm run lint – –fix #检查代码语法和格式，并修复可自动修复的问题
2）project.config.json文件
project.config.json文件是用于管理微信开发者工具的小程序项目的配置文件，其中记录了小程序的appid、代码主目录、以及编译选项等等信息，在微信开发者工具中导入小程序项目的时候主要是通过该配置文件读取和写入配置信息。
3）static目录
static目录可以用于存放各种小程序本地静态资源，如图片、文本文件等。代码中可通过相对路径或绝对路径进行访问
4）build目录
build目录下是一些用于项目编译打包的node.js脚本和webpack配置文件。一般情况下不需要修改这些文件。
5）config目录
config目录下包含了用于开发和生产环境下的不同配置，dev.env.js用于开发环境，prod.env.js用于生产环境，你可以将开发阶段和生产阶段不一样的信息（如后台API的url地址等）配置到这两个文件中去，然后在代码中以变量的形式进行引用。
6）src目录
src目录是我们主要进行小程序功能编写的地方。默认生成的demo代码为我们创建了几个子目录：components、pages和utils，还有2个文件：App.vue和main.js。其实它们都不是必须的，可以按照自己的风格进行定义和配置。
components：在实际开发中，我们可以尽量将界面上可复用的部分，提取成vue组件放入该目录
pages：存放小程序的页面。请遵循每个小程序页面放入一个单独子目录的组织形式
utils：可选（可删）。可以将代码中一些公用工具函数组织成模块放入该目录下
可新建其他目录，存放你希望组织起来的代码。比如公用的业务逻辑代码、请求后台API的代码等等
main.js + App.vue：这两个是入口文件，相当于原生小程序框架中的app.json和app.js的复合体。
5、在使用mpvue的时候那些需要特别注意的点
1）在模板中，动态插入HTML的v-html指令不可用 注：如果有在小程序里插入html片段的需求，可以用组件或者wxParse来实现
2） 在模板中，用于数据绑定的双括号语法{{}}中的表达式功能存在诸多限制：不可以调用methods下的函数；如果变量是对象的话，也不可以调用对象的成员方法；不可以使用过滤器来处理变量。
3）在模板中，除事件监听外，其余地方都不能调用methods下的函数
4）在模板中，不支持直接绑定一个对象到style或class属性上
注：在mpvue中的写法：

5） 在模板中，嵌套使用v-for时，必须指定索引index
6）对于表单，请直接使用小程序原生的表单组件
7）其他注意事项
另外，在Vue开发Web应用的时候，通常使用vue-router来进行页面路由。但是在mpvue小程序开发中，不能用这种方式，请使用标签和小程序原生API wx.navigateTo等来做路由功能。
还有就是请求后端数据，我们通常在Web开发中使用axios等ajax库来实现，但是在小程序开发中也是不能用的，也请使用小程序的原生API wx.request等来进行
6、思考过怎么解决以下的问题
1）怎么存放可全局访问的变量？
2）页面跳转的时候，怎么传递参数到下一个页面比较好？
3）页面返回上一页的时候，怎么传递当前页的数据到上一页？
4）多个页面间需要同步数据，怎么做比较好？
解决方式：使用Vuex
Vuex 是一个专为 Vue 应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。
通过使用Vuex，我们可以在mpvue里很方便的对需要在app、页面、组件之间共享的数据进行很好的统一管理，可以更方便有效的在各个代码部分对这些共享数据进行访问，同时可以使得你的代码条理变得更加清晰。
Vuex一般有2种用法，当创建好store后：
第一种用法是将store绑定到需要访问store内容的Vue实例上，然后通过该Vue实例下组件的this.$store来引用；或通过mapState等一系列映射函数将store中的state、getters、mutations、actions等映射成组件的计算属性或methods方法来使用；
第二种用法是直接在组件中通过import导入store所在的模块文件，然后调用该store上的相关方法和属性，比如commit()、dispatch()等方法来操作store中的内容。
注：推荐采用上面所说的第二种用法，这种方式会更加灵活和简单一些。