Yqform-wxapp NPM

使用

Props:

参数	说明	类型	默认值
form	表单内容	object	...
currentKey	当前选中项的 key 值	string	''
pageIndex	当前页码	number	0
answer	题目答案	object	...
canModify	是否能够修改题目答案	boolean	true
noAnswer	不合法的题目 key	String	''

event:

bind:goPage="goPage" bind:onAddFile="handleFileUpload"

//定位没有填写题目的页数
goPage(e) {
if(e?.detail){
this.setData({
currentPageIndex : e.detail.index
}) }

}

//上传文件或图片
handleFileUpload(e) {
const {
file,
fileEvent
} = e.detail
console.log('handleFileUpload', file, e.detail);

...
const fileObj = {
          name: File.name,
          url: File.url,
        }
        console.log('fileObj', fileObj);
        fileEvent(fileObj)//上传成功回传fileObj(需要有name和url)

},

获取问卷填写信息

getAnswer() { let yform = this.selectComponent('#yform') let answer_form= yform.getAnswer() console.log(answer_form);//获取用户填写的数据 }

如果有多页可传递 pageIndex 当前页码切换页面

// form结构 默认值
form:{
    spec: {
        name: '',
        theme: {
            name: 'show',
            color: '#07c160',
            footer: '',
        },
        unit: '页',
        groups: [
            {
                gid: 'templeteData',
                spec: {
                    title: '',
                    subtitle: '',
                    unit: '页',
                },
                items: [],
            }
        ]
    }
}
//answer结构 默认值
answer: {
      // 题目key
      key1: [{
        id: '', // 答案key
        content: '', // 答案值，为文件或图片时为访问url
      }]
    },

开发

安装依赖：

2. 执行命令：

npm run dev

默认会在包根目录下生成 miniprogram_dev 目录，src 中的源代码会被构建并生成到 miniprogram_dev/components 目录下。如果需要监听文件变化动态构建，则可以执行命令：

npm run watch

> ps: 如果 minirpogram_dev 目录下已存在小程序 demo，执行`npm run dev`则不会再将 tools 下的 demo 拷贝到此目录下。而执行`npm run watch`则会监听 tools 目录下的 demo 变动并进行拷贝。

3. 生成的 miniprogram_dev 目录是一个小程序项目目录，以此目录作为小程序项目目录在开发者工具中打开即可查看自定义组件被使用的效果。

4. 进阶：

- 如果有额外的构建需求，可自行修改 tools 目录中的构建脚本。
- 内置支持 webpack、less 语法、sourcemap 等功能，默认关闭。如若需要可以自行修改 tools/config.js 配置文件中相关配置。
- 内置支持多入口构建，如若需要可自行调整 tools/config.js 配置文件的 entry 字段。
- 默认开启 eslint，可自行调整规则或在 tools/config.js 中注释掉 eslint-loader 行来关闭此功能。

## 发布

> ps: 发布前得确保已经执行构建，小程序 npm 包只有构建出来的目录是真正被使用到的。

1. 如果还没有 npm 帐号，可以到[ npm 官网](https://www.npmjs.com/)注册一个 npm 帐号。
2. 在本地登录 npm 帐号，在本地执行：

npm adduser

或者

npm login

3. 在已完成编写的 npm 包根目录下执行：

npm publish

到此，npm 包就成功发布到 npm 平台了。

> PS：一些开发者在开发过程中可能修改过 npm 的源，所以当进行登录或发布时需要注意要将源切回 npm 的源。

## 目录结构

以下为推荐使用的目录结构，如果有必要开发者也可以自行做一些调整:

> PS：对外暴露的 js 模块/自定义组件请放在 src 目录下，不宜放置在过深的目录。另外新增的暴露模块需要在 tools/config.js 的 entry 字段中补充，不然不会进行构建。

## 测试

- 执行测试用例：

npm run test

- 执行测试用例并进入 node inspect 调试：

npm run test-debug

- 检测覆盖率：

npm run coverage

测试用例放在 test 目录下，使用 **miniprogram-simulate** 工具集进行测试，[点击此处查看](https://github.com/wechat-miniprogram/miniprogram-simulate/blob/master/README.md)使用方法。在测试中可能需要变更或调整工具集中的一些方法，可在 test/utils 下自行实现。

## 其他命令

- 清空 miniprogram_dist 目录：

npm run clean