乐趣区

关于小程序:小程序开发复盘疑难杂症

jiezi

小程序调用地图导航

留神：经纬度必须是浮点数

  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…

最初：感激互联网，感激分享者~ 嘿嘿嘿

退出移动版