npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

@tarojs/plugin-platform-lark

v1.1.5

Published

taro platform plugin for lark

Downloads

424

Readme

@tarojs/plugin-platform-lark

Taro 插件,用于支持编译飞书(Lark)小程序。

版本要求

Taro 3.6.9+

请使用本插件的 1.1.4 或以上版本

Taro 3.3+

请使用本插件的 1.0.1 或以上版本

Taro 3.1/3.2

请使用本插件的 1.0 以下版本

Usage

安装

yarn add @tarojs/plugin-platform-lark

编译配置

在 config/index.js 中配置插件:

config = {
  // ...
  plugins: [
    [
      '@tarojs/plugin-platform-lark',
      // 插件选项
      {
        pc: false,
      },
    ],
  ],
};

项目配置

插件支持的项目配置文件是 project.lark.json 或者 project.tt.json (优先前者,项目根目录下手动创建即可),常用配置内容如下:

{
  "miniprogramRoot": "./",
  "projectname": "taro-lark",
  "description": "taro-lark",
  "appid": "touristappid",
  "setting": {
    "urlCheck": true,
    "es6": true,
    "postcss": false,
    "minified": false
  },
  "compileType": "miniprogram"
}

编译命令

package.json 添加命令:

{
  "scripts": {
    "build:lark": "taro build --type lark",
    "dev:lark": "npm run build:lark -- --watch"
  }
}
# yarn
$ yarn dev:lark
$ yarn build:lark

# npm script
$ npm run dev:lark
$ npm run build:lark

# 仅限全局安装
$ taro build --type lark --watch
$ taro build --type lark

# npx 用户也可以使用
$ npx taro build --type lark --watch
$ npx taro build --type lark

# watch 同时开启压缩
$ set NODE_ENV=production && taro build --type lark --watch # Windows
$ NODE_ENV=production taro build --type lark --watch # Mac

小程序开发者工具

执行上面任意一个编译命令,下载并打开飞书小程序开发者工具,导入项目,选择项目根目录下的 dist 目录(即编译配置 config/index.js 中 outputRoot 设置的目录)打开。

类型引入

如果当前 taro 项目使用 typescript 作为开发语言,需要在项目中 global.d.ts 文件头部添加如下一行:

/// <reference path="./node_modules/@tarojs/plugin-platform-lark/types/shims-lark.d.ts" />

平台判断

if (process.env.TARO_ENV === 'lark') {
  // ...
}

插件选项

| 选项名 | 值 | 默认值 | 是否必填 | 说明 | | ------ | :-----: | :----: | :------: | :--------------------------------------------: | | pc | boolean | false | 否 | 指定 Lark 小程序是否支持 PC 端的组件属性(注 1) | | entry | string | <空> | 否 | 指定 Lark 小程序编译时的入口文件(注 2) |

注:

  1. Lark 小程序支持在 PC 客户端上运行;举个例子,如果此时 view 组件要支持 bindmouseenter / bindmouseleave 这一对属性, 就需要开启这个选项。
  2. Taro 的默认小程序编译入口是 src 文件夹下的 app.(ts|js|tsx),可以设置 entry 为另一个文件的路径来修改 Lark 小程序编译入口,这里的路径是相对于项目编译配置的 sourceRoot (一般是 'src')的,且在入口文件的相同文件夹下需要存在同名的 config 文件(默认入口是 app.(ts|js|tsx),且存在 app.config.(ts|js))。

使用须知

Editor 组件

飞书小程序开发文档的描述不同,Editor 组件设置 onAtFinder 属性(对应原生的 bindatfinder 属性)时需要将 supportCustomAtFinder 属性(插件自定义属性,默认值为 false)设置为 true:

<Editor
  contents={{
    // ...
  }}
  plugins={PLUGINS}
  supportCustomAtFinder // 开关打开后 onAtFinder 才能生效
  onInput={fn}
  onReady={fn}
  onEditorClick={fn}
  onMentionSelect={fn}
  onMentionClick={fn}
  onAtFinder={(e) => {
    e.atFinderCallback([
      // ...
    ]);
  }}
/>