小程序开发复盘疑难杂症

Posted 2021-10-11 四仰八叉的怪

小程序调用地图导航

注意：经纬度必须是浮点数

  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...

最后：感谢互联网，感谢分享者~嘿嘿嘿