小程序调用地图导航
留神:经纬度必须是浮点数
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: '价格' }],}//jsbindTypeChange: 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...
最初:感激互联网,感激分享者~嘿嘿嘿