公告列表
公告列表
收藏
评论

一个基于 vue-cli 的小程序模板


只需要在终端窗口输入几个简单的命令，

即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目。

<p align="center"> <a href="https://weui-pro.github.io"> <img width="128" src="./template/static/logo.png"> </a> </p>

weui-pro-template 是一个基于 vue-cli 的小程序模板，只需要在终端窗口输入几个简单的命令，即可快速创建和启动一个带热重载、保存时静态检查、内置代码构建功能的小程序项目。

如果不想使用 vue-cli 工具，我们也同样提供了可直接使用的项目工程：weui-pro-starter

快速开始

# 安装 vue-cli 2.x
$ npm install vue-cli -g

# 创建一个基于 weui-pro-template 的小程序项目
$ vue init weui-pro/weui-pro-template my-project

# 安装依赖
$ cd my-project
$ npm install

# 启动构建
$ npm run dev

接下来，只需要启动 微信开发者工具，导入项目即可预览你的第一个 mpvue 小程序。

如果你还不了解 mpvue 是什么，请先阅读 使用手册。

模板配置

为了满足不同的开发需求，我们通过命令行工具提供了丰富的可配置项，并对项目进行初始化。

  • Project name

    输入项目名称，默认 template

  • wxmp appid

    输入小程序ID，默认 touristappid

  • Project description

    输入项目描述，默认 A WeUI-Pro Template project

  • Author

    输入项目作者，默认 git 账户

  • Vue build

    选择 Vue 构建模式，仅支持 Runtime-only

  • Use Vuex?

    是否使用 Vuex 进行状态管理，默认 Y

  • Use mpvue-entry?

    是否使用集中式页面管理，默认 Y

  • Use mpvue-router-path?

    是否使用 vue-router 兼容的路由写法，默认 Y

  • Use Fly.js?

    是否使用跨平台的 fly.js 网络请求库，默认 Y

  • Pick an CSS Preprocessor

    选择 CSS 预处理器，默认 Less

    • Less
    • Sass（SCSS）
    • Stylus
    • none

  • Use ESLint to lint your code?

    是否使用 ESLint 检验代码，默认 Y

  • Pick an ESLint preset

    选择 ESLint 预置规则，默认 Standard

    • Standard
    • Airbnb
    • none

如果你是新手，或需要一个完整的小程序解决方案，推荐使用默认的模板配置。

状态管理

mpvue 提供完整的 Vue.js 开发体验，可集成 Vuex 数据管理方案，方便构建复杂应用。

如果你有诸如以下疑问：

  • Vuex 是什么？
  • 什么是 “状态管理模式” ？
  • 什么情况下应该使用 Vuex？

我们建议你先阅读 Vuex 指南 ，掌握一些基本的核心概念及用法。

页面配置

使用 mpvue-entry 进行集中式页面配置，自动生成个页面的入口文件，优化目录结构，支持新增页面热更新。

// webpack.base.conf.js
const MpvueEntry = require('mpvue-entry')

module.exports = {
  entry: MpvueEntry.getEntry('src/pages.js'),
  ...
  plugins: [
    new MpvueEntry(),
    ...
  ]
}

// routes.js
module.exports = [
  {
    path: 'pages/index/index', // 页面路径，同时是 vue 文件相对于 src 的路径，必填
    config: { // 页面配置，即 page.json 的内容，可选
      navigationBarTitleText: 'WeUI-Pro Template',
      enablePullDownRefresh: true
    }
  }
]

兼容路由

通过引入 mpvue-router-patch ，可以在 mpvue 中使用 vue-router 兼容的路由写法。

// main.js
import Vue from 'vue'
import MpvueRouterPatch from 'mpvue-router-patch'

Vue.use(MpvueRouterPatch)

Router 实例

属性

  • $router.app

    当前页面的 Vue 实例

  • $router.model

    路由使用的模式，固定值 history

  • $router.currentRoute

    当前路由对应的路由信息对象，同 $route

方法

  • $router.push(location, onComplete?, onAbort?, onSuccess?)

    跳转到应用内的某个页面，wx.navigateTo、wx.switchTab 及 wx.reLaunch 均通过该方法实现，location 参数支持字符串及对象两种形式，跳转至 tabBar 页面或重启至某页面时必须以 object 形式传入

  // 字符串
  router.push('/pages/news/detail')

  // 对象
  router.push({ path: '/pages/news/detail' })

  // 带查询参数，变成 /pages/news/detail?id=1
  router.push({ path: '/pages/news/detail', query: { id: 1 } })

  // 切换至 tabBar 页面
  router.push({ path: '/pages/news/list', isTab: true })

  // 重启至某页面，无需指定是否为 tabBar 页面，但 tabBar 页面无法携带参数
  router.push({ path: '/pages/news/list', reLaunch: true })

  • $router.replace(location, onComplete?, onAbort?, onSuccess?)

    关闭当前页面，跳转到应用内的某个页面，相当于 wx.redirectTo ，location 参数格式与 $router.push 相似，不支持 isTab 及 reLaunch 属性

  • $router.go(n)

    关闭当前页面，返回上一页面或多级页面，n 为回退层数，默认值为 1

  • $router.back()

    关闭当前页面，返回上一页面

路由对象

属性

  • $route.path

    字符串，对应当前路由的路径，总是解析为绝对路径，如 /pages/index/index

  • $route.params

    空对象，小程序不支持该属性

  • $route.query

    一个 key/value 对象，表示 URL 查询参数。例如，对于路径 /pages/news/detail?id=1 ，则有 $route.query.id == 1 ，如果没有查询参数，则是个空对象

  • $route.hash

    空字符串，小程序不支持该属性

  • $route.fullPath

    完成解析后的 URL，包含查询参数和 hash 的完整路径

  • $route.name

    当前路由的名称，由 path 转化而来

网络请求

Fly.js 是一个基于 promise 的、轻量且强大的 Javascript http 网络库。

为了方便的进行网络请求，我们提供了公用的 request.js 工具类：

// request.js
import Fly from 'flyio'

// 引入 fly.js
const fly = new Fly()
fly.config.baseURL = 'http://localhost:8080'

const codeMessage = {
  200: '服务器成功返回请求的数据。',
  201: '新建或修改数据成功。',
  202: '一个请求已经进入后台排队（异步任务）。',
  204: '删除数据成功。',
  400: '发出的请求有错误，服务器没有进行新建或修改数据的操作。',
  401: '用户没有权限（令牌、用户名、密码错误）。',
  403: '用户得到授权，但是访问是被禁止的。',
  404: '发出的请求针对的是不存在的记录，服务器没有进行操作。',
  406: '请求的格式不可得。',
  410: '请求的资源被永久删除，且不会再得到的。',
  422: '当创建一个对象时，发生一个验证错误。',
  500: '服务器发生错误，请检查服务器。',
  502: '网关错误。',
  503: '服务不可用，服务器暂时过载或维护。',
  504: '网关超时。'
}

function checkStatus (response) {
  if (response.status >= 200 && response.status < 300) {
    return response
  }
  const errortext = codeMessage[response.status] || response.statusText
  const error = new Error(errortext)
  error.name = response.status
  error.response = response
  throw error
}

/**
 * Requests a URL, returning a promise.
 *
 * @param  {string} url       The URL we want to request
 * @param  {object} [options] The options we want to pass to "fetch"
 * @return {object}           An object containing either "data" or "err"
 */
export default function request (url, options) {
  const defaultOptions = {
    credentials: 'include'
  }
  const newOptions = { ...defaultOptions, ...options }
  if (newOptions.method === 'POST' || newOptions.method === 'PUT' || newOptions.method === 'DELETE') {
    /* eslint-disable no-undef */
    if (!(newOptions.body instanceof FormData)) {
      newOptions.headers = {
        Accept: 'application/json',
        'Content-Type': 'application/json; charset=utf-8',
        ...newOptions.headers
      }
      newOptions.body = JSON.stringify(newOptions.body)
    } else {
      // newOptions.body is FormData
      newOptions.headers = {
        Accept: 'application/json',
        ...newOptions.headers
      }
    }
  }

  return fly.request(url, newOptions)
    .then(checkStatus)
    .then(response => {
      if (newOptions.method === 'DELETE' || response.status === 204) {
        return response.text()
      }
      return response.json()
    })
    .catch(e => {
      console.error(e.response)
    })
}

了解更多，请参看：Flyio 帮助文档

特别感谢

https://github.com/weui-pro/weui-pro-template
收藏
请 登录 后发表内容