微信小程序 错题记事本 111111

radio 设置大小

style="transform:scale(0.7)"

接口遇到问题

export const uploadFile = data => { //上传文件
	return AjaxuploadFile({
		url: '/xxxx/xxxx?directoryName=miniapp',
        filePath: data.filePath
	})
}

export const getBusiness = (data) => { // 模板字符串
  return Ajax({
    url: `/xxxx/xxxxx/xxxxx/${data.xxx}`,
    data
  })
}

转义工具链接

https://c.runoob.com/front-end/3602/
https://tool.ip138.com/base64/
https://www.bejson.com/enc/urlencode/

微信小程序js 上拉刷新，下拉加载
思路：1.列如：初次请求10条数据，拿到总共的数据和页面页数，
2.判断是否是初次请求，如果不是，就将请求的数据添加至原本的数据中
3.如果数据的长度 大于 总条数 ，那么不再请求

data{
   current: 1,
   total: 0,
   list:[]
}
onPullDownRefresh() {
    this.data.current = 1;
    this.getNocite()
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom() {
    console.log("pppp")
    this.data.current++
    if (this.data.total > this.data.list.length) {
      this.getNocite()
    } else {
      console.log("到底了")
      wx.showToast({
        title: '我也是有底线的',
        icon: 'none',
        duration: 2000
      })
    }
  },
getNocite() {
    getNoticeList({
      current: 1,
      size: 10
    }).then((res) => {
      console.log(res)
      this.setData({
        current: res.data.data.current,
        total: res.data.data.total
      })
      if (this.data.current == 1) {
        this.setData({
          list: res.data.data.pageData
        })
      } else {
         that.data.list.push(...res.data.data.list);
        this.setData({
          list: this.data.list
        })
      }
      wx.stopPullDownRefresh({
        success: (res) => {},
      })
    })
  },

json对象转字符串，字符串转json 对象

JSON.stringify(xxxx) //对象转字符串
JSON.parse(xxxx) //字符串转json 对象

微信小程序 链接 h5 页面

<web-view src="https:// baidu.com"></web-view>

rich-text的换行 图片100%

<rich-text :nodes="rich" style="word-break:break-all;"></rich-text>
js
res.data.data.content = res.data.data.content.replace(/<img/g,'<img style="max-width:100%;"')

button border去除

button::after{ border: none; }

长按图片分享

<image src="xxxx" show-menu-by-longpress="{{true}}"></image>

动态修改标题

onShow(options) {
    // this.GetIcon()
    wx.setNavigationBarTitle({
      title: this.data.title
    })
},

文本溢出隐藏省略号

单行
{
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  }

多行
{
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}

tabbar 隐藏显示

wx.showTabBar()
wx.hideTabBar()

点击复制内容

qrUrl(e) {
    console.log(e)
    let index = e.currentTarget.dataset.index
    this.setData({
      fileUrl: this.data.imgUrl + this.data.list[index].fileUrl
    })
    wx.setClipboardData({
      data: this.data.fileUrl,
      success:function(){
        // wx.showToast({
        //   title: '内容已复制，请到手机浏览器打开下载',
        // })
        msg("内容已复制，请到手机浏览器打开下载")
      }
    })
   
  },

flex width 无效
width 改为 如下

   flex:0 0 500rpx

点击分享给朋友
button 里面的 open-type=“share” 属性

 <button open-type="share" class="btns">
    <image src="../../img/icon/fh.png"></image>
  </button>

字体倾斜，竖排输出

 transform:rotate(-45deg);
 writing-mode:tb;

隐藏滚轮

::-webkit-scrollbar {
  display: none
}

内容复制

function(){
    let address = 123456789
    wx.setClipboardData({
      data: address,
      success: function () {
        msg("地址已复制，请到手机地图导航打开")
      }
    })
  }

图片上传

chooseImg: function (e) {
    let that = this;
    wx.chooseImage({
      count: 1, //默认9
      sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
      success: function (res) {
        wx.showLoading({
          title: '加载中',
          mask: true
        })
        uploads({
          filePath: res.tempFilePaths[0]
        }).then(res => {
          wx.showToast({
            title: '上传成功',
            mask: true,
            icon: 'none'
          })
          console.log(res)
          that.setData({
            show6: true,
            logo: res.data.link
          })
        })
      }
    });
  },

文件上传，从聊天记录获取

onClose10() {
    this.setData({
      show: false,
      seconds: 5,
      show10: true
    });
    var that = this;
    wx.chooseMessageFile({
      count: 10,
      type: 'all',
      success(res) {
        console.log(res);
        uploads({
          filePath: res.tempFiles[0].path
        }).then((res) => {
          console.log(res.data.link)
          if (res.data.link.substr(-3) == 'rar' || res.data.link.substr(-3) == 'zip' || res.data.link.substr(-3) == 'doc' || res.data.link.substr(-4) == 'docx' || res.data.link.substr(-3) == 'xls' || res.data.link.substr(-4) == 'xlsx' || res.data.link.substr(-3) == 'ppt' || res.data.link.substr(-4) == 'pptx' || res.data.link.substr(-3) == 'pdf') {
            console.log('loo');
            that.data.business_license_img1.push(res.data.link)
          } else {
            that.data.business_license_img.push(res.data.link)
          }

          that.setData({
            business_license_img: that.data.business_license_img,
            business_license_img1: that.data.business_license_img1,
          })
          msg('上传成功')
        })
      }
    })
  },

隐藏显示input 密码

<input placeholder="请输入登录密码" placeholder-style="font-size:28rpx; color:#999" password="{{active}}"
    bindinput="paw" value="{{password}}" />

轮播图指示点 样式

/* 轮播图圆点 */
/* 圆点的样式  因为大小不一样。所以按钮设置大小之后，背景色记得设置完全透明*/
swiper .wx-swiper-dot {
  width: 10rpx;
  height: 10rpx;
  display: inline-flex;
  flex-direction: row;
  justify-content: flex-end;
  background: rgba(255, 255, 255,0);
}
/* 未选中 */
swiper .wx-swiper-dot::before {
  width: 20rpx;
  height: 10rpx;
  content: '';
  border-radius: 50%;
 
  /* flex-grow:1; */
  background: rgba(255, 255, 255,0.5);
}
/* 选中 */
swiper .wx-swiper-dot-active::before {
  width: 30rpx;
  height: 10rpx;
  border-radius: 50%;
  background: rgba(255, 255, 255,1);
}
.wx-swiper-dots {
  position: relative;
  left: unset !important;
  right: 0;
}
.wx-swiper-dots.wx-swiper-dots-horizontal {
  margin-bottom: -10rpx;
}


// 样式二
.wx-swiper-dots {
  top: 350rpx;
}
.wx-swiper-dot {
  width: 9rpx !important;
  height: 9rpx !important;
  background: rgba(255,255,255,0.6) !important;
}

.wx-swiper-dot-active {
  width: 32rpx !important;
  height: 8rpx !important;
  border-radius: 20rpx !important;
  background: rgba(255,255,255,1) !important;
}

判断对象是否为空

JSON.stringify(this.data.obj) === '{}'

字符串裁剪 返回数组

  xxxx.split(',')

时间转换

 let xxx = new Date(xxx).getTime();
  setInterval(() => {
        this.getTimes()
      }, 1000)
      // 倒计时
  getTimes() {
    let times = this.data.xxx - Date.now()
    if (times < 0) {
      this.setData({
        countdown: '00:00:00'
      })
    } else {
      // console.log(times)
      let time = times / 1000;
      let hour = Math.floor(time / 60 / 60);
      hour = hour.toString().padStart(2, "0");
      let minute = Math.floor(time / 60) % 60;
      minute = minute.toString().padStart(2, "0");
      let second = Math.floor(time) % 60;
      second = second.toString().padStart(2, "0");
      // console.log(hour+':'+ minute+ ':'+ second);
      this.setData({
        countdown: hour + ':' + minute + ':' + second
      })
    }
  },

密码输入框
js

 //获取应用实例
const app = getApp()
Page({
  data: {
    showPayPwdInput: false, //是否展示密码输入层
    pwdVal: '', //输入的密码
    payFocus: true, //文本框焦点
  },
  /*** 获取焦点*/
  getFocus: function () {
    this.setData({
      payFocus: true
    });
  },
  /*** 输入密码监听*/
  inputPwd: function (e) {
    console.log(e);
    this.setData({
      pwdVal: e.detail.value
    });
    console.log(this.data.pwdVal);
    if (e.detail.value.length >= 6) {
        console.log('opop');
    }
  }
})

css

/* 密码掩码模拟 */
.input_row {
  width: 360rpx;
  margin: 0 auto;
  height: 60rpx;
  position: relative;
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  border: 1rpx solid #000;
}

.input_row .pwd_item {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60rpx;
  height: 100%;
  border-right: 1rpx solid #000;
  position: relative;
}

.pwd_item:nth-last-of-type(1) {
  border-right: 0;
}

.pwd_item text {
  width: 15rpx;
  height: 15rpx;
  border-radius: 30rpx;
  background-color: #191919;
}

.forget_pwd {
  float: right;
  margin: 30rpx;
  width: 100rpx;
  text-align: right;
  font-size: 24rpx;
  color: #ff7800;
}

/* 文本输入框位置: 设置到左边隐藏 */
.input_control {
  position: relative;
  left: -300rpx;
  bottom: 0;
  width: 100rpx;
  height: 100rpx;
}

html

<!-- 密码输入框 -->
<view class='input_row' catchtap='getFocus'>
  <view class='pwd_item' wx:for='{{6}}' wx:key='item' wx:for-index='i'>
    <text wx:if='{{pwdVal.length>i}}'></text>
  </view>
</view>
<input class='input_control' password type='number' focus='{{payFocus}}' bindinput='inputPwd' maxlength='6' />

去除空格

xxxx = xxx.replaceAll(' ','')

图片预览

// 预览图片
  copyImg() {
    var that = this
    let img = that.data.imgUrl + that.data.license_img
    wx.previewImage({
      urls: [img] // 需要预览的图片 http 链接列表
    })
  },

css iphone 底部安全距离设置

 padding-bottom: constant(safe-area-inset-bottom); 
  padding-bottom: env(safe-area-inset-bottom); 

渲染长度限制

wx:if="{{index<2}}"

海报分享

   wxml
   <!-- 分享 -->
<van-action-sheet show="{{ sheetshow }}">
  <view class="menubox">
    <view class="block" bindtap="shengchenghaibao">
      <view class="icons">
        <image src="../../img/icon/share3.png" mode="widthFix"></image>
      </view>
      <view class="title">生成海报</view>
    </view>
    <view class="block">
      <button open-type="share" class="sharebtn">分享</button>
      <view class="icons">
        <image src="../../img/icon/share4.png" mode="widthFix"></image>
      </view>
      <view class="title">微信好友</view>
    </view>
  </view>
  <view class="menubtn" bindtap="sheetclose">取消</view>
</van-action-sheet>

<view class="haibaoimgs" wx:if="{{sheetshow}}">
  <!-- <swiper style="height:800rpx;" current="{{haibaiimgcurrent}}" bindchange="haibaichange">
		<swiper-item wx:for="{{haibaoimg}}">
			<image src="{{item.tempFilePath}}" mode="widthFix"></image>
		</swiper-item>
	</swiper> -->
  <view style="height: 800rpx;">
    <image src="{{haibaoimg}}" mode="widthFix"></image>
  </view>
</view>

<view class="canvas-big-box" wx:if="{{!haibaoimg}}">
  <view class="canvas-box">
    <canvas style="width:100%; height:{{dataheight}}px; background: #fff;" canvas-id="canvas" disable-scroll="true"></canvas>
  </view>
</view>

wxss
/* 分享 */
.menubox {
  display: flex;
  align-items: center;
  justify-content: space-around;
  padding: 50rpx 0 50rpx;
}

.menubox>.block {
  position: relative;
}

.menubox>.block>.sharebtn {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99;
  opacity: 0;
}

.menubox>.block>.icon {
  width: 100rpx;
  height: 100rpx;
  margin: auto;
}

.menubox>.block>.title {
  text-align: center;
  margin-top: 10rpx;
  font-size: 24rpx;
}

.menubtn {
  text-align: center;
  color: #666666;
  font-size: 36rpx;
  padding: 20rpx 0;
  border-top: 20rpx solid #F2F2F2;
}

.icons {
  width: 42rpx;
  margin: 0 auto;
}

.icons image {
  width: 100%;
}

.canvas-big-box {
  position: fixed;
  top: -1000000rpx !important;
  left: 0;
  bottom: 0;
  right: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  /* background-color: pink; */
}

.canvas-box {
  width: 100%;
  height: 100%;
  background: #fff;
  z-index: 99;
  position: relative;
  top: -1000000px;
}

.haibaoimg {
  position: absolute;
  width: 100%;
  height: 100%;
}

.haibaoimgs {
  position: absolute;
  z-index: 9999999999;
  width: 80%;
  top: 200rpx;
  left: 10%;
}

image {
  width: 100%;
} 

放置信息详情下方
wx.downloadFile({
        url: res.data.data.img,
        success: function (res) {
          console.log('封面图下载')
          console.log(res)
          that.setData({
            main_banner: res.tempFilePath
          })
          wx.getImageInfo({
            src: that.data.main_banner,
            success(res) {
              console.log('图片信息')
              console.log(res)
              that.setData({
                main_width: res.width,
                // main_height:res.height,
                main_height: res.height / (res.width / that.data.width)
              })
              that.setData({
                dataheight: that.data.main_height + 150
              })
              that.goodsqrcode()
            },
            fail(err) {
              console.log(err)
            }
          })
        },
        fail(err) {
          console.log(err)
        },
      })

goodsqrcode() {
    var that = this
    let pages = getCurrentPages(); //获取加载的页面
    let currentPage = pages[pages.length - 1]; //获取当前页面的对象
    let url = currentPage.route + '?id=' + that.data.options.id; //当前页面url
    console.log(url, '当前页面路径')
    wx.downloadFile({
      url: 'http://xpj10blj.signalpha.cn/api/server-shop/wap/goods/share/code?appId=wx900492c0dced62e1' + '&url=' + url,
      header: {
        token: app.globalData.token,
        Authorization: "d2FwOlpNOUtuNU50SA==",
      },
      success(res) {
        console.log(res)
        that.setData({
          user_QRs: res.tempFilePath
        })
        that.huizhi();
      },
      fail(err) {
        console.log(err)
      }
    })
  },

  huizhi() {
    var that = this
    var context = wx.createCanvasContext('canvas');
    context.setFillStyle('#fff')
    context.fillRect(0, 0, that.data.width, that.data.dataheight)
    context.drawImage(that.data.main_banner, 0, 0, that.data.width, that.data.main_height);
    context.drawImage(that.data.user_QRs, that.data.width - 130, that.data.dataheight - 130, 120, 120);

    context.setFontSize(16) //字体大小
    context.setFillStyle('#333') //字体颜色
    context.font = 'normal bold 18px sans-serif';
    context.textAlign = "left"; //文字居中
    context.fillText(that.data.info.name.substring(0, 10), 20, that.data.dataheight - 100)

    context.setFontSize(16) //字体大小
    context.setFillStyle('#333') //字体颜色
    context.font = 'normal bold 18px sans-serif';
    context.textAlign = "left"; //文字居中
    context.fillText(that.data.info.name.substring(10, that.data.info.name.length), 20, that.data.dataheight - 80)

    context.setFontSize(16) //字体大小
    context.setFillStyle('#FF0018') //字体颜色
    context.font = 'normal bold 18px sans-serif';
    context.textAlign = "left"; //文字居中
    context.fillText('￥' + that.data.info.priceTotal, 20, that.data.dataheight - 50)

    context.stroke()
    context.draw()

    setTimeout(() => {
      console.log('执行绘画')
      wx.canvasToTempFilePath({
        x: 0,
        y: 0,
        width: that.data.width,
        height: that.data.dataheight,
        canvasId: 'canvas',
        success(res) {
          console.log(res.tempFilePath);
          that.setData({
            haibaoimg: res.tempFilePath
          })
          console.log(that.data.haibaoimg)
          wx.hideLoading();
        },
        fail(err) {
          wx.hideLoading();
          // wx.showToast({
          //   title: '生成失败',
          //   icon: 'none'
          // })
          console.log(err)
        }
      })
    }, 500)
  },
  getshare() {
    //  wx.navigateTo({
    //    url: '/pages/realEstateDetails/realEstateDetails',
    //  })
    //显示分享码
    console.log('op000----------');
    this.setData({
      sheetshow: true
    })
  },
  shengchenghaibao() {
    var that = this
    //保存海报
    wx.showLoading({
      title: '保存中',
      mask: true
    })
    wx.getImageInfo({
      src: that.data.haibaoimg,
      success(res) {
        console.log(res)
        let path = res.path;
        wx.saveImageToPhotosAlbum({
          filePath: path,
          success(res) {
            console.log(res)
            msg('保存成功')
          },
          fail(err) {
            console.log(err)
            if (err.errMsg == 'saveImageToPhotosAlbum:fail auth deny') {
              goOpenSettingPhotos();
            }
          },
          complete() {
            wx.hideLoading({
              success: (res) => {},
            })
          },
        })
      }
    })
  },
  sheetclose() {
    this.setData({
      sheetshow: false
    })
  },

  onShareAppMessage: function (e) {
    let that = this
    return {
      title: that.data.info.goodsName,
      imageUrl: that.data.imgUrl + that.data.info.main_banner,
      path: '/pages/general_merchandise_details/general_merchandise_details?id=' + that.data.options.id + '&type=' + that.data.options.type
    }
    },


data数据

    sheetshow: false,
    dataheight: '',
    haibaoimg: '',
    main_banner: '',
    width: wx.getSystemInfoSync().windowWidth,
    height: wx.getSystemInfoSync().windowHeight,
    imgactive: false,
    img_detail: ''

onload 获取
  let menu = wx.getMenuButtonBoundingClientRect();
    let titleHeight = 'top:-' + (Number(menu.top) + Number(menu.height) + 10) + 'px;';
    that.setData({
      titleHeight,
      menu
    })