【微信小程序】几个常用小功能

简单封装接口

接口js文件：
function aaa(data, callback) {wx.request({url: url + "/testUrl",method: "GET",header: {"Cookie": wx.getStorageSync("JSESSIONID"),"Content-Type": "application/x-www-form-urlencoded"},data,success(result) {callback && callback(result);}});引接口js：
var http = require("../../util/port.js") // 找到接口js文件// 使用接口
http.aaa({qwe:123,  // 传参}, (res) => {console.log(res) ;})

点击加载更多按钮显示数据

wxml：
<text bindtap="setLoading">{{loadText}}</text>js：data: {loadText: '加载更多',dataPage:1,pageSize: 5,commontList: [],},onLoad(options) {let urlPrefix = app.urlPrefix;  // this.setData({urlPrefix})// 调数据接口,后端是一页五条数据，onload页面直接调第一页vsindon.queryhotelevalutionrecord({page: 1,pageSize: this.data.pageSize,hotelId: app.hotelId, }, (res) => {let that = this;res.data.data.list.forEach((item) => {// 处理后端的数据------------item.body = item.body.split(',')[0]item.checkindate = that.filterTime(item.checkindate) // 处理时间戳item.image = item.image.split(',').map((v) => {if(v){return v}})})this.setData({commontList: res.data.data.list})})},//点击 加载更多 按钮setLoading(e) {let that = this;let ranklistBefore = that.data.commontList;let page1 = this.data.dataPage+1;this.setData({dataPage:page1}) // 点击后调第二页的数据vsindon.queryhotelevalutionrecord({page: page1,pageSize: that.data.pageSize,hotelId: app.hotelId,}, (res) => {console.log(res);//  加载更多的数据也要处理res.data.data.list.forEach((item) => {item.body = item.body.split(',')[0]item.checkindate = that.filterTime(item.checkindate)item.image = item.image.split(',').map((v) => {if(v){return v}})})// 每请求一次就发送5条数据过来let eachData = res.data.data.list;if (eachData.length == 0) {wx.showToast({title: '没有更多数据了!~',icon: 'none'})} else {wx.showToast({title: '数据加载中...',icon: 'none'})}that.setData({commontList: ranklistBefore.concat(eachData),  // 拼接数据然后重新返回给数组});})},

实现富文本图片和文字到页面上

信息是传过来的，所以写在 onLoad 的生命周期里面的。

 onLoad(options) {       // 先找到后台传过来的富文本信息var content = options.introduce;console.log(content);let htmlSnip=this.addPrefix(content)  // 把 htmlSnip 存起来this.setData({htmlSnip,//imgUrl:imgUrl,  })},

//富文本方法
addPrefix(str) {// 取到图片前缀url，这里在app.js里面的 globalData 存好了地址前缀let imgUrl=getApp().globalData.imgUrl   return str.replace(/src=("|')(.+?)\1/g, function () {return /^(https\:|http\:)/.test(arguments[2]) ? "class='classimg'"+arguments[0] : "class='classimg' src=\'" + imgUrl + arguments[2] + "\'";});},

写完了 log 一下 htmlSnip，会加上图片前缀的 url

wxml上用：

     <rich-text nodes="{{htmlSnip}}" class="htmlSnip"></rich-text>

按钮节流

wxml:<text class="buyBtn"bindtap="{{isClick?'buyBtn':''}}">立即购买</text>js:
data:{isClick: true ,
}
buyBtn(){this.throttle()  //放最上面.... //调接口以及后续操作
}
throttle() {if(this.data.isClick) {this.setData({isClick: false});setTimeout(()=>{this.setData({isClick: true})            },2000); // 2秒内执行一次}else {return;        }
},

点击某个tabbar页面更新数据

    onShow: function () {const pages = getCurrentPages()const perpage = pages[pages.length - 1]perpage.onLoad()  },

跳tabbar页面并刷新数据

    goShoppingCar(){wx.switchTab({url:'../shoppingCar/shoppingCar',success() {setTimeout(function () {var page = getCurrentPages().pop();if (page == undefined || page == null) return;page.onLoad()})}})},

【微信小程序】几个常用小功能相关推荐

微信小程序云开发——常用功能2：操作云数据库一键批量导入数据（导入json文件）
微信小程序云开发--常用功能2:操作云数据库一键批量导入数据(导入json文件) 今天我们要添加100条数据.下面的过程是先创建一条记录,然后导出这条数据看json文件中是如何编辑字段的,然后仿照这个 ...
微信小程序入门之常用组件(04)
常见组件重点讲解微信小程序中常见的布局组件 view,text,rich-text,button,image,navigator,icon,swiper, radio,checkbox 等一.vi ...
从0到一开发微信小程序（6）—小程序常用API
文章目录其他相关文章 1.小程序API 1.1.路由 1.1.1.navigateTo(保留当前页面,跳转到应用内的某个页面,可以带参数) 1.1.2.redirectTo(关闭当前页面,跳转到应用 ...
微信小程序 Notes ｜常用开发事例（五）基于云平台导出 Excel
历史文章回顾: 微信小程序 | 开发常用事例(一) 微信小程序 | 开发常用事例(二) 微信小程序 Notes | 开发常用事例(三) 微信小程序 Notes | 开发常用事例(四) 一.前言最近一 ...
医院微信预约挂号小程序开发_分享医院做预约挂号小程序的可以实现什么功能
小程序有 60+入口,在微信生态链中无处不在,只要客户是微信用户,他们可以根据搜索.二维码朋友圈找到你的小程序.哪怕是医药行业,也可以做个医院小程序来提高预约和经营运转的效率,解放人力. 1.医院微信 ...
微信分销商城小程序几种常用开发方法
一.微信分销商城小程序几种常用开发方法 1.自主开发这种方式是很多企业考虑的,但这种开发方式的前提是有自己的开发团队或重新组建开发团队.无论是重组自己的开发团队还是有自己开发团队,功能要求.前后端开 ...
微信小程序 - 实现左滑动删除功能
微信小程序 - 实现左滑动删除功能效果图: 实现过程: 一.wxml布局这里我是先用了一个大盒子包裹小盒子,然后小盒子里面进行左右布局(左边为内容部分,右边为删除按钮)的方式实现的 <vie ...
微信小程序购物车数量加减功能
微信小程序购物车数量加减功能 wxml  <view class="stepper">  < ...
微信小程序的搜索和重置功能
微信小程序的搜索和重置功能 wxml <template><div><div class="input-wrap"><el-inputse ...
基于微信小程序的用户列表点赞功能
代码地址如下: http://www.demodashi.com/demo/13997.html 一.前言 (1).适合人群 1.微信小程序开发者 2.前端工程师 3.想入门学习小程序开发的人员 4. ...

【微信小程序】几个常用小功能

简单封装接口

点击加载更多按钮显示数据

实现富文本图片和文字到页面上

按钮节流

点击某个tabbar页面更新数据

跳tabbar页面并刷新数据

【微信小程序】几个常用小功能相关推荐

最新文章

热门文章