【总结】微信小程序

最新推荐文章于 2022-05-21 15:25:31 发布

原创最新推荐文章于 2022-05-21 15:25:31 发布 · 428 阅读

0 ·

CC 4.0 BY-SA版权

前端学习同时被 2 个专栏收录

41 篇文章

订阅专栏

小程序

12 篇文章

订阅专栏

1、自定义属性

<view class="swiper-tab-list" data-current="0" bindtap="swichNav">
    <view class="{{currentTab==0 ? 'on' : ''}}" data-current="0" bindtap="swichNav">
        转让
    </view>
</view>

获取：

swichNav: function( e ) {

    var that = this;

    if( this.data.currentTab === e.target.dataset.current ) {
        return false;
    } else {
        that.setData( {
            currentTab: e.target.dataset.current
        })
    }
},

2、swiper滑动

在小程序想做左右滑动切换tab栏的时候使用，如果不使用swiper，只能通过点击上面tab栏进行切换，加了swiper就可以左右滑动进行切换，但是需要动态摄者swiper的高度，触底增加高度，否则无法往下滑动。

<swiper current="{{currentTab}}" class="swiper-box" duration="300"  bindchange="bindChange">
    <swiper-item>
       
    </swiper-item>

    <swiper-item>
      
    </swiper-item>

</swiper>

bindChange: function( e ) {

    var that = this;
    that.setData( { currentTab: e.detail.current });

},

切换后会把现在的current传给参数

3、wx:if 满足条件显示

4、wx:for 循环

<block/> 并不是一个组件，它仅仅是一个包装元素，不会在页面中做任何渲染，只接受控制属性。

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

5、全局变量

在app.js中

App({
//当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
 onLaunch: function () {
      },
  // 当小程序启动，或从后台进入前台显示，会触发 onShow
 onShow: function (options) {
     },
  //  当小程序从前台进入后台，会触发 onHide
  onHide: function () {
     },
 // 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
  onError: function (msg) {
     }，
 //全局变量
 globalData：{
         userInfo：null
     }
   })

使用全局变量：

//page/login/login  （我在login下获取全局变量的值）

var app=getApp();     // 取得全局App

app.globalData.userInfo = res.data.data.uid     // 取得全局变量需要的值

或者直接getApp().globalData.userInfo

6、小程序中没有cookie，设置让后台接口从cookie去找要的某个一直带的参数（一直放在header中）

注意，在浏览器中设置cookie的方法：document.cookie="keyName=cookeiValue"；

全局变量中定义  app.js中
  globalData:{
        header:{'Cookie': ''} //这里还可以加入其它需要的请求头，比如'x-requested-with': 'XMLHttpRequest'表示ajax提交，微信的请求时不会带上这个的
  },

通过某个接口获取到这个要放在请求头里的参数，存在header中

getApp().globalData.header.Cookie = 'Authorization=' + res.data.token;

其它所有的请求都带上这个参数
    var header=getApp().globalData.header
    wx.request({
      url:"https://painting.tinyfeng.com/graphql",
      method:"POST",
      header: header,
      data:{
        query:
          `mutation{sendSms(mobile_phone:"${telephone}",event:"bindPhone")}`,
        variables: null,
      },
      success:res=>{
        console.log(res);
        this.timer();
      }
    })

7、缓存

wx.setStorage（wx.setStorageSync）异步（同步）

wx.getStorage（wx.getStorageSync）

wx.clearStorage（wx.clearStorageSync）

wx.getStorage({
 key: 'key',
 success: function(res) {
   console.log(res.data)
 }
})

8、swiper自适应高度

var query = wx.createSelectorQuery();
//选择id
query.select('#mjltest').boundingClientRect()
query.exec(function (res) {
  //res就是 所有标签为mjltest的元素的信息 的数组
  console.log(res);
  //取高度
  console.log(res[0].height);
})

然后把这个高度this.setData存起来

在swiper中 style="height:{{imgheights[current]}}rpx;"

即可

9、滚动条（获取高度等于屏幕高度减去其余盒子的高度）

用<scroll-view scroll-y="true" style="height: {{height}}px">包起来要滚动的内容

wx.getSystemInfo({  
            success: function( res ) {  
                console.log(res.windowHeight)
                _this.setData({  
                  height: res.windowHeight-48  
                });  
            }  
    });

10、点击切换class

<view class="left_item {{_id==1?'active':''}}" bindtap="change" data-id="1" data-title="工具资料">
    工具资料
</view>
<view class="left_item {{_id==2?'active':''}}" bindtap="change" data-id="2" data-title="通用用途">
    通用用途
</view>

change:function(e){
    var _this=this;
    var index=parseInt(e.target.dataset.id)-1;
    this.setData({
    _id:e.target.dataset.id,
    title:e.target.dataset.title,
    all:_this.data.datas[index]
  })