小程序开发中遇到的一些问题

BILLBILLION85213
204 阅读7分钟

小程序中遇到text在view中无法居中问题的解决方法

父元素配置

.textContent{
    position: absolute;
    top: 0;
    left: 286rpx; 
    height: 128rpx;
    width: 362rpx;
    //起主要作用的代码
    display: flex;
    align-items: center;
    justify-content: center;
}

text元素配置

.textContent text{
  font-size: 28rpx;
  color: #888888;
}

小程序中的时间转换（wxs）

var ToDate = function (number1) {
  function zeroize(num) {
    return (num.toString().length == 1 ? '0' : '') + num;
  }
  var n = number1 * 1000;
  var date = getDate(n);
  // 当前时间戳
  var curTimestamp = parseInt(getDate().getTime() / 1000); 
  var curDate = getDate(curTimestamp * 1000);
  var Y = date.getFullYear();
  var M = date.getMonth() + 1;
  var D = date.getDate();
  var h = date.getHours();
  var m = date.getMinutes();
  if (curDate.getFullYear() == Y && curDate.getMonth() + 1 == M && curDate.getDate == D){
    return (h + ":" + m);
  }else{
    // 参数中的时间戳加一天转换成的日期对象 
    var newDate = (curTimestamp - 86400) * 1000; 
    return (Y + "-" + zeroize(M) + "-" + zeroize(D) + " " + zeroize(h) + ":" + zeroize(m));
  }
}
module.exports.ToDate = ToDate;

www.cnblogs.com/taochengyon…

小程序上拉加载

www.cnblogs.com/fxdo/p/9051…

模板消息限制(现已改为订阅消息)

用户完成一次支付，小程序可以获得 3 次发送模板消息的机会。

用户提交一次表单，小程序可以获得 1 次发送模板消息的机会。

发送模板消息的机会在用户完成操作后的 7 天内有效。一旦超过 7 天，这些发送资格将会自动失效。

flex布局中的对齐方式

flex布局中的float失效

右对齐
margin-left:0;
左对齐
margin-right:0;

小程序横向出现滚动条

安卓用户几乎无影响，但是会出现滚动条

苹果用户可将界面拖动

解决方式：添加 overflow-x:hidden

小程序wx:if比较更高层级数据

高层级里添加wx:for-item即可在下面代码中调用其数据，不要只用默认item

<view class="container" wx:for="{{circleList}}" wx:for-item="twodata" wx:key="index">

text文本超出限制

blog.csdn.net/ansheng02/a…

web-view相关

  • 小程序打开外部链接通过web-view打开

  • web-view要在新的页面里单独写，此页面也要在app.json中注册

  • web-view要在后台配置业务域名（必须是https）

developers.weixin.qq.com/miniprogram…

web-view再次刷新后页面需要后退两次

在A页面从B页面带了参数返回之后，A页面会刷新，直接导致了，A页面返回上一个页面需要点击两次，其中点击一次时还是A页面

解决方案

  1. 首先第一个想法就是，设置一下退回按钮直接跳到上一个页面去；经过资料查找，回退按钮是没有直接触发函数的，也就是说不能直接控制回退的功能。

  2. 在寻找资料时，发现可以间接的触发一个unload函数，于是尝试在当前页面退回按钮点击后，会立即触发当前页面的unload方法，在unload里面尝试跳转到A的前一页，结果如下：

    1. 在第一次点击退回，没有触发unload
2. 再次点击退回，成功触发了unload

    与期望不符，预期unload第一次退回触发才可以进行页面跳转

  3. 那么是web-view刷新产生的这个页面，也不能干掉，让web-view刷新这个页面就可以了，找了很多资料，没有理出一个头绪，web-view既然是第二次刷新产生的，那么让只刷新第一次是不是就可以解决了，于是做了如下尝试：

    在B页面把A页面的web-view的src变量置为空，然后在A页面web-view上添加wx:if={{src!==''}}的条件控制，在src为空时销毁web-view，然后在B页面退回通过另一个变量把需要的url传递过去在A页面onShow，再设置src为一个我们期望的跳转url，总结一下：

    A页面跳到B页面时设置A的src为空-销毁了`web-view`，退回A页面时在onShow方法在设置src的值-`web-view`被重新渲染

    测试结果得到了预期： 页面被刷新，且没有了A页面退回两次的情况

总结
  1. web-view在src变化之后，会产生一个新的页面，并加入的页面栈里面
  2. 刷新之后的页面回退不会有unload方法调用
  3. web-view销毁重建可以避免产生新的页面
  4. 销毁重建解

onLoad和onShow

onLoad只会在页面初次加载时调用

onShow会在每次打开页面时调用

所以页面值的切换是放在onShow里面

小程序openDoucument和downloadFile问题集合

www.zeplus.com/study/2019/…

小程序wx.request使用中要注意的问题

www.cnblogs.com/okaychen/p/…

margin-right:0;

小程序坑（video组件）

button样式去除

button{
    background-color:rgb(247, 247, 247); /*可根据自己的背景颜色自行设置*/
    border-radius: 0rpx;
    padding:0rpx;
    margin:0rpx;
    display: inline-block;
    line-height: 1;
}
button::after{ /*button的边框样式是通过::after方式实现的*/
	border:none;
}
.button-hover{ /*点击后样式*/
    color:#000;
    background-color: rgb(247, 247, 247);
}

原文链接：blog.csdn.net/qq_43327305…

下载下来的软件变为了zip

blog.csdn.net/fancivez/ar…

docx、xlsx、pptx文档格式是office2007使用的文档格式，其文件本质是zip压缩文档，由于tomcate不能识别docx、xlsx、pptx文档格式，根据文件内容被识别为zip文档，所以下载时会被当做zip文档处理。

   解决方式，在tomcat安装目录下conf/web.xml中添加以下代码：



<mime-mapping> 
    <extension>docx</extension> 
    <mime-type>application/vnd.openxmlformats-officedocument.wordprocessingml.document</mime-type> 
</mime-mapping>
<mime-mapping> 
    <extension>xlsx</extension> 
    <mime-type>application/vnd.openxmlformats-officedocument.wordprocessingml.document</mime-type> 
</mime-mapping>
<mime-mapping> 
    <extension>pptx</extension> 
    <mime-type>application/vnd.openxmlformats- officedocument.wordprocessingml.document</mime-type> 
</mime-mapping>

blog.csdn.net/sjepy/artic…

小程序模板消息推送

www.tapme.top/blog/detail…

如何将新建md添加到右键菜单中
Windows Registry Editor Version 5.00
[HKEY_CLASSES_ROOT\.md\ShellNew]
"NullFile"=""
"FileName"="template.md"

将以上代码写到记事本里，另存为

这里写图片描述 ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/11/29/16eb622e4a037517~tplv-t2oaga2asx-image.image) ![](https://p1-jj.byteimg.com/tos-cn-i-t2oaga2asx/gold-user-assets/2019/11/29/16eb6230799c7786~tplv-t2oaga2asx-image.image)

然后运行、重启电脑即可

小程序的按钮节流

throttle.js

//防止多次重复点击  （函数节流）
 function throttle(fn, gapTime) {
  if (gapTime == null || gapTime == undefined) {
    gapTime = 1000
  }
 
  let _lastTime = null
 
  // 返回新的函数
  return function (e) {
    console.log(this)
    let _nowTime = + new Date()
    if (_nowTime - _lastTime > gapTime || !_lastTime) {
      // fn.apply(this, arguments)   //将this和参数传给原函数
      fn(this,e)    //上方法不可行的解决办法 改变this和e
      _lastTime = _nowTime
    }
  }
}
module.exports = {
  throttle: throttle
}

mine.js

bindUpload: utils.throttle((that,e) => {
    console.log(e)    //    事件源
    console.log(that)  // this 指向
  }, 1000)

blog.csdn.net/namechenfl/…

www.jianshu.com/p/52ec7ede1…

防抖和节流

防抖是将多次执行变为最后一次执行，节流是将多次执行变为每隔一段时间执行

www.cnblogs.com/youma/p/105…

www.jianshu.com/p/c8b86b09d… -简书

小程序中swiper左右带间隔滑动且带有放大、缩小效果

blog.csdn.net/qq_33744228…

wxml：

<view class='test'>
    <swiper  display-multiple-items='1' previous-margin='50px' next-margin='50px' bindchange='change' current='{{current}}'>
      <block wx:for="{{imgUrls}}" wx:key='{{index}}'>
        <swiper-item>
          <view class="poster_box" data-index='{{index}}' animation="{{index == current?animationData2:animationData3}}">
            <image src='{{item}}'></image>
            <view class='content'>
              <text>测试</text>
              <text>测试</text>
            </view>
          </view>
        </swiper-item>
      </block>
    </swiper>
</view>

wxss：

.test{
  width: 100%;
  height: 100vh;
  box-sizing: border-box;
}
swiper{
  height: 100%;
}
.content{
  font-size: 16px;
  color: #333;
  padding: 20rpx 40rpx;
}
swiper-item{
  text-align: center;
}
swiper-item image{
  width: 100%;
}
.poster_box{
  width: 90%;
  height:902rpx;
  display: inline-block;
  margin-top: 40px;
  border-radius: 17rpx;
  box-sizing: border-box;
  box-shadow: 0 0 4px 4px #ccc;
  position:relative;
  top:33%;
  transform:translateY(-45%);
}

js：

// pages/index/share/share.js
Page({

  /**
   * 页面的初始数据
   */
  data: {
    hideModal: true,
    imgUrls: [
      'http://img02.tooopen.com/images/20150928/tooopen_sy_143912755726.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175866434296.jpg',
      'http://img06.tooopen.com/images/20160818/tooopen_sy_175833047715.jpg'
    ],
    current: 0,
    animationData1: {},
    animationData2: {},
    animationData3: {}
  },
  showModal: function () {
    var that = this;
    that.setData({
      hideModal: false
    })
    var animation1 = wx.createAnimation({
      duration: 600, //动画的持续时间 默认400ms 数值越大，动画越慢 数值越小，动画越快 
      timingFunction: 'ease', //动画的效果 默认值是linear 
    })
    this.animation1 = animation1
    setTimeout(function () {
      that.fadeIn(); //调用显示动画 
    }, 100)
  },

  // 隐藏遮罩层 
  hideModal: function () {
    var that = this;
    var animation1 = wx.createAnimation({
      duration: 800, //动画的持续时间 默认400ms 数值越大，动画越慢 数值越小，动画越快 
      timingFunction: 'ease-in-out', //动画的效果 默认值是linear 
    })
    this.animation1 = animation1
    that.fadeDown(); //调用隐藏动画 
    setTimeout(function () {
      that.setData({
        hideModal: true
      })
    }, 600) //先执行下滑动画，再隐藏模块 
  },

  //动画集 
  fadeIn: function () {
    this.animation1.translateY(0).step()
    this.setData({
      animationData1: this.animation1.export() //动画实例的export方法导出动画数据传递给组件的animation属性 
    })
  },
  fadeDown: function () {
    this.animation1.translateY(680).step()
    this.setData({
      animationData1: this.animation1.export(),
    })
  },
  //切换
  change(e) {
    this.setData({
      current: e.detail.current
    })
    this.stretch(496)

    this.shrink(451)
  },
  // 收缩
  stretch(h) {
    var animation2 = wx.createAnimation({
      duration: 600,
      timingFunction: 'ease',
    })
    this.animation2 = animation2
    animation2.height(h).step()
    this.setData({
      animationData2: animation2.export(),
    })
  },
  // 展开
  shrink(h) {
    var animation3 = wx.createAnimation({
      duration: 600,
      timingFunction: 'ease',
    })
    this.animation3 = animation3
    animation3.height(h).step()
    this.setData({
      animationData3: animation3.export()
    })
  },
  /**
   * 生命周期函数--监听页面加载
   */
  //初始化首个海报高度
  onLoad: function (options) {
    this.stretch(491)
  },
})
avatar
文章
阅读
粉丝