小程序之初探mpvue

前言

最近两年小程序之名如雷贯耳，现在有机会就来探上一探，实际项目中对vue的了解程度比较多，所以就选择了美团开源的mpvue。

快速上手

根据mpvue官网的五分钟上手教程迅速搭建了相关环境，相关命令搬运一下：

# 1. 先检查下 Node.js 是否安装成功
$ node -v
v8.9.0

$ npm -v
5.6.0

# 2. 由于众所周知的原因，可以考虑切换源为 taobao 源
$ npm set registry https://registry.npm.taobao.org/

# 3. 全局安装 vue-cli
# 一般是要 sudo 权限的
$ npm install --global vue-cli@2.9

# 4. 创建一个基于 mpvue-quickstart 模板的新项目
# 新手一路回车选择默认就可以了
$ vue init mpvue/mpvue-quickstart my-project

# 5. 安装依赖，走你
$ cd my-project
$ npm install
$ npm run dev

剩下的微信开发者工具以及关于它的配置，这里就不多详解了，还是比较简单的。

mpvue项目结构

我们可以看到类似如下的项目文件结构：

my-project
├── package.json
├── project.config.json       
├── static            
├── src
│    ├── components
│    ├── pages
│		└── index
│           ├── index.vue
│           ├── main.js
│           └── main.json
│    ├── utils
│    ├── App.vue
│    └── main.js
├── config
│   ├── index.js
│   ├── dev.env.js
│   └── prod.env.js
└── build

package.json文件

包管理文件，各种需要npm install的第三方库都在这里面
project.config.json文件

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

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

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

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

是我们主要进行小程序功能编写的地方。默认生成的demo代码为我们创建了几个子目录：components、pages和utils，还有2个文件：App.vue和main.js。其实它们都不是必须的，可以按照自己的风格进行定义和配置。不过默认创建的这个结构基本上是一个约定俗成的结构了，比较易于理解，所以我们可以遵循这个结构进行开发。
- components：在实际开发中，我们可以尽量将界面上可复用的部分，提取成vue组件放入该目录
- pages：存放小程序的页面。请遵循每个小程序页面放入一个单独子目录的组织形式
  - index.vue：页面的view内容
  - main.js:引入index.vue并创建Vue实例
  - main.json:页面相关配置
- utils：可选（可删）。可以将代码中一些公用工具函数组织成模块放入该目录下
- 可新建其他目录，存放你希望组织起来的代码。比如公用的业务逻辑代码、请求后台API的代码等等
- main.js + App.vue：这两个是入口文件，相当于原生小程序框架中的app.json和app.js的复合体。

导入iview-weapp的UI组件

到 GitHub 下载 iView Weapp 的代码，将 dist 目录拷贝到自己项目中的static文件夹下。

添加需要的组件到对应页面的json中

// src/pages/main.json
{
  "navigationBarTitleText": "首页",
  "usingComponents": {
    "i-button": "../../../static/iview/button/index"
  }
}

在index.vue`中使用组件：

1	<i-button type="primary" bind:click="handleClick">这是一个按钮</i-button>

使用flyio进行数据请求

Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它，您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。同时可以方便配合主流前端框架，最大可能的实现 Write Once Run Everywhere。

安装flyio
1
npm install --save flyio

在main.js中引入flyio

import Vue from 'vue'
import App from './App'
import Fly from 'flyio/dist/npm/wx'

Vue.prototype.$http = new Fly()

Vue.config.productionTip = false
App.mpType = 'app'

const app = new Vue(App)
app.$mount()

在代码中使用flyio

// index.vue
click(){
    this.$http.get({
        url: '***',
        headers: {
          'Content-Type': 'application/json'
        }
      }).then(res => {
        console.log(res
      })
}

前言

快速上手

mpvue项目结构

导入iview-weapp的UI组件

使用flyio进行数据请求

相关文档