【总结】微信小程序

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 满足条件显示

<block wx:if="{{boolean==true}}">
    <view class="bg_black"></view>
</block>
<block wx:elif="{{boolean==false}}">
    <view class="bg_red"></view>
</block>
<block wx:else>
    <view class="bg_red"></view>
</block>

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]
  })

11、引入第三方插件weui

直接把weui.wxss引入

在app.wxss中

@import './weui.wxss';

要用哪个组件,就去example 中把wxml和wxss代码拷贝过来 

12、微信小程序不能在事件中传值,使用自定义参数传值

e.currentTarget.dataset.自定义的名字  就可以取值了

13、提交表单


用form包裹

<form bindsubmit="submitTap">

        <input type="text" placeholder="如:qingtai(选填)" name="weixin"/>
        <button form-type="submit">发布</button>

</form>

submitTap:function(e){

e.detail.value.weixin

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值