轩宇网 - 微信小程序
type: channel
link: http://www.xysoft.cc/tag/微信小程序
items: 微信小程序+php 授权登陆查看，完整代码
items: 微信小程序搜索功能(附：小程序前端+PHP后端)
items: 微信小程序开发搜索功能实现(前端+后端+数据库)
items: 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
items: 微信小程序实现订单倒计时
items: 微信小程序发布新版本时自动提示用户更新的方法
items: 微信小程序实现打卡日历功能
items: 微信小程序自定义带价格显示日历效果
items: 微信小程序日历弹窗选择器代码实例
items: 微信小程序实现左右列表联动

微信小程序+php 授权登陆查看，完整代码
type: item
date: 2020-03-24T15:24:00+08:00
description: 先来看效果图实现流程：1、授权登陆按钮和正文信息放到了同一个页面，未授权的时候显示登陆按钮，已授权的时候隐藏登陆按钮，显示正文信息，当然也可以授权和正文分开成两个页面，在授权页面的onload里判断是否已授权，若已授权就直接跳转正文的页面。这里只说授权按钮和正文在同一页面的情况。2、在onload里先判断是否已授权，如果已授权，就隐藏授权登陆按钮，显示正文信息，如果没有授权，显示授权登陆按钮。3、前端使用button的open-type="getUserInfo"来操作，点击授权按钮之后，“e”中会携带userInfo，用户的基本信息（和使用wx.getUserInfo接口获取的数据一样，所以我是在"e"里面直接取的，没有调用wx.getUserInfo接口）4、使用wx.login接口获取登陆凭证code，使用code去后解密换取openid，传输code的时候带上第3步获取的用户信息一块发送给后台解密（也可以不携带，携带的目的是为了验证签名，这样安全一些，不验证也可以）5、后台解密使用的是“auth.code2Session”接口，解密用到的SDK下载地址“https://developers.weixin.qq.com/miniprogram/dev/framework/open-ability/signature.html”。5、后台解密之后（后台语言用的是php），会返回openid等敏感信息，就还可以把这些信息存起来了。6、获取授权成功之后，再隐藏授权登陆按钮，显示正文信息。7、如果用户点击拒绝授权，提示引导用户再次授权。注意，要考虑到授权失败的情况以下是详细代码wxml<view wx:if="{{isHide}}"> <view wx:if="{{canIUse}}" > <view class='header'> <image src='/images/icon/wx_login.png'></image> </view> <view class='content'> <view>申请获取以下权限</view> <text>获得你的公开信息(昵称，头像等)</text> </view> 授权登录 </view> <view wx:else>请升级微信版本</view> </view> <view wx:else> <view>我的首页内容</view> </view>wxss.header { margin: 90rpx 0 90rpx 50rpx; border-bottom: 1px solid #ccc; text-align: center; width: 650rpx; height: 300rpx; line-height: 450rpx; } .header image { width: 200rpx; height: 200rpx; } .content { margin-left: 50rpx; margin-bottom: 90rpx; } .content text { display: block; color: #9d9d9d; margin-top: 40rpx; } .bottom { border-radius: 80rpx; margin: 70rpx 50rpx; font-size: 35rpx; }js// pages/test1/test1.js var app = getApp(); Page({ /** * 页面的初始数据 */ data: { //判断小程序的API，回调，参数，组件等是否在当前版本可用。 canIUse: wx.canIUse('button.open-type.getUserInfo'), isHide: false }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that = this; // 查看是否授权 wx.getSetting({ success: function (res) { if (!res.authSetting['scope.userInfo']) { // 还未授权，显示授权按钮 that.setData({ isHide: true }); } else { // 已授权，隐藏授权按钮，显示正文 that.setData({ isHide: false }); } } }) }, //授权登陆按钮 bindGetUserInfo: function (e) { var that = this; console.log(e) if (e.detail.userInfo) { //用户授权登陆，并跳转首页 // that.getOpenid() wx…

微信小程序搜索功能(附：小程序前端+PHP后端)
type: item
date: 2020-03-05T11:36:35+08:00
description: 这篇文章主要介绍了微信小程序搜索功能(附：小程序前端+PHP后端)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧开发需求微信小程序已经是非常火了，而且学习也比较容易，但是对于初学者来说还是一件比较伤脑筋的事，接下来给大家分享一下小程序搜索的思路。流程1、表单（输入框、提交按钮、提交的name值)2、接收表单数据（js获取表单name=keyword的值）3、通过wx.request向服务器后端发起请求查询数据库4、返回JSON格式的数据给小程序，js解析渲染到小程序前端展示界面代码index.wxml <view class="title">小程序搜索</view> <view class="search_con"> 搜索 </view> <view wx:for="{{re}}" wx:key="re" class="search_result"> <view class="empty">{{item.empty}}</view> <view class="resname">{{item.resname}}</view> <view class="noresult">{{item.noresult}}</view> </view>index.js其中里面的http://localhost/search.php?keyword=是服务器后端接口，用于接收小程序传过去的关键词的，下面会有这个后端PHP文件。const app = getApp() Page({ data: {}, //执行点击事件 formSubmit: function (e) { //声明当天执行的 var that = this; //获取表单所有name=keyword的值 var formData = e.detail.value.keyword; //显示搜索中的提示 wx.showLoading({ title: '搜索中', icon: 'loading' }) //向搜索后端服务器发起请求 wx.request({ //URL url: 'http://localhost/search.php?keyword=' + formData, //发送的数据 data: formData, //请求的数据时JSON格式 header: { 'Content-Type':'application/json' }, //请求成功 success: function (res) { //控制台打印（开发调试用） console.log(res.data) //把所有结果存进一个名为re的数组 that.setData({ re: res.data, }) //搜索成功后，隐藏搜索中的提示 wx.hideLoading(); } }) }, })index.wxss/* 搜索样式 */ .title{ text-align: center; font-size: 20px; font-weight: bold; } .search_con{ width: 80%; margin:20px auto; } .search_con .search_input{ border: 1px solid rgb(214, 211, 211); height: 45px; border-radius: 100px; font-size: 17px; padding-left: 15px;/*此处要用padding-left才可以把光标往右移动15像素，不可以用text-indent*/ color: #333; } .search_con .search_btn{ margin-top: 15px; width: 100%; height: 45px; background: #56b273; color: #fff; border-radius: 100px; } .search_result{ width: 80%; margin:10px auto; } .search_result .empty{ text-align: center; color: #f00; font-size: 15px; } .search_result .noresult{ text-align: center; color: #666; font-size: 15px; } .search_result .resname{ text-align: left; color: #333; font-size: 15px; }服务端search.php<?php header('Content-Type:application/json'); //获取表单数据 …

微信小程序开发搜索功能实现(前端+后端+数据库)
type: item
date: 2020-03-05T11:19:36+08:00
description: 这篇文章主要介绍了微信小程序开发搜索功能实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧界面比较丑，主要实现逻辑...超级简单的界面，表单，提交按钮，搜索结果展示区域...下面是index.wxml 搜索 <view>搜索结果</view> <view wx:for="{{re}}" wx:key="re"> <view style='color:#f00;'>{{item.result}}</view> <view style='color:green;'>{{item.title}}</view> </view>跟前端差不多，form表单要加一个bindsubmit="formSubmit"接着就是index.js//index.js //获取应用实例 const app = getApp() Page({ /** * 页面的初始数据 */ data: { result:'', state:'' }, formSubmit: function (e) { var that = this; var formData = e.detail.value.id; //获取表单所有name=id的值 wx.request({ url: 'http://localhost/2018-5-24/search.php?id=' + formData, data: formData, header: { 'Content-Type': 'application/json' }, success: function (res) { console.log(res.data) that.setData({ re: res.data, }) wx.showToast({ title: '已提交', icon: 'success', duration: 2000 }) } }) }, })这个很容易理解var that = this; var formData = e.detail.value.id; 先把表单name=id的值获得，然后赋给formData这个变量 然后，在url进行拼接，用+号拼接这个变量即可...然后，提交到接口，后端进行处理即可，后端处理后返回json格式的数据，然后通过that.setData({ re: res.data, })进行打印在控制台，你也可以渲染在index.wxml为了方便大家研究，我把后端的php源码也贴出来。search.php<?php header("Content-type:text/json;charset=utf8"); //定义参数 $id = $_GET["id"]; //表单验证 if(empty($id)){ echo "[{\"result\":\"表单为空...\"}]"; }else{ //连接数据库 $con = mysql_connect("数据库链接","账号","密码"); //设置数据库字符集 mysql_query("SET NAMES UTF8"); //查询数据库 mysql_select_db("数据库名", $con); $result = mysql_query("SELECT * FROM test WHERE id like '%$id%'"); $results = array(); while($row = mysql_fetch_assoc($result)) { $results[] = $row; // 将数组转成json格式 echo json_encode($results); } //关闭数据库连接 mysql_close($con); } ?>数据库表名为test,里面一共有两个字段，一个是id，一个是title所以index.wxml里面有两个值<view wx:for="{{re}}" wx:key="re"> <view style='color:#f00;'>{{item.result}}</view> <view style='color:green;'>{{item.title}}</view> </view>wx:for="{{re}}"指的是循环数组，在js代码中，我们把所有服务端取得的数据，存进了re的数组然后，{{item.result}}指的是服务端返回表单为空的结果。{{item.title}}返回的是搜索结果，这个结合你的数据库吧，你想展示什么结果，你就把title改成你数据库的相关字段。到此这篇关于微信小程序开发搜索功能实现的文章就介绍到这了,更多相关小程序搜索功能内容请搜索轩宇网以前的文章或继续浏览下面的相关文章希望大家以后多多支持轩…

微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
type: item
date: 2019-08-13T15:14:00+08:00
description: 这篇文章主要介绍了微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能,涉及微信小程序事件响应、页面元素属性动态操作实现滑动与蒙层功能相关技巧与注意事项,需要的朋友可以参考下本文实例讲述了微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能。分享给大家供大家参考，具体如下：怎样实现jq中的slideUp或者slideDown这种动画效果呢，我的思路是用css3的transform: translateY() 属性，给需要动画的元素添加上一个动画class。先上效果图：1.蒙层的结构： <view class='list-fix' wx:if="{{mengShow}}" bindtap='outbtn'> <view class='in-list {{aniStyle?"slideup":"slidedown"}}' catchtap='inbtn'> <view class='in-content'> <text>已选商品（1）</text> <text class='iconfont icon-6'>清空购物车</text> </view> <view class='cho-list' wx:for="{{chooseList}}" wx:key=""> <view class='listName'>{{item.Cname}}</view> <view class='listPrice'>￥{{item.Cprice}}</view> <view class='opBtn'> <view class='com-btn cuts' >-</view> <view class='com-num'>{{item.Cnum}}</view> <view class='com-btn add' >+</view> </view> </view> </view> </view>注意：三元运算符里的slideup和slidedown一定要加上引号2.蒙层的其它样式自己写。最主要的是slideup和slidedown的动画效果的样式：@keyframes slidedown { from { transform: translateY(0); } to { transform: translateY(100%); } } .slidedown { animation: slidedown 0.5s linear ; } .slideup { animation: slideup 0.5s linear ; } @keyframes slideup { from { transform: translateY(100%); } to { transform: translateY(0); } }其它的样式：list-fix是fixed定位，而in-list是absolute定位。需要注意的一点是：做的时候，是从Y轴100%的位置处即最底部开始运动或是从0到100%，所以要设置z-index，才能实现在底部运动起来的时候或者回到100%即底部的时候，蒙层浮在“确认下单”这整个结构的下面。即“确认下单”这整个结构的z-index要大于蒙层的z-index。3.jspage({ data: { mengShow:false,//蒙层的显示与否 aniStyle:true, //动画效果，默认slideup }, //蒙层的显示 showMeng:function(e){ //这是“确认下单”这整个购物车导航栏的点击事件 this.setData({ mengShow:true, //蒙层显示 aniStyle:true//设置动画效果为slideup }) }, outbtn:function(e){ //这是list-fix的点击事件，给它绑定事件，是为了实现点击其它地方隐藏蒙层的效果 var that=this; this.setData({ aniStyle:false//设置动画效果为slidedown }) setTimeout(function(){ //延时设置蒙层的隐藏，这个定时器的时间，就是slidedown在css动画里设置的时间，这样就能实现slidedown动画完成后，蒙层才消失的效果。不设置定时器会导致动画效果看不见 that.setData({ mengShow: false }) },500) }, inbtn:function(e){ //这个事件必须有，就算不做什么事情也要写上去，因为这个事件是为了防止事件冒泡，导致点击in-list这里面的元素时，点击事件冒泡到list-fix触发它的slidedown事件。 console.log("in") }, })这样就能实…

微信小程序实现订单倒计时
type: item
date: 2019-06-20T22:32:23+08:00
description: 这篇文章主要为大家详细介绍了微信小程序实现订单倒计时，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序实现订单倒计时的具体代码，供大家参考，具体内容如下之前在做一个有拼团功能项目的时候遇到过倒计时的问题，由于当时技术不熟在这方面耽搁了好些时间，所以这里整理出来希望能为后来人提供些许启发。1.实现思路求出发起拼团时间与拼团结束时间的时间差再将时间差格式化得到我们想要的格式如：时间每秒递减使用了 setTimeout(this.setTimeCount,1000);这个函数，让这个函数每隔一秒执行一次。效果图：2.实现中的难点若是要实现单个倒计时如60s发送验证码倒不是很难，难的是多条倒计时。不同的订单下单时间是不一样的时间差time也就不一样，所以当初在这卡了很久，后来想通一切才觉得原来如此。实现方法1：是后台计算出时间前端直接获取时间差，当时为了不影响项目进度我们用的就是这个方法，真是苦了那个些后台的兄弟还得迁就我这个菜鸟。获取这个时间差time后我们就可以将它处理后放入数组循环。这样做的好处是前端不用将time作为一个属性添加到原数组中。index.wxml<view class="item">单条倒计时:{{time}}</view> <view class="item">多条倒计时</view> <view class='no'>暂无任何记录</view> <view class="content"> <block wx:for="{{listData}}"wx:key="idx" wx:for-item="item" wx:for-index="{{idx}}"> <view class="tip {{item.time<=0?'isShow':''}}"> <view class="dis"> <view class='dis_time left'>剩余时间：{{item.countDown}}</view> </view> </view> </block> </view>index.wxsspage{ height:100%; background: #fff; position: relative; } .item{ height:4%; background: #fff; text-align: center; } .content{ border:1px solid rgb(167, 159, 159); background: #F6F8F8; margin-bottom:300rpx; border-bottom: none; } .no{ text-align: center; position: absolute; top:8%; z-index: -11; } .tip{ position: relative; background: #fff; width:100%; height:100rpx; margin-bottom: 5rpx; padding:20rpx 0; border-bottom: 1px solid gainsboro; } .isShow{ display:none; } .dis{ width:100%; font-size: 35rpx; color:#009FE5; box-sizing: border-box; } .dis_time{ width:50%; }index.jsPage({ /** * 页面的初始数据 */ data: { pingData: [ { "id": "1", "icon": "../../images/image2.jpg", "number": "20", "pingTime": "2019-3-28 23:30:00", "time": "55267", "showList": "false", }, { "id": "2", "icon": "../../images/image3.jpg", "number": "4566", "pingTime": "2019-3-28 12:30:00", "time": "58934", "showList": "false", }, { "id": "3", "icon": "../../images/image2.jpg", "number": "20", "pingTime": "2019-3-28 08:30:00", "time": "555234", "showList": "false", } ], time:"30" }, /** * 生命周期函数--监听页面加载 */ onLoad: function (options) { var that…

微信小程序发布新版本时自动提示用户更新的方法
type: item
date: 2019-06-10T07:30:12+08:00
description: 这篇文章主要介绍了微信小程序发布新版本时自动提示用户更新的方法，文中通过示例代码介绍的非常详细，对大家学习或者使用小程序具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧如图，当小程序发布新的版本后，用户如果之前访问过该小程序，通过已打开的小程序进入（未手动删除），则会弹出这个提示，提醒用户更新新的版本。用户点击确定就可以自动重启更新，点击取消则关闭弹窗，不再更新。官方给的示例代码：const updateManager = wx.getUpdateManager() updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 console.log(res.hasUpdate) }) updateManager.onUpdateReady(function () { wx.showModal({ title: '更新提示', content: '新版本已经准备好，是否重启应用？', success(res) { if (res.confirm) { // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate() } } }) }) updateManager.onUpdateFailed(function () { // 新版本下载失败 })官方提供的demo中，只有最基本的更新提示，并未做异常处理。而且官方也说了这个功能基础库 1.9.90 开始支持，低版本需做兼容处理，那么就需要对着端代码进行改进了。另一方面，如果当前版本更新有重大调整，一定需要用户更新，那么可以在用户点击取消的回调中给出提示，并重新进入版本提示流程。如下图，在上边的更新提示中，用户点击取消，则弹出下面提示弹窗，用户点击确定，则更新版本，点击取消，则重新调用上边的更新提示。总之，用户只有更新了，才能正常访问小程序（如非必须，建议慎用）。改善后的代码：//app.js App({ onLaunch: function(options) { this.autoUpdate() }, autoUpdate:function(){ console.log(new Date()) var self=this // 获取小程序更新机制兼容 if (wx.canIUse('getUpdateManager')) { const updateManager = wx.getUpdateManager() //1. 检查小程序是否有新版本发布 updateManager.onCheckForUpdate(function (res) { // 请求完新版本信息的回调 if (res.hasUpdate) { //2. 小程序有新版本，则静默下载新版本，做好更新准备 updateManager.onUpdateReady(function () { console.log(new Date()) wx.showModal({ title: '更新提示', content: '新版本已经准备好，是否重启应用？', success: function (res) { if (res.confirm) { //3. 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate() } else if (res.cancel) { //如果需要强制更新，则给出二次弹窗，如果不需要，则这里的代码都可以删掉了 wx.showModal({ title: '温馨提示~', content: '本次版本更新涉及到新的功能添加，旧版本无法正常访问的哦~', success: function (res) { self.autoUpdate() return; //第二次提示后，强制更新 if (res.confirm) { // 新的版本已经下载好，调用 applyUpdate 应用新版本并重启 updateManager.applyUpdate() } else if (res.cancel) { //重新回到版本更新提示 self.autoUpdate() } } }) } } }) }) updateManager.onUpdateFailed(function () { // 新的版本下载失败 wx.showModal({ title: '已经有新版本了哟~', content: '新版本已经上线啦~，请您删除当前小程序，重新搜索打开哟~', }) }) } }) } else { // 如果希望用户在最新版本的客户端上体验您的小程序，可以这样子提示 wx.showModal({ title…

微信小程序实现打卡日历功能
type: item
date: 2019-05-10T11:52:01+08:00
description: 这篇文章主要介为大家详细绍了微信小程序实现打卡日历功能，具有一定的参考价值，感兴趣的小伙伴们可以参考一下生活中有各种可以打卡的app，例如背单词打卡什么的，本人觉得很有意思，于是本人在大二时做了一款诚信状打卡的微信小程序，这里讲述一下编写的过程。先说一下开发环境：用的是微信web开发工具开发的，后台采用了Bmob后台，比较方便。先展示一下成果：话不多说，直接上代码，里面也有挺多的注释，以防自己忘记，当然各位如果直接复制过去肯定不能有当前的效果，注意后台数据的交互，不过做一个界面还是没有问题的。Calendar.wxml 页面文件 页面上显示出来的东西，布局上主要是一个年月栏、上一个月和下一个月的按钮；然后是星期栏，就是日一二三四五六，然后就是每个月的日期，注意每个月的前面可能有空的地方。这里面用wx:if标签来区分当前日期有无打卡的情况。 <view class='all'> <view class="bar"> <view class="previous" bindtap="handleCalendar" data-handle="prev"> <image src='../../images/pre.png'></image> </view> <view class="date"> 年 月</view> <view class="next" bindtap="handleCalendar" data-handle="next"> <image src='../../images/next.png'></image> </view> </view> <view class="week"> <view wx:for="{{weeks_ch}}" wx:key="{{index}}" data-idx="{{index}}">{{item}}</view> </view> <view class='days'> <view class="columns" wx:for="{{days.length/7}}" wx:for-index="i" wx:key="i"> <view wx:for="{{days}}" wx:for-index="j" wx:key="j"> <view class="rows" wx:if="{{j/7 == i}}"> <view class="rows" wx:for="{{7}}" wx:for-index="k" wx:key="k"> <view class='cell' wx:if="{{days[j+k].date == null}}"> <text decode="{{true}}"> </text> </view> <view class='cell' wx:else> <view wx:if="{{days[j+k].isSign == true}}" style='background-color:#83C75D' class='cell'> <text>{{days[j+k].date}}</text> </view> <view wx:else> <text>{{days[j+k].date}}</text> </view> </view> </view> </view> </view> </view> </view> <view class='count'> <text>截至目前，你已坚持打卡</text> <view class='daynumber'> <text class='number'>{{count}}</text> <text class='day'>天</text> </view> <text>请再接再厉，继续努力</text> </view> </view>Calendar.wxss 样式文件 这个就是让页面显示得更好看一点了，里面有些属性更改之后可能会导致整个页面的格式变得很乱，说明自己的功夫还是不到家。/* pages/Calendar/Calendar.wxss */ /* 打卡日历 */ .all{ margin-top: 20rpx; } .all .bar{ display: flex; flex-direction: row; justify-content: space-between; margin: 30rpx 20rpx; padding: 10rpx; } .all .bar image{ width: 50rpx; height: 50rpx; } .all .week{ display: flex; flex-direction: row; j…

微信小程序自定义带价格显示日历效果
type: item
date: 2019-05-10T11:34:37+08:00
description: 这篇文章主要为大家详细介绍了微信小程序自定义带价格显示日历效果，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序自定义日历效果的具体代码，供大家参考，具体内容如下JS代码：var Moment = require("../../utils/moment.js"); var DATE_YEAR = new Date().getFullYear(); var DATE_MONTH = new Date().getMonth() + 1; var DATE_DAY = new Date().getDate(); Page({ data: { year: '', month: '', day: '', days: {}, systemInfo: {}, weekStr: ['日', '一', '二', '三', '四', '五', '六'], checkDate:[] }, onLoad: function(options) { var _this = this; let now = new Date(); let year = now.getFullYear(); let month = now.getMonth() + 1; // 页面初始化 options为页面跳转所带来的参数 this.createDateListData(); this.setData({ year: year, month: month }) wx.getSystemInfo({ success: function(res) { _this.setData({ systemInfo: res, }); } }) }, onReady: function() { // 页面渲染完成 }, onShow: function() { }, /**创建日历数据 */ createDateListData: function(setYear, setMonth) { //全部时间的月份都是按0~11基准，显示月份才+1 let dateArr = []; //需要遍历的日历数组数据 let arrLen = 0; //dateArr的数组长度 let now = setYear ? new Date(setYear, setMonth) : new Date(); let year = setYear || now.getFullYear(); let nextYear = 0; let month = setMonth || now.getMonth(); //没有+1方便后面计算当月总天数 let nextMonth = (month + 1) > 11 ? 1 : (month + 1); console.log("当前选中月nextMonth：" + nextMonth); //目标月1号对应的星期 let startWeek = this.getWeek(year, nextMonth, 1); //new Date(year + ',' + (month + 1) + ',' + 1).getDay(); console.log("目标月1号对应的星期startWeek:" + startWeek); //获取目标月有多少天 let dayNums = this.getTotalDayByMonth(year, nextMonth); //new Date(year, nextMonth, 0).getDate(); console.log("获取目标月有多少天dayNums:" + dayNums); let obj = {}; let num = 0; if (month + 1 > 11) { nextYear = year + 1; dayNums = new Date(nextYear, nextMonth, 0).getDate(); } for (var j = -startWeek + 1; j <= dayNums; j++) { var tempWeek = -1; if (j > 0) { tempWeek = this.getWeek(year, nextMonth, j); //console.log(year + "年" + month + "月" + j + "日" + "星期" + tempWeek); } var clazz = ''; if (tempWeek == 0 || tempWeek == 6) clazz = 'week' if (j < DATE_DAY && year == DATE_YEAR && nextMonth == DATE_MONTH) //当天之前的日期不可用…

微信小程序日历弹窗选择器代码实例
type: item
date: 2019-05-10T11:27:48+08:00
description: 这篇文章主要介绍了微信小程序日历弹窗选择器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧应项目需求，写了一个弹窗日历选择器，感觉用着还不错，封装了一下，分享给大家，希望大家有什么意见可以指出来相互交流共同改进！先上一个效果图：（当天日期为2019-05-10）直接上代码：wxml:<view class="weui-cells weui-cells_after-title" style='margin-top:100rpx;'> <view class="weui-cell weui-cell_access" hover-class="weui-cell_active" catchtap='showModalBtn'> <view class="weui-cell__bd">选择时间</view> <view class="weui-cell__ft weui-cell__ft_in-access">{{chooseDate}}</view> </view> </view> <view class="modal-mask" bindtap="hideModal" catchtouchmove="preventTouchMove" hidden="{{showModal}}"></view> <view class="modal-dialog" hidden="{{showModal}}"> <view class='modalBox'> <view class='box'> <view class='calendarBox'> <view class='calendarTitle'> 当前月份: <text style='font-size:46rpx;'>{{thisMonth}}</text> 月 </view> <block wx:for="{{week}}" wx:key="item"> <view class="week">{{week[index]}}</view> </block> <block wx:for="{{weekNum}}" wx:key="item"> <view class="week" style="border-bottom:0;color:transparent">0</view> </block> <block wx:for="{{dayList}}" wx:key="item"> <view class='week' style="border-bottom:0;background-color:{{dayIndex>index?'#f1f1f1':(tapThis==index?'#1296db':'')}};color:{{tapThis==index?'white':''}}" catchtap="chooseDate" data-index="{{index}}" data-value="{{item}}">{{item}}</view> </block> </view> </view> </view> </view>wxss:.modalBox{ width: 100%; font-size: 32rpx; } .box{ margin: 0 auto; width: 630rpx; } .calendarTitle{ /* margin: 0 auto; width: 630rpx; */ width: 100%; height: 80rpx; line-height: 80rpx; text-align: center; border-bottom: 1rpx solid #ddd; } .calendarBox{ /* width: 630rpx; */ width:100%; margin: 0 auto; border:1rpx solid #ddd; } .week{ display: inline-block; width:90rpx; height: 80rpx; text-align: center; line-height: 80rpx; border-bottom: 1rpx solid #ddd; } .dateBtn{ width:100%; height: 80rpx; display: flex; justify-content: space-between; margin-top: 20rpx; } .dateBtn>button{ width: 45%; height: 100%; display:flex; justify-content: center; align-i…

微信小程序实现左右列表联动
type: item
date: 2019-02-18T10:32:00+08:00
description: 这篇文章主要为大家详细介绍了微信小程序实现左右列表联动，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序实现左右列表联动的具体代码，供大家参考，具体内容如下效果图：直接上代码：wxml界面:<view class='header'> <text class='headerClass'>分类</text> <text class='headerPin'>/品牌</text> <view class="search"> <image src='/images/搜索.png'></image> <text>搜索商品</text> </view> </view> <view class='main'> <view class='left'> <scroll-view scroll-y="true" style="height: 1100rpx" scroll-into-view="true" scroll-with-animation="true"> <block wx:for="{{leftText}}" wx:for-list="item"> <view class="{{classfiySelect == item.id?'active':''}}" data-id='{{item.id}}' bindtap='left_list'> <text>{{item.text1}}</text> </view> </block> </scroll-view> </view> <view class='right'> <scroll-view scroll-y="true" style="height: 1100rpx" bindscroll="scroll" scroll-top="{{scrollTop}}" scroll-into-view="{{'inToview'+rigId}}" scroll-with-animation="true"> <block wx:for="{{rightData}}" wx:for-list="item"> <view class='itemTitle' id="{{'inToview'+item.id}}">{{item.title}}</view> <view bindtap='particulars' class='listItem' data-id='{{item.id}}'> <block wx:for="{{item.frist}}"> <view class='listItem2' data-text="{{}}"> <view class='img'> <image src='{{item.url}}'></image> </view> <view class='listText'> <text>{{item.text}}</text> <text class='money'>¥{{item.money}}</text> <view> <text>已售{{item.sum}}</text> 立即抢购 </view> </view> </view> </block> </view> </block> </scroll-view> </view> </view>js核心代码： // pages/class/class.js Page({ /** * 页面的初始数据 */ data: { classfiySelect: "", leftText: [{ id: "01", text1: "美妆专区", }, { id: "02", text1: "面部清洁", }, { id: "03", text1: "洗护专区", }, { id: "04", text1: "面膜", }, { id: "05", text1: "口红", }, { id: "06", text1: "美妆专区", }, { id: "07", text1: "面部清洁", }, { id: "08", text1: "洗护专区", }, { id: "09", text1: "面膜", }, { id: "010", text1: "口红", }, { id: "011", text1: "美妆专区", }, { id: "012", text1: "面部清洁", }, { id: "013", text1: "洗护专区", }, { id: "014", text1: "面膜", }, { id: "015", text1: "口红", }, { text1: "美妆专区", }, { text1: "面部清洁", }, { text1: "洗护专区", }, { text1: …