小程序常用功能总结

分享页面

必须在页面写分享生命周期函数onShareAppMessage

onShareAppMessage(){
      return {
        title: '自定义转发标题',
        path: '/pages/index',
        imageUrl:"xxx.png"
      }
    }

• 点击按钮分享

必须要有onShareAppMessage声明周期函数

  <button  open-type="share">分享小程序</button>

若不希望分享当前页面不需要写onShareAppMessage函数

添加客服对话

客服模块文档

1. 在 小程序后台客服消息里添加客服微信号
2. 在代码里添加 contact-button组建

wxml

<view class="contact-sec">
    <contact-button class='contactbtn0 contact-btn' type="default-dark" size="20" session-from="weapp" />
    <contact-button class='contactbtn1 contact-btn' type="default-dark" size="20" session-from="weapp" />
    <contact-button class='contactbtn2 contact-btn' type="default-dark" size="20" session-from="weapp" />
    <contact-button class='contactbtn3 contact-btn' type="default-dark" size="20" session-from="weapp" />
    <contact-button class='contactbtn4 contact-btn' type="default-dark" size="20" session-from="weapp" />
    <image class='contactimg' src="images/connect.png"></image>

</view>

wxss

.contact-sec {
  position: relative;

}
.contactbtn {
  position: absolute;
  border: 1px solid red;
}
//给contact-button定位

!设置好多个contact-button组件是因为这个组件的图标很小，多设置几个可以增加点击的面积，然后设置透明，在同样的位置放上自己设计的图标就可以了

拨打电话

wx.makePhoneCall({
  phoneNumber: '13400000000' //仅为示例，并非真实的电话号码
})

上拉加载下拉刷新

上拉加载分页

 loadMore: function () {
    //加载函数
  },
  
  //小程序上拉加载监听函数
  onReachBottom: function () {
    console.log('加载更多');
    this.loadMore();
  }, 

下拉刷新

app.json 要开启下来刷新，要在app.json的window里设置 "enablePullDownRefresh":true

{
    "window":{
        "enablePullDownRefresh":true
    }
}

js

//小程序自带下来监听函数
onPullDownRefresh: function () {

  }

图片预览

点击图片调用wx.previewImage方法

wxml

<block wx:for="{{data.imglist}}" wx:for-item="img">
    <image src="{{img}}" data-imglist="{{data.imglist}}" data-src="{{img}}" bindtap="previewImage" />
</block>

js

previewImage:function(e){

    var currentimg =  e.currentTarget.dataset.src;
    var imglist =  e.target.dataset.imglist;
    
     wx.previewImage({
      current: currentimg, // 当前显示图片的http链接  
      urls: imglist// 需要预览的图片http链接列表 必须是[1.jpg,2.jpg]这种格式
    })
    
}

小程序消息通知

该功能需要前后端配合，前端通过点击form获取formid，后端拿到formid存放后才可以推送。

wxml

 <form bindsubmit="formSubmit" report-submit>
  <button plain class="btn" form-type="submit" data-type="click">
    点击我
  </button>  
</form>

js

formSubmit: function (e) {
    let formId = e.detail.formId;
    util.request("session_key", {
      url: `${app.globalData.apiurl}message`,
      method: "POST",
      data:{
        form_id: formId
      },
      success: function (data) {
       
      }
    })
  }

去掉button组件默认边框

wxml

<button>
    点击
</button>

wxss

button::after{
    border:0;
}

更多分享