<picker mode="multiSelector" value="{{dateTime1}}" bindchange="changeDateTime1" bindcolumnchange="changeDateTimeColumn1" range="{{dateTimeArray1}}"> <view class="text"> {{dateTimeArra…

声明 bug:由于此篇博客是在bindcolumnchange事件中做的值的改变处理,因此会出现当你选择时,没有点击确定,直接取消返回后,会发现选择框的值依然改变.造成原因:这一点就是由于在bindcolumnchange事件做的值改变处理造成.处理方法:如果需要确定后再改变值,请将bindcolumnchange事件中的处理操作放到bindchange事件中. 效果图 实现原理 利用微信小程序的picker组件的多列选择器实现! WXML <view class="tui-picker-…

最近在做微信小程序,技术栈为mpvue+iview weapp组件库. 因项目需求,要用到日期+时间选择器,iview组件库目前还未提供时间日期选择器的组件,小程序官方组件日期时间也是分开的,在简书上看到一位老哥用小程序官方的多列选择器在小程序上实现了日期+时间选择. 于是借鉴老哥的代码,换成了vue的写法,简单粗暴,用mpvue的小伙伴可以了解一下.闰年平年等细节问题有精力的小伙伴自己去搞. <template> <div> <picker mode="multi…

由于微信小程序的选择器为省市区选择器共3列 如我仅需要省市2列的选择器 就需要我们另寻他法找来找去没有合适的 只能自己写了 1. 首先我们把所需要的省数据 市县数据放在一个 p_c.js 文件里面,使用的时候可以通过util 来引用 //p_c.js module.exports = { "province": [ { "title": "上海市", "weight": 1, "evaluation_value&qu…

前言 最近接触微信小程序,再次之前公司用的前端框架是vue ,然后对比发现,开发小程序是各种限制,对于开发者非常不友好.各种槽点太多,完全吐槽不过来,所以在此不多说,打算下次专门写一篇文章吐槽一下.本次主要分享下小程序自定义组件的一点思路,小程序官方提供的框架比较简陋,原始,可复用较差,没有实现自定义组件的功能,这让很多使用vue ,react前端开发非常难受.网上存在各种吐槽,也有分享实现自定义组件的方法,但是要么过于复杂,要么是微信小程序升级之后就不兼容,反正是各种坑你没商量.在这分享下本人…

最近在做一个项目的时候遇到了这么一个问题,就是省市区的联动呢,我们需要自定义字典来设置,那么微信小程序自带的省市区选择就不能用了,经过三根烟的催化,终于写出来了.下面献上代码示例. 首先是在utils文件夹存入arealist.js文件,内容为: const areaList=[ { name:'河南', id:, parentId: },{ name:'浙江', id:, parentId: },{ name:'郑州', id:, parentId: },{ name:'新乡', id:, p…

这几天在看代码时遇到了一些问题:关于微信小程序的animation自定义动画自己没有系统的学习过 做动画需要我们将一个复杂的动作过程,拆解为一步一步的小节过程 微信中已经为我们写好了端口我们只需要实例化一个动画实例(实例代码如下) 先了解基础部分: 在看代码之前要先有个下面的基础了解 1)wx.createAnimation(object) 微信小程序实例化一个动画效果 2)export( ) 这个方法是导出动画数据(传递给animation属性) 3)step( ) 来表示一组动画完成 微信官…

1. 自定义组件 类似Vue或react中的自定义组件 小程序允许我们使用自定义组件的方式来构建页面 1.1 创建自定义组件 类似于页面, 一个自定义组件由json wxml wxss js 4个文件组成 可以在微信开发者工具中快速创建组件的文档结构 在文件夹内 components/myHeader, 创建组件 名为myHeader 1.1.1 声明组件 首先需要在组件的 json文件中进行自定义组件声明 myHeader.json { "component": true, } 1.…

前言 微信小程序默认给我们提供了一个省市区的picker选择器,只需将mode设置为region即可 <picker mode="region" bindchange="bindRegionChange" value="{{region}}" custom-item="{{customItem}}" > 因为小程序默认提供的省市区选择器只能保存名称,不能保存id,而且我也不需要选择三级城市,所以这里打算通过mode…

最近做的项目涉及相应的页面显示相应的顶部标题,所以就需要自定义头部导航了. 首先新建一个顶部导航公用组件topnav,导航高度怎么计算? 1.wx.getSystemInfo 和 wx.getSystemInfoSync 获取机器信息 2.screenHeight - windowHeight 计算标题栏高度 3.标题栏高度 , , app.js //app.js App({ onLaunch: function () { var that = this wx.getSystemInfo({ s…

目录 1,起因 2,优化成果 3,实现思路 4,完整代码 1,起因 哪天,正在蚂蚁森林疯狂偷能量的我被boss叫过去,告知我司要做一个线上直播公开课功能的微信小程序,博主第一次写小程序,复习了下文档,看了看腾讯云直播sdk,开工了. 写着写着就发现不对劲了, 这里面wx.showToast,wx.showModal,这一类的调用太多了,每次都写一遍太特么麻烦了,就拿wx.showToast做例子,产品要求是duration为2000ms,默认值是1500ms,且有时候不需要icon图标,有时候又…

微信小程序中不能直接操作window对象,document文档,跟html的树结构不相同. 实现类似导航的隐藏显示,如图效果: 点击网络显示或隐藏网络中包含的内容.其他类似. 如果是jquery很方便实现,能直接操作document.在微信小程序中实现思路是:在逻辑层定义变量,通过setData赋值. 方法一:通过变量直接赋值,给每一个要控制显示的view定义变量 .wxml 代码: <!--index.wxml--> <view class="navView" bi…

由于本人最近在开发小程序项目,期间对小程序有花点时间去研究,同时也找了网上大牛的一些案例,在这里分享部分自定义组件,部分代码是copy大牛案例的,有对小程序有兴趣的伙伴拿走,不谢! 源码下载地址:https://github.com/Jacky-MYD/WeChat-assembly.git 下面直接看组件的效果,代码我就不说了,有兴趣的可以直接下载源码研究: 1.个人认为比较完美的自定义Toast组件,效果如下: 2.抽屉层组件,类似于日期选择的功能,效果如下: 3.三级市联动组件,个人觉得官…

官方api:https://mp.weixin.qq.com/debug/wxadoc/dev/component/picker.html 上边是官网的api.小程序中,底部下拉滚动选择主要有这几种 下拉选择,时间选择,城市选择,多项选择. 1.index.js中: //index.js //获取应用实例 const app = getApp() Page({ data: { //设置初始值 array: ['中国', '美国', '巴西', '俄罗斯'], objectArray: [ { i…

描述 小程序ios   new Date('2019-08-14T08:00:00.000+0000')   显示为  <Date: null>. '2019-08-14T08:00:00.000+0000'     转为    Date new Date('2019-08-14T08:00:00.000+0000'.replace(/^(\d{4}-\d{2}-\d{2})T(\d{2}:\d{2}:\d{2}).*$/, '$1 $2 GMT+0000').replace(/-/g, '/…

2019-01-03 : 修复了日期day-1,新增了年月日(除去时分秒),删除了不必要的touchmove 新增: column: ""(年月日) 配置: pickerConfig: { endDate: true, // 是否需要结束时间,为true时显示开始时间和结束时间两个picker column: "", //可选的最小时间范围hour.min.sec."" dateLimit: true, //是否现在时间可选范围,false时可选…

/* JS代码部分 */ const date = new Date() const years = [] const months = [] const days = [] const hours = [] const minutes = [] var thisMon = date.getMonth(); var thisDay = date.getDate(); for (let i = 2017; i <= date.getFullYear() + 1; i++) { years.push…

服务端时间 db.serverDate(); 在操作数据库,上传数据的时候可以使用服务端时间 wx.cloud.init();//初始化云 const db = wx.cloud.database(); db.collection('todos').add({ // data 字段表示需新增的 JSON 数据 data: { // _id: 'todo-identifiant-aleatoire', // 可选自定义 _id,在此处场景下用数据库自动分配的就可以了 date: db.server…

直接上干货: 在utils目录下新建一个dateUtil.js,代码如下:(在需要用的地方引入这个js,调用相关方法传入对应参数就可以使用了) 该工具脚本,实用性很高,通用于各类前端项目,熟悉后亦可以自由扩展,使用中发现问题还请道友留言提示下,本人会同步更新: //日期转时间戳 function getUnixTime(dateStr){ var newstr = dateStr.replace(/-/g,'/'); var date = new Date(newstr); var time_s…

在IOS中时间显示NAN,后来才知道是由于安卓和IOS时间解析时间的时间格式不一致: 在安卓机中2018-06-21 16:00:21 IOS识别的格式是 2018/06/21: 所以在处理IOS机器中 通过字符串替换 replace(/-/g, '/'); 这样就可以了.…

let date = '2019-10-14'; var repTime = date.replace(/-/g, '/'); var timeTamp = Date.parse(repTime) / 1000;   ios不支持'-',所以要先转为'/'格式的日期…

1.下载阿里图标,解压出来之后有个.css文件 然后复制这css里面的所有代码 2.新建一个wxss文件,例如我新建的就是iconfont.wxss,然后把刚才复制的所有代码,复制到这个文件里面去.   3.在需要使用到图标的页面导入该wxss文件.例如: @import "../../public/iconfont/iconfont"; 这样在该wxml页面就可以使用图标了…

index.wxml <view class="swiperContainer"> <swiper bindchange="swiperChange" autoplay="{{autoplay}}" duration="{{duration}}" style='height: 660rpx;'> <block wx:for="{{imgUrls}}" wx:key="…

只需要用bindtap绑定一个点击后的操作(隐藏键盘): wx.hideKeyboard()…

废话不多说,直接上方法: 首先 npm 安装 mpvue-wxparse npm i mpvue-wxparse 接下来:使用 <template> <div> <wxParse :content="article" @preview="preview" @navigate="navigate" /> </div> </template> <script> import wx…

wxml <picker mode="multiSelector" bindchange="bindMultiPickerChange2" bindcolumnchange="bindMultiPickerColumnChange2" value="{{multiIndex}}" range="{{objectMultiArray}}" range-key="{{'name'}}"…

一.什么是选择器 选择器就是选择标签所用样式的模式,即:以什么方式设置样式. 二.微信小程序的样式选择器 .calss就是选择器的一种 三.选择器的优先级 element表示样式元素:.element表示class:#element表示id,style表示内联:!import提升权重 例如:…

目录 1,前言 2,说明 3,核心代码 1,前言 分享一个完整的微信小程序自定义Tabber,tabber按钮可以设置为跳转页面,也可以设置为功能按钮.懒得看文字的可以直接去底部,博主分享了小程序代码片段和GitHub地址. 2,说明 由于微信小程序自带的Tabber功能比较单一,比如要做到中间是一个突出的圆形扫一扫按钮,就需要自定义Tabber了. 博主创建了一个Tabber组件,自己写的样式,在需要用到的页面引入组件. 组件使用了position: fixed定位到底部,所以在用到组件的页面…

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 一:推荐地址集合:(初入门者请先看这里) 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=147643467…

作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有.商业转载请联系作者获得授权,非商业转载请注明出处. 微信小程序正式公测, 张小龙全面阐述小程序,定档1月9日上线(附90分钟演讲全文) ... 前言:新人第一坑,跳坑指南:修改后,必须保存:ctrl+S: 1:官方工具:https://mp.weixin.qq.com/debug/w ... tml?t=1476434678461 2:简易教…