微信小程序排坑指南详解

 更新时间:2018年05月23日 11:11:59   投稿:lijiao  
这篇文章主要为大家详细介绍了微信小程序排坑指南,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

本文为大家分享了微信小程序排坑指南,供大家参考,具体内容如下

no.1 背景图不显示

微信小程序里面是允许用户自定义背景图的,但是限定了背景图的路径及地址,之前一直用相对路径来写,微信开发者工具中也显示出了背景图,误以为没有问题,但是预览的时候发现手机中不显示背景图,这就是今天介绍的第一个坑,背景图不允许为本地图片。

解决方法:

第一、用在线图片转base64码的方法,这种方法的优点在于图片不存储在本地或者服务器上,占用空间小修改方便,缺点是小图片处理效果更好,大图代码相当的长,长的都不想看他...

第二、将图片上传至服务器,引用图片地址就可以了,方便快捷,不过修改麻烦且占用服务器空间。

no.2 下拉没有触发onPullDownRefresh

//下拉事件
onPullDownRefresh: function() {
 console.log("好用不?")
 wx.showToast({
  title: '没事儿别乱拉',
  icon: 'success',
  duration: 2000
 })
},
//上拉事件
onReachBottom: function() {
 wx.showToast({
  title: '没事儿别乱拽',
  icon: 'success',
  duration: 2000
 })
}

上面代码是完全没有问题的,但是预览了以后发现只有向上拽是好用的,下拉完全没有反应,这就郁闷了,难道官方的方法有问题?

其实不是的,原因是因为官方默认是关闭了下拉事件,只要去app.json文件里面修改windows里面参数就可以了,代码如下:

"window": {
 "enablePullDownRefresh":true //开启下拉功能
}

no.3 如何取消监听重力感应API

微信小程序并没有提供摇一摇API接口,但是提供了一个重力感应的API 「wx.onAccelerometerChange(CALLBACK)」,我们可以用这个方法来模拟微信摇一摇功能,代码如下:

Page({
 onShow: function () {
  wx.onAccelerometerChange(function (e) {
   console.log(e.x)
   console.log(e.y)
   console.log(e.z)
   if (e.x > 1 && e.y > 1) {
    wx.showToast({
     title: '摇一摇成功',
     icon: 'success',
     duration: 2000
    })
   }
  })
 },
 onHide: function(){
  
 }
})

但如果小程序需要启用tabbar的话,这样启用重力感应API会使tabbar下面所有页面都会监听到重力感应数据,导致模拟摇一摇在所有页面都能出现摇一摇的结果,这并不是我们想要的,我们只是想在tabbar下其中一个页面允许他获取到重力感应数据,那么就需要我们自己加入一个是否在当前页面的判断,根据判断结果来启用监听重力感应API,代码修改如下:

Page({
 isShow: false,
 onShow: function () {
  var that = this;
  this.isShow = true;
  wx.onAccelerometerChange(function (e) {
   if(!that.isShow){
    return
   }
   console.log(e.x)
   console.log(e.y)
   console.log(e.z)
   if (e.x > 1 && e.y > 1) {
    wx.showToast({
     title: '摇一摇成功',
     icon: 'success',
     duration: 2000
    })
   }
  })
 },
 onHide: function(){
  this.isShow = false;
 }
})

修改以后重新编译预览就达到我们想要的效果了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JavaScript正则表达式验证登录实例

    JavaScript正则表达式验证登录实例

    这篇文章主要为大家详细介绍了JavaScript正则表达式验证登录实例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-03-03
  • 详细聊聊对async/await的理解和用法

    详细聊聊对async/await的理解和用法

    随着Nodev7的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await,这篇文章主要给大家介绍了关于对async/await的理解和用法,文中通过实例代码介绍的介绍的非常详细,需要的朋友可以参考下
    2022-07-07
  • JavaScript 对象模型 执行模型

    JavaScript 对象模型 执行模型

    简单数值类型: 有Undefined, Null, Boolean, Number和String。注意,描述中的英文单词在这里仅指数据类型的名称,并不特指JS的全局对象N an, Boolean, Number, String等,它们在概念上的区别是比较大的。
    2010-10-10
  • 微信小程序实现表格前后台分页

    微信小程序实现表格前后台分页

    这篇文章主要为大家详细介绍了微信小程序实现表格前后台分页,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2022-08-08
  • 无刷新预览所选择的图片示例代码

    无刷新预览所选择的图片示例代码

    这篇文章主要介绍了无刷新预览所选择的图片的具体实现,需要的朋友可以参考下
    2014-04-04
  • JavaScript数据类型检测代码分享

    JavaScript数据类型检测代码分享

    这篇文章主要向大家分享了一段JavaScript实现数据类型检测的代码,附上参数说明和使用说明,希望小伙伴们能够喜欢
    2015-01-01
  • 使用Promise链式调用解决多个异步回调的问题

    使用Promise链式调用解决多个异步回调的问题

    这篇文章主要给大家介绍了使用Promise链式调用解决多个异步回调问题的方法,文中给出了详细的介绍和示例代码,有需要的朋友可以参考借鉴,下面来一起学习学习吧。
    2017-01-01
  • promise处理多个相互依赖的异步请求(实例讲解)

    promise处理多个相互依赖的异步请求(实例讲解)

    下面小编就为大家带来一篇promise处理多个相互依赖的异步请求(实例讲解)。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-08-08
  • 现代 javscript 编程 资料

    现代 javscript 编程 资料

    现代 javscript 编程 资料...
    2007-04-04
  • uniapp实现附近商家定位的示例代码

    uniapp实现附近商家定位的示例代码

    本文主要介绍了uniapp实现附近商家定位的示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-08-08

最新评论