微信小程序的注意点(亲测实用)

Posted zdping

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了微信小程序的注意点(亲测实用)相关的知识,希望对你有一定的参考价值。

微信小程序虽然便捷,但是在开发阶段,坑还是很多的。以下是我最近写小程序总结的一些小心得,望参考一二。

1、wx:if条件判断

当判断的内容是由多个组件标签组合的,则需要使用<block/>标签

<block wx:if="{{true}}">
  <!--条件渲染内容-->
  <view> view1 </view>
  <view> view2 </view>
</block>

  2、引入iconfont时,在app.wxss做全局引用,但是这个全局仅局限于page里面的页面,不包括组件,如果组件需要引入iconfont,需要在每个组件的wxss引入

app.wxss:全局引入

@import iconfont.wxss;

  单个引入

@import ../../../iconfont.wxss;

  3、在使用tabbar时,在另一个页面需要跳转到tabbar所在页面,并关闭其他非tabbar页面,一般使用wx.switchTab去跳转,但是页面不会去刷新,

   而reLaunch()则是先关闭了所有页面,再跳转到指代的页面,会去刷新

  4、在js中,初始化时在data定义的初始值为对象或者数组时,在接下来的修改data时,会麻烦点。需要把需要修改的变量去赋值给一个变量,在使用this.setData()的时候,需要给这个变量加上中括号,具体写法如下红字所示:

data: { 
    circleId: ‘‘,
    data: {},
    commentData: {},
    isComment: false,
    isCollect: false,
    circleid: ‘‘,
    comment: ‘‘,
    curPage: 0,
    pageSize: 10,
    commentId: 0,
    commentDataShow: 展开评论,
    albumId: ‘‘
  },
 // 二级评论的点赞
  loveComment2(e) {
    console.log(e)
    let dataset = e.currentTarget.dataset
    let type = dataset.commenttype
    let commentId = dataset.commentid
    let index = dataset.index
    let index2 = dataset.index2
    let isLoveStr = `commentData[${index}].secondComments[${index2}].secondIsLove`
    let secondCommentCountStr = `commentData[${index}].secondComments[${index2}].secondCommentCount`
    let secondIsLove = dataset.secondislove
    let secondCommentCount = dataset.secondcommentcount

    if (secondIsLove) {
      comment.cancelLoveComment(commentId, type).then(res => {
        if (res.status == SUCCESS) {
          this.setData({
            [isLoveStr]: 0,
            [secondCommentCountStr]: secondCommentCount - 1
          })
        }
      })
    } else {
      comment.loveComment(commentId, type).then(res => {
        if (res.status == SUCCESS) {
          this.setData({
            [isLoveStr]: 1,
            [secondCommentCountStr]: secondCommentCount + 1
          })
        }
      })
    }
  },

  5、将不需要刷新的数据放到onLoad中执行,将不需要刷新的数据放到onShow中执行

  6、微信小程序自定义组件pageLifetimes和lifetimes的区别

    lifetimes:指的是组件的生命周期,pageLifetimes:指的是组件页面的生命周期

    如果tabbar页面使用了组件,还想在切换的时候及时刷新页面,组件初始化放在pageLifetimes中的show中

    详见官方文档:https://developers.weixin.qq.com/miniprogram/dev/framework/custom-component/component.html?search-key=%E6%9E%84%E9%80%A0%E5%99%A8

  

 

 

 

 

以上是关于微信小程序的注意点(亲测实用)的主要内容,如果未能解决你的问题,请参考以下文章

微信小程序关于获取code注意点

微信小程序广告组件全量开放(附亲测可用的小程序源代码集合)

微信小程序代码片段分享

微信小程序蓝牙教程--完整版亲测

微信小程序 连接云数据库(不使用云函数)进行 登录注册查询(包括模糊查询)快速实现 亲测可用

回归 | js实用代码片段的封装与总结(持续更新中...)