Skip to content

微信小程序项目- 实现一些常用效果、封装通用组件和工具类

License

Notifications You must be signed in to change notification settings

iotjin/jh-weapp-demo

Repository files navigation

jh-weapp-demo

A new weapp project - 实现一些常用效果、封装通用组件和工具类

代码不定期更新

注:真实开发项目注意按需引用。例如:组件、工具类、app.json的引用,可通过代码依赖分析做优化。


小程序码




实现的一些效果

  • ListView相关
  • GridView相关
  • eCharts分包导入,异步加载,多图表延时加载,中国地图效果
  • 腾讯地图使用,定位、地图选点、标注点连线计算距离
  • 上下拉刷新、分组吸顶ListView
  • 答题功能
  • excel导入导出
  • 表格、表单录入
  • 树结构数据展示
  • 热门搜索和历史搜索框
  • 侧滑筛选
  • 顶部搜索+分栏+侧滑、底部tabbar
  • custom-tabbar(动态设置、不闪屏)
  • 波浪背景动画
  • 登录页、功能页等UI页面

组件

  • 自定义导航条,支持设置左侧文字图片,网络本地背景图,渐变背景色,左侧和标题slot,返回home主页,导航条加搜索框(jh-navbarjh-custom-navbarjh-capsule-navbar
  • 公农历通用时间选择器。支持同步切换,设置默认选中时间、设置最大最小时间(公历范围:1901/01/01 ~ 2100/12/31),标题栏颜色(jh-lunar-picker
  • 年月日和年月日时分选择器(jh-ymd-time-picker
  • 月日周时分选择器(jh-time-picker
  • 字符串选择器(jh-string-picker
  • 中间输入弹框(jh-input-alert
  • 底部输入弹框(jh-input-picker
  • 自定义加载框(jh-loading-toast
  • 树形结构数据组件(jh-tree
  • 轮播图组件(jh-swiper-view
  • 左右时间切换(jh-time-switch
  • 下拉菜单(jh-dropdown-menu
  • 上下拉刷新组件(base-refresh-viewrefresh

工具类

  • wx.request网络请求封装(httpUtils.js
  • API管理(apiCongfig.js
  • 用户管理云函数请求Promise封装(dataManager文件夹)
  • AES、RSA加解密,SHA256、MD5加密,base64编码解码(encryptUtils.js
  • 时间格式转换、周岁计算(timeUtils.js
  • 公历农历转换、星座、属相、虚岁计算(lunarTimeUtils.js
  • 正则校验(checkUtils.js
  • 权限判断(authUtils.js
  • 安全随机数(commonUtils.js
  • 全局常量、变量(app.jsprojectConfig.js
  • 公共样式(styles文件夹
  • 网络监听,设备类型和刘海屏判断(app.js

注:

组件在jh-components文件夹
工具类在utils文件夹
网络请求和API管理在http文件夹
数据管理在dataManager文件夹
公共样式在styles文件夹


三方组件库

建议通过扩展库引入,不占用小程序包体积
# 通过 npm 安装
npm i @vant/weapp -S --production
需下载源码手动导入
# 通过 npm 安装
npm i wux-weapp -S --production

预览

部分页面效果如下: