微信小程序小记

orderConfirmation里有接口的调用例子

向右箭头

<image src="/images/arrows.png" class="right-img"></image>
.right-img{
  height: 24rpx;
  width: 15rpx;
  min-height: 24rpx;
  min-width: 15rpx;
  padding-left: 10rpx;
}

引用富文本

  <rich-text nodes="{{article_content}}"></rich-text>

此代码段处理目的为，匹配富文本代码中的 标签，并将其图片的宽度修改为适应屏幕
max-width:100% — 图片宽度加以限制，避免超出屏幕
height:auto — 高度自适应
display:block — 此代码，可以去掉图片之间的空白间隔，个人觉得好用

article_content = article_content.replace(/<img/gi, '<img style="max-width:100%;height:auto;float:left;display:block" ');

评价星级

js

// 评价的星级
  changeStar1: function () {
    var that = this;
    that.setData({
      starNum: 1
    });
  },
  changeStar2: function () {
    var that = this;
    that.setData({
      starNum: 2
    });
  },
  changeStar3: function () {
    var that = this;
    that.setData({
      starNum: 3
    });

css

.stars{
  width: 36rpx;
  height: 36rpx;
  margin-left: 8rpx;
}

html

<view class="flex">
    <image src="{{starNum>=1? staron: starno}}" class="stars " bindtap="changeStar1"></image>
    <image src="{{starNum>=2? staron: starno}}" class="stars " bindtap="changeStar2"></image>
    <image src="{{starNum>=3? staron: starno}}" class="stars " bindtap="changeStar3"></image>
 </view>

微信等待中

const app = getApp(); 
app.showLoading('加载中');
wx.hideLoading();

让div滚动到顶部

var query = wx.createSelectorQuery()
query.select('#toTop').boundingClientRect(function (res) {
   console.log(res);
   wx.pageScrollTo({
    scrollTop: res.top,
    duration: 300
  })
}).exec();

微信小程序点击事件

tap：点击事件；

longtap：长按事件；

touchstart：触摸开始；

touchend：触摸结束；

touchcansce：取消触摸；

事件绑定：

bind绑定；

catch绑定；（能阻止事件冒泡）

例如：绑定点击事件 bindtap
文本绑定 bindinput

弹出提示

wx.showModal({
  title: '提示',
  content: '这是一个模态弹窗',
  success (res) {
    if (res.confirm) {
      console.log('用户点击确定')
    } else if (res.cancel) {
      console.log('用户点击取消')
    }
  }
})

拨打电话

wx.showModal({
	title: '提示',
	content: `确定拨打电话: ${that.data.servisePhone}`,
	success (res) {
	  if (res.confirm) {
	    wx.makePhoneCall({
	      phoneNumber: that.data.servisePhone //仅为示例，并非真实的电话号码
	    })
	  } else if (res.cancel) {
	  }
	}
})

点击复制

<view>内容：{{contents}} </view>
<view  bindtap='copyText' data-text="{{contents}}">复制</view>

Page({
  data: {
    contents:'这是可以复制的文字,粘贴后即可看到效果'
  },
  copyText: function (e) {
    console.log(e)
    wx.setClipboardData({
      data: e.currentTarget.dataset.text,
      success: function (res) {
        wx.getClipboardData({
          success: function (res) {
            wx.showToast({
              title: '复制成功'
            })
          }
        })
      }
    })
  },
})

微信返回上一页

prevPage.setData({
  mydata: {
    id:1,
    b: 125
  }
})
wx.navigateBack({//返回
  delta: 1
})

如果要返回上一页并刷新数据的话，数据要写在onShow方法里

返回到首页底部导航栏页面

 wx.switchTab({
    url: "../../../pages/home/newhome/index"
  })

分享

<button class='button-fx' open-type="share" style="margin-right:7rpx">
	<image src="/images/fx.png" class="fx-img">
	</image>
</button>