carbonzhao的专栏

随着前端业务越来越复杂，自定义表单数据量比较大，每条数据的id生成则至关重要。想到前期IOS中实现的雪花算法ID，照着其实现JS版本，供大家学习参考。

官方组件非常局限，很多组件没有或者是生态也没有成熟的案例，导致开发人员，不得不从头去写去实现，经过测试此组件功能正常，没有什么问题，特提供出来，共同进度。对于IT发展及技术的执着，周末闲来无事，就写了一个小组件，目的是提升自我的同时，熟悉一下小程序的开发流程，不至于给忘掉以至于生疏无法上手。指定组件大小及进度、进度环大小！

微信小程序 javascript MD5 支持汉字

// An highlighted block<canvas class="myCanvas" catchtouchstart="XXX" catchtouchend="XXX" catchtouchmove="XXX" canvas-id="canvas" > </canvas>在页面的js文件中增加以下方法：纯粹是为了拦截事件而已！XXX:function(e){ }同时在页面的json文件中增加："disableScroll":true.

最近做小程序，有这么一个小需求，列表行上所能放的子元素的数量是不固定的，这就要求需要动态的为当前行处理动态width，如下页面显示：注意这里需要声明一下，为了避免频繁的写重复的dom,我将页面高度抽象化，所有显示项放在数据中可配置：如下：根据不同的type给一个固定的dom就行了，同一个页面，input输入框显示是一样的，下拉显示是一样等！！！这样我只需要在页面上做几个不同的if分支即可，根据type渲染不同的但却行为高度一致的行UI！这里本可以直接给性别分别50%就完事了，但为了精益求精，

最近在搞小程序方面的开发时，开发环境日期格式化显示正常，但是在ios的真机运行时，所有的日期格式化显示为nan了，这莫名其妙的。。经过排查，原来是ios的JS的Date类有问题：当我们new Date(time)的时候，如果这个time格式为yyyy-mm-dd,即new Date(‘2021-01-01’)时，返回的对象是空对象！我们需要将分割符换为'/'即可：let date = '2021-01-01 12:00:00';date = date.replace(/-/g, "/");

当我们在A页面中使用了B组件的时候，通常情况下的子组件的生命周期已经满足我们的使用。但是以下的组件功能需求，通过这种普通的生命周期，我们是组件生命周期lifetimes和pageLifetimes是无法满足需求的。先来看看腾讯给出的组件生命周期文档：组件的生命周期，指的是组件自身的一些函数，这些函数在特殊的时间点或遇到一些特殊的框架事件时被自动触发。其中，最重要的生命周期是createdattacheddetached，包含一个组件实例生命流程的最主要时间点。组件实例刚刚被创建好...

因为项目风格要求，需要自定义导航栏，所以需要将默认的导航栏隐藏掉。隐藏的代码 倒很简单，只需要在相应的页面json文件中添加以下代码即可："navigationStyle":"custom"然后问题出来了。。因为产品太多，需要将A产品的部分页面移植到B产品上，为了效率肯定是直接将A项目中的页面复制到B项目中，结果挂屁了。。。移植过来的页面自定义导航全部无效了。。这他奶奶的是什么情况？出来走两步搞笑呢？经过排查，终于找到问题！发现问题了吗？原因是：我们直接复制过来的页面根本没有..

左滑删除在原生APP上的用户体验比较好，本节我们就来学学如何在微信小程序中使用左滑删除。实现效果如下：实现思路：在列表上的单元行中实现一个删除的布局，默认显示到行的最右侧大于等于100%处，这样，在未触发左滑事件的时候就不会显示出来，当左滑后，将列表上的内容向左动态滑动若干距离，我们写出来的删除视图亦向左滑动同样的距离即可。这个滑动的距离应该是删除视图的宽度！这样就不会出现滑动删除出现后出现空白间距。下面是代码：.wxml页面代码<view class="view..

在很多APP应用内，你可以看到多图轮播这种形式到处都是，占用最少的空间，显示更多的内容并且用户体验还相当棒。今天我们就来说说如何在微信小程序中使用多图轮播。打开我们的演示项目，同时打开微信小程序开发者中心文档：微信开发者中心轮播图组件文档可以看到，微信已经实现了相应的组件，我们只需要学会如何使用即可。这里重点说说：和原生的实现轮播控件不一样的是微信小程序的轮播必须是父容器加子项目的形式共同构成轮播的效果。而原生控制基本上是给scrollView添加子view就可以了。其实严格来说，实现方案大

相信每位同学已经注意到，默认的小程序页面，导航栏始终为白色，进行配置时特别难受。而我们期望的页面应该是调试可配置、可修改的，根本不同的功能，导航栏应该是高度可修改的。基于此问题，不得不进行导航栏的自定义实现，而此功能是通用性功能，所以，我们需要将其封装为组件，实现其公共属性，任何页面使用时，进行参数配置即可。包括背景纯色、背景渐变色、背景使用图片、标题大小、标题颜色、返回按钮标题、返回按钮标题颜色、返回按钮不显示标题、返回按钮图标等等。我们预想的目标应该是这样的：有了目标，我们就为此目标努力奋斗！

微信小程序亦是手机应用程序，只是它依附于微信这个APP，但是它的行为及展示布局依然参考原生APP的方式和人机交互。唯一不同的是它实现页面使用的是web技术而已。展现给用户或终端的视觉感受基本上一样。而应用程序大体分为单页面应用和多标签(tabbar),顾名思义，单页面应用就是APP打开后只有一个主页面，所有业务或者是逻辑均在此主页面后续显示。而多标签则意味着app打开后，会有多个不同功能的主页面。比如微信打开后，app下方就会有微信、通讯录、发现、我，这4个标签，点击不同标签进入不同的功能页...

停顿了好些天没有继续实战教程了，主要是因为公司iOS项目太多了，每天忙的不可开交，所以，博客就写的少了，闲暇时间还是抽出来时间继续实战，一来分享学习过程，二来也算是巩固技能，三来也是让大家多熟悉页面不同布局的实现。 我们前几节已经实现了通过手机号加密码的方式、微信授权的方式进行登录的相关的逻辑，现在我们来实现另一种登录方式：手机号加验证码登录。 在登录页面，我们再增加一个按钮，点击后跳转到手机号和验证码的登录页面。为了使用页面好看，不过于臃肿，我们将以密码登...

上一节，我们实现了简单的通过用户名和密码调用接口进行登录的实战，但是在小程序中，有个特殊的情况，就是很少有厂商去开发一个注册功能或者是通过用户名+密码来登录的逻辑，为什么？因为APP、小程序为了用户体验，是尽量多的避免用户多次输入交互，所以，这个时候，一键通过微信登录，非常方便。就像我们的平常做的SNS社交一键登录一样。本节我们来学习使用微信一键登录功能。首先准备一张微信UI素材，...

上一讲，我们已经创建了一个微信小程序项目，简单分解了项目中的文件及页面功能，本节，我们继续以上节课程中创建的项目以蓝本进而示意更多页面及业务逻辑的开发。大部分程序都是要求用户登录后才可以使用的。我们就行实现一个简单的登录页面，从中理解更多的关于页面布局、页面结构等的技能及知识。如上图，在pages文件中右键，选择->新建文件夹，我们先创建一个文件目录，命名为login,用于存放、...

有了前两节的哆哩哆嗦的铺垫，相信有些同学已经懵逼了，有些同学可能已经心有所悟。不管是哪种情形，建议你还是接着头皮发麻的向下看，看的同时，涉及到代码的，你必须全程跟着敲一遍代码，动一下手。否则你这纯粹是耍流氓，不是来学习的，而是来打发时间的。 本讲时，博主使用的是微信开发者工具 1.02.2003250版本，后续的版本不能保证新建项目时，界面是否会发生变化。打开微信开发者工具...

上一篇教程我们说过，小程序的技术范畴仍然是Web技术，而web视图展现的核心东西又是CSS（层叠样式表），当然这个东西也是随着时代在进步，前有CSS，现在有CSS3，当然CSS3是兼容老的CSS的，你也不要怕这个东西，尤其是新接触WEB开发的同学，不要怕。CSS的目的是向视图添油加醋，使视图漂亮、美观、现代化。学习CSS，核心要掌握的就是布局。正如你所体验，页面的展示不外乎列表、tab多标签这...

在正式进行教程之前，先做一下思想工作，让读者朋友们心里做到这是什么？要学习什么？能做什么？如果你连本节都没有兴趣阅读下去，那请您移步别处去吧，就不浪费您的时间了。第一，小程序是什么？ 说到这里，再说说，为什么要跨平台，一些小白可能认为，开发一个程序为什么不能在其他平台(系统)运行，很是纳闷，因为不同的平台(系统)是使用不同的技术(高级编程语言)开发实现的，同一种语言编写的程序...

近来，一直在研究H5方面的技术，同时开发了几个微信小程序方面的项目，之前个人是IOS开发人员，已经开发将近8年了，目前在不断实战提升自我，多了解学习一些H5前端方面的东西，便于将来有口饭吃。。看到微信小程序的开关组件不够灵活，故抽闲暇时间来写了这么一个自定义的开关组件，希望可以帮助到开中用到类似组件的同学。效果图：支付开关组件标题、边框自定义、选中颜色自定义、大小自定义、标题样式自定义、是...

我是搞APP的，但是最近APP的业务不多了，公司便让我去搞微信小程序。。一万个草泥马飞过。。。有时候我们有这一种需求：在使用组件的时候，我们希望子组件的某些样式由父组件来控制，比如导航栏-navgationbar的背景，我可以使用图片，也可以使用css指定，这样是不是非常方便？因为导航栏默认的太丑，所以，我自定义了导航栏的显示组件。前提是隐藏了默认的导航栏。整个实现过程如下：第一步...