分享頁面

必須在頁面寫分享生命週期函式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;
}

更多分享