一、工具

微信开发者工具（新版）集成了公众号网页调试和小程序调试两种开发模式。

下载完成后

新建项目

二、文件

app.js

// app.js
App({
  //生命周期回调——监听小程序初始化。
  onLaunch() {},
  onShow() {}
  ...
})

App() 必须在 app.js 中调用，必须调用且只能调用一次。文档地址

app.json

{
  //页面访问路径
  //普通编译模式默认打开第一个，即每次加载项目访问第一个页面
  "pages": [
    "pages/home/home",
    ...
  ],
  //分包
  "subpackages": [
    {
      "root": "packageOfUser",
      "pages": [
        "pages/order/order",
      ]
    }
  ],
  //小程序导航栏
  "tabBar": {
    "position": "bottom",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "iconPath", // 图标
        "selectedIconPath": "selectedIconPath" // 选中图标
      },
      ...
    ]
  },
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "",
    "navigationBarTextStyle": "black",
    "navigationStyle": "custom"
  },
  "sitemapLocation": "sitemap.json",
  //配置通用路径
  "resolveAlias": {
    "@/*": "/*",
    "@utils/*": "/utils/*",
  },
  //全局使用组件
  "usingComponents": {
    "van-icon": "@vant/weapp/icon/index", // 使用vant icon
    "authorization":"/components/authorization/authorization" // 自定义组件
  },
  "lazyCodeLoading": "requiredComponents"
}

app.wxss

配置全局css

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
  display: none;
}

三、引入vant

# 通过 npm 安装 
npm i @vant/weapp -S --production

# 电脑必须已经有node才能安装

新版微信小程序的 app.json 文件中多了一个：style": "v2"，当使用微信小程序进行开发时，如果使用vant组件库或其他组件，删除 app.json 里面的 “style”: “v2”，否则会导致部分样式混乱

# 修改 project.config.json
{
  ...
  "setting": {
    ...
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "./package.json",
        "miniprogramNpmDistDir": "./"
      }
    ]
  }
}

构建

工具上方菜单：工具 —> 构建npm

项目中会自动生成 miniprogram_npm 文件夹

学习日记-小程序1

一、 工具

二、 文件