微信小程序
文章平均质量分 53
西半球
好记性不如烂笔头
展开
-
微信小程序 - 公农历通用时间选择器组件
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类小程序码序最近做了个小程序,需要用到支持公农历的通用时间选择器,找了一圈没有现成的,只能自己撸一个,最终有了这个组件jh-lunar-picker其中公农历互转的库使用的是jonline/calendar.js支持功能公历和农历切换同步设置默认选中时间设置默认展示公历或农历设置最小时间(公历),支持 1901/01/01 | 1901-01-01 | 1901年01月01日设置最.原创 2022-04-20 16:19:51 · 1470 阅读 · 1 评论 -
微信小程序 - 云开发轮询实现定时推送订阅消息
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类小程序码前言受众:已有小程序和云开发经验(没有的话照着流程和官方文档也应该可以实现)关于小程序的消息推送,我了解到的有以下几种实现方式1、模板消息,已于2020 年 1 月 10 日下线2、通过服务端的统一服务消息下发推送,因为模板消息现已下线,现只支持公众号。统一服务消息官方文档2、通过关注公众号通过公众号实现长期的消息推送3、订阅消息,包含一次性订阅消息和长期订阅消息订阅消息官.原创 2022-04-14 12:59:08 · 5033 阅读 · 8 评论 -
微信小程序 - 腾讯地图使用和选点连线计算距离
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类小程序码原创 2022-04-13 15:27:24 · 6581 阅读 · 2 评论 -
微信小程序 - 云开发data exceed max size 解决方案
在使用云开发时,对单个字段是数组类型的数据进行更新操作时,报了一个错(只在真机出现),data exceed max size,因为小程序对单个字段的数据进行提交或者更新时,对数据的大小有限制,错误信息里也没有提示具体上限多少,最终对提交的数据进行拆分,改为多个请求进行提交相关报错文章:小程序云开发:data exceed max size 解决方案// 根据长度n把数组拆分成n个小数组function splitArrayByLength(array, subGroupLength) { .原创 2021-11-27 22:47:47 · 1280 阅读 · 0 评论 -
微信小程序 - 登录获取openid和用户信息(适配getUserProfile)
微信小程序中如果需要使用微信的用户信息建立自己的用户体系,需拿到唯一标识openid,然后通过getUserProfile(基础库2.10.4以上可用)或者getUserInfo(基础库2.10.4以下可用)获取用户信息,进而通过微信的用户信息建立自己的用户体系。如果只是单纯展示用户头像昵称,可直接通过<open-data>组件进行渲染1、获取openidopenid通过云函数获取比较简单方便,我起的云函数方法名为login,代码实现记得文件夹右击选择 “创建并部署”1.1、云函.原创 2021-08-28 16:08:28 · 9017 阅读 · 0 评论 -
微信小程序 - 云开发用户数据的增删改查
在微信小程序中使用云开发,首先要开通云开发环境,然后创建一个User_Table表,下面的方法是通过小程序端调用的,其实也可以通过云函数进行实现用户 数据管理类/* 用户 数据管理类 *//* 使用方法 :1.在要使用的js文件导入 const UserDataManager = require('../dataManager/userDataManager');2. 调用 UserDataManager.addUser().then(res => { }).原创 2021-08-28 14:53:15 · 857 阅读 · 0 评论 -
微信小程序组件 - 中间底部弹出输入弹框
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类一、 jh-input-alert中间输入弹框,可设置最大输入长度,单行多行显示单行<jh-input-alert title='输入框标题' placeholder='请输入' maxlength='10' bind:cancel='cancel' bind:confirm='confirm' wx:if='{{ showDialog2 }}' />多行<jh-i.原创 2021-08-28 14:18:14 · 4846 阅读 · 3 评论 -
微信小程序组件 - 时间和单列文字选择器
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类小程序有时需要进行一些时间选择或类型选择,便封装了一些选择器组件,包含月日周时分时间选择器,年月日,年月,年月日时分选择器,单列文字选择器一、 jh-time-picker月日周时分时间选择器,不显示年份,主要针对近期时间进行选择wxml<jh-time-picker id='JhTimePicker' isShow='{{isShowPopView2}}' title="请选择时.原创 2021-08-28 11:20:00 · 962 阅读 · 0 评论 -
微信小程序组件 - navbar自定义导航条(支持返回home主页)
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类小程序中默认的导航条只能设置背景色,标题等效果有限,因此需要使用自定义导航条,源码请在demo查看jh-navbajh-navbar:基于vant的navbar二次封装,支持设置渐变背景色、网络、本地背景图,左侧文字,左侧图片,左侧、标题solt,隐藏返回按钮默认效果<jh-navbar title="渐变导航" />渐变背景色<jh-navbar bgColor.原创 2021-08-19 15:06:44 · 5178 阅读 · 0 评论 -
微信小程序 - AES、RSA、SHA256、MD5、base64等加密算法封装使用
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类在微信小程序使用加密算法,需要对js中使用的对称加密算法需要进行改造,demo中对每一种加密方法进行封装,最终通过encryptUtils.js 工具类进行二次封装,然后统一调用。源码请查看demo在线AES网站 : https://tool.lmeee.com/jiami/aes在线RSA网站 : https://www.bejson.com/enc/rsa/用法:const Encry.原创 2021-08-16 13:23:33 · 1718 阅读 · 0 评论 -
微信小程序 - 时间转换工具类timeUtils
GitHub Demo 地址: jh-weapp-demo 实现一些常用效果、封装通用组件和工具类使用方法:const TimeUtils = require('../../utils/timeUtils.js');//时间戳转指定格式时间TimeUtils.Jh_timeStampToTime(1554803832, '{y}年{m}月{d}日 {h}:{i}:{s} 星期{w}') 1487065320000timeUtils.js/* 时间工具.原创 2021-08-16 13:10:30 · 1705 阅读 · 0 评论 -
微信小程序 - 自定义tabBar组件,可动态设置、更新,无闪烁
[demo 地址: https://github.com/iotjin/weapp-custom-tabbar)效果图:实现步骤1、custom-tab-bar导入项目根目录 2、app.json中设置"custom": true 3、在tabPage的onShow方法中调用更新方法原创 2021-02-02 14:10:31 · 1949 阅读 · 1 评论 -
微信小程序 - eCharts- 展示中国地图
demo 地址: https://github.com/iotjin/Jh_weapp效果图:js 代码:import * as echarts from '../../../ec-canvas/echarts';import geoJson from '../../../ec-canvas/mapData.js';const app = getApp();let myChart1 = null;let myChart2 = null;Page({ /** * 页面的初.原创 2021-01-06 16:19:40 · 2405 阅读 · 0 评论 -
微信小程序 - eCharts- x轴换行和旋转45°
demo 地址: https://github.com/iotjin/Jh_weapp效果图:js 代码:import * as echarts from '../../../ec-canvas/echarts';const app = getApp();let myChart1 = null;let myChart2 = null;Page({ /** * 页面的初始数据 */ data: { ec1: { lazyLoad: true .原创 2021-01-06 16:17:17 · 1794 阅读 · 1 评论 -
微信小程序 - 空数据、网络加载失败 组件
demo 地址: https://github.com/iotjin/Jh_weapp效果图:##使用说明1. usingComponents 添加 "EmptyView": "./components/empty-view/index",2. wxml 添加组件//不带按钮<EmptyView wx:if="true"></EmptyView><EmptyView wx:if="true" info="暂无数据2"></EmptyV.原创 2020-11-19 11:17:11 · 2347 阅读 · 0 评论 -
微信小程序 - excel通过云函数导入云数据库
https://blog.csdn.net/qiushi_1990/article/details/103032681https://www.imooc.com/article/292184?block_id=tuijian_wz原创 2020-08-08 11:52:58 · 4273 阅读 · 4 评论 -
微信小程序 - excel中的日期处理
excel中的时间是44044.7673611111,需要处理之后才可以正常使用,实际使用中以下方法 在云函数和小程序中调用时间差了8个小时,按需使用/* excel 时间转换 * num 44044.7673611111(2020/8/1 18:25:00) * return 2020/08/01 18:25:00 */ Jh_excelDateToYMDHMS(num) { var utc_days = Math.floor(num - 25569); v.原创 2020-08-08 11:40:57 · 918 阅读 · 0 评论 -
微信小程序 - 级联查询
// db.collection('Score_Table')// .aggregate()// .match({// paperId: '84e72bb95f263a98004820c865f5d8c9'// })// // .count()// .limit(10)// .end()db.collection('Score_Table') .aggregate() .match({ paperId: '84e72bb95f263a98004820c原创 2020-08-05 14:16:35 · 827 阅读 · 0 评论 -
微信小程序 - 数据转excel下载并复制链接
demo 地址: https://github.com/iotjin/Jh_weapp npm install node-xlsx云函数// 云函数入口文件// npm install node-xlsxconst cloud = require('wx-server-sdk')cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV})//操作excel用的类库var xlsx = require('node-xlsx');const db.原创 2020-08-04 11:05:33 · 2280 阅读 · 1 评论 -
微信小程序 - eChart多个图表异步加载
demo 地址: https://github.com/iotjin/Jh_weapp效果图:echart我这里是分包加载的js 代码:import * as echarts from '../../../ec-canvas/echarts';let barChart = null;let pieChart = null;let barChart2 = null;Page({ /** * 页面的初始数据 */ data: { ec1: { .原创 2020-07-27 10:48:15 · 1951 阅读 · 0 评论 -
微信小程序组件 - vant封装年月、年月日、年月日时分时间选择器
demo 地址: https://github.com/iotjin/Jh_weapp效果图:使用方法 :1. usingComponents 添加 "JhYMTimePicker": "../../JhTools/JhYMTimePicker/JhYMTimePicker"2. wxml 添加组件<JhYMDTimePicker isShowTimePicker='{{isShowTimePicker}}' selectTime="2020-02-02" bind:on.原创 2020-07-24 16:16:37 · 2989 阅读 · 0 评论 -
微信小程序 - 生成指定位数不重复的id
function getRandomCode(length) { if (length > 0) { var data = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z",.原创 2020-07-24 16:01:20 · 1579 阅读 · 0 评论 -
微信小程序 - iPhoneX 刘海屏适配
微信小程序适配 iPhone X 总结方法一 js直接调用wx.getSystemInfoSync底部<view class='btn' style='padding-bottom:{{ isIphoneX ? 68 : 0 }}rpx;'>底部</view>1判断是否是iPhoneXconst app = getApp() Page({ data: { isIPhoneX:false, }, onLoad: function () { .原创 2020-07-23 18:31:44 · 4276 阅读 · 0 评论 -
微信小程序 - view hover-class点击反馈
<view hover-class="item-hover" hover-stay-time="100">按钮</view>.item-hover { background: rgb(230, 230, 230);}微信小程序中,可以用 hover-class 属性来指定元素的点击态效果。但是在在使用中要注意,大部分组件是不支持该属性的。目前支持 hover-class 属性的组件有三个:view、button、navigator。不支持 hover-class原创 2020-07-22 18:47:22 · 2167 阅读 · 0 评论 -
微信小程序 - Vant 实现自定义nav
demo 地址: https://github.com/iotjin/Jh_weapp效果图:js 代码:Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { }, ClickBack(){ wx.navigateBack({ complete: (res) => {}, }) .原创 2020-06-23 10:44:40 · 2771 阅读 · 0 评论 -
微信小程序 - 固定头部 列表滚动header吸顶,滚动更新数据
demo 地址: https://github.com/iotjin/Jh_weapp效果图:吸顶主要是 position: sticky;.header { background: rgb(230, 230, 230); height: 25px; line-height: 25px; padding-left: 30rpx; font-size: 13px; align-items: center; position: sticky; top: 0;}.原创 2020-06-22 09:59:51 · 3655 阅读 · 0 评论 -
微信小程序 - 实现搜索界面(带热搜、搜索历史和结果页)
demo 地址: https://github.com/iotjin/Jh_weapp效果图:wxml 代码:<van-search value="{{ inputValue }}" maxlength="15" placeholder="请输入搜索关键词" show-action bind:search="onSearch" bind:cancel="onCancel" bind:change="onChange" /><view class='{{isShowResul.原创 2020-06-19 18:56:16 · 7385 阅读 · 2 评论 -
微信小程序组件 - 月日周时分时间选择器
demo 地址: https://github.com/iotjin/Jh_weapp效果图:demo代码:js 代码:Page({ /** * 页面的初始数据 */ data: { isShowPopView2:false, currentDateStr1:'', currentDateStr2: '', }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { .原创 2020-06-16 15:02:13 · 1105 阅读 · 0 评论 -
微信小程序 - 列表滚动头部吸顶
demo 地址: https://github.com/iotjin/Jh_weapp效果图:吸顶主要是 position: sticky;.header { background: rgb(230, 230, 230); height: 25px; line-height: 25px; padding-left: 30rpx; font-size: 13px; align-items: center; position: sticky; top: 0;}.原创 2020-06-15 18:31:20 · 1515 阅读 · 0 评论 -
微信小程序 - tab分页实现
demo 地址: https://github.com/iotjin/Jh_weapp效果图:引用微信 tabs ,命令行执行之后重新构建npmnpm i @miniprogram-component-plus/tabs --savejs 代码:Page({ /** * 页面的初始数据 */ data: { active: 1, arr:['1','2','3','4'], tabs: [], arr2: [], activeT.原创 2020-05-10 18:00:53 · 1979 阅读 · 0 评论 -
微信小程序组件 - 下拉菜单,可点击空白隐藏
demo 地址: https://github.com/iotjin/Jh_weapp效果图:demo代码:js 代码:Page({ /** * 页面的初始数据 */ data: { arrowSelectArray: [{ "id": "1", "text": "11" }, { "id": "2", "text": "22" }] }, /** * 生命周期函数--监听页面加载.原创 2020-05-10 17:52:58 · 4411 阅读 · 0 评论 -
微信小程序 - 使用ES6 Promise 封装网络请求
JhHttpUtils.js 对 wx.request 进行封装 ,APICongfig.js对API进行管理,使用时可引用APICongfig 暴露出来的请求名,进行请求,便于维护。demo 地址: https://github.com/iotjin/Jh_weappAPICongfig 使用方法:JhHttpUtils 使用方法:JhHttpUtils.js 代码:/...原创 2020-04-28 20:51:25 · 1855 阅读 · 0 评论 -
微信小程序 - ListView3 - 分页加载
demo 地址: https://github.com/iotjin/Jh_weapp效果图:js 代码:var index = 0;Page({ /** * 页面的初始数据 */ data: { dataArr: [] }, requestData: function (isLoadMore) { if (isLoadMore){...原创 2020-04-25 18:40:17 · 629 阅读 · 0 评论 -
微信小程序 - ListView2 - 动态数据
demo 地址: https://github.com/iotjin/Jh_weapp效果图:js 代码:Page({ /** * 页面的初始数据 */ data: { dataArr: [] }, requestData: function() { wx.showLoading({ title: '加载中', }...原创 2020-04-25 18:35:19 · 2388 阅读 · 0 评论 -
微信小程序 - ListView1 - 静态数据
demo 地址: https://github.com/iotjin/Jh_weapp效果图:js 代码:Page({ /** * 页面的初始数据 */ data: { dataArr: [ { text: 'text1', money:'12.9' }, { text:...原创 2020-04-25 18:28:30 · 1603 阅读 · 0 评论 -
微信小程序 - 请求接口提示域名不合法
小程序请求API提示域名不合法,有两种解决办法,一是在后台进行配置域名,二是不进行域名验证一、后台配置登陆小程序后台 选择 > 开发 > 开发设置 > 服务器域名 ,添加域名二、 不验证域名在开发工具中 选择 详情> 本地设置> 勾选 不校验合法域名...原创 2020-04-25 14:08:20 · 3442 阅读 · 0 评论 -
微信小程序 引用 vant-weapp 没有找到 node_modules 目录 解决办法
一、cmd 打开终端, cd到项目路径下,执行下面几步 1、(初始化npm项目):npm init 2、(生成package-lock.json,记录使用的第三方插件):npm install --production 3、(引入第三方组件 有赞): npm i vant-weapp -S --production第1步操作后一直按回车,直到...原创 2019-09-21 21:03:33 · 11364 阅读 · 0 评论