mpvue开发微信小程序

发表于 | 更新于 | 分类于

使用mpvue开发微信小程序

mpvue，方便的使用vue语法开发微信小程序。

我回来了，半年没更新了。用React做了个字幕编辑器，但感觉实际意义不大。

0. 环境

首先确保本地已安装nodejs

1
2
3
# 查看本地node、npm版本
node -v
npm -v

vue-cli

1
2
3
# 安装vue脚手架
npm i -g vue-cli -D
vue -V

1. 初始化项目

创建

1
2
3
# 项目名为 shmp
# cd D:\programming\JsProject
vue init mpvue/mpvue-quickstart shmp

按提示回车确认即可，中间需要小程序的appid

运行

1
2
3
cd shmp
npm i
npm run dev

2. 导入到微信开发工具

首先需要安装微信开发工具，然后运行。

导入项目

点击导入项目，选择mpvue项目的目录即可

在微信开发工具查看效果

mpvue输出在dist目录下

3. 其他

如使用scss

1
2
3
npm i sass-loader@7.3.1 node-sass -D
# node-sass如果安装失败 可以尝试更换国内源
# npm config set sass_binary_site=https://npm.taobao.org/mirrors/node-sass
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<style lang="scss" scoped>
.container {
  display: flex;
  height: 100vh;
  width: 100vw;
  justify-content: center;
  align-items: center;
  .innerBox {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    .boxTitle {
      font-weight: bold;
      font-size: 24px;
      margin-bottom: 30vh;
    }
    .boxContent {
      justify-content: center;
      align-items: center;
    }
  }
}
</style>

取消eslint格式检测

前往：build>webpack_base_conf.js，注释掉eslint-loader

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
module: {
  rules: [
    // {
    //   test: /\.(js|vue)$/,
    //   loader: 'eslint-loader',
    //   enforce: 'pre',
    //   include: [resolve('src'), resolve('test')],
    //   options: {
    //     formatter: require('eslint-friendly-formatter')
    //   }
    // },
    {
      test: /\.vue$/,
      loader: "mpvue-loader",
      options: vueLoaderConfig,
    },

提示prettier版本过低

移除项目中的prettier依赖，重新安装

1
2
npm uninstall prettier
npm i prettier -D

使用小程序客户端腾讯云增强SDK

1
npm i -S wafer2-client-sdk

文档