您的位置:首页 > 移动开发 > 微信开发

小程序常用功能总结

2017-09-11 13:10 267 查看
1.拨打电话
wxml:<view bindtap="call" data-phone="{{telephone}}"></view>
call: function (e) {
var phone = e.currentTarget.dataset.phone;
if (!phone) return false;
wx.makePhoneCall({
phoneNumber: phone
});
},
2.打开地图
openMap: function (e) {
var _this = this
var location = e.currentTarget.dataset.address;
if (location == ''){
return;
}else{
wx.request({
"url" : "https://restapi.amap.com/v3/geocode/geo?key='申请的key'&address=" + location ,
"success" : function(res){
if (result.data.count != "0") {
var loc = result.data.geocodes[0].location.split(",");
wx.openLocation({
longitude: parseFloat(loc[0]),
latitude: parseFloat(loc[1]),
name: location,
complete: function () {

}
});
}
}
});
},
3.修改radio的大小
.wx-radio-input{transform:scale(.8);}
4.tabBar在iphone6手机上显示成黑色的解决方法
app.json里面的tabBar里面的"backgroundColor": "#f6f6f6"(此处必须是16进制的)
5.微信小程序下拉刷新组件加载图片(三个小点)不显示的问题解决
原因:那三个点的默认颜色为白色,如果当前背景颜色为白色,那么就看不到那三个点了。
解决方法一:修改当前页面的背景色:
page{
background:#e2e2e2;
}
解决方法二:修改加载图标的默认颜色
{
"navigationBarTitleText": "我的",
"enablePullDownRefresh" :true,
"backgroundTextStyle": "dark"
}
6.下拉刷新
onPullDownRefresh: function () {
this.getLists();
wx.stopPullDownRefresh()
},
7.tabBar配置
"tabBar": {
"position": "bottom",
"backgroundColor": "#f6f6f6",
"selectedColor": "#009A8B",
"color": "#c3c3c3",
"borderStyle": "#E6E6E6",
"list": [
{
"pagePath": "pages/index/index",
"iconPath": "pages/img/tabC1.png",
"selectedIconPath": "pages/img/tabC_hover1.png",
"text": " "
},
{
"pagePath": "pages/list/list",
"iconPath": "pages/img/tabZ1.png",
"selectedIconPath": "pages/img/tabZ_hover1.png",
"text": " "
},
{
"pagePath": "pages/mine/mine",
"iconPath": "pages/img/tabM1.png",
"selectedIconPath": "pages/img/tabM_hover1.png",
"text": "我的"
}
]
},
8.图片预览
previewImage(e){
var id= that.data.id;
var imgSrc = 'https://omdosaftr.qnssl.com/group_image_' + id
wx.previewImage({
current: '', // 当前显示图片的http链接
urls: [imgSrc], // 需要预览的图片http链接列表
})
}
9.从一个小程序跳转到另外一个小程序
注意:只有同一公众号下的关联的小程序之间才可相互跳转
toAnotherApp(){
wx.navigateToMiniProgram({
appId: '要跳转到的小程序的appid',
path: 'pages/detail/detail?Id='+ this.data.id,
envVersion: 'develop',
success(res) {
// 打开成功
}
})
}
10.动态设置当前页面的标题
wx.setNavigationBarTitle({
title: name+"详情",
})
11.剪贴板复制功能

copy: function(e){
var content = e.currentTarget.dataset.copytxt;
wx.setClipboardData({
data: content,
success: function (res) {
wx.getClipboardData({
success: function (res) {
wx.showToast({
title: '复制成功',
icon: 'success',
duration: 2000
})
}
})
}
})
},
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  微信小程序