yqform-wxapp
v0.0.15
Published
# Props:
Downloads
20
Readme
使用
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 的源。
## 目录结构
以下为推荐使用的目录结构,如果有必要开发者也可以自行做一些调整:
|--miniprogram_dev // 开发环境构建目录 |--miniprogram_dist // 生产环境构建目录 |--src // 源码 | |--components // 通用自定义组件 | |--images // 图片资源 | | | |--xxx.js/xxx.wxml/xxx.json/xxx.wxss // 暴露的 js 模块/自定义组件入口文件 | |--test // 测试用例 |--tools // 构建相关代码 | |--demo // demo 小程序目录,开发环境下会被拷贝生成到 miniprogram_dev 目录中 | |--config.js // 构建相关配置文件 | |--gulpfile.js
> 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
- 清空 miniprogam_dev 目录:
npm run clean-dev