1、获取屏幕的高度、宽度
var windowHeight = wx.getSystemInfoSync().windowHeight
var windowWidth = wx.getSystemInfoSync().windowWidth
2、wx:if在wxml中的使用
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
3、wx:for在wxml中的使用
//在组件上使用 wx:for 控制属性绑定一个数组,即可使用数组中各项的数据重复渲染该组件。
//默认数组的当前项的下标变量名默认为 index,数组当前项的变量名默认为 item
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
//或者
//使用 wx:for-item 可以指定数组当前元素的变量名,
//使用 wx:for-index 可以指定数组当前下标的变量名:
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
4、点击事件的实现
<van-tag plain style="margin-left:10px;" bindtap="toggle">全选</van-tag>
//冒泡事件catchtap做点击事件
<van-button class="shop-but" size="mini" icon="like-o" catchtap="getWish" data-pro_id='{{item.product_id}}'></van-button>
//获取点击数据
let id = e.currentTarget.dataset.id
5、data里面的数据
//存储
this.setData({
result: event.detail
});
//使用
this.data.result
6、修改页面配置。可以下拉刷新;修改页面标题,在页面中XXX.json中配置,需要全局可以在app.json中配置
"enablePullDownRefresh": true,
"navigationBarBackgroundColor": "#FFA500",
"navigationBarTitleText": "我的发票",
"navigationBarTextStyle": "white"
7、动态修改页面标题
wx.setNavigationBarTitle({
title: this.data.info.name
})
8、横线
<van-divider custom-style="margin:10px 0;" />
9、video,属性用法
<video
id="myVideo"
src="{{url}}"
binderror="videoErrorCallback"
show-center-play-btn='{{false}}'
show-play-btn="{{true}}"
controls
title="课程"
object-fit="fill"
enable-auto-rotation="true"
bindtimeupdate="bindtimeupdate"
></video>
//
let videoCtx = wx.createVideoContext('myVideo', this)
videoCtx.pause()
//bindtimeupdate 获取进度时间,根据时间来进行限制播放操作
bindtimeupdate:function(res){//播放中函数,查看当前播放时间等
let video_status = this.data.video_status
let that = this
if (res.detail.currentTime > 10) {
if (video_status === '0') {
wx.showModal({
title: '登录',
content: '观看视频结束,如需继续查看,请先登录',confirmText:'确定',
success (res) {
if (res.confirm) {
wx.switchTab({
url: '/pages/user/user'
})
} else if (res.cancel) {
wx.navigateBack({
delta: 1,
})
}
}
})
} else if (video_status === '2'){
let videoCtx = wx.createVideoContext('myVideo', this)
videoCtx.pause()
wx.showModal({
title: '购买商品',
content: '请先购买',confirmText:'立即支付',
success (res) {
if (res.confirm) {
that.onClickButton()
} else if (res.cancel) {
wx.navigateBack({
delta: 1,
})
}
}
})
}
} else {
}
},
10、数据的存储
//存
try {
wx.setStorageSync('car', info)
} catch (e) { }
//获取
try {
var value = wx.getStorageSync('car')
if (value) {
this.setData({
ApplyContent:value
})
}
} catch (e) {
}
11、点击复制
copyBtn: function (e) {
var currentidx = e.currentTarget.dataset.num;
console.log(currentidx);
wx.setClipboardData({
data: currentidx,
success: function (res) {
wx.showToast({
title: '复制成功',
});
}
});
},
12、获取用户基本资料
wx.getUserProfile({
desc: '用于完善用户基本资料', // 声明获取用户个人信息后的用途,不超过30个字符
success: (res) => {
console.log(res.userInfo));
}
})
13、获取手机号(只能通过button来获取,获取时需要用户确认)
<button open-type="getPhoneNumber" bindgetphonenumber="getPhoneNumber"></button>
Page({
getPhoneNumber (e) {
console.log(e.detail.code)
}
})
14、预览图片
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [] // 需要预览的图片http链接列表
})
15、页面跳转
一、js中跳转
1、跳转普通页面非 tabBar 页面
wx.navigateTo({
url: '',
})
2、跳转到 tabBar 页面,并关闭其他所有非 tabBar 页面
wx.switchTab({
url: '/index'
})
3、关闭当前页面)(左上角不会出现返回箭头)
wx.redirectTo({
url: '/index'
})
4、关闭所有页面,打开一个页面(左上角不会出现返回箭头)
wx.reLaunch({
url: '/index'
})
二、在页面中wxml中,可以在type加上跳转类型
<navigator url="/pages/redirect/redirect?id=666">跳转到新页面</navigator>