总结分享开发小程序遇到的一些问题（避免陷阱）（开发微信小程序遇到的难点）

本文总结了我们之前开发微信小程序时遇到的一些问题并分享了解决方案。 希望对您有帮助！

查看小程序最新文档~：https://developers.weixin.qq.com/ebook?action=get_post_info&docid= 0008aeea9a8978ab0086a685851c0a&highline=webview

使用列表渲染包中的块

{{index}}: {{item}}

该块实际上并未呈现在页面上。 它只接受控件属性作为包装元素。

创建自定义组件。

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

properties 组件接受的属性

properties: { //输入框占位符默认提示: {type: String , // 属性值 value type: '' //属性默认值 }},

Data组件数据

Method组件方法，通常是_开头的内部方法。

组件生命周期函数，通常使用Ready，在组件布局完成后执行。 此时可以检索节点信息（使用SelectorQuery）

调用父组件传递过来的方法

//子组件 var myEventDetail = {value: ''}; // 详细信息提供给事件监听函数的对象写入需要外部传递的信息。 Data var myEventOption = {} // 触发事件的选项 this.triggerEvent('onclear', myEventDetail, myEventOption)//父组件onSearch(e){ console.log(e.detail.value)}

父组件直接调用子组件的方法

// 父组件。 使用 selectComponent 获取它。 创建子组件，直接调用方法 let searchBar = this.selectComponent( '#search-bar');searchBar.setData({ value: e.currentTarget.dataset.name })searchBar.onClickSearch({ Details : {value : e .currentTarget.dataset.name}});

从子组件dom获取宽高

//获取屏幕宽度let windowWidth = wx.getSystemInfoSync().windowWidth//你需要在你的组件中写这个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.widthreturn allWidth})let length = res[0].lengthlet 速率宽度 = 所有宽度 / 窗口宽度hthat.setData({allLength: length,iphone:rateWidth + (length == 1 ? 0 : res[0].length * 0.0533)})})

页面返回 onLoad 时不调用。

之前我把调用接口部分写在了onLoad中。 请从文章列表进入详情页面。 点击详情页面左上角 返回列表页面。 列表页面的浏览量应该更新，但没有更新。 ，因为文章列表界面还没有重新整理。

也就是说，调整文章列表界面的部分是写在onShow中的。

自定义标签栏优化

第一个优化是将组件封装的标签栏改为页面模板格式。

1. 以前以组件的形式编写，现在改为模板。 标签栏图标将更改为 iconfont。 要解决此问题，请单击选项卡栏。 时间闪烁问题

{{item.text}}{{tabbar.num > 99 ' 99+'：tabbar.num}}

2. 当点击标签栏时，在跳转到需要跳转的页面之前，必须先放弃之前的页面，所以导航器组件使用了reLaunch

进行了第二次优化，标签栏A页面封装在组件中，写在页面上。 SetData 在页面内切换选项卡

更改：

带有选项卡栏的页面被重写为组件表单

由于在组件中实现后只有一个ready方法，所以将上一页的onShow、onReachBottom、onPullDownRefresh全部放在父页面中。 call

onPullDownRefresh: function () {if (this.data.tabbarID === this.data.tabbarList.article) { // 使用selectComponent找到group Article实例，并调用内部方法letarticlePage = this call。 selectComponent('#article-page'); ArticlePage.onPullDownRefresh();} else if (this.data.tabb arID === this.data.tabbarList.doctor){ let DoctorPage = this.selectComponent('#doctor -页面'); DoctorPage.onPullDownRefresh() ;} else { wx.stopPullDownRefresh();}},

引起的问题：

即使启用了下拉刷新，每个标签栏也有下拉刷新效果。 不需要

点击其他页面的按钮直接跳转到主页标签卡可能会导致问题。

图标使用的字体

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

登录iconfont.cn，下载zip包。

在 transfonter.org/ 解压该文件并将 .ttf 文件转换为 Base64 格式。

将style.css写入新创建的iconfont.wxss中，并将上面的字体文件路径替换为刚刚转换的Base64。

app.wxss import iconfont.wxss

注意：组件本身的样式不受app.wxss影响。 因此，如果您的组件中需要使用iconfont，则必须手动导入app.wxss或iconfont.wxss。

列表左滑效果

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

幻灯片 内容幻灯片后显示按钮幻灯片.list-container{position:relative;width:100%;height:224rpx;overflow:hidden;}。 ]item{位置：绝对；左：0；z -索引：5；tra位置：左 0.2 秒 ease-in-out;背景-颜色：#fff;}.backCover{box-尺寸：border-Box;宽度：200rpx;高度：218rpx;位置：绝对；右：0；顶部：0；z-索引：4；}

2. 通过确定左滑动距离来更改列表项。 Value

onTouchStartListItem: function (e) {//如果(e.touches.length === 1)那么就是单指触摸{//记住x-触摸是从屏幕边缘开始的点轴位置这个.setData( {startX: e.touches[0].clientX ,})}},onTouchMoveListItem: function (e) {var that = thisif (e.touches.length == 1) {var disX = that.data.startX - e.touches[0].clientX; var deleteBtnWidth = that.data.deleteBtnWidth;var txtStyle = "";if (disX deleteBtnWidth / 2 ? "左:-" + 删除Btn宽度 + "px" : "左 :0px";varindex = e.currentTarget.idvar list = that.data.doctorList.listlist[index].txtStyle = txtStyle;that.setData({doctorList: {list: list,total: that.data.doctorList.total}});}},

【相关学习推荐：小程序开发教程】

PHP快速学习视频免费教程（从入门到精通）

如何学习PHP？ 我该如何开始学习PHP？我应该从哪里学习PHP？如何快速学习PHP？ 这里有简单的 PHP 学习教程（从初学者到专家）。 您可以保存并下载您想学习的朋友。

下载

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

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

本文由主机参考刊发，转载请注明：总结分享开发小程序遇到的一些问题（避免陷阱）（开发微信小程序遇到的难点） https://zhujicankao.com/141712.html