开发微信小程序的时候会遇到各种各样的问题,下面总结了部分碰到的问题的解决思路!

1.微信小程序不支持wx.getUserInfo授权的解决方法
链接

2.微信小程序禁止下拉

catchtouchmove='stopdrag'
stopdrag(){
    return false;
}

3.微信小程序实现左右滑动功能
2个tab的情况
多个tab

4.微信小程序--搜索关键词高亮
链接1
链接2
链接3
链接4

5.小程序长按复制
链接

6.小程序悬浮导航
链接

7.小程序页面navigateTo跳转超过10层时的处理办法:
链接

8.小程序回到顶部

wx.pageScrollTo({
   scrollTop: 0,
   duration: 0
})

9.小程序组件库
链接

10.小程序UI库
链接

11.小程序异步请求库
链接

12.小程序滑动切换导航
链接

13.小程序自定义弹窗组件禁止底层页面跟随滚动

catchtouchmove="true"

14.小程序更改checkbox和radio默认样式

1、checkbox
checkbox .wx-checkbox-input{
    border-radius:50%;
    width:20px;height:20px;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
    border-color:#F0302F !important;
    background:#F0302F !important;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
    border-radius:50%;
    width:20px;
    height:20px;
    line-height:20px;
    text-align:center;
    font-size:15px;
    color:#fff;
    background:transparent;
    transform:translate(-50%, -50%) scale(1);
    -webkit-transform:translate(-50%, -50%) scale(1);
}
2、radio
radio .wx-radio-input{
    border-radius:50%;
    width:20px;height:20px;
}
radio .wx-radio-input.wx-radio-input-checked{
    border-color:#F0302F !important;
    background:#F0302F !important;
}
radio .wx-radio-input.wx-radio-input-checked::before{
    border-radius:50%;
    width:20px;
    height:20px;
    line-height:20px;
    text-align:center;
    font-size:15px;
    color:#fff;
    background:transparent;
    transform:translate(-50%, -50%) scale(1);
    -webkit-transform:translate(-50%, -50%) scale(1);
}

15.修改button默认border

button::after{
border:none;
}

16.隐藏滚动条

::-webkit-scrollbar {
  width: 0;
  height: 0;
  color: transparent;
}

17.iOS滚动兼容

-webkit-overflow-scrolling: touch;

18.布局方式

建议采用flex布局或者百分比布局

19.微信小程序ios端overflow:auto滚动卡顿

方法一(不推荐)
view{
overflow:auto;
-webkit-overflow-scrolling: touch;
}

方法二
直接使用微信小程序提供的 “ scroll-view " 组件。
<scroll-view scroll-y style="height: 200px;">
      <!--你要滚动的内容-->
</scroll-view>
注意: 必须要设置scroll-view的高度height

20.swiper 的 swiper-item 下 scroll-view 上拉加载无法触发(布局问题)

最外层需要给定一个设备的高度

21.swiper 的 swiper-item 下 scroll-view iOS下不能拉到底部(iOS下拉回弹)
链接1
链接2

22.小程序适配iPhone X
链接1
链接2

23.获取上一页上的数据

let pages = getCurrentPages();    //获取当前页面信息栈
let prevPage = pages[pages.length-2]     //获取上一个页面信息栈

24.文件预览

先调用下载api,然后打开文件即可
wx.downloadFile({
  // 示例 url,并非真实存在
  url: 'http://example.com/somefile.pdf',
  success: function (res) {
    const filePath = res.tempFilePath
    wx.openDocument({
      filePath: filePath,
      success: function (res) {
        console.log('打开文档成功')
      }
    })
  }
})

25.数组删除对应的元素(以元素名称为主)

 // 数组删除对应元素
          Array.prototype.indexOf = function (val) {
            for (var i = 0; i < this.length; i++) {
              if (this[i] == val) return i;
            }
            return -1;
          };
          Array.prototype.remove = function (val) {
            var index = this.indexOf(val);
            if (index > -1) {
              this.splice(index, 1);
            }
          };

26.微信小程序:防止多次点击跳转(函数节流)
链接

27.小程序使用 async await
链接1
链接2

28.小程序中使用Echarts图表
链接1
链接2

29.【小程序】非常好用的富文本插件wxParse
链接1
链接2