VPS参考测评推荐
专注分享VPS主机优惠信息
衡天云优惠活动
华纳云最新优惠促销活动
jtti最新优惠促销活动
新罗云最新优惠促销活动

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

locvps
主机参考:VPS测评参考推荐/专注分享VPS服务器优惠信息!若您是商家可以在本站进行投稿,查看详情!此外我们还提供软文收录、PayPal代付、广告赞助等服务,查看详情!
我们发布的部分优惠活动文章可能存在时效性,购买时建议在本站搜索商家名称可查看相关文章充分了解该商家!若非中文页面可使用Edge浏览器同步翻译!PayPal代付/收录合作

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

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

呈现时将列表分块包装。

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

【腾讯云】领8888元采购礼包,抢爆款云服务器 每月 9元起,个人开发者加享折上折!
打赏
转载请注明原文链接:主机参考 » 总结一些小程序开发中遇到的问题(帮助避坑)(微信小程序开发中遇到的困难)
主机参考仅做资料收集,不对商家任何信息及交易做信用担保,购买前请注意风险,有交易纠纷请自行解决!请查阅:特别声明

评论 抢沙发

评论前必须登录!