Pelaksanaan PHP teknik menu gelongsor sisi applet WeChat

Dengan populariti program mini WeChat, semakin ramai pembangun mula menggunakannya untuk membangunkan pelbagai aplikasi. Dalam program mini, menu gelongsor sisi ialah antara muka UI biasa Pengguna boleh membuka atau menutup menu dengan meluncur ke kiri atau kanan. Artikel ini akan memperkenalkan cara menggunakan PHP untuk melaksanakan teknik menu gelongsor program mini WeChat.

1. Prasyarat

Sebelum mula memperkenalkan cara melaksanakan menu gelongsor sisi program mini WeChat, anda perlu memahami beberapa prasyarat:

1 Pengetahuan program mini WeChat, termasuk seni bina program mini, JS, CSS, HTML, dsb.

2. Anda mesti boleh memprogram menggunakan PHP.

3. Anda perlu memahami antara muka dan acara dalam program mini WeChat.

2. Cipta menu

Mencipta menu dalam applet WeChat memerlukan langkah berikut:

1 applet, sebagai Bekas untuk menu. Anda boleh menggunakan 89c662c6f8b87e82add978948dc499d2, 050e2adc6de973d5d8d682f9c1b9f656, 806a43c0997cff837bc4d4708cd6ae53 dan komponen lain untuk memilih komponen yang sesuai mengikut keperluan tertentu.

Contohnya:

<scroll-view class="menu">
  <view class="menu-item">菜单项1</view>
  <view class="menu-item">菜单项2</view>
  <view class="menu-item">菜单项3</view>
</scroll-view>

2. Buat butang dalam fail wxml, mengklik butang akan membuka menu.

Contohnya:

<button class="btn-menu" bindtap="showMenu">打开菜单</button>

3. Tetapkan gaya menu dan butang dalam fail wxss. Anda boleh menetapkan lebar, ketinggian, warna latar belakang dan gaya lain.

Contohnya:

.menu {
  position: fixed;
  top: 0;
  left: -80%;
  width: 80%;
  height: 100%;
  background-color: #fff;
  transition: all 0.3s;
}

.btn-menu {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 50px;
  height: 50px;
  background-color: #333;
  color: #fff;
  border-radius: 50%;
  text-align: center;
  line-height: 50px;
}

4. Tulis acara untuk membuka dan menutup menu dalam fail JS program mini.

Contohnya:

Page({
  data: {
    isMenuShow: false // 菜单是否显示
  },
  // 打开菜单
  showMenu: function () {
    this.setData({
      isMenuShow: true
    })
  },
  // 关闭菜单
  hideMenu: function () {
    this.setData({
      isMenuShow: false
    })
  }
})

5 Akhir sekali, ikat peristiwa mula sentuh, gerak sentuh, akhir sentuh bekas menu dalam fail wxml untuk mencapai kesan gelongsor menu.

Contohnya:

<scroll-view class="menu" bindtouchstart="touchstart" bindtouchmove="touchmove" bindtouchend="touchend">
  <view class="menu-item">菜单项1</view>
  <view class="menu-item">菜单项2</view>
  <view class="menu-item">菜单项3</view>
</scroll-view>

Antaranya, pelaksanaan acara touchstart, touchmove, touchend adalah seperti berikut:

/**
* 记录手指起始位置
*/
touchstart: function (e) {
  this.touchX = e.changedTouches[0].clientX
},

/**
* 菜单跟随手指移动
*/
touchmove: function (e) {
  var moveX = e.changedTouches[0].clientX
  var distanceX = this.touchX - moveX // 手指移动的距离
  var menuWidth = parseInt(this.menuWidth)
  var left = this.data.menuLeft
  left -= distanceX
  if (left < -menuWidth) { // 边界判断
    left = -menuWidth
  } else if (left > 0) {
    left = 0
  }
  this.setData({
    menuLeft: left
  })
  this.touchX = moveX
},

/**
* 手指离开，根据偏移量决定菜单是否关闭
*/
touchend: function (e) {
  var left = this.data.menuLeft
  var menuWidth = parseInt(this.menuWidth)
  if (left < -menuWidth / 2) {
    this.setData({
      isMenuShow: false
    })
  } else {
    this.setData({
      menuLeft: 0
    })
  }
}

3 pelaksanaan PHP

Selepas memahami cara mencipta menu , berikut memperkenalkan cara menggunakan PHP untuk melaksanakan teknik menu gelongsor sisi program mini WeChat. Kunci kepada pelaksanaan adalah untuk menyimpan kod applet WeChat ke dalam fail PHP dan memasangnya ke dalam halaman applet lengkap dan mengembalikannya kepada klien.

1. Mula-mula, buat fungsi dalam fail PHP untuk mengembalikan halaman applet yang lengkap.

Contohnya:

function getMenuPage() {
  // 读取小程序的wxml、wxss、JS文件内容
  $wxml = file_get_contents('./menu.wxml');
  $wxss = file_get_contents('./menu.wxss');
  $js = file_get_contents('./menu.js');
  // 拼装成完整的小程序页面，并返回给客户端
  $page = '<!DOCTYPE html>
    <html>
        <head>
            <title>菜单</title>
            <style>'.$wxss.'</style>
            <script>'.$js.'</script>
        </head>
        <body>
            '.$wxml.'
        </body>
    </html>';
  header('Content-Type: text/html; charset=utf-8');
  echo $page;
}

2 Dalam applet, apabila mengakses fail PHP, anda perlu menetapkan kaedah permintaan untuk MENDAPATKAN dan menghantar data dalam URL untuk memberitahu fail PHP yang mana. applet untuk kembali ke halaman program.

Contohnya:

wx.request({
  url: 'http://example.com/menu.php?page=getMenu',
  method: 'GET',
  success: function (res) {
    // 将返回的HTML代码插入到页面中
    $('.container').append(res.data)
  },
  fail: function (res) {
    console.log(res)
  }
})

3 Fail PHP menerima permintaan dan mengembalikan halaman program mini yang sepadan mengikut parameter yang diluluskan.

Contohnya:

$action = $_GET['page'];
switch ($action) {
  case 'getMenu':
    getMenuPage();
    break;
  default:
    echo '页面不存在！';
    break;
}

Ringkasnya, menggunakan PHP untuk melaksanakan kemahiran menu gelongsor sisi program WeChat memerlukan penguasaan pengetahuan pembangunan program mini WeChat dan kemahiran pengaturcaraan PHP melalui PHP Halaman program mini perlu menangani isu pengekodan. Melalui pengenalan artikel ini, saya percaya bahawa pembaca mempunyai pemahaman yang lebih mendalam tentang menggunakan PHP untuk melaksanakan menu gelongsor sisi program mini WeChat.

Atas ialah kandungan terperinci Pelaksanaan PHP teknik menu gelongsor sisi applet WeChat. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!