欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  微信小程序

总结分享一些小程序开发中遇到的问题(帮忙避坑)

程序员文章站 2021-12-19 19:04:29
...
本篇文章给大家总结下之前开发微信小程序的时候遇到过一些问题,并将解决方案分享给大家,希望对大家有所帮助!

总结分享一些小程序开发中遇到的问题(帮忙避坑)

请以小程序最新文档为准~:

https://developers.weixin.qq.com/ebook?action=get_post_info&docid=0008aeea9a8978ab0086a685851c0a&highline=webview

渲染列表时用 block 包裹

<block wx:for="{{[1, 2, 3]}}">
  <view> {{index}}: </view>
  <view> {{item}} </view>
</block>

block 不会真实渲染到页面上,只作为一个包裹元素,接受控制属性

写一个自定义组件

自定义组件分为 4 部分

  • properties 组件接收的属性

properties: {
  // 输入框的默认提示
  placeholder: {
	type: String,  // 属性值的类型
	value: ''      // 属性默认值
  }
},
  • data 组件数据

  • methods 组件方法,一般内部方法用_开头

  • 组件的生命周期函数,一般使用 ready,在组件布局完成后执行,此时可以获取节点信息(使用 SelectorQuery

调用父组件传入的方法

// 子组件
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)
}

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

// 父组件,使用 selectComponent 拿到子组件的实例,直接调用其中的方法
let searchBar = this.selectComponent('#search-bar');
searchBar.setData({ value: e.currentTarget.dataset.name })
searchBar.onClickSearch({ detail: {value: e.currentTarget.dataset.name}});

子组件中获取 dom 宽高

// 获取屏幕宽度
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

之前把调用接口的部分写到了onLoad里,从文章列表进入详情页,在从详情页点击左上角回退返回列表页,列表页的阅读数应该更新,但是没有更新,因为没有重新调文章列表接口。

所以把调文章列表接口的部分写好了onShow里。

自定义 tabbar 优化

第一次优化,将组件封装的tabbar改成页面的模版形式

1、之前用组件的形式写的,改为了 template;tabbar 上的图标都改成的 iconfont,解决点击 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、点击 tabbar 时,需要销毁之前的页面,在跳到需要跳转的页面,所以在 navigator 组件用了 reLaunch

第二次优化,将带有tabbar的页面都封装成组件写在页面,在页面中setData切换tab

<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>

修改的地方:

  • 带有tabbar的页面都重写为组件形式

  • 因为组件中只有挂载完成后的 ready 方法,所以之前页面中 onShow,onReachBottom,onPullDownRefresh 都放到父页面调用

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();
	}
},

带来的问题:

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

  • 从其他页面点击按钮,直接跳到首页的某一个tab卡,可能会有问题

使用 iconfont

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

  • 登录 iconfont.cn 下载 zip 包

  • 解压缩,其中的 .ttf 文件在 transfonter.org/ 上面转成 base64 格式

  • 将 style.css 写入新建的 iconfont.wxss 中,上面的字体文件路径用刚刚转好的 base64 替代

  • 在 app.wxss 中 import iconfont.wxss

注意:组件中的样式本身不受 app.wxss 影响,因此,组件中需要使用 iconfont 的时候,需要手动引一下 app.wxss 或者 iconfont.wxss

列表的左滑效果

1、在列表的父元素上绑定事件

<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、通过判断滑动距离修改列表项的 left 值

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
			}
		});
	}
},

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

以上就是总结分享一些小程序开发中遇到的问题(帮忙避坑)的详细内容,更多请关注其它相关文章!