微信小程序开发常用功能点与使用方法总结

网友投稿 301 2023-11-07

在这里，我主要整理了一些小程序开发过程中常用的功能点，非常实用，下面来一看看看吧 

微信小程序开发常用功能点与使用方法总结

1、获取高度宽度

?
1
2
var windowHeight = wx.getSystemInfoSync().windowHeight
var windowWidth = wx.getSystemInfoSync().windowWidth

2、动态绑定 style 样式 和class

?
1
2
class="operBtn {{select==1?activeClass:}}"
style="display:{{displayPhoto}}"

3、wx:if

4、点击事件

?
1
2
3
4
5
6
<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、wx:for

?
1
2
3
4
5
6
7
8
9
10
11
12
//在组件上使用 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>

6、data里面的数据

?
1
2
3
4
5
6
//存储
this.setData({
result: event.detail
});
//使用
this.data.result

7、修改页面配置。可以下拉刷新；修改页面标题

?
1
2
3
4
"enablePullDownRefresh": true,
"navigationBarBackgroundColor": "#FFA500",
"navigationBarTitleText": "我的发票",
"navigationBarTextStyle": "white"

8、动态修改页面标题

?
1
2
3
wx.setNavigationBarTitle({
title: this.data.info.name
})

9.横线

?
1
<van-divider custom-style="margin:10px 0;" />

10、WXS（WeiXin Script）是小程序的一套脚本语言，结合 WXML，可以构建出页面的结构。

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
//时间格式化
<wxs module="format">
var format = function(date) {
var date = getDate(date)
var year = date.getFullYear()
var month = date.getMonth() + 1
var day = date.getDate()
var weekDay = date.getDay()
var week =
switch(weekDay){
case 0:
week = 周日
break;
case 1:
week = 周一
break;
case 2:
week = 周二
break;
case 3:
week = 周三
break;
case 4:
week = 周四
break;
case 5:
week = 周五
break;
case 6:
week = 周六
break;
}
return month + 月 + day + 日 + + week;
}
module.exports.format = format;
</wxs>
//手机邮箱打星号
<wxs module="phone">
var toHide = function(array) {
var mphone = array.substring(0, 3) + **** + array.substring(7);
return mphone;
}
module.exports.toHide = toHide;
</wxs>

11、video，属性用法

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
<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 {
}
},

12、数据的存储

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
//存
try {
wx.setStorageSync(car, info)
} catch (e) { }
//获取
try {
var value = wx.getStorageSync(car)
if (value) {
this.setData({
ApplyContent:value
})
}
} catch (e) {
}

13、地图使用

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
//官网
const QQMapWX = require(../../assets/js/qqmap-wx-jssdk)
const qqmapsdk = new QQMapWX({
key: XSTBZ-G74CJ-7BVFQ-KC2JD-ONRK5-ZABGU
})
getAddressLocation(){
let that = this
wx.getLocation({
type: gcj02,
success (res) {
const latitude = res.latitude
const longitude = res.longitude
that.getAddress(latitude, longitude)
}
})
},
getAddress(latitude, longitude) {
let that = this
qqmapsdk.reverseGeocoder({
location: {latitude,longitude},
success(res) {
console.log(res);
var mks = []
mks.push({ // 获取返回结果，放到mks数组中
title: res.result.address,
id: 1,
latitude: latitude,
longitude: longitude,
iconPath: "../../img/mk.png", //图标路径
width: 20,
height: 20
})
that.setData({
address:res.result.address,
markers: mks,
latitude: latitude,
longitude: longitude,
})
}
})
},

14、点击复制

?
1
2
3
4
5
6
7
8
9
10
11
12
copyBtn: function (e) {
var currentidx = e.currentTarget.dataset.num;
console.log(currentidx);
wx.setClipboardData({
data: currentidx,
success: function (res) {
wx.showToast({
title: 复制成功,
});
}
});
},

总结

到此这篇关于微信小程序

您可能感兴趣的文章:微信小程序 开发工具快捷键整理详解微信小程序开发(项目从零开始)微信小程序开发的四十个技术窍门总结（推荐）微信小程序开发之入门实例教程篇微信小程序云开发详细教程使用微信小程序开发前端【快速入门】微信小程序开发经验总结（推荐）微信小程序开发入门基础教程

版权声明：本文内容由网络用户投稿，版权归原作者所有，本站不拥有其著作权，亦不承担相应法律责任。如果您发现本站中有涉嫌抄袭或描述失实的内容，请联系我们jiasou666@gmail.com 处理，核实后本网站将在24小时内删除侵权内容。

标签：程序 方法 微信小程序 小程序
上一篇:如何申请管理个人小程序（图解）
下一篇:同程艺龙酒店机票火车小程序：凭什么屡创新高
相关文章

 发表评论

暂时没有评论，来抢沙发吧~