微信小程序排坑指南详解


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 相关文章推荐
cookie.js 加载顺序问题怎么才有效
Jul 31 Javascript
jQuery客户端分页实例代码
Nov 18 Javascript
Extjs表单常见验证小结
Mar 07 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
jQuery搜索子元素的方法
Feb 10 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
Mar 21 Javascript
Bootstrap实现登录校验表单(带验证码)
Jun 23 Javascript
javascript运算符——逻辑运算符全面解析
Jun 27 Javascript
AngularJS入门教程之Select(选择框)详解
Jul 27 Javascript
微信小程序 利用css实现遮罩效果实例详解
Jan 21 Javascript
微信小程序使用toast消息对话框提示用户忘记输入用户名或密码功能【附源码下载】
Dec 09 Javascript
VUE简单的定时器实时刷新的实现方法
Jan 20 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
信用卡效验程序
2006/10/09 PHP
php switch语句多个值匹配同一代码块应用示例
2014/07/29 PHP
用jquery来定位
2007/02/20 Javascript
去掉gridPanel表头全选框的小例子
2013/07/18 Javascript
图片Slider 带左右按钮的js示例
2013/08/30 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
使用postMesssage()实现跨域iframe页面间的信息传递方法
2016/03/29 Javascript
javascript+HTML5 Canvas绘制转盘抽奖
2020/05/16 Javascript
简单实现js间歇或无缝滚动效果
2016/06/29 Javascript
jQuery的Cookie封装,与PHP交互的简单实现
2016/10/05 Javascript
微信小程序 火车票查询实例讲解
2016/10/17 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
js使用xml数据载体实现城市省份二级联动效果
2017/11/08 Javascript
vue底部加载更多的实例代码
2018/06/29 Javascript
详解Vue内部怎样处理props选项的多种写法
2018/11/06 Javascript
谈谈JavaScript中super(props)的重要性
2019/02/12 Javascript
vue2 中二级路由高亮问题及配置方法
2019/06/10 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
[01:39:42]Fnatic vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
python 实现插入排序算法
2012/06/05 Python
详解python里使用正则表达式的分组命名方式
2017/10/24 Python
详解Python中的正则表达式
2018/07/08 Python
Pandas过滤dataframe中包含特定字符串的数据方法
2018/11/07 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
Python数据类型之String字符串实例详解
2019/05/08 Python
解决pycharm 工具栏Tool中找不到Run manager.py Task的问题
2019/07/01 Python
django-rest-framework解析请求参数过程详解
2019/07/18 Python
使用PyTorch训练一个图像分类器实例
2020/01/08 Python
新建文件时Pycharm中自动设置头部模板信息的方法
2020/04/17 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
Linux管理员面试题 Linux admin interview questions
2014/11/01 面试题
工作作风整顿个人剖析材料
2014/10/11 职场文书
正规欠条模板
2015/07/03 职场文书
初中思品教学反思
2016/02/20 职场文书
SQL Server中使用判断语句(IF ELSE/CASE WHEN )案例
2021/07/07 SQL Server
Python OpenCV超详细讲解调整大小与图像操作的实现
2022/04/02 Python