• 技术文章 >微信小程序 >小程序开发

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

    青灯夜游青灯夜游2022-03-04 19:47:31转载1013
    本篇文章给大家总结下之前开发微信小程序的时候遇到过一些问题,并将解决方案分享给大家,希望对大家有所帮助!

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

    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: {
      // 输入框的默认提示
      placeholder: {
    	type: String,  // 属性值的类型
    	value: ''      // 属性默认值
      }
    },

    调用父组件传入的方法

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

    修改的地方:

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

    带来的问题:

    使用 iconfont

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

    注意:组件中的样式本身不受 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
    			}
    		});
    	}
    },

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

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

    声明:本文转载于:掘金社区,如有侵犯,请联系admin@php.cn删除
    专题推荐:微信 小程序开发
    上一篇:带你开发一个虎年春节头像生成小程序 下一篇:什么类型的微信号可以开通门店小程序
    VIP课程(WEB全栈开发)

    相关文章推荐

    • 【活动】充值PHP中文网VIP即送云服务器• 手把手带你实现虎年头像框制作小程序(实践)• 聊聊小程序中的 Log 日志系统,看看怎么搭建和使用• 聊聊从H5页面跳转到小程序的几种实现方案(附常见坑点)• 聊聊怎么在小程序中实现一个可截断的瀑布流组件• 深入浅析小程序中的全局配置• 总结分享一些小程序开发中实用的小知识
    1/1

    PHP中文网