乐趣区

关于前端:原生微信小程序的一些注意点

jiezi

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

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

2、申请接口如果报错可能是校验非法域名了，须要勾上不校验

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

4、获取以后遍历的 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}}"

5、事件传参

// 定义事件
<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);
    },

6、小程序页面传参

// 以后页面自定义办法
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})
  },

7、原生微信小程序不反对插值表达式内套模板字符串

// 正确写法
   <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>

8、分享好友

微信小程序分享分两种
1、点击页面按钮的分享
2、小程序胶囊处的分享
按钮的分享和胶囊处的分享能够做不同的展现成果，通常胶囊处的分享用来分享整个页面，按钮的分享用来让用户助力。

胶囊处的分享：

按钮的分享：

这两中分享会走 onShareAppMessage() 办法，这个办法有一个回调函数，能够判断分享的起源

  onShareAppMessage(e) {if(e.from == "button") {console.log('按钮分享');
    return {title:  ` 点击助力“${userInfo.name}”，开盒助力，100% 中奖 `, // 分享进来的题目
        imageUrl: "图片门路", // 分享时显示的图片
        path: `/pages/home/index?goodsid=${xxx}`// 他人点击链接进来的页面及传递的参数
    }
      } else {console.log('胶囊分享');
      return {
        title:  ` 盲盒大礼，参加即得！`, // 分享进来的题目
        imageUrl: "图片门路", // 分享时显示的图片
        path: `/pages/home/index`// 他人点击链接进来的页面及传递的参数
    }
      }
   }

图片门路未填写分享时偶然会报错，须要留神。

好友点击链接进入分享页的时，能够在 onShow 或者 onLoad 获取上一步分享进来的参数


  onLoad(options) {console.log('获取分享的参数',options);
  },


  onShow() {let pages = getCurrentPages();
    let currentPage = pages[pages.length - 1];
    console.log('获取分享的参数',currentPage.options);
  },

9、showTost 和 showLoading 不能同时应用

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

这两个办法不能同时应用，否则只会显示其中一个，另外一个被笼罩不显示，如果要同时应用，倡议应用定时器离开，等第一个弹框执行完后再执行第二个

wx.showToast({
        title: '申请胜利',
        icon: 'none',
        duration: 1000
      })
      
setTimeout(()=>{wx.showLoading(...)
},1000)
退出移动版