微信小程序排坑指南详解


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 相关文章推荐
容易被忽略的JS脚本特性
Sep 13 Javascript
JavaScript计算字符串中每个字符出现次数的小例子
Jul 02 Javascript
JavaScript 事件绑定及深入
Apr 13 Javascript
javascript关于open.window子页面执行完成后刷新父页面的问题分析
Apr 27 Javascript
使用JavaScript脚本无法直接改变Asp.net中Checkbox控件的Enable属性的解决方法
Sep 16 Javascript
使用Javascript监控前端相关数据的代码
Oct 27 Javascript
老生常谈原生JS执行环境与作用域
Nov 22 Javascript
微信小程序 数据交互与渲染实例详解
Jan 21 Javascript
Angular2.js实现表单验证详解
Jun 23 Javascript
javascript自定义事件功能与用法实例分析
Nov 08 Javascript
express如何使用session与cookie的方法
Jan 30 Javascript
js实现移动端轮播图滑动切换
Dec 21 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
php5新改动之短标记启用方法
2008/09/11 PHP
国外比较好的几个的Php开源建站平台小结
2010/04/22 PHP
linux中cd命令使用详解
2015/01/08 PHP
php  PATH_SEPARATOR判断当前服务器系统类型实例
2016/10/28 PHP
优化innerHTML操作(提高代码执行效率)
2011/08/20 Javascript
JavaScript比较两个对象是否相等的方法
2015/02/06 Javascript
javascript实现复选框超过限制即弹出警告框的方法
2015/02/25 Javascript
Backbone.js的一些使用技巧
2015/07/01 Javascript
jQuery同步提交示例代码
2015/12/12 Javascript
Angular 路由route实例代码
2016/07/12 Javascript
Bootstrap Table从服务器加载数据进行显示的实现方法
2016/09/29 Javascript
Omi v1.0.2发布正式支持传递javascript表达式
2017/03/21 Javascript
vue货币过滤器的实现方法
2017/04/01 Javascript
javascript trie前缀树的示例
2018/01/29 Javascript
vue实现输入一位数字转汉字功能
2019/12/13 Javascript
vue调用微信JSDK 扫一扫,相册等需要注意的事项
2021/01/03 Vue.js
[52:03]Secret vs VG 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/20 DOTA
Flask web开发处理POST请求实现(登录案例)
2018/07/26 Python
pandas DataFrame 删除重复的行的实现方法
2019/01/29 Python
对python实现模板生成脚本的方法详解
2019/01/30 Python
python实现飞机大战小游戏
2019/11/08 Python
Python大数据之网络爬虫的post请求、get请求区别实例分析
2019/11/16 Python
TensorFlow索引与切片的实现方法
2019/11/20 Python
python能开发游戏吗
2020/06/11 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Python 如何实现数据库表结构同步
2020/09/29 Python
Pycharm 设置默认解释器路径和编码格式的操作
2021/02/05 Python
CSS3使用transition实现的鼠标悬停淡入淡出
2015/01/09 HTML / CSS
html5 桌面提醒:Notifycations应用介绍
2012/11/27 HTML / CSS
加拿大最大的体育用品、鞋类和服装零售商:Sport Chek
2018/11/29 全球购物
入股协议书
2014/04/14 职场文书
法人代表授权委托书范文
2014/09/10 职场文书
向国旗敬礼学生寄语大全
2014/09/30 职场文书
民事赔偿协议书
2014/11/02 职场文书
考试作弊检讨书
2015/01/27 职场文书
Vue接口封装的完整步骤记录
2021/05/14 Vue.js