Mari kita bincangkan tentang modul wxs dalam applet WeChat dan perkenalkan cara menggunakannya.

Artikel ini akan membawa anda memahami modul wxs dalam applet WeChat dan memperkenalkan penggunaan wxs saya harap ia akan membantu semua orang.

Ditulis sebelum ini, beberapa pemikiran:

Kami telah membangunkan program mini WeChat sejak sekian lama, dan saya perlu menyatakan bahawa Program mini WeChat API program dan pelbagai komponen berpakej sememangnya sangat berkuasa dan menjimatkan masa pembangun pada tahap yang besar, tetapi bagi saya, saya lebih suka menulis sesuatu sendiri Semuanya dibungkus dalam komponen WeChat, Pembangunan dalam API hanya boleh mencapai operasi seperti pekerja mahir dari semasa ke semasa.

Walaupun program kecil juga terkandung dalam satu lapisan, sentiasa ada perbezaan antara menggunakan yang sudah siap dan menulisnya sendiri. Sebagai contoh, bergantung sepenuhnya pada pembungkusan rasmi WeChat dan pembangunan diri berdasarkan program mini asli adalah seperti perbezaan antara menghias bilik berkulit keras dan bilik kasar Ia bergantung sepenuhnya pada pembungkusan WeChat Anda hanya perlu memindahkan perabot ke dalam kulit keras Itu hebat, ia boleh dikatakan sebagai binaan yang pantas, saya tidak menolak API yang dibungkus oleh WeChat tidak akan kehilangan keupayaan saya untuk berkembang dari awal Lagipun, bahagian hadapan bukan hanya program kecil.

Teks:

Baru-baru ini, terdapat keperluan untuk mempunyai peluncur pada halaman Anda boleh menyeret peluncur ke mana-mana kedudukan pada halaman dengan jari anda, dan lepaskannya selepas , gelangsar boleh menyerap tepi secara automatik.

Memandangkan elemen DOM tidak boleh dimanipulasi secara langsung dalam program mini, gaya tidak boleh ditetapkan secara langsung melalui js Jika anda mahu peluncur bertindak balas dengan cepat kepada gelongsor jari anda, mencari kedudukan elemen melalui data bagi. halaman adalah sama dengan setData peringkat Milliseconds Satu tindak balas setData memerlukan dua komunikasi antara lapisan logik dan lapisan pemaparan dan satu pemaparan Komunikasi ini agak memakan masa. Selain itu, pemaparan setData juga akan menyekat pelaksanaan skrip lain pada frekuensi ini dengan mudah boleh menyebabkan ketinggalan, jadi penyelesaian ini tidak boleh dilaksanakan.

Dalam program mini WeChat, pegawai menyediakan bekas paparan yang dipanggil movable-view Ini sepatutnya dapat menyelesaikan permintaan Namun, seperti yang dinyatakan di atas, apabila perbezaan prestasi tidak besar, saya lebih suka saya cenderung untuk menulisnya sendiri, dan ini adalah alternatif.

Penggunaan WXS

Dengan kata lain, wxs digunakan khusus untuk halaman wxml Ya, apa yang ia laksanakan ialah fungsi memanggil fungsi pada lapisan paparan

Kaedah panggilan

Walaupun ia dijelaskan dalam dokumentasi WeChat, Wxs ialah bahasa skrip untuk program kecil Ia mempunyai sintaksnya sendiri, tetapi kebanyakan sintaks tidak jauh berbeza daripada js Jika anda berminat, anda boleh membaca dokumentasi itu sendiri. Applet WeChat menyediakan dua kaedah panggilan Saya tidak akan pergi ke butiran di sini Cuma tampal kod terus

wxml:

<view class="main">
<view>主页</view>
<wxs module="IndexWxs" src="./index.wxs"></wxs>//新建index.wxs文件，在wxs标签中自定义路径引入，IndexWxs为自定义的module名
    <view 
    change:prop="{{IndexWxs.chooseShow}}" //change:prop是起到类似observe的监听作用，当prop中的data属性有更新的时候，会触发change:prop的方法
    prop="{{monitor}}" //data属性
    data-navHeight="{{navHeight}}" //可以使用data-自定义传入属性
    data-edge="{{edgeData}}" 
    catch:touchstart="{{IndexWxs.touchStartByBlock}}" //要调用wxs的方法需使用{{  }}
    catch:touchmove="{{IndexWxs.touchMoveByBlock}}" 
    catch:touchend="{{IndexWxs.touchEndByBlock}}">
    </view>
</view>

wxs:

var x = 0,y = 0;
//viewData 使用小程序获取节点信息的方法，通过data-传入
var viewData = {
  height: 0,//滑块的宽高
  width: 0,
  windowHeight: 0,//屏幕的宽高
  windowWidth: 0
}
var eventInstance = null
module.exports = {
//触摸开始
  touchStartByBlock: function (event) {
    eventInstance = event;// event.instance为组件实例
    var setViewData = event.currentTarget.dataset//获取data-传入的值
    if (setViewData && setViewData.edge && setViewData.edge.windowHeight) {
      viewData = setViewData.edge
    }
    x = event.changedTouches[0].clientX - viewData.width/2//滑动过程中保持手指在模块中心位置
    y = event.changedTouches[0].clientY - viewData.height/2
  },

//触摸移动中，可以给x,y写一些边界值判断，防止滑块越界，此处不做展示
  touchMoveByBlock: function (event) {
    x = event.changedTouches[0].clientX - viewData.width/2
    y = event.changedTouches[0].clientY - viewData.height/2

    event.instance.setStyle({//使用setStyle设置的样式权重比wxml设置的样式高
      transform: 'translate('+x+'px'+','+y+'px)'//setStyle需使用字符串
    })
  },

//松开手指，触摸结束时
  touchEndByBlock: function (event) {
    //吸边处理，判断当前手指位置在屏幕的哪一边
    x = viewData.windowWidth/2 < x ? viewData.windowWidth-viewData.width : 0;
    y = y > viewData.windowHeight-viewData.height ? viewData.windowHeight-viewData.height : y
    event.instance.setStyle({
      transform: &#39;translate(&#39;+x+&#39;px&#39;+&#39;,&#39;+y+&#39;px)&#39;,
    })
  },
//当props的monitor数据发生变化的时候触发该方法，会自动传入monitor当前值，一些业务逻辑可以在此处处理
  chooseShow: function (monitor) {
    console.log(&#39;监听到更新，monitor=&#39;,monitor);
  }
}

Tutorial Pembangunan Program Mini]

Atas ialah kandungan terperinci Mari kita bincangkan tentang modul wxs dalam applet WeChat dan perkenalkan cara menggunakannya.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!