小程序调用地图导航
注意：经纬度必须是浮点数
addressClick: function (e) {
let address = e.currentTarget.dataset.item;
let latitude = parseFloat(this.data.pageData.latitude);
let longitude = parseFloat(this.data.pageData.longitude);
wx.getLocation({
type: 'wgs84',
success: function (res) {
wx.openLocation({//使用微信内置地图查看位置。
latitude: latitude,//要去的纬度-地址
longitude: longitude,//要去的经度-地址
name: address,
address: address
})
}
})
},携带参数返回上一页，上一页不刷新
场景：选择优惠券，返回下单页
注意：下单页接收参数，必须写在onshow
//优惠券页面，把参数带回上一页
goToDetail: function (e) {
let pages = getCurrentPages();
let prevPage = pages[pages.length - 2];
prevPage.setData({
ticketCardId: this.data.activeItem,
ticketType: this.data.type
})
wx.navigateBack({
delta: 1
})
},
//下单页，接收优惠券页面携带的参数
onShow: function () {
let that = this;
var pages = getCurrentPages();
var currPage = pages[pages.length - 1];
that.setData({
ticketCardId: currPage.data.ticketCardId,
ticketPrice: currPage.data.ticketPrice
});
},小程序保存图片
saveCard: function () {
var that = this;
let url = that.data.card_url;
wx.downloadFile({
url: url, //仅为示例，并非真实的资源
success: function (res) {
// 只要服务器有响应数据，就会把响应内容写入文件并进入 success 回调，业务需要自行判断是否下载到了想要的内容
if (res.statusCode === 200) {
wx.saveImageToPhotosAlbum({
filePath: res.tempFilePath,
success(res) {
that.setData({
shareShow: false
})
wx.showToast({
title: '保存图片成功！',
})
},
fail(res) {
wx.showToast({
title: '保存图片失败！',
})
}
})
}
}
})
},识别二维码进入页面，后端生成的二维码携带参数
场景：后端生成二维码，前端解析
测试方法：微信开发者工具，菜单栏点击普通编译，最底下有个通过二维码编译选项
注意：这个是我看到别人的答案照搬到项目里，写这里是为了下次参考用的，但找不到原链接，如果找到会附上，或者侵删，非常感谢原作者！！！
//二维码携带参数的格式
`
https:/url?invite_code=123&channel_code=333
`
//扫码进入页面解析
onLoad: function (options) {
// 如果是扫码进入，要解析sence,转成对象，再绑定再options上
Object.assign(options, this.getScene(options.scene)) // 获取二维码参数，绑定在当前this.options对象上
this.setData({
inviteCode: options.invite_code ? options.invite_code : '',
channelCode: options.channel_code ? options.channel_code : '',
});
getScene: function(scene = "") {
if (scene == "") return {}
let res = {}
let params = decodeURIComponent(scene).split("&")
params.forEach(item => {
let pram = item.split("=")
res[pram[0]] = pram[1]
})
return res
},
}
小程序富文本解析
用WxParse插件，虽然停止维护了，但好用，文档写得很清楚，直接看文档吧~感谢开发者~
https://github.com/icindy/wxP...
小程序，选择器
wxml代码
<view class='l sort_show'>
<view class='sort_index '>
<view class="sort_index_flex" bindtap='switchType' data-type='all'>
<image src='../../assets/image/px.png'></image>
<text class='f-24 ' style="color:#bfbfbf">按{{nowType.value}}</text>
</view>
</view>
<picker class="sort_picker" bindchange="bindTypeChange" value="{{typeIndex}}" range="{{typeArray}}" range-key="value">
<view class="picker type_select">
<text class='f-24 flex-fill'>{{typeArray[typeIndex]}}</text>
<text class='iconfont iconsanjiaoxing c-6 f-24'></text>
</view>
</picker>
</view>wxss代码
.sort_show {
position: relative;
width: 235.3rpx;
height: 78rpx;
overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
}
.sort_index {
width: 235.3rpx;
height: 78rpx;
background-color: #3f3f3f;
border-radius: 37.7rpx;
font-size: 24.7rpx;
color: #bfbfbf;
position: absolute;
top: 0;
left: 0;
z-index: 2;
display: flex;
align-items: center;
justify-content: center;
}
.sort_index_flex {
display: flex;
align-items: center;
justify-content: center;
}
.sort_index image {
margin-right: 18.7rpx;
width: 29.3rpx;
height: 29.3rpx;
}
.sort_picker {
position: absolute;
left: 0;
top: 0;
width: 235.3rpx;
height: 78rpx;
z-index: 10;
opacity: 0;
}js
//data初始化代码
data:{
nowType: { id: 1, value: '组局进度' },
typeArray: [ { id: 1, value: '距离' }, { id: 2, value: '回头率' }, { id: 3, value: '价格' }],
}
//js
bindTypeChange: function (e) {
let type = this.data.typeArray[e.detail.value]
this.setData({
order: type.id,
nowType: type
});
//重新请求接口
this.getHomeData();
},小程序加减控件
参考了这个链接的https://blog.csdn.net/iCrazyT...，感谢原作者
小程序弹窗
<view class='mask_view {{popShow?"show":"hide"}}'>
<view class='mask_view {{popShow?"show":"hide"}}' bindtap="ClosePop"></view>
<view class="card">
弹窗内容内容内容
<view class='btn' bindtap="inviteClick">邀请好友</view>
</view>
</view>wxss
.mask_view {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.7);
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 999;
}
.card {
position: fixed;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
width: 604rpx;
height: 869.3rpx;
background-color: #ffffff;
box-shadow: 0rpx 0rpx 46.2rpx 2.5rpx rgba(0, 0, 0, 0.08);
border-radius: 24rpx;
z-index: 1999;
}js
data:{
popShow:false
}
//打开弹窗 bindtap="openPop"
openPop: function () {
this.setData({
popShow: true
})
},
//关闭弹窗
ClosePop: function () {
this.setData({
popShow: false
})
},
小程序带周几（星期几）的日期选择器插件
https://github.com/FernwehNan...
最后：感谢互联网，感谢分享者~嘿嘿嘿
