轩宇网 - 微信小程序开发
type: channel
link: http://www.xysoft.cc/category/wxapp
description: 微信小程序开发
items: 微信小程序+php 授权登陆查看，完整代码
items: 微信小程序搜索功能(附：小程序前端+PHP后端)
items: 微信小程序开发搜索功能实现(前端+后端+数据库)
items: 微信小程序选择图片和放大预览图片功能
items: 微信小程序实现左侧滑动导航栏
items: 微信小程序实现slideUp、slideDown滑动效果及点击空白隐藏功能示例
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改成你数据库的相关字段。到此这篇关于微信小程序开发搜索功能实现的文章就介绍到这了,更多相关小程序搜索功能内容请搜索轩宇网以前的文章或继续浏览下面的相关文章希望大家以后多多支持轩…

微信小程序选择图片和放大预览图片功能
type: item
date: 2019-10-21T23:07:06+08:00
description: 这篇文章主要介绍了微信小程序图片放大预览功能的实现方法,非常不错，具有参考借鉴价值，需要的朋友可以参考下视频中,老师也是看着官方文档,为学生们讲解,微信提供了系统的方法来选择图片.wx.chooseImage({})此方法是用来选择图片的方法,具体使用如下:data: { avatarUrl:null },首先在数据中定义接收数据的变量，然后调用方法选择图片，将图片显示出来。bindViewTap:function(){ var that = this; wx.chooseImage({ // 设置最多可以选择的图片张数，默认9,如果我们设置了多张,那么接收时//就不在是单个变量了, count: 1, sizeType: ['original', 'compressed'], // original 原图，compressed 压缩图，默认二者都有 sourceType: ['album', 'camera'], // album 从相册选图，camera 使用相机，默认二者都有 success: function(res){ // 获取成功,将获取到的地址赋值给临时变量 var tempFilePaths = res.tempFilePaths; that.setData({ //将临时变量赋值给已经在data中定义好的变量 avatarUrl:tempFilePaths }) }, fail: function(res) { // fail }, complete: function(res) { // complete } }) }此时我们定义的全局变量,也就是data中的url,已经有值了,现在只需要在页面中显示即可。//点击此按钮调用选择图片的方法,成功后将图片显示在image标签上 绑定事件 <image src="{{avatarUrl}}"></image>如果是多选的话,在显示的时候,就不应该直接显示数据源了,这样会报错的,因为返回的是数组:<image wx:for="{{avatarUrl}}" wx:key="unique" src="{{item}}"></image>图片预览:下面说一下图片预览:首先在data中定义好数据源:data:{ avatarUrl:null, pictures: [ 'https://p0.meituan.net/movie/ea4ac75173a8273f3956e514a4c78018253143.jpeg', 'https://p0.meituan.net/movie/5d4fa35c6d1215b5689257307c461dd2541448.jpeg', 'https://p0.meituan.net/movie/0c49f98a93881b65b58c349eed219dba290900.jpg', 'https://p1.meituan.net/movie/45f98822bd15082ae3932b6108b17a01265779.jpg', 'https://p1.meituan.net/movie/722de9a7b0c1f9c262162d87eccaec7c451290.jpg', 'https://p0.meituan.net/movie/cb9be5bbedb78ce2ef8e83c93f83caca474393.jpg', 'https://p1.meituan.net/movie/a852b992cdec15319c717ba9fa9b7a35406466.jpg', 'https://p1.meituan.net/movie/dc1f94811793e9c653170cba7b05bf3e484939.jpg' ] },然后创建方法previewImage,实现图片预览:previewImage: function(e){ var that = this, //获取当前图片的下表 index = e.currentTarget.dataset.index, //数据源 pictures = this.data.pictures; wx.previewImage({ //当前显示下表 current: pictures[index], //数据源 urls: pictures }) }然后再页面中边遍历数据,显示:<view> <image wx:for="{{pictures}}" wx:key="unique"src="{{item}}" data-index="{{index}}" bindtap="previewImage"></image> </view>先列表显示全部图片,绑定预览方法,点击图片进行左右预览,下面在给大家补充下…

微信小程序实现左侧滑动导航栏
type: item
date: 2019-10-21T22:56:27+08:00
description: 这篇文章主要为大家详细介绍了微信小程序实现左侧滑动导航栏，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下本文实例为大家分享了微信小程序实现左侧滑动导航栏的具体代码，供大家参考，具体内容如下左侧滑动导航栏如图wxml <view class='under_line'></view> <view style='float: left' class='left'> <scroll-view scroll-y scroll-with-animation scroll-left="{{scrollLength}}" class='scrollY' style='height: {{winHeight}}px'> <view class='all clear'> <block wx:key="lists" wx:for="{{lists}}"> <view bindtap='jumpIndex' data-menuindex='{{index}}'> <view class='text-style'> <text class="{{indexId==index?'active1':''}}">{{item}}</text> <text class="{{indexId==index?'active':''}}"></text> </view> </view> </block> </view> </scroll-view> </view>wxss.under_line{ width: 100%; border-top: 1rpx solid #efefef; } .scrollY { width: 200rpx; position: fixed; left: 0; top: 0; border-right: 1rpx solid #efefef; } .left { border-top: 1rpx solid #efefef; border-right: 1rpx solid #efefef; } .text-style { width: 200rpx; height: 140rpx; line-height: 140rpx; text-align: center; font-size: 34rpx; font-family: PingFangSC-Semibold; color: rgba(51, 51, 51, 1); } .active1 { color: #85d1fd; } .active { display: block; width: 50rpx; height: 6rpx; background: #85d1fd; position: relative; left: 75rpx; bottom: 30rpx; }jsPage({ /** * 页面的初始数据 */ data: { lists: [ "标题1", "标题二", "标题三", "标题四", "标题五", "标题六", "标题七", "标题八", "标题九", "标题十", "标题十一", "标题十二" ], indexId: 0, }, // 左侧点击事件 jumpIndex(e) { let index = e.currentTarget.dataset.menuindex let that = this that.setData({ indexId: index }); }, /** * 生命周期函数--监听页面加载 */ onLoad: function(options) { var that = this wx.getSystemInfo({ success: function(res) { that.setData({ winHeight: res.windowHeight }); } }); }, /** * 生命周期函数--监听页面初次渲染完成 */ onReady: function() { }, /** * 生命周期函数--监听页面显示 */ onShow: function() { }, /** * 生命周期函数--监听页面隐藏 */ onHide: function() { }, /** * 生命周期函数--监听页面卸载 */ onUnload: function() { }, /** * 页面相关事件处理函数--监听用户下拉动作 */ onPullDownRefresh: function() { }, /** * 页面上拉触底事件的处理函数 */ onReachBottom: function() { }, /** * 用户点击右上角分享 */ onShareAppMessage: function() {…

微信小程序实现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-07-15T14:19:00+08:00
description: 这篇文章主要介绍了微信小程序开发技巧汇总,文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下1.全局变量的使用每个小程序都需要在 app.js 中调用 App 方法注册小程序示例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。详细的参数含义和使用请参考 App 参考文档 。整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例，获取App上的数据或调用开发者注册在 App 上的函数。我们在做小程序的时候往往需要大量的请求，而请求的域名也都是相同的，我们可以把域名储存到全局变量中，这样会方便后面请求域名的修改。（user_id、unionid、user_info之类经常用到的都可以放在全局变量中）//app.js App({ globalData: { user_id: null, unionid:null, url:"https://xxx.com/index.php/Home/Mobile/", //请求的域名 user_info:null } })当在页面中使用时记得要引用下app.js，小程序已经提供了方法//index.js //获取应用实例 const app = getApp() //获取app //let url = app.globalData.url; //使用方法，可先定义或者直接使用app.globalData.url wx.request({ url: app.globalData.url + 'checkfirst', //就可以直接在这里调用 method:'POST', header:{"Content-Type":"application/x-www-form/"} data:{}, success:(res)=>{}2.箭头函数的使用当我们调用接口请求时要通过请求返回的数据改变页面数据经常要用到临时指针来保存this指针。但如果使用ES6的箭头函数就可以避免使用临时指针onLoad: function (options) { let that = this //保存临时指针 wx.request({ url: url + 'GetCouponlist', method: 'POST', header: { 'Content-Type': 'application/x-www-form-urlencoded' }, data: { }, success(res) { that.setData({ //使用临时指针 coupon_length:res.data.data.length }) } })使用ES6箭头函数 ( ) => {}success:(res) => { this.setData({ //此时this仍然指向onLoad coupon_length:res.data.data.length }) }3.HTTP请求方法的封装在小程序中http请求是很频繁的，但每次都打出wx.request是很烦的，而且代码也是冗余的，所以我们要把他封装起来首先要在utils文件夹中新建一个js，我命名为request.js,在里面封装出post和get的请求，记得最后要声明出来//封装请求 const app = getApp() let host = app.globalData.url /** * POST 请求 * model:{ * url:接口 * postData:参数 {} * doSuccess:成功的回调 * doFail:失败回调 * } */ function postRequest(model) { wx.request({ url: host + model.url, header: { "Content-Type": "application/x-www-form-urlencoded" }, method: "POST", data: model.data, success: (res) => { model.success(res.data) }, fail: (res) => { model.fail(res.data) } }) } /** * GET 请求 * model:{ * url:接口 * getData:参数 {} * doSuccess:成功的回调 * doFail:失败回调 * } */ function getRequest(model) { wx.request({ url: host + model.url, data: model.data, success: (res) => { model.success(res.da…

微信小程序实现订单倒计时
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…