专注前端技术，包括Web端、移动端、小程序、APP

微信小程序在进行网络请求时虽说用官方api写也非常顺手，但是呢，重复的代码太多了，会导致逻辑代码臃肿不堪，并且如果在请求的时候有身份验证，比如需要在header中传uuid，token等信息。你在每个需要验证的请求中都写一遍也不是很浪费时间。所以，在项目搭建之初，请封装好一切可以封装的代码。封装流程：首先在utils文件夹中创建request.js文件：const openid = wx.getStorageSync('openid')const host = "https://it.cc";

先看效果图看似和正常开发的小程序布局相同，但代码却不相同，从而在自定义的代码中可以编写在默认模板中不能帮助我们完成的事情。首先来说TabBar，这个内容的实现很容易，Flex布局嘛，除了这种很普通的样式，还可以自定义实现TabBar的目录结构：TabBar、NavBar、以及主页面都定义为组件，使用的思路是：在pages目录下定义一个页面，也就是小程序的入口页面，在入口页面中调用TabBar组件，接着需要在这个页面中监听TabBar组件的点击变化。从而控制显示不同的主页面。pageIte

button{ border-radius: 0rpx; padding:0rpx; margin:0rpx; display: inline-block; line-height: 1;}button::after{ border:none;}.button-hover{ color:#000; background-color: rgb(247, 247, 247);}

首先在子组件上绑定监听事件：<zj bind:monitor="monitor"></zj>在组件调用的页面写入monitor方法，并且传个参进去，组件响应的值就在这个参数里面。接着我们看如何在组件中将数据响应回来。在组件的方法中，可以使用this.triggerEvent('monitor',需要传的值);通过这种方式将组件中需要响应的数据给到调用组件的页面。...

页面跳转传参时，参数里面如果含有等号的话，等号后面的字符会被自动截取导致参数到另一个页面不完整。为解决这个问题，我们可以使用js中的encodeURIComponent（参数）函数把字符串中的URI进行编码，然后再到另外一个页面解码就OK了。encodeURIComponent() 函数可把字符串作为 URI 组件进行编码。该方法不会对 ASCII 字母和数字进行编码，也不会对这些 ASCII 标点符号进行编码： - _ . ! ~ * ’ ( ) 。其他字符（比如 ：;/?????&=+$

作为一个前端从事者，对数据的处理也是一种必备技能。所谓的重组数据是什么呢？拿个例子来说：比如在获取某些数据的时候，获取到了一个对象数组的格式数据，在这组数据里面，有些字段不能够直接展示给用户，而需要进行一下转换，时间戳我们需要转为正常日期时间、某些数据的状态值，可能是用数字代表，我们需要转为相对应的文字说明，再例如一个字段里存了多张图片链接，但是此字段是一个字符串，我们又如何把这些值转换为正常的能够显示在界面的数据。接下来，我就讲一下当我们获取到一个对象数组之后，如何对需要处理的字段进行格式化处理。先拿

总的来说微信支付的前端工作就两个步骤。非常简单：第一步：通过向后端请求，获取参数nonceStr、package、paySign、timeStamp。这几个参数必须是通过后端处理返回的数据。也是在下一步调起微信支付必须用到的参数。另外还有一个加密类型可有可无，默认是MD5。wx.request({ url: config.Pay.url, //向后端请求的链接，这里我是封装好的，所以直接调用 method:config.Pay.method, //请求方法类型

上下跳动wxml: <image class="topImage" style="width:100rpx;height:100rpx" src="/images/coupon/co.png"></image>wxss:.topImage{ animation: image 1.5s infinite; }@keyframes image { 0% { transform: translate(0px, 0px); } 50% {

在开发过程中使用第三方组件能够快速帮助我们搭建页面。Vant官网，如果你还没接触过Vant，可以看一下官方的介绍，并进行安装使用。步入正题，今天我就讲一下Vant的输入框与选择器的组合使用方法。效果就像下图，当点击选择性别时，弹出选择器。首先，在App.json文件中，需要引入的组件包括：输入框、弹出层、选择器。"usingComponents":{ "van-field": "vant-weapp/field/index", "van-picker": "vant-weapp/p

马上要开学了，作为学校协会程序部的老部长，要为协会做一个会员注册系统。之前的注册系统有bug，也是我的上上界部长的作品了。所以我也没深入研究，干脆自己写个小程序。一天时间，写完了包括会员注册、会员上课签到、将信息导出Excel表格等多个功能。这篇文章呢，就讲一下，会员在注册的时候，一个实时验证码。验证码的作用是为了防止学生乱注册，是报名现场在管理端实时显示的一个验证码。大体思路： 管理端能够开放注册和关闭注册，这个主要是判断数据库里的一个集合，有个字段为Code，Code为零的时候是未开启注册，为非

无效的原因无非以下两种情况：一、路径错误：我们一般使用本地图片都会将图片文件夹直接放在根目录下，然后直接使用根目录下的文件夹。示例：<image src="/image/send.png"></image>/image 就代表根目录下的image文件夹。二、图片命名为中文：这种情况会在真机调试的时候出现图片不显示的问题。而在模拟器上正常显示。<image src="/image/悬浮.png"></image>像上面这样，名称为中文，也

视差效果现在很多应用中都会有用到。一般在商城类应用的商品详情页会用到，比如上面是图片，下面是文字。用户向上滑动时，图片能够慢点离开用户视线，从而达到较好的体验效果。功能分析：视差效果就是让多层背景以不同的速度去移动。1. 至少需要两层背景。一个是缓慢移动区，另一个是正常移动区。2. 将背景设置为相对布局。通过给缓慢区设置top值来缓冲scroll滚动。3. 根据滑动事件监听，获取滚动距离值。4. 通过计算，得到需要缓冲的top值。5. 视觉差的形成条件，正常移动区域超过缓慢移动区域的时候要进行

对于css的使用不太熟悉的同学，想要将元素定位到底部很简单，但是使用了绝对定位或者固定定位之后，再想把元素水平居中就有点不知所措了。不过这都不要紧，我们可以通过js轻松将元素进行居中。怎样让其水平居中呢？我这里使用的是margin-left，这时候你可能会觉得数据不准啊。有可能实际并不居中。没关系，我们通过计算得到需要的margin-left的值就OK啦。解决思路：首先获取元素所占宽度，然后用满屏宽度减去元素宽度再除以2，就得到合适的margin-left的值了。现在首要的任务就是获取元素的宽度。

在搞开发的时候，如果需要用户登录或者授权之类的情况时，有可能需要在多个页面进行此类操作。然而在多个页面重复的写这一类信息显得有点笨拙。公共模板正可以解决这个问题，编写一个模板，调用它即可。我们直接新建一个template的文件用于写公共模板，根据自己的需求具体创建哪些文件。这里我只用到了wxml文件template.wxml<template name="muban"> <view class="muban">公共模板</view></template

全局变量这一块，对于新手来说还是有很多坑的。注意好以下几点，让你轻松学会全局变量的使用。第一、全局变量的定义在你初次打开app.js文件时，很容易混淆。在onLaunch函数里是有个globalData对象，但请注意，你的全局变量不是写在这里，而是另外在函数外定义一个globalData。例如下图：globalData一定要定义在与函数同级的位置。然后在globalData里面编写你的全局变量的值。第二、全局变量的赋值一般初始化的时候会给空值或者固定值，然后通过后期的小程序使用过程中改变全局变量

每天一个编程小技巧。在使用Vant popup弹出层时，遮盖输入框无效。因为输入框为原生组件，在其他非原生组件同时显示时，原生组件的的层级最高。即使使用了z-index，也没有办法来调换原生组件和非原生组件之间的显示层级。z-index只能够在原生组件之间进行层级调换。所以，当你使用popup组件时，如有遇到以上问题，你的解决办法可以有两种：1. 在使用popup弹出层时，手动隐藏原生组件。2. 避免弹出层的位置与原生组件重叠。将弹出层多余的空白部分最小化。...

遇到此类事件，你需要检查模板ID是否填写正确，并且用单引号括起来。另外就是此API必须通过事件触发才可有授权框弹起。如果是在某个页面加载的时候，加载此API是行不通的。

这个问题其实很简单，但同时也困扰着很多开发者。你只要搞清楚什么时候用云函数进行数据库写入操作，什么时候在小程序端进行写入操作就好了。很简单一句话：当你数据库信息是通过云函数的方式新增的时候，那么集合里面不会自动生成_openid字段，此时无法在小程序端进行更改信息的操作，只能在云函数里进行更改信息，但是可以在小程序端读取数据；当数据库信息是通过小程序端代码新增的时候，数据库集合里面会自动生成_openid字段，此时可以在小程序端进行读、写、更改的操作！如有不解可以在下方留言，我来帮你解答~.

我们常用的聊天功能，或者是在游戏中与队友的游戏数据保持一致，等等这些都是通过数据实时推送进行的。那么今天我就来讲一个比较简单的示例，实时监听集合中的数据条数。这是最简单的示例：db.collection('searchta').watch({ onChange: snapshot=> { console.log('docs\'s changed events', snapshot.docChanges) this.setData({ peopl

在上篇文章中，我讲到了订阅消息的发送。但随着业务的跟进，现在的需求是要群发订阅消息。这？不难！首先，你要搞懂一点，群发订阅消息就是将需要发送的用户openID集合起来，然后一一使用推送模板发送消息。这个时候你可能会想到循环。但是用循环实在是太多坑。解决这个问题，要么在云函数端写逻辑，多次发送；要么在小程序端写逻辑多次调用云函数。这两种方法都是可以的。我采用了第二种，在小程序端多次调用云函数。看主要代码吧：第一步，我先获取数据库用户的openid,接着通过Promise.all来处理调用云函数。r

订阅消息是小程序一个比较重要的功能，这也是与你客户打交道的必备功能。通过微信通知客户，从而为客户提供更好地服务。要通过云函数来实现订阅消息，其实挺简单。也就那么回事儿~首先，你需要在小程序后台开通订阅消息，然后选用模板。选用之后，我们通过两个步骤，来实现订阅消息的发送。一、编写云函数二、在小程序端授权并调用云函数第一步，云函数的编写很简单，给你个模板直接往里套内容。const cloud = require('wx-server-sdk')cloud.init()exports.main

最近开发小程序用户发布动态之后，需要进行评论，刚开始没什么思路。就在网上逛了一圈，也没啥结果，都不是我想要的。要么是转载，要么是讲的不够清楚。经过我半天的思考和开发，终于将这个评论功能给实现了。先看个效果图吧：今天我就带大家了解一下评论功能！评论功能实现步骤：设计数据库信息储存方式编写逻辑代码编写云函数实现评论功能，最重要的一点就是设计数据库到底该如何进行储存评论的内容，这一点很重要！如果不了解这个，给你代码你也不一定能搞懂。并且那么长的代码我直接复制粘贴出来，你也不一定看！数据库设

要获取信息，进行条数限制。其实是云数据库获取信息很常用的一个方法。limit()。比如要获取某个集合中数据，一次获取十条信息，我们可以这样写：db.collection('dynamic').limit(10).get()这样每次获取数据都是十条。如果数据不足十条就获取全部，如果超过十条就十条十条进行获取，获取到最后不足十条获取全部。...

弹窗提示组件是在小程序开发过程中很贴切用户体验的一个操作。今天在开发过成中，出现了点击多次确定或者取消才能取消展示的情况。把我慌得，以为出了什么重大bug。后来经过仔细分析，才知道，我这个语句写在一个函数里，代码执行了两次这个函数：原来是执行了两次这个语句，才会出现这个情况！所以，仔细检查你的代码，就能解决这个问题！！！...

当使用了scroll-view组件之后，发现不能在该页面下拉刷新了。根本拉不动！经过五分钟的研究，解决了这个问题。我们可以自行定义下拉刷新。加上该组件下拉刷新的属性及自己定义下拉事件。<scroll-view refresher-enabled="true" bindrefresherrefresh="refresh" refresher-triggered="{{triggered}}"></scroll-view>refresher-enabled 开启自定义下拉刷新

用csdnAPP的用户都知道，在发布blink动态时，那个红色按钮会随着你滚动页面消失或者出现。往上滑动时，按钮消失。往下滑动时，按钮出现。今天我们就模仿一下这个功能，只不过我们换中样式，让它逐渐滑出页面，或逐渐从页面之外滑到固定位置。效果图：滑动前：滑动后：此功能是往上滑动消失，往下滑动出现。实现步骤：编写页面代码与样式编写逻辑代码wxml:<view class="mask-con {{!hidden ? 'mask-con-show' : ''}} sendDynam

先看效果图：这个滑块除了可以点击上方的导航，还可以左右切换页面，随之导航也跟这切换。实现步骤：编写滑块视图代码编写逻辑代码wxml:<view class="content"> <view class="title"> <view class="{{currentTab==0?'select':'default'}}" data-current="0" bindtap="switchNav">关注</view>

云开发这一块，登录功能可以使用缓存。将用户信息用缓存记录。那么你可能有疑问了，用户清除了怎么办？那岂不是会造成数据紊乱？别急，我们还是可以备份一下用户信息的嘛~ 将用户信息存入数据库一份，展示信息用缓存，这样用户每次打开小程序时，就不必要从数据库中获取数据，从而减少数据库请求次数。我们通过button按钮设置类型获取用户信息，将用户信息设置为全局变量。因为小程序每次启动的时候都是要先运行全局文件的。所以我们可以有以下步骤：获取用户信息，设置缓存编写全局变量代码获取全局变量，取用户信息ind

复制页面内容往往能够为用户提供很大的便利。比如，当我查看别人的资料时，一键复制别人的微信号去添加好友或者其他信息。这是很方便的一个功能。实现这个功能也很简单，只需要设置一下要复制的内容，再进行获取需要复制的内容即可完成该功能！比如给一个view添加一个事件：<view bindtap="copy">点我复制内容</view>然后写copy函数，在对应的js文件中写： copy:function(){ wx.setClipboardData({ //设置

日期选择器的实现在很多地方也能用的到，比如填写生日、预约日期等等。通过选择器能够很方便的帮助用户进行选择所需要的日期。实现该功能有以下几个步骤：引入路径及编写代码实现一、引入路径及编写代码这里我们可以不用Vant组件，但是如果你想界面好看一点就用Vant组件。这里所指的引入路径是指，在设置当前时间的时候，需要用到工具包，这个包一般自己定义：utils:我们在utils.js文件中写以下代码：function formatTime(date) { var year = date.get

为了用户的便利，开发者们往往要投入更多的精力去完成一个功能。明明可以用输入框，所么简单，可非要去选择选择器，多么便利。为用户提供了便利，提高用户体验。今天的主题就是地址选择器！当然，这个还是用组件开发会比较快一点。小程序开发我一直都在用Vant组件，使用这个你的界面会容易很多实现。如果你还没安装Vant，可以去官网查看安装，上面有安装命令。很简单。安装完Vant，接下来我们就来完成地区选择器吧。完成步骤：配置路径下载地区数据集编写代码实现一、配置路径安装完Vant，首先要在app.

在必要的情况下，我们需要将数据库的信息导入到Excel表格中。这时候，通过云函数很容易可以实现该功能。先看一下效果：我们将分为以下几个步骤：安装导出Excel表格的模块编写云函数代码导出表格并复制下载链接一、安装模块新建云函数，右键该云函数在终端中开打。输入命令：npm install node-xlsx安装成功如下图所示：二、编写云函数代码打开index.js文件，我们编写云函数代码：const cloud = require('wx-server-sdk')cl

在用户进行填写表单时，往往有一些内容是固定的。比如身份特征、学历等等这些。开发者通过选择器能够减少用户的文字输入，从而提高用户体验度。接下来，我就通过vant组件来展示弹窗选择器。当前，前提是你安装了Vant,如果还未安装，可去官网进行查看安装。安装完之后，引入组件模块：在app.json文件中："usingComponents": {"van-picker": "vant-weapp/picker/index", "van-popup": "vant-weapp/popup/index",

微信小程序页面间的数据传递是非常重要、也很常用到的知识。你可能需要传一个数据或者两个数据或者更多。经常都是单独一个个的传递，比如通过链接进行传递：url: '../index/index?id='+id多个数据：url: '../index/index?id='+id+'&openid='+openid如果还有第三个以此类推。这是一个很容易使用的方法。但现在可能你遇到的问题是，我想传递一个数据对象，里面包含的是一组数据。例如：例如传递这一条数据对象，该怎么办呢？可想而知，再使

又到讲知识点的时刻了。来吧，今天就讲搜索之模糊搜索。模糊搜索可以为用户提供更广泛的选择。微信小程序云开发要进行搜索数据库中某些数据，我们就要选择用字段名进行匹配。接下来，就上示例给大家看：db.collection('集合名称').where({ mass:{ //mass为集合中的字段名，要对哪个字段进行模糊搜索就写哪个字段名 $regex:'.*' + e.detail + '.*', //e.detail为搜索框输入的值 $opti

2020年不平凡的一年，终究要干不平凡的事情。在四月份初，和几位小伙伴一起开始了开发小程序的道路，时至五月初完成了小程序1.0.0版本。这一路走来，真的是遇到很多坑，当然也学了不少知识。在开发的道路上，难免会遇到各种各样的问题。只有靠着顽强的毅力去一点一点解决它。其中在开发小程序的核心代码时，每天脑子都是快速运转。因为开发小程序不只是一个写代码的过程，这也是一个你去思考别人的想法的过程。在这...

小程序到最后阶段了，又遇到了一个问题，通过查看官方文档解决掉了。就是在点击按钮或view时，执行一个函数，但是我又想让该函数执行时获取到该页面的一个参数。因为我的需要是一个页面循环渲染出多个view，现需要点击不同的view获取到该view的特定值。由于不跳转页面，所以无法使用navigator进行跳转页面传参。所以想要获取该view的指定值，就需要通过函数传参进来。<view clas...

今天在撸码的时候，根据需求的需要，我开发的这个页面需要两个不同的分享按钮。之前分享都是写一个，今天这还是头一回。遇到这种情况，首先是要冷静分析一下需求，既然是多个转发按钮，进行分享不同的内容，那么我就需要给这些按钮一个识别的标志，然后在逻辑页通过判断此分享是来自哪个标志按钮，从而就可以进行不同的内容分享（分享不同的内容即在返回语句中返回不同的内容）。这个还是挺简单的。那么问题又来了，我们需要通...

在小程序中，我们经常使用到输入文本框这个组件。比如要填写个人信息，填信息就要去跳转到一个填信息的页面，这样操作起来会有点浪费空间和时间。比如我只需要改一个自己的名字或者一点别的信息就要跳转到另外一个页面，实在是有点小题大做。于是就想用弹窗的方式，填写信息，进行提交。在网上找了类似的资料，都不太满意，总觉得太麻烦了，还是自己做吧。于是想到了Vant ，这个UI框架很好用，简单安装，直接拿来它们...

在搞开发的时候，总是会遇到一些小问题。解决之后现来写个总结帮助开发者们解决问题。我的需求是对一个组织中添加管理员的操作，就是发送邀请添加管理员，待别人同意后将被人的openID存到该组织数据库集合中的一个数组字段中。然后在小程序中需要判断当前该操作者是否为管理员，就判断该集合中的数组字段中是否包含该用户的openID。示例步骤：一、存用户openID到数组字段中在获取用户openID之后，...