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

简单封装接口

接口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);
    	// 需要富文本的图片居中，就用 .replace() 来替换 
    	// let htmlSnip=this.addPrefix(content).replace(/\<img/g,'<img style="width:100%;height:auto;"');
    	// 把 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()
					 })
				 }
			})
		},

小程序跳转到其他小程序后，带参数跳回来

	// A 小程序
    let payData = {
        cardsetid:id,
        apl_openid:wx.getStorageSync("openid"),
        payment_type:"storedCard"
      }
      wx.navigateToMiniProgram({
        appId: 'qwe12312313',  // 目标小程序的appid
        path: '',
        extraData: { payData },
        envVersion: "release",  // release：目标小程序为开发板
        success(res) {
          // 打开成功
        }, 
        fail(res) {
        }
      }) 

// B 小程序
		wx.navigateBackMiniProgram({
          extraData: {
            cardno:data.cardno,  
            out_trade_no: data.out_trade_no,
            restaurantDate: data.restaurantDate ? data.restaurantDate : "",
          },
          success(res) {
            // 返回成功
          },
        });

// 回到 A 小程序
	app.js ：
	appData: "",
	onShow(options) {
	    if(options){
	      console.log(options);
	      // 从 B 回来后，options.referrerInfo.extraData里面会有数据
	      this.appData = options.referrerInfo.extraData; 
	      console.log(this.appData)
	    }
  },
  目标文件js：
    var app = getApp(),
    onShow() {
	  if(app.appData){
	    let cardno = app.appData.cardno; 
	    console.log(cardno);
	  }
  },