Rumah > Artikel > applet WeChat > Ringkaskan dan kongsi beberapa masalah yang dihadapi dalam pembangunan program kecil (untuk membantu mengelakkan perangkap)
Artikel ini meringkaskan beberapa masalah yang dihadapi semasa membangunkan program mini WeChat sebelum ini dan berkongsi penyelesaiannya dengan anda, saya harap ia akan membantu semua orang!
Sila rujuk dokumentasi program mini terkini~:
https://developers.weixin.qq.com/ebook?action= get_post_info&docid=0008aeea9a8978ab0086a685851c0a&highline=webview
Gunakan block
semasa memaparkan senarai
<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block>
Gunakan block
semasa memaparkan senarai
Ia sebenarnya tidak akan dipaparkan pada halaman Ia hanya akan digunakan sebagai elemen yang dibalut dan menerima atribut kawalan
properties: { // 输入框的默认提示 placeholder: { type: String, // 属性值的类型 value: '' // 属性默认值 } },Komponen tersuai terbahagi kepada 4 bahagian
Fungsi kitaran hayat komponen , secara amnya gunakan sedia, dan lengkapkan reka letak komponen Selepas pelaksanaan, maklumat nod boleh diperolehi pada masa ini (menggunakan
// 子组件 var myEventDetail = {value: ''}; // detail对象,提供给事件监听函数,写需要传给外面的数据 var myEventOption = {} // 触发事件的选项 this.triggerEvent('onclear', myEventDetail, myEventOption)SelectorQuery
<!-- 父组件 --> <searchbar id="search-bar" bind:onsearch="onSearch" bind:onclear="onSearch" placeholder="搜索文章内容"></searchbar> <!-- 像绑定 bindtap 一样绑定自定义函数 -->)
// 父组件 onSearch(e){ console.log(e.detail.value) }
Panggil kaedah diluluskan oleh komponen induk
// 父组件,使用 selectComponent 拿到子组件的实例,直接调用其中的方法 let searchBar = this.selectComponent('#search-bar'); searchBar.setData({ value: e.currentTarget.dataset.name }) searchBar.onClickSearch({ detail: {value: e.currentTarget.dataset.name}});
// 获取屏幕宽度 let windowWidth = wx.getSystemInfoSync().windowWidth // 在组件内部需要写 this let query = wx.createSelectorQuery().in(this); let that = this; query.selectAll('.tagItem').boundingClientRect() query.exec(function (res) { let allWidth = 0; res[0].map(item=>{ allWidth = allWidth + item.width return allWidth }) let length = res[0].length let ratioWidth = allWidth / windowWidth that.setData({ allLength: length, iphone: ratioWidth + (length == 1 ? 0 : res[0].length * 0.0533) }) })
Komponen induk secara langsung memanggil kaedah komponen anak
Dapatkan lebar dan tinggi dom daripada komponen anakOnLoad tidak akan dipanggil apabila halaman kembali
Sebelum ini, saya menulis bahagian memanggil antara muka ke onLoad, masukkan halaman butiran daripada senarai artikel, dan kemudian daripada butiran Klik sudut kiri atas halaman untuk kembali ke halaman senarai halaman senarai harus dikemas kini, tetapi ia tidak dikemas kini kerana antara muka senarai artikel belum dilaraskan semula. Jadi bahagian melaraskan antara muka senarai artikel ditulis dalam onShow.<template name="tabbar"> <view class="tabbar-wrapper"> <block wx:for="{{tabbar.list}}" wx:key="item"> <navigator hover-class="none" class="tabbar_nav {{item.selected ?'selected':''}}" url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="reLaunch"> <view class="tab-item"><text class="{{item.iconPath}}" style="width: {{item.iconWidth}};height: {{item.iconHeight}}"></text>{{item.text}}<text class='red-tag' wx:if="{{tabbar.num && index==1}}">{{tabbar.num > 99 ? '99+' : tabbar.num}}</text></view> </navigator> </block> </view> </template>
Pengoptimuman bar tab tersuaireLaunch
<homePage id="home-page" wx:if="{{tabbarID == tabbarList.home}}" bind:onclicktab="setTabbar" ></homePage> <articleLibraryPage id="article-page" wx:if="{{tabbarID == tabbarList.article}}"></articleLibraryPage> <doclistPage id="doctor-page" wx:if="{{tabbarID == tabbarList.doctor}}"></doclistPage> <mePage id="me-page" wx:if="{{tabbarID == tabbarList.me}}"></mePage> <tabbar id="tab-bar" bind:onclick="onClickTabbar" tabbarID="{{tabbarID}}"></tabbar>
1. Sebelum ini ditulis dalam bentuk komponen, ia ditukar kepada templat; ikon pada bar tab ditukar kepada iconfont untuk menyelesaikan masalah flash ketika mengklik tabbar
onPullDownRefresh: function () { if (this.data.tabbarID === this.data.tabbarList.article) { // 使用 selectComponent 找到组件实例,调用内部方法 let articlePage = this.selectComponent('#article-page'); articlePage.onPullDownRefresh(); } else if (this.data.tabbarID === this.data.tabbarList.doctor){ let doctorPage = this.selectComponent('#doctor-page'); doctorPage.onPullDownRefresh(); } else { wx.stopPullDownRefresh(); } },
Halaman dengan bar tab ditulis semula sebagai komponen
Kerana hanya terdapat kaedah sedia selepas pemasangan selesai dalam komponen, onShow, onReachBottom dan onPullDownRefresh dalam halaman sebelumnya semuanya diletakkan pada halaman induk untuk memanggil
Setiap bar tab akan mempunyai kesan muat semula tarik-turun, walaupun tiada muat semula tarik-turun diperlukan
Klik butang dari halaman lain untuk melompat terus ke tab pada Kad halaman utama, mungkin terdapat masalahtransfonter.org/
Tukar yang di atas ke dalam format base64In app.wxss import iconfont.wxss
Nota: Gaya dalam komponen itu sendiri tidak terjejas oleh app.wxss Oleh itu, apabila iconfont perlu digunakan dalam komponen, Anda perlu mengimport app.wxss atau iconfont.wxss secara manual<view class="list-container" wx:for="{{doctorList.list}}" wx:key="{{index}}" > <view bindtouchstart='onTouchStartListItem' bindtouchmove='onTouchMoveListItem' style="{{item.txtStyle}}" >滑动的内容 </view> <view class="backCover">滑动后显示的按钮</view> </view>
.list-container{ position: relative; width:100%; height: 224rpx; overflow: hidden; } .list-item{ position: absolute; left: 0; z-index: 5; transition: left 0.2s ease-in-out; background-color: #fff; } .backCover{ box-sizing: border-box; width: 200rpx; height: 218rpx; position: absolute; right: 0; top: 0; z-index: 4; }Gelongsor kiri. kesan senarai
onTouchStartListItem: function (e) { // 是单指触碰 if (e.touches.length === 1) { // 记下触碰点距屏幕边缘的x轴位置 this.setData({ startX: e.touches[0].clientX, }) } }, onTouchMoveListItem: function (e) { var that = this if (e.touches.length == 1) { var disX = that.data.startX - e.touches[0].clientX; var deleteBtnWidth = that.data.deleteBtnWidth; var txtStyle = ""; if (disX < deleteBtnWidth / 4) { txtStyle = "left:0rpx"; } else { txtStyle = "left:-" + deleteBtnWidth + "rpx"; } var index = e.currentTarget.id var list = that.data.doctorList.list list[index].txtStyle = txtStyle; that.setData({ doctorList: { list: list, total: that.data.doctorList.total } }) } }, onTouchEndListItem: function (e) { var that = this if (e.changedTouches.length == 1) { var endX = e.changedTouches[0].clientX; var disX = that.data.startX - endX; var deleteBtnWidth = that.data.deleteBtnWidth; var txtStyle = disX > deleteBtnWidth / 2 ? "left:-" + deleteBtnWidth + "px" : "left:0px"; var index = e.currentTarget.id var list = that.data.doctorList.list list[index].txtStyle = txtStyle; that.setData({ doctorList: { list: list, total: that.data.doctorList.total } }); } },
1 Ikat pada elemen induk senarai Acara
2. Ubah suai nilai kiri item senarai dengan. menilai jarak gelongsor [Cadangan pembelajaran berkaitan: Tutorial Pembangunan Program Mini]Atas ialah kandungan terperinci Ringkaskan dan kongsi beberapa masalah yang dihadapi dalam pembangunan program kecil (untuk membantu mengelakkan perangkap). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!