lish_ui_l v0.0.5
miniprogram-custom-component
小程序自定义组件开发模板:
- 支持使用 less 语法编写 wxss 文件
- 使用 webpack 构建 js
- 支持自定义组件单元测试
- 支持 eslint
- 支持多入口构建
使用
- 使用命令行工具进行初始化
- 直接从 github 上 clone 下来
开发
- 安装依赖:
npm install
- 执行命令:
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 变动并进行拷贝。
生成的 miniprogram_dev 目录是一个小程序项目目录,以此目录作为小程序项目目录在开发者工具中打开即可查看自定义组件被使用的效果。
进阶:
- 如果有额外的构建需求,可自行修改 tools 目录中的构建脚本。
- 内置支持 webpack、less 语法、sourcemap 等功能,默认关闭。如若需要可以自行修改 tools/config.js 配置文件中相关配置。
- 内置支持多入口构建,如若需要可自行调整 tools/config.js 配置文件的 entry 字段。
- 默认开启 eslint,可自行调整规则或在 tools/config.js 中注释掉 eslint-loader 行来关闭此功能。
发布
ps: 发布前得确保已经执行构建,小程序 npm 包只有构建出来的目录是真正被使用到的。
- 如果还没有 npm 帐号,可以到npm 官网注册一个 npm 帐号。
- 在本地登录 npm 帐号,在本地执行:
npm adduser
或者
npm login
- 在已完成编写的 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 工具集进行测试,点击此处查看使用方法。在测试中可能需要变更或调整工具集中的一些方法,可在 test/utils 下自行实现。
其他命令
- 清空 miniprogram_dist 目录:
npm run clean
- 清空 miniprogam_dev 目录:
npm run clean-dev
中创干货库插件
表单中企业名称检索插件
- 1:引入插件通过 wx:if 控制插件的显示隐藏
- 2:内置属性 width 控制插件的长度 默认为 100% 传入的值为字符串(例:width=”100rpx“)
- 3:内置属性 my-property 需要传入的值为后端返回的数据列表 数组形式 (例: my-property="{{comNameList}}" )
- 4:点击事件绑定 bindmyevent 返回对应的企业名称 对象格形式 (例: bindmyevent="onSelectEvent" )
干货库小程序裂变组件
- isLogin - Booler —— 是否显示裂变侧边栏标签(是否登录)
- isLeft - Booler —— 是否显示裂变侧边栏标签 (当前是否在活动进行中)
- showPagebg ———— String(1/2) ———— 显示正常参与活动弹窗/活动被撤回-网络请求失败
- popupType ———— Strinng(1-8)————字符串1到8 分别对应 参与/助力/助力成功/活动未结束但奖品已发完/活动结束/重复助力/助力人数超出/参与成功-领奖
- fissionInfo ———— Object{} ———— 裂变详情信息
- participant —— Object{} ———— 参加裂变人信息
- passivityName ——String ———— 被助力人的昵称
- prefixUrl —— String —— 头像的前缀地址
- passivityPhoto —— String ———— 被助力人头像
- assistants —— Array(obj)———— 助力人信息列表
// 示例:需要两人助力,目前只有一个人助力成功, 格式如下
assistants = [
{
assistantCode: "byaw2z8qz29q8h"
assistantPhoto: "/test-201210AG06ATY8ZC/5c35a26052384fc58635b4023bd78947/photo/defaultPhoto4.png"
assistantUserName: null
fissionId: 85
gmtCreate: "2023-03-15 10:09:16"
id: 15
participantCode: "btadujsvvrqp5z"
participantUserName: "测试昵称dev"
remark: null
},
{
ShowPeople:"none"
}
]
/**
* 格式化裂变助力人数
* @num {*} 助力总数
* @arr {*} 助力人列表
*/
export function resetHelp(num,arr) {
let newarr = []
for (let i = 0; i < num; i++) {
if (arr[i]) {
newarr.push(arr[i])
} else {
newarr.push({ShowPeople:"none"})
}
}
return newarr
}
- fisssionTime -- 裂变开始与结束时间(活动时间展示) 2023/03/15 17:22 - 2023/03/25 00:00
/**
* 格式化裂变助力人数
* @t1 {*} 开始时间
* @t2 {*} 结束时间
*/
export function processingTime(t1,t2){
let tm1 = new Date(t1)
let tm2 = new Date(t2)
let obj1 = {
year:tm1.getFullYear(),
month:tm1.getMonth()+1<10?'0'+(tm1.getMonth()+1):tm1.getMonth()+1,
day:tm1.getDate()<10? '0' + tm1.getDate():tm1.getDate(),
hours:tm1.getHours()<10? '0' + tm1.getHours():tm1.getHours(),
minutes:tm1.getMinutes()<10? '0' + tm1.getMinutes():tm1.getMinutes(),
}
let obj2 = {
year:tm2.getFullYear(),
month:tm2.getMonth()+1<10?'0'+(tm2.getMonth()+1):tm2.getMonth()+1,
day:tm2.getDate()<10? '0' + tm2.getDate():tm2.getDate(),
hours:tm2.getHours()<10? '0' + tm2.getHours():tm2.getHours(),
minutes:tm2.getMinutes()<10? '0' + tm2.getMinutes():tm2.getMinutes(),
}
let NewTime = obj1.year+'/'+obj1.month+'/'+obj1.day+' '+obj1.hours+':'+obj1.minutes+' - '+obj2.year+'/'+obj2.month+'/'+obj2.day+' '+obj2.hours+':'+obj2.minutes
return NewTime
}
- prizeVOs——Object{}———— 裂变奖品信息
- invitedPeopleNum————Int———— 在邀请 1 位好友就可以获得奖品
- bindmyopen————function(默认e)————绑定悬浮窗点击事件用于跳转或打开分享弹窗
- bindmyHelp————function(默认e)————点击为TA助力
- bindmyJoin————function(默认e)————助力成功点击我也要加入
- bindmyEmpty————function(默认e)————活动未结束但奖品已发完
- bindmyEnd————function(默认e)————活动已结束
- bindrepetition————function(默认e)————重复助力/助力人数超出(我也要参与)
- bindmyAccept————function(默认e)————立即领取奖品
- bindmyReload————function(默认e)————活动撤回(点击重新加载)
bindmyClose————function(默认e)————当弹窗为点击助力状态时,e.detail携带一个对象 {type: "close", for: "helpTa"} 区分事件来源 关闭裂变活动弹窗
查看文章详情
fissionid: options.fissionid handleGetDetails(e) { let { id,fissionid} = e.currentTarget.dataset; console.log(e,"跳转详情",fissionid); wx.navigateTo({ url: "/pages/newActivityDetails/index?contentId=" + id + '&fissionid=' + fissionid, }); }, <view class="activity_item" data-id="{{item.contentId}}" data-fissionId="{{item.fissionId}}" bindtap="handleGetDetails">