Pelaksanaan PHP teknik menu gelongsor sisi applet WeChat-tutorial php-php.cn

Rumah

pembangunan bahagian belakang

tutorial php

Pelaksanaan PHP teknik menu gelongsor sisi applet WeChat

王林

May 31, 2023 pm 11:40 PM

php Program mini Menu sampingan

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 , , 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>

Salin selepas log masuk

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

Contohnya:

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

Salin selepas log masuk

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;
}

Salin selepas log masuk

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
    })
  }
})

Salin selepas log masuk

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>

Salin selepas log masuk

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
    })
  }
}

Salin selepas log masuk

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;
}

Salin selepas log masuk

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)
  }
})

Salin selepas log masuk

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;
}

Salin selepas log masuk

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!

Kenyataan Laman Web ini

Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

Menjana ai hentai secara percuma.

Tunjukkan Lagi

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Tetapan grafik terbaik

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Penyelesaian Riddle Seashell

3 minggu yang lalu By DDD

Apa yang Baru di Windows 11 KB5054979 & Cara Memperbaiki Masalah Kemas Kini

2 minggu yang lalu By DDD

Akan R.E.P.O. Ada Crossplay?

1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Tunjukkan Lagi

Alat panas

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Tunjukkan Lagi

Topik panas

Di manakah pintu masuk log masuk untuk e-mel gmail?

7559

Tutorial CakePHP

1384

Apakah format nama akaun stim

kunci pengaktifan win11 kekal

Sambungan NYT menunjukkan dan jawapan

Tunjukkan Lagi

Related knowledge

Panduan Pemasangan dan Naik Taraf PHP 8.4 untuk Ubuntu dan Debian Dec 24, 2024 pm 04:42 PM

PHP 8.4 membawa beberapa ciri baharu, peningkatan keselamatan dan peningkatan prestasi dengan jumlah penamatan dan penyingkiran ciri yang sihat. Panduan ini menerangkan cara memasang PHP 8.4 atau naik taraf kepada PHP 8.4 pada Ubuntu, Debian, atau terbitan mereka

Cara Menyediakan Kod Visual Studio (Kod VS) untuk Pembangunan PHP Dec 20, 2024 am 11:31 AM

Kod Visual Studio, juga dikenali sebagai Kod VS, ialah editor kod sumber percuma — atau persekitaran pembangunan bersepadu (IDE) — tersedia untuk semua sistem pengendalian utama. Dengan koleksi sambungan yang besar untuk banyak bahasa pengaturcaraan, Kod VS boleh menjadi c

7 Fungsi PHP Saya Menyesal Saya Tidak Tahu Sebelum ini Nov 13, 2024 am 09:42 AM

Jika anda seorang pembangun PHP yang berpengalaman, anda mungkin merasakan bahawa anda telah berada di sana dan telah melakukannya. Anda telah membangunkan sejumlah besar aplikasi, menyahpenyahpepijat berjuta-juta baris kod dan mengubah suai sekumpulan skrip untuk mencapai op

Bagaimana anda menghuraikan dan memproses HTML/XML dalam PHP? Feb 07, 2025 am 11:57 AM

Tutorial ini menunjukkan cara memproses dokumen XML dengan cekap menggunakan PHP. XML (bahasa markup extensible) adalah bahasa markup berasaskan teks yang serba boleh yang direka untuk pembacaan manusia dan parsing mesin. Ia biasanya digunakan untuk penyimpanan data

Jelaskan JSON Web Tokens (JWT) dan kes penggunaannya dalam PHP API. Apr 05, 2025 am 12:04 AM

JWT adalah standard terbuka berdasarkan JSON, yang digunakan untuk menghantar maklumat secara selamat antara pihak, terutamanya untuk pengesahan identiti dan pertukaran maklumat. 1. JWT terdiri daripada tiga bahagian: header, muatan dan tandatangan. 2. Prinsip kerja JWT termasuk tiga langkah: menjana JWT, mengesahkan JWT dan muatan parsing. 3. Apabila menggunakan JWT untuk pengesahan di PHP, JWT boleh dijana dan disahkan, dan peranan pengguna dan maklumat kebenaran boleh dimasukkan dalam penggunaan lanjutan. 4. Kesilapan umum termasuk kegagalan pengesahan tandatangan, tamat tempoh, dan muatan besar. Kemahiran penyahpepijatan termasuk menggunakan alat debugging dan pembalakan. 5. Pengoptimuman prestasi dan amalan terbaik termasuk menggunakan algoritma tandatangan yang sesuai, menetapkan tempoh kesahihan dengan munasabah,

Program PHP untuk mengira vokal dalam rentetan Feb 07, 2025 pm 12:12 PM

Rentetan adalah urutan aksara, termasuk huruf, nombor, dan simbol. Tutorial ini akan mempelajari cara mengira bilangan vokal dalam rentetan yang diberikan dalam PHP menggunakan kaedah yang berbeza. Vokal dalam bahasa Inggeris adalah a, e, i, o, u, dan mereka boleh menjadi huruf besar atau huruf kecil. Apa itu vokal? Vokal adalah watak abjad yang mewakili sebutan tertentu. Terdapat lima vokal dalam bahasa Inggeris, termasuk huruf besar dan huruf kecil: a, e, i, o, u Contoh 1 Input: String = "TutorialSpoint" Output: 6 menjelaskan Vokal dalam rentetan "TutorialSpoint" adalah u, o, i, a, o, i. Terdapat 6 yuan sebanyak 6

Terangkan pengikatan statik lewat dalam php (statik: :). Apr 03, 2025 am 12:04 AM

Mengikat statik (statik: :) Melaksanakan pengikatan statik lewat (LSB) dalam PHP, yang membolehkan kelas panggilan dirujuk dalam konteks statik dan bukannya menentukan kelas. 1) Proses parsing dilakukan pada masa runtime, 2) Cari kelas panggilan dalam hubungan warisan, 3) ia boleh membawa overhead prestasi.

Apakah kaedah Magic PHP (__construct, __destruct, __call, __get, __set, dll) dan menyediakan kes penggunaan? Apr 03, 2025 am 12:03 AM

Apakah kaedah sihir PHP? Kaedah sihir PHP termasuk: 1. \ _ \ _ Membina, digunakan untuk memulakan objek; 2. \ _ \ _ Destruct, digunakan untuk membersihkan sumber; 3. \ _ \ _ Call, mengendalikan panggilan kaedah yang tidak wujud; 4. \ _ \ _ Mendapatkan, melaksanakan akses atribut dinamik; 5. \ _ \ _ Set, melaksanakan tetapan atribut dinamik. Kaedah ini secara automatik dipanggil dalam situasi tertentu, meningkatkan fleksibiliti dan kecekapan kod.

See all articles