Home >WeChat Applet >Mini Program Development >Summarize and share some problems encountered in the development of small programs (to help avoid pitfalls)
This article summarizes some of the problems encountered when developing WeChat mini programs before, and shares the solutions with you. I hope it will be helpful to everyone!
Please refer to the latest mini program documentation~:
https://developers.weixin.qq.com/ebook?action= get_post_info&docid=0008aeea9a8978ab0086a685851c0a&highline=webview
Use #block
to wrap the list
<block wx:for="{{[1, 2, 3]}}"> <view> {{index}}: </view> <view> {{item}} </view> </block>
block
will not be actually rendered on the page, but will only be used as a wrapping element and accept control attributes
Write a custom component
Custom components are divided into 4 parts
#properties Properties received by the component
properties: { // 输入框的默认提示 placeholder: { type: String, // 属性值的类型 value: '' // 属性默认值 } },
data Component data
methods Component methods, generally internal methods start with _
The life cycle function of the component, generally use ready, Executed after the component layout is completed. At this time, the node information can be obtained (using SelectorQuery)
Call the method passed in by the parent component
// 子组件 var myEventDetail = {value: ''}; // detail对象,提供给事件监听函数,写需要传给外面的数据 var myEventOption = {} // 触发事件的选项 this.triggerEvent('onclear', myEventDetail, myEventOption)
<!-- 父组件 --> <searchbar id="search-bar" bind:onsearch="onSearch" bind:onclear="onSearch" placeholder="搜索文章内容"></searchbar> <!-- 像绑定 bindtap 一样绑定自定义函数 -->
// 父组件 onSearch(e){ console.log(e.detail.value) }
The parent component directly calls the method of the child component
// 父组件,使用 selectComponent 拿到子组件的实例,直接调用其中的方法 let searchBar = this.selectComponent('#search-bar'); searchBar.setData({ value: e.currentTarget.dataset.name }) searchBar.onClickSearch({ detail: {value: e.currentTarget.dataset.name}});
Get the dom width and height from the child component
// 获取屏幕宽度 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) }) })
OnLoad will not be called when the page returns
I wrote the part of calling the interface into onLoad before, enter the details page from the article list, and click on the upper left corner of the details page to return to the list page, the reading count of the list page should be updated, but it is not updated because the article list interface is not re-adjusted.
So the part of adjusting the article list interface is written in onShow.
Custom tabbar optimization
The first optimization is to change the tabbar encapsulated by the component into the template form of the page
1. Previously written in the form of components, it was changed to template; the icons on the tabbar were changed to iconfont to solve the problem of flashing when clicking the tabbar
<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>
2. When clicking the tabbar, the previous page needs to be destroyed , before jumping to the page that needs to be jumped, so reLaunch
is used in the navigator component for the second optimization, and the pages with tabbars are encapsulated into components and written on the page. Switching tabs in setData
<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>
Modifications:
Pages with tabbars are rewritten into component form
Because there is only the ready method after mounting is completed in the component, onShow, onReachBottom, and onPullDownRefresh in the previous page were all placed on the parent page to call
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(); } },
. Problems caused:
Each tabbar will have a pull-down refresh effect, even if no pull-down refresh is required
Click the button from other pages to jump directly to a tab card on the homepage. There may be problems
Use iconfont
##https://www.jianshu.com/p/1cfc074eeb75transfonter.org/ Convert to base64 format
The left sliding effect of the list
1. Bind the event to the parent element of the list<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; }2. Modify the left value of the list item by judging the sliding distance
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 } }); } },[Related learning recommendations:
小program development tutorial]
The above is the detailed content of Summarize and share some problems encountered in the development of small programs (to help avoid pitfalls). For more information, please follow other related articles on the PHP Chinese website!