微信小程序排坑指南详解


Posted in Javascript onMay 23, 2018

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

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实现兼容IE7的类库 IE7_0_9.zip提供下载
Aug 08 Javascript
获取dom元素那些讨厌的位置封装代码
Jun 23 Javascript
Javascript Throttle & Debounce应用介绍
Mar 19 Javascript
js获取网页可见区域、正文以及屏幕分辨率的高度
May 15 Javascript
AngularJS快速入门
Apr 02 Javascript
js模仿java的Map集合详解
Jan 06 Javascript
JS清除字符串中重复值的实现方法
Aug 03 Javascript
在vue中获取dom元素内容的方法
Jul 10 Javascript
js事件委托和事件代理案例分享
Jul 25 Javascript
Vue前后端不同端口的实现方法
Sep 19 Javascript
解决vue 界面在苹果手机上滑动点击事件等卡顿问题
Nov 27 Javascript
微信小程序本地存储实现每日签到、连续签到功能
Oct 09 Javascript
关于vue-router的那些事儿
May 23 #Javascript
基于Vue自定义指令实现按钮级权限控制思路详解
May 23 #Javascript
详解React+Koa实现服务端渲染(SSR)
May 23 #Javascript
JavaScript+H5实现微信摇一摇功能
May 23 #Javascript
浅谈使用mpvue开发小程序需要注意和了解的知识点
May 23 #Javascript
vue动态路由配置及路由传参的方式
May 23 #Javascript
vue-cli项目根据线上环境分别打出测试包和生产包
May 23 #Javascript
You might like
PHP 利用Mail_MimeDecode类提取邮件信息示例
2014/01/26 PHP
分享PHP函数实现数字与文字分页代码
2015/07/28 PHP
学习php设计模式 php实现抽象工厂模式
2015/12/07 PHP
实例讲解PHP表单处理
2019/02/15 PHP
Laravel 自动转换长整型雪花 ID 为字符串的实现
2020/10/27 PHP
javascript instanceof,typeof的区别
2010/03/24 Javascript
js实现图片轮换效果代码
2013/04/16 Javascript
『jQuery』名称冲突使用noConflict方法解决
2013/04/22 Javascript
javascript实现信息的显示和隐藏如注册页面
2013/12/03 Javascript
nodejs教程之环境安装及运行
2014/11/21 NodeJs
jQuery实现两款有动画功能的导航菜单代码
2015/09/16 Javascript
每天一篇javascript学习小结(面向对象编程)
2015/11/20 Javascript
基于jQuery实现数字滚动效果
2017/01/16 Javascript
微信小程序图片宽100%显示并且不变形
2017/06/21 Javascript
Angularjs按需查询实例代码
2017/10/30 Javascript
微信小程序开发实现的选项卡(窗口顶部/底部TabBar)页面切换功能图文详解
2019/05/14 Javascript
Vue实现表格批量审核功能实例代码
2019/05/28 Javascript
Vue 设置axios请求格式为form-data的操作步骤
2019/10/29 Javascript
解决Python字典写入文件出行首行有空格的问题
2017/09/27 Python
对python添加模块路径的三种方法总结
2018/10/16 Python
PyQt5内嵌浏览器注入JavaScript脚本实现自动化操作的代码实例
2019/02/13 Python
python集合是否可变总结
2019/06/20 Python
python opencv 批量改变图片的尺寸大小的方法
2019/06/28 Python
Python爬虫之urllib基础用法教程
2019/10/12 Python
pytorch实现focal loss的两种方式小结
2020/01/02 Python
Tensorflow训练MNIST手写数字识别模型
2020/02/13 Python
实例讲解Python 迭代器与生成器
2020/07/08 Python
Python描述数据结构学习之哈夫曼树篇
2020/09/07 Python
python如何快速拼接字符串
2020/10/28 Python
加拿大专业美发产品购物网站:Chatters
2021/02/28 全球购物
四年大学生活的个人自我评价
2013/12/11 职场文书
竞选学生会主席演讲稿
2014/04/24 职场文书
运动会广播稿诗歌版
2014/09/12 职场文书
小学语文新课改心得体会
2016/01/22 职场文书
详解Python中的进程和线程
2021/06/23 Python
Android开发EditText禁止输入监听及InputFilter字符过滤
2022/06/10 Java/Android