typescript编写微信小程序-使用第三方npm包

配置

1. 在 详细 -> 本地设置,勾选 使用npm模块

2. 编辑project.config.json文件, 改 packNpmManually 和 packNpmRelationList 两个配置

{
  ...
  "setting": {
    ... 
    "packNpmManually": true,
    "packNpmRelationList": [
      {
        "packageJsonPath": "package.json",
        "miniprogramNpmDistDir": "./miniprogram"
      }
    ],
  },
  ... 
}

3. npm install 你要使用的包

4. 左上角 工具 -> 构建 npm 包, 会在 miniprogram 目录下生成 miniprogram_npm 目录

使用第三方组件库

这里用 @vant/weapp 做示例

1. 安装 npm install @vant/weapp, 然后构建 npm 包

2. 在 app.json 配置需要使用的组件

{
  "usingComponents": {
    "van-row": "@vant/weapp/row/index",
    "van-col": "@vant/weapp/col/index",
    "van-button": "@vant/weapp/button/index"
  }
}

3. 在 index.wxml 使用

<view>
    <van-row custom-class="row">
        <van-col span="12">
            hello
        </van-col>
        <van-col span="12">
            <van-button disabled type="info" custom-class="button">word</van-button>
        </van-col>
    </van-row>
</view>

使用js库`

这里用 underscore 做示例

这里说一下,有很多js库是构建不了的,

1. 同样的步骤,先安装,后构建

2. 使用 underscore 的 initial 函数

const _ = require("underscore")

Page({
    onShow() {
        console.log(_.initial([5, 4, 3, 2, 1]))
    }
})

源码: https://github.com/NikolasSky/ts-miniprogram/tree/master/ts-miniprogram-npm