mpvue写一个CPASS小程序的示例

下面是mpvue写一个CPASS小程序的详细攻略，包含两条示例说明：

一、先决条件

在正式开始编写小程序之前，需要安装好cpass-cli和mpvue框架，并且具有mpvue开发的基础知识。

二、创建项目及配置

2.1 创建项目

使用cpass-cli创建一个mpvue工程：

cpass create demo --template mpvue

2.2 配置项目

进入项目根目录，使用以下命令安装依赖：

npm install

安装完成后，可以使用以下命令运行项目，并在微信开发者工具中打开：

npm run dev

若要编译发布，则使用以下命令：

npm run build

2.3 修改配置

首先，找到src/main.js文件，将它修改为：

import Vue from 'vue'
import App from './App'
import MpvueRouterPatch from 'mpvue-router-patch'
import store from './store'

Vue.config.productionTip = false
App.mpType = 'app'
Vue.prototype.$store = store
Vue.use(MpvueRouterPatch)

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

然后，找到src/utils/request.js文件，将它修改为：

import fly from 'flyio/dist/npm/wx'

fly.config.baseURL = 'https://www.cpass.cn/api/'

const request = (url, data, method = 'GET') => {
  const token = wx.getStorageSync('token')
  return fly.request({
    url,
    method,
    headers: {
      Authorization: `Bearer ${token}`
    },
    body: data
  }).then(res => res.data)
}

export default request

三、创建页面

在src/pages目录下创建页面，建议使用cpass-cli提供的mpvue模板创建页面，具体命令如下：

cpass create page --template mpvue

这样创建出来的页面文件就会拥有以下基本结构：

<template>
  <div></div>
</template>

<script>
  export default {
    name: '',
    data() {
      return {}
    },
    methods: {},
    mounted() {}
  }
</script>

四、示例说明

4.1 获取用户信息

创建一个名为user的页面，用于获取用户信息。在user.vue文件中加入以下代码：

<template>
  <div>{{ userInfo }}</div>
</template>

<script>
  import request from '@/utils/request'

  export default {
    name: 'user',
    data() {
      return {
        userInfo: {}
      }
    },
    methods: {
      getUserInfo() {
        request('user/info').then(userInfo => {
          this.userInfo = userInfo
        })
      }
    },
    mounted() {
      this.getUserInfo()
    }
  }
</script>

这个页面会通过调用request方法获取用户信息，并将结果渲染到页面上。

4.2 发布文章

创建一个名为article的页面，用于发布文章。在article.vue文件中加入以下代码：

<template>
  <div>
    <input v-model="title" type="text" placeholder="请输入标题">
    <textarea v-model="content" placeholder="请输入内容"></textarea>
    <button @click="publish">发布</button>
  </div>
</template>

<script>
  import request from '@/utils/request'

  export default {
    name: 'article',
    data() {
      return {
        title: '',
        content: ''
      }
    },
    methods: {
      publish() {
        request('article/publish', {
          title: this.title,
          content: this.content
        }, 'POST').then(res => {
          wx.showToast({
            title: '发布成功',
            icon: 'success',
            duration: 2000
          })
        }).catch(err => {
          console.log(err)
          wx.showToast({
            title: '发布失败',
            icon: 'none',
            duration: 2000
          })
        })
      }
    }
  }
</script>

这个页面会通过调用request方法将文章标题和内容发送到后台，并提示发布的结果。