mp-pixel

一个简单好用的小程序视觉还原辅助组件

安装 Installation

1、在微信小程序项目根目录中引入组件 NPM 包

npm install mp-pixel

2、微信开发者工具 --> 项目设置 --> 勾选“使用 npm 模块”

3、微信开发者工具 --> 工具 --> 构建 npm

4、在单独页面的 json 中引入（目前微信开发者工具不支持在 app.json 中全局引用定义组件，但不支持真机预览）

// page/index/index.json
{
    "usingComponents": {
        "pixel": "mp-pixel"
    }
}

5、在页面 wxml 中插入组件

<!-- pages/index/index.wxml -->
<pixel></pixel>

使用 Using

1、顶部：展开收起菜单 | 是否可见 | 是否锁定图层 | 是否图层反色

2、菜单：图层 x 点设置 | 图层 y 点设置 | 图层透明度

3、图片：新增图片 | 删除图片 | 选择图片

4、拖拽：图层非锁定状态下拖拽 | 菜单区拖拽

官方文档 official docs

官方 npm 支持文档

常见问题 FAQ

Q1: 无法构建 npm, 报”没有找到 node_modules 目录"（旧版）或者“没有找到可以构建的 NPM 包”（新版）。

A1: 项目中缺少 package.json 文件，可以使用 npm init 新建一个 package.json 文件，之后再进行构建即可。

Q2: 微信小程序真机扫描二维码预览时页面空白，但真机调试时页面正常

A2: 目前微信开发者工具不支持在 app.json 中全局引用定义组件，但不支持真机预览。也就是说若只在开发者工具中使用，可以在全局引入组件，方便快捷，但是若需要真机预览，则需取消全局引入，在需要的页面中分别引入。