总结一些小程序开发中遇到的问题(帮助避坑)(微信小程序开发中遇到的困难)

本文总结了之前在微信小程序开发中遇到的一些问题，与大家分享解决方法，希望对你有所帮助！

呈现时将列表分块包装。

lt块wx:for = ；{{[1，2，3]} } ； gt lt视图 gt{ { index } }: lt；/view gt； lt视图 gt{ { item } } lt/view gt； lt/block gt；块并不真正呈现在页面上，而只是作为一个包元素，接受control属性。

编写自定义组件。

自定义组件分为四个部分。

属性组件接收的属性

属性:{//输入框占位符默认提示:{type: String，//属性值value的类型: # 39；'//属性默认值}}，数据组件数据

方法组件方法，一般内部方法以_

组件的生命周期功能，一般使用ready，在组件布局完成后执行。此时，可以获得节点信息(使用SelectorQuery)

调用父组件传入的方法。

//子组件var myEventDetail = { value: # 39；'};// detail对象，提供给事件监视器函数，用来写需要传输到外部的数据var myevent option = { }//option this . triggerevent( # 39；onclear # 39，myEventDetail，myEventOption) lt；！--父组件-->: lt；searchbar id = search -bar ；bind:on search = ；onSearch bind:on clear = ；onSearch placeholder = 搜索文章内容" >； lt/search bar gt； lt！-- Bind自定义函数比如Bind tap -->://父组件on search(e){ console . log(e . detail . value)}父组件直接调用子组件的方法。

//父组件，使用selectComponent获取子组件的实例，直接调用方法let search bar = this . select component( # 39；# search -bar # 39；);search bar . setdata({ value:e . current target . dataset . name })search bar . onclick search({ detail:{ value:e . current target . dataset . name })；获取子组件中的dom宽度和高度。

//获取屏幕宽度let window width = wx . getsysteminfosync()。窗口宽度//你需要写这个let query = wx.createSelectorQuery()。在(这个)成分里面；让那个=这个；query . select all( # 39；。tagItem # 39).bounding client rect()query . exec(function(RES){ let all width = 0；res[0]。地图(item = gt{ all width = all width+item . width return all width })设length = res[0]。length let ratio width = all width/window width that . setdata({ all length:length，iphone: ratioWidth + (length == 1？0: res [0]。length * 0.0533)}})页面返回时不会调用onLoad。

之前我把调用接口的部分写到onLoad里，从文章列表进入详情页，然后点击详情页左上角回到列表页。列表页的阅读数应该更新，但是因为文章列表界面没有重新调整，所以没有更新。

所以文章列表的界面部分是用onShow写的。

自定义tabbar优化

在第一次优化中，组件封装的tabbar被更改为页面的模板形式。

1.以前是以组件的形式写的，改成了模板；；tabbar上的图标全部改为iconfont，解决了点击tabbar时闪烁的问题。

lt模板名称= tabbar gt ltview class = tab bar -wrapper ； gt lt块wx:for = ；{ { tabbar.list } } wx:key = ；item gt lt导航器hover -class = ；无 class = tabbar_nav {{item.selected？'精选 # 39；:''} } url = { { item.pagePath } } style = color:{{item.selected？tabbar . selected color:tabbar . color } } ；open -type = ；重新启动 gt ltview class = tab -item ； gt lttext class = { { item.iconPath } } style = 宽度:{ { item.iconWidth } }高度:{ { item.iconHeight } } gt lt/text gt；{ { item.text } } lttext class = # 39red-标签 # 39；wx:if = ；{ { tabbar.num index = = 1 } } gt{ { tabbar.num gt99 ?'99+':tabbar.num } } lt/text gt； lt/view gt； lt/navigator gt； lt/block gt； lt/view gt； lt/template gt；2.点击tabbar时，需要销毁上一页，然后跳转到需要跳转的页面，所以在导航器组件中使用了重新启动。

在第二次优化中，所有带有tabbar的页面都封装成组件并写入页面，其中setData切换tab。

lt主页id = home -page ；wx:if = ；{ { tabbarID = = tabbar list . home } } ；bind:onclicktab = ；setTabbar gt lt/home page gt； lt文章库页面id = article -page ；wx:if = ；{ { tabbarID = = tabbar list . article } } ； gt lt/articleLibraryPage gt； ltdoclistPage id = doctor -page ；wx:if = ；{ { tabbarID = = tabbar list . doctor } } ； gt lt/doclist page gt； ltmePage id = me-page ；wx:if = ；{ { tabbarID = = tabbar list . me } } ； gt lt/me page gt； lttabbar id = tab -bar ；bind:onclick = ；onClickTabbar tabbarID = { { tabbarID } } gt lt/tabbar gt；修改地点:

带有tabbar的页面被重写为组件。

因为组件中只有挂载完成后的ready方法，所以上一页的onShow、onReachBottom onPullDownRefresh都是在父页上调用的。

onpulldownresh:function(){ if(this . data . tabbar ID = = this . data . tabbar list . article){//使用selectComponent查找组件实例，调用内部方法LetArticlePage = this . select component( # 39；# article -page # 39；);article page . onpulldownrefresh()；} else if(this . data . tabbarid = = = this . data . tabbar list . doctor){ let doctor page = this . select component( # 39；# doctor -page # 39；);doctor page . onpulldownrefresh()；} else { wx . stoppulldownrefresh()；}}，带来的问题:

每个tabbar都会有下拉刷新的效果，即使不需要下拉刷新。

从其他页面点击按钮，直接跳转到首页的某个选项卡卡片。可能会有问题。

使用图标字体

https://www.jianshu.com/p/1cfc074eeb75

登录iconfont.cn下载zip包。

解压，其中。ttf文件在transfonter.org/.上被转换成base64格式

将style.css写入新创建的iconfont.wxss，上面的字体文件路径被新改进的base64取代。

在app.wxss中导入iconfont.wxss

注意:组件本身的样式不受app.wxss的影响，因此，当需要在组件中使用iconfont时，需要手动引用app.wXSS或iconfont.wxss

列表的左侧幻灯片效果

1.将事件绑定到列表的父元素。

ltview class = 列表-容器 wx:for = ；{ { doctorList.list } } wx:key = ；{ { index } } gt ltviewbindtouchstart = # 39onTouchStartListItem # 39bindtouchmove = # 39onTouchMoveListItem # 39style = { { item.txtStyle } } gt幻灯片的内容

ontouchstartitem: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]。clientXvar deleteBtnWidth = that . data . deleteBtnWidth；var txtStyle = "；if(disX lt；deleteBtnWidth/4){ txt style = ；left:0rpx ；；} else { txtStyle = 左:- ；+deleteBtnWidth+ ；rpx ；} var index = e . current target . idvar list = that . data . doctor list . list list[index]。txtStyle = txtStylethat . setdata({ doctor list:{ list:list，total:that . data . doctor list . total } } }，onTouchEndListItem:function(e){ var that = this if(e . changed touches . length = = 1){ var endX = e . changed touches[0]。clientXvar disX = that . data . startx -endX；var deleteBtnWidth = that . data . deleteBtnWidth；var txtStyle = disX gtdeleteBtnWidth / 2？"左:- ；+deleteBtnWidth+ ；px : 左:0px ；var index = e . current target . idvar list = that . data . doctor list . list list[index]。txtStyle = txtStylethat . setdata({ doctor list:{ list:list，total:that . data . doctor list . total } })；}}}，【相关学习推荐:小程序开发教程】以上是总结和分享小程序开发中遇到的一些问题的细节(有助于避坑)。更多请关注主机参考其他相关文章！

这几篇文章你可能也喜欢：

• 我们来看看小程序开发游戏的注意事项(开发小程序需要注意的问题)
• 总结解决小程序开发中遇到的问题（总结解决小程序开发中遇到的问题及建议）
• 总结分享一些小程序开发中遇到的问题（帮助避坑）
• 小程序开发需要注意什么？
• 下面我们来看看小程序开发游戏的注意事项(如何开发微信小程序游戏)

本文由主机参考刊发，转载请注明：总结一些小程序开发中遇到的问题(帮助避坑)(微信小程序开发中遇到的困难) https://zhujicankao.com/74309.html