背景:

  公司项目重构,要把之前用wepy做的小程序重新用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

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

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

安装好后,如果有报错就解决报错,把报错信息复制丢到百度,一般都有清晰的解读的,

如果有警告的话不用管,一般就是提示你有什么东西要升级,或者什么插件改名字了。

然后用微信开发者工具打开,会显示一个小demo,注意微信开发者工具只是用来做调试的,

我们需要用别的编辑器打开建好的项目。我习惯上是用webstorm。


那么我们现在要加上一些我们自己的业务了:

首先,我们要找到src根目录下的main.js,这个文件就类似于原生小程序里的最外层的app.vue,

我们可以在这里配置小程序的一些基本配置。

我们需要在小程序下方加一个tabbar,一般的项目都会用的上这个菜单栏的。

export default {
  // 这个字段走 app.json
  config: {
    // 页面前带有 ^ 符号的,会被编译成首页,其他页面可以选填,我们会自动把 webpack entry 里面的入口页面加进去
    pages: ['pages/logs/main', '^pages/index/main','pages/friends/main'],
    window: {
      backgroundTextStyle: 'light',
      navigationBarBackgroundColor: '#fff',
      navigationBarTitleText: 'WeChat',
      navigationBarTextStyle: 'black'
    },
    tabBar: {
      color: "#8a8a8a",
      selectedColor: "#017cc0",
      backgroundColor: "#f8f8f8",
      list: [
        {
          pagePath: "pages/index/main",
          text: "首页",
          // "iconPath": "images/home-gray.png",
          // "selectedIconPath": "images/home-blue.png"
        },
        {
          pagePath: "pages/friends/main",
          text: "校友圈",
          // iconPath: "images/earth-gray.png",
          // selectedIconPath: "images/earth-blue.png"
        },
        {
          pagePath: "pages/logs/main",
          text: "我",
          // iconPath: "images/me-gray.png",
          // selectedIconPath: "images/me-blue.png"
        }
      ]
    }
  }
}

红色部分是我新加的,也就是说我需要新建一个friends组件,如下:在fiends组件里新建两个文件


建好以后我们,npm run dev,运行试一下效果,这时小程序那边报错:


这个原因是我们生成的fiiends/main.js里面是空的,我们需要在这个文件里面加入一些东西,

创建和挂载根实例。从而让整个应用都有路由功能:

import Vue from 'vue'
import App from './index'

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


这时我们的效果就出来了,并且小程序也不报错了



另外假如小程序报错是:

tabBar[1].pagePath "pages/friends/index" 需在 pages 数组中

这时我们就要看下是不是路径给配错了:

比如:

pagePath: "pages/friends/index",要改成
pagePath: "pages/friends/main"
Logo

前往低代码交流专区

更多推荐