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
}