直播平台代码，原生微信小程序的注意点

直播平台代码，原生微信小程序的注意点

1、微信小程序的数据更新

Page({
  // 响应式的数据定义在data里面
   data: {
    bannerList: []
  },
  
// 微信小程序的数据更新是在setData里面做的
this.setData({
        bannerList:res.data.message
     })
      
})

 

2、wx:for遍历后，内部的插值直接使用item即可

<swiper 
        indicator-dots
        autoplay 
        interval="{{interval}}" 
        duration="{{duration}}">
        // 直接wx:for={{数据源}}即可
        <block wx:for="{{bannerList}}" wx:key="*this">
          <swiper-item>
                    // 内部取值直接用item.xxx就可以取到值 ，item是固定的默认值
            <image class="banner-img" src="{{item.image_src}}"></image>
          </swiper-item>
        </block>
      </swiper>

 

3、获取当前遍历的index

// 使用 wx:for-index="index" 即可打印当前遍历的index
     <view 
         wx:for="{{item.product_list}}"
         wx:for-index="index"
         class="fashion-left-img" >
         {{index}}
    </view>
// 或者使用 wx:key="{{index}}"

 

4、事件传参

// 定义事件
<view data-alpha-beta="1" data-alphaBeta="2" bindtap="bindViewTap"> DataSet Test </view>

/* 传递参数 
   data-alpha-beta  转换 dataset.alphaBeta   
   data-alphaBeta  转换 dataset.alphabeta
*/
Page({
  // 取值 event.currentTarget.事件名
  bindViewTap:function(event){
    event.currentTarget.dataset.alphaBeta === 1 // - 会转为驼峰写法
    event.currentTarget.dataset.alphabeta === 2 // 大写会转为小写
  }
})

// 补充：使用解构方式接参
attack(event) {
     let {currentTarget:{dataset:{id}}} = event
     console.log(id);
    },

 

5、小程序页面传参

// 当前页面自定义方法
gotoDetails(e){
    var url = e.currentTarget.dataset.url;
    // console.log(url)
    wx.navigateTo({
      url: '../details/details?url='+url,
    })
  },

// 跳转页接收
onLoad:function(options){
    let url = options.url;
    this.setData({
      url:url
    })
  },

 

6、原生微信小程序不支持插值表达式内套模板字符串

// 正确写法
   <text wx:if="{{item.status == 1 }}">还差{{item.differNum}}个</text>
   <text wx:if="{{item.status == 2 }}">购买完成</text>
   <text wx:else>购买失败</text>
     
// 错误写法
  <text>{{item.status == 1 ? `还差${item.differNum}个` : item.status == 2 ? '购买完成' : '购买失败'}}</text>

 

7、showTost和showLoading不能同时使用

wx.showLoading(Object object)
wx.showToast(Object object)

 

这两个方法不能同时使用，否则只会显示其中一个，另外一个被覆盖不显示，如果要同时使用，建议使用定时器分开，等第一个弹框执行完后再执行第二个

wx.showToast({
        title: '请求成功',
        icon: 'none',
        duration: 1000
      })
      
setTimeout(()=>{
wx.showLoading(...)
},1000)

 

以上就是直播平台代码，原生微信小程序的注意点， 更多内容欢迎关注之后的文章