首页-教程-Web前端

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

 3153

本篇文章给大家总结下之前开发微信小程序的时候遇到过一些问题，并将解决方案分享给大家，希望对大家有所帮助！


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

请以小程序最新文档为准～：

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

渲染列表时用 block 包裹

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

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


写一个自定义组件

自定义组件分为 4 部分

properties 组件接收的属性

data 组件数据

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

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

调用父组件传入的方法

  1. // 子组件
  2. var myEventDetail = {value: ''}; // detail对象，提供给事件监听函数，写需要传给外面的数据
  3. var myEventOption = {} // 触发事件的选项
  4. this.triggerEvent('onclear', myEventDetail, myEventOption)
  1. <!-- 父组件 -->
  2. <searchbar id="search-bar" bind:onsearch="onSearch" bind:onclear="onSearch" placeholder="搜索文章内容"></searchbar>
  3. <!-- 像绑定 bindtap 一样绑定自定义函数 -->
  1. // 父组件
  2. onSearch(e){
  3.   console.log(e.detail.value)
  4. }

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

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

子组件中获取 dom 宽高

  1. // 获取屏幕宽度
  2. let windowWidth = wx.getSystemInfoSync().windowWidth
  3. // 在组件内部需要写 this
  4. let query = wx.createSelectorQuery().in(this);
  5. let that = this;
  6. query.selectAll('.tagItem').boundingClientRect()
  7. query.exec(function (res) {
  8.     let allWidth = 0;
  9.     res[0].map(item=>{
  10.         allWidth = allWidth + item.width
  11.         return allWidth
  12.     })
  13.     let length = res[0].length
  14.     let ratioWidth = allWidth / windowWidth
  15.     that.setData({
  16.         allLength: length,
  17.         iphone: ratioWidth + (length == 1 ? 0 : res[0].length * 0.0533)
  18.     })
  19. })

页面返回时不会调用 onLoad

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

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

自定义 tabbar 优化

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

1、之前用组件的形式写的，改为了 template；tabbar 上的图标都改成的 iconfont，解决点击 tabbar 时候会闪的问题

  1. <template name="tabbar">
  2.     <view class="tabbar-wrapper">
  3.         <block wx:for="{{tabbar.list}}" wx:key="item">
  4.             <navigator hover-class="none" class="tabbar_nav {{item.selected ?'selected':''}}"  url="{{item.pagePath}}" style="color:{{item.selected ? tabbar.selectedColor : tabbar.color}}" open-type="reLaunch">
  5.                 <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>
  6.             </navigator>
  7.         </block>
  8.     </view>
  9. </template>

2、点击 tabbar 时，需要销毁之前的页面，在跳到需要跳转的页面，所以在 navigator 组件用了 reLaunch

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

  1. <homePage id="home-page" wx:if="{{tabbarID == tabbarList.home}}"  bind:onclicktab="setTabbar"  ></homePage>
  2. <articleLibraryPage  id="article-page" wx:if="{{tabbarID == tabbarList.article}}"></articleLibraryPage>
  3. <doclistPage  id="doctor-page" wx:if="{{tabbarID == tabbarList.doctor}}"></doclistPage>
  4. <mePage id="me-page" wx:if="{{tabbarID == tabbarList.me}}"></mePage>
  5. <tabbar id="tab-bar" bind:onclick="onClickTabbar"  tabbarID="{{tabbarID}}"></tabbar>

修改的地方：

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

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

  1. onPullDownRefresh: function () {
  2.     if (this.data.tabbarID === this.data.tabbarList.article) {
  3.       // 使用 selectComponent 找到组件实例，调用内部方法
  4.       let articlePage = this.selectComponent('#article-page');
  5.       articlePage.onPullDownRefresh();
  6.     } else if (this.data.tabbarID === this.data.tabbarList.doctor){
  7.       let doctorPage = this.selectComponent('#doctor-page');
  8.       doctorPage.onPullDownRefresh();
  9.     } else {
  10.       wx.stopPullDownRefresh();
  11.     }
  12. },

带来的问题：

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

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

使用 iconfont

登录 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、在列表的父元素上绑定事件

  1. <view 
  2.     class="list-container"
  3.     wx:for="{{doctorList.list}}"
  4.     wx:key="{{index}}"
  5. >
  6.     <view
  7.         bindtouchstart='onTouchStartListItem'
  8.         bindtouchmove='onTouchMoveListItem'
  9.         style="{{item.txtStyle}}"
  10.     >滑动的内容
  11.     </view>
  12.     <view class="backCover">滑动后显示的按钮</view>
  13. </view>
  1. .list-container{
  2.     position: relative;
  3.     width:100%;
  4.     height: 224rpx;
  5.     overflow: hidden;
  6. }
  7. .list-item{
  8.     position: absolute;
  9.     left: 0;
  10.     z-index: 5;
  11.     transition: left 0.2s ease-in-out;
  12.     background-color: #fff;
  13. }
  14. .backCover{
  15.     box-sizing: border-box;
  16.     width: 200rpx;
  17.     height: 218rpx;
  18.     position: absolute;
  19.     right: 0;
  20.     top: 0;
  21.     z-index: 4;
  22. }

2、通过判断滑动距离修改列表项的 left 值

  1. onTouchStartListItem: function (e) {
  2.     // 是单指触碰
  3.     if (e.touches.length === 1) {
  4.         // 记下触碰点距屏幕边缘的x轴位置
  5.         this.setData({
  6.             startX: e.touches[0].clientX,
  7.         })
  8.     }
  9. },
  10.  
  11. onTouchMoveListItem: function (e) {
  12.     var that = this
  13.     if (e.touches.length == 1) {
  14.         var disX = that.data.startX - e.touches[0].clientX;
  15.         var deleteBtnWidth = that.data.deleteBtnWidth;
  16.         var txtStyle = "";
  17.         if (disX < deleteBtnWidth / 4) {
  18.             txtStyle = "left:0rpx";
  19.         } else {
  20.             txtStyle = "left:-" + deleteBtnWidth + "rpx";
  21.         }
  22.         var index = e.currentTarget.id
  23.         var list = that.data.doctorList.list
  24.         list[index].txtStyle = txtStyle;
  25.         that.setData({
  26.             doctorList: {
  27.                 list: list,
  28.                 total: that.data.doctorList.total
  29.             }
  30.         })
  31.     }
  32. },
  33.  
  34.    
  35.  
  36. onTouchEndListItem: function (e) {
  37.     var that = this
  38.     if (e.changedTouches.length == 1) {
  39.         var endX = e.changedTouches[0].clientX;
  40.         var disX = that.data.startX - endX;
  41.         var deleteBtnWidth = that.data.deleteBtnWidth;
  42.         var txtStyle = disX > deleteBtnWidth / 2 ? "left:-" + deleteBtnWidth + "px" : "left:0px";
  43.         var index = e.currentTarget.id
  44.         var list = that.data.doctorList.list
  45.         list[index].txtStyle = txtStyle;
  46.         that.setData({
  47.             doctorList: {
  48.                 list: list,
  49.                 total: that.data.doctorList.total
  50.             }
  51.         });
  52.     }
  53. },


TAG标签：
本文网址：https://www.zztuku.com/detail-10973.html
站长图库 - 总结分享一些小程序开发中遇到的问题（帮忙避坑）
申明：本文转载于《掘金社区》，如有侵犯，请 联系我们 删除。

评论（0）条

您还没有登录，请 登录 后发表评论！

提示：请勿发布广告垃圾评论，否则封号处理！！

    编辑推荐