先来一波预览图。 预览图片一：预览图二：预览图三： 预览图四：预览图五： 大概的效果就和原来图差不多。 思路解析：车牌号码由31位汉字，26位字母，10位数字组成的，开头第一位由省份简称的汉字，第二位字母根据省份下的城市或地区区分，最后的五位或者六位，是有字母和数字组成的，共有七位的车牌号码和八位的车牌号码，（注：其中的八位数的车牌号码为能源车的车牌号码。） 大概的逻辑思维，不包含代码获取值什么的或者验证其他...
前言最近写了个CNode 社区的微信小程序版本，把在微信小程序中使用npm包，踩的坑记录一下，希望能给遇到类似问题的小伙伴，提供一些思路和方向。 npm 支持从小程序基础库版本 2.2.1 或以上、及开发者工具 1.02.1808300 或以上开始，小程序支持使用 npm 安装第三方包。 踩坑之路由于项目中需要格式化一些日期数据，于是选择了moment，一款JavaScript 日期处理类库首先使用命令行，安装moment # 打开小程序根目录 cd src npm install...
微信小程序组件里没有下拉框，正好要用到，记下来以后参考 wxml代码 <view class=top><view class=top-text> 选择接收班级</view><!-- 下拉框 --><view class=top-selected bindtap=bindShowMsg><text>{{grade_name}}</text><image src=/images/icon/down.png></image></view><!-- 下拉需要显示的列表 --><view class="select_box" wx:if="{{select}}"><view wx:for="{{grades}}" wx:key="unique"><view class="select_one" bindta...
利用三元运算符实现登录注册效果切换，供大家参考，具体内容如下直接上代码 wxml: <view class=top><text class="{{login?active:}}" catchtap=login>登录</text><text class="{{login?:active}}" catchtap=register>注册</text> </view><view class=log wx:if="{{login}}"><form><input placeholder=账号/><button>登录</button></form></view> <view class=regwx:else><form><input placeholder=密码/><button>注册</button></fo...
本文实例为大家分享了微信小程序实现实现轮播效果展示的具体代码，供大家参考，具体内容如下wxml:<view id="content"><!--banner--><view class="recommend"><view class="swiper-container"><swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" circular="{{circular}}" bindchange="swiperChange" class="swiper"><block wx:for="{{slider}}" wx:key="unique"><swiper-item data-id="{{item.id...
本文实例为大家分享了微信小程序自定义轮播图展示的具体代码，供大家参考，具体内容如下 默认的swiper面板指示点都是小圆点黑灰的，但这满足不了广大小伙伴需求，比如其他颜色的，椭圆形的，方形的等等。首先当然是要禁用掉（直接删掉）swiper属性indicator-dots，再用view组件模拟dots，对应的代码如下： <view class="swiper-container"><swiper autoplay="auto" interval="5000" duration="500" current="{{swiperCurrent}}" bi...
本文实例为大家分享了微信小程序实现无限滚动列表的具体代码，供大家参考，具体内容如下效果图1.0 实现方式是利用小程序原声组件swiper，方向设置为纵向 ：vertical=‘true设置同时显示的滑块数量：display-multiple-items=‘4设置自动轮播：autoplay：‘true. 话不所说，直接上代码： <!-- 底部排名 --><view class=contentBottom><view class=BottomFirst><text id=0 data-id=0>获奖名单</text></view><swiper class="tab-right"...
本文为大家分享了微信小程序实现多选功能的具体代码，供大家参考，具体内容如下代码：<!--hotblood_gongkao/pages/answer/answer.wxml--> <!-- content --> <view class=answer-list><view class=answer-child><text class=answer-title><text style=margin-right:28rpx;>{{num + 1}}/{{quesyion.length}}</text>{{question[num][0]}}</text><view class=answer-options><view class="options {{selectIndex[0].sureid?select:}}" ...
本文实例为大家分享了微信小程序实现预览图片的具体代码，供大家参考，具体内容如下先看下效果图：这种效果在一些商城类的小程序里是很常见的一种功能，实现起来也很简单 下面我们来看一下代码： 我的这些图片资源是从后台拿到的，你们看一下具体的需求，一般都是后台返回，毕竟小程序是有大小限制的。 <view class=contentbot><view class=contentWa wx:key=id wx:for={{wawa}}><image src={{item.img_url}} mode=widthFix data-s...
本文实例为大家分享了微信小程序实现弹出层效果的具体代码，供大家参考，具体内容如下先看下效果图吧 其实这个效果实现起来很简单，就是通过三目运算符来控制遮罩层的显示和隐藏 贴代码了： 规则按钮： <text class=rule bindtap=showRule>规则</text>遮罩层：我这个数据是从后台拿来动态渲染到页面的 <!-- 规则提示 --><view class="ruleZhezhao {{isRuleTrue?isRuleShow:isRuleHide}}"><view class=ruleZhezhaoContent><view cla...
一种比较常见的功能获取手机验证码，供大家参考，具体内容如下 先看效果图：其实这个功能实现起来很简单，主要就是调取第三方接口，拿到返回值验证的问题 直接上代码吧： <view class=changeInfo><view class=changeInfoName><input placeholder=请输入姓名 bindinput=getNameValue value={{name}}/> </view><view class=changeInfoName><input placeholder=请输入手机号 bindinput=getPhoneValue value={{phone}}/> </view><view ...
微信小程序重写tabbar底部导航，供大家参考，具体内容如下 1.app.js代码如下：editTabBar: function() {var e = this.globalData.tabbar, a = getCurrentPages(), t = a[a.length - 1], s = t.__route__;0 != s.indexOf("/") && (s = "/" + s);for (var n in e.list) e.list[n].selected = !1, e.list[n].pagePath == s && (e.list[n].selected = !0);t.setData({tabbar: e});},tabBar: {color: "#123",selectedColor: "#1ba9ba",b...
HTTP + 加密 + 认证 + 完整性保护 = HTTPS，小程序考虑到信息安全的问题，选用了更为稳定安全的https 来进行信息传递。 HTTPS协议的主要作用可以分为两种：一种是建立一个信息安全通道，来保证数据传输的安全；另一种就是确认网站的真实性。 这就导致了许多好用的http API无法在小程序中被调用。 但是也有解决方案。 1.中继访问中继访问有两种方式，一种需要自己拥有一个云服务和域名。 拥有域名和云服务器 域名完成备案之后下载证...
之前我的做微信小程序的时候，需要一个底部导航样式，但是我搜索的时候，大部分都是写的一些小程序自定义的tabBar的样式，而当时我在网上有一个地方找到了这个模板，现在介绍给大家参考。WXML代码： <import src="../../template/nav" /><view class="flex fix_nav_wp"><block wx:for="{{navData}}"><template is="nav" data="{{...item}}"/> </block> </view> JS代码： Page({data: {navData: [{name: "购物车", //文本current: 1...
目标：用户点击提交、登录等按钮时，防止多次提交，所做的遮罩层步骤：实现很简单，按钮加上disabled属性，用true和false控制。 效果图：代码： wxml <!--pages/login/login.wxml--> <loading hidden="{{hidden}}">登录中... </loading> <view class="container-login"><form catchsubmit="formSubmit"><view class=login-main><!-- username --><view class="login-view"><image src=/images/icon/user.png></image><input type=t...