Mpx框架搭建一个飞书小程序

发表于 更新于 分类于 ，
1.Mpx-cli初始化项目，2.导入飞书小程序配置，3.用mpx开发新页面以及配置相应的路由

Mpx-cli初始化项目

安装Mpx脚手架

Mpx官网：https://mpxjs.cn/guide/basic/start.html

全局安装:

1
2
npm i -g @mpxjs/cli
mpx create mpx-project-name

也可以在不全局安装脚手架情况下创建项目: 

1
npx @mpxjs/cli create mpx-project-name

执行命令后会弹出一系列问题进行项目初始配置，根据自身需求进行选择，完成后进入项目目录进行依赖安装。

安装成功后进入目录并执行：

1
2
cd mpx-project-name
npm install

编译构建

1
npm run serve

导入飞书小程序配置

project.config.json

在static文件夹下新建一个文件夹，命名为tt
在tt文件夹新建一个文件project.config.json
page-img1

文件写入，appid和projectname根据自己的项目修改，appid为申请的飞书小程序的appid。 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
{
  "setting": {
    "urlCheck": true,
    "es6": false,
    "postcss": false,
    "minified": false,
    "newFeature": true,
    "babelSetting": {
      "ignore": [],
      "disablePlugins": [],
      "outputPath": ""
    },
    "condition": false
  },
  "appid": "cli_a111110000011111",
  "projectname": "applet-name",
  "compileType": "miniprogram",
  "libVersion": "2.32.2",
  "packOptions": {
    "ignore": [],
    "include": []
  },
  "condition": {},
  "editorSetting": {
    "tabIndent": "insertSpaces",
    "tabSize": 2
  }
}

vue.config.js

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
const { defineConfig } = require("@vue/cli-service");
module.exports = defineConfig({
  pluginOptions: {
    mpx: {
      // 这里不要改为'tt'
      // 去改package.json的 serve/build 命令
      // 为了方便后续引入vant weapp组件库
      srcMode: "wx",
      plugin: {
        hackResolveBuildDependencies: ({ files, resolveDependencies }) => {
          const path = require("path");
          const packageJSONPath = path.resolve("package.json");
          if (files.has(packageJSONPath)) files.delete(packageJSONPath);
          if (resolveDependencies.files.has(packageJSONPath)) {
            resolveDependencies.files.delete(packageJSONPath);
          }
        },
      },
      loader: {},
    },
  },
  /**
   * 如果希望node_modules下的文件时对应的缓存可以失效，
   * 可以将configureWebpack.snap.managedPaths修改为 []
   */
  configureWebpack(config) {},
});

package.json

文件package.json中，在serve和build的结尾都加上 --tt
page-img1

package.json

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
{
  "name": "mpx-project",
  "version": "0.1.0",
  "private": true,
  "scripts": {
    "serve": "mpx-cli-service serve --tt",
    "build": "mpx-cli-service build --tt",
    "lint": "eslint --ext .js,.ts,.mpx src/"
  },
  "dependencies": {
    "@mpxjs/api-proxy": "^2.8.0",
    "@mpxjs/core": "^2.8.0",
    "@mpxjs/fetch": "^2.8.0",
    "@mpxjs/pinia": "^2.8.0",
    "@mpxjs/store": "^2.8.0",
    "@mpxjs/utils": "^2.8.0",
    "@vant/weapp": "^1.10.19",
    "pinia": "^2.0.14",
    "vue": "^2.6.14",
    "vue-demi": "^0.13.11",
    "vue-i18n": "^8.27.2",
    "vue-i18n-bridge": "^9.2.2",
    "vue-router": "^3.1.3"
  },
  "devDependencies": {
    "@babel/core": "^7.10.4",
    "@babel/plugin-transform-runtime": "^7.10.4",
    "@babel/preset-env": "^7.10.4",
    "@babel/runtime-corejs3": "^7.10.4",
    "@mpxjs/babel-plugin-inject-page-events": "^2.8.0",
    "@mpxjs/eslint-config-ts": "^1.0.5",
    "@mpxjs/mpx-cli-service": "^2.0.0",
    "@mpxjs/size-report": "^2.8.0",
    "@mpxjs/vue-cli-plugin-mpx": "^2.0.0",
    "@mpxjs/vue-cli-plugin-mpx-eslint": "^2.0.0",
    "@mpxjs/vue-cli-plugin-mpx-typescript": "^2.0.0",
    "@mpxjs/webpack-plugin": "^2.8.0",
    "@vue/cli-service": "~5.0.0",
    "autoprefixer": "^10.2.4",
    "eslint": "^7.0.0",
    "postcss": "^8.2.6",
    "sass": "^1.63.6",
    "sass-loader": "^13.3.2",
    "stylus": "^0.55.0",
    "stylus-loader": "^6.1.0",
    "typescript": "^4.1.3",
    "vue-template-compiler": "^2.6.14",
    "webpack": "^5.43.0"
  },
  "browserslist": [
    "ios >= 8",
    "chrome >= 47"
  ]
}

运行输入

1
npm run serve

成功后出现dist文件夹，在飞书开发者工具中打开dist/tt。
page-img2

打开飞书开发者工具，选择Gadget->选择Import project->选择该项目打包好的tt文件夹->确认打开文件夹。

page-img3

成功打开
page-img4

回到Vscode中继续开发项目，小程序会自动更新代码变动。

开发一个新页面

页面index.mpx

开发一个新页面/pages/home/index
在pages/新建文件夹命名为home，在home下新建文件index.mpx。

src/pages/home/index.mpx 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
<template>
  <view class="home-page">
    <view class="home-button" bindtap="goTo">点击跳转</view>
  </view>
</template>

<script>
  import mpx, { createPage } from '@mpxjs/core'

  createPage({
    onLoad() {
      //
    },
    methods: {
      goTo() {
        console.log('goTo')
        mpx.switchTab({ url: '/pages/device/index' })
      }
    }
  })
</script>

<script type="application/json">
  {
    "usingComponents": {}
  }
</script>

<style lang="scss">
  .home-page {
    text-align: center;
  }
  .home-button {
    // --color-primary 为 app.mpx 中的全局样式
    border: 0.1rem solid var(--color-primary);
    margin: 20%;
    padding: 1.2rem;
    border-radius: 1rem;
  }
</style>

app.mpx 配置路由

在app.mpx给这个新页面配置路由。
app.mpx中，还可以配置底部tabbar、全局样式等。

app.mpx 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
<script>
  import mpx, { createApp } from '@mpxjs/core'
  import apiProxy from '@mpxjs/api-proxy'

  mpx.use(apiProxy, { usePromise: true })

  createApp({
    onLaunch() {
      //
    }
  })
</script>

<style lang="css">
  /*此处编写全局样式*/

  :root {
    --color-primary: #d6d6d6;
    --color-blue: #2d72ff;
  }
  .page-bottom {
    margin: 20px;
    text-align: center;
    position: absolute;
    bottom: 10px;
    width: calc(100% - 40px);
  }
  .flex-space-between {
    display: flex;
    justify-content: space-between;
    width: 100%;
  }
</style>

<script type="application/json">
  {
    "pages": [
      "./pages/home/index",
      "./pages/device/index"
    ],
    "tabBar": {
      "list": [
        {
          "pagePath": "pages/home/index",
          "text": "首页",
          "iconPath": "assets/tab.png",
          "selectedIconPath": "assets/tab-selected.png"
        }
      ]
    }
  }
</script>