详解小程序如何改变onLoad的执行时机_javascript技巧

来源:脚本之家  责任编辑:小易  

你这写的很好2113啊你还有什么疑5261问?你也可以把4102那些代码封装到一个函数里1653,比如:window.onload=function(){a();alert(1);}function a(){var oDiv1=document.getElementById('dao');var oDiv2=document.getElementById('guang');var oLi=oDiv1.getElementsByTagName('li');var i=0;for(i=0;i<oLi.length;i++){oLi[i].onmouseover=function(){for(i=0;i<oLi.length;i++){oLi[i].className='';}this.className='bei';};};};,更多追问追答追问就是说在window.onload=function(){}; 这个函数里面新建两个字函数来控制不同的元素,追答那可以直接在function中写了,你的元素一和元素二,都要实现鼠标移上去时改变一个样式,其它的项的样式还原?那可以在原来的for循环下边,再加一个for循环,去操作另一个元素,追问其实你说的这个我现在有点消化不了,我现在想要的是只要能现实它的功能就行, 我大慨需要的是,元素一是 鼠标移入改变样式,元素二是个无缝滚动和鼠标移入和移出事件....追答参考一下那个滚动的吧www.zgxue.com防采集请勿采集本网。

也许在小程序所有生命周期里,我们用的最多的就是 onLoad,一大堆代码都要在初始化的时候执行。

1,微信小程序有提供一个下拉刷新的功能 2,点击按钮重新加载页面没有任何意义,因为如果你要改变页面显示数据,可以直接(请求接口)改变data数据他会自动重新加载,或者重新调用onLoad里面的

很多时候,初始化的代码是每个页面共用的,比如获取用户信息、获取定位等:

Tarok可能不太了解,可以参考以下代码为正常微信小程序: index.wxml: height:100rpx;width:100%;bindtap=\"changecolor\">.</view>index.js: const app=getApp();Page({ data:{ bgcolor:\"green

Page({ onLoad() { this.userData = getUserData() wx.getLocation({ type: 'wgs84', success (res) { // 业务代码 // ... } }) } // ...})

一、搜索引流 在微信搜索对应关键词,会优先展示相关的小程序,只要名字定位准确,用微信SEO的思维,你的微信小程序排名会遥遥领先!所以,谁先制作相关领域的小程序,谁就能强占精准的关键词,

久而久之,每个页面的 js 里都是如上的重复代码。如果可以先执行完通用的初始化代码,再执行每个页面各自的 onLoad 多好,可惜小程序并没有提供类似的钩子函数,那就自己来吧。

代理 onLoad

按照前几篇的方法,可以代理原有的 onLoad 事件:

var originPage = Pagefunction MyPage(config) { this.lifetimeBackup = { onLoad: config.onLoad } config.onLoad = function(options) { // 自定义代码 // 公共的初始化代码 this.userData = getUserData() wx.getLocation({ type: 'wgs84', success (res) { // 执行 onLoad this.lifetimeBackup.onLoad.call(this, options) } }) } // ... originPage(config)}

当然,实际开发过程中的初始化代码不可能这么少,可以用很多方式把它抽离出去,比如这样:

// utils/initial.jsfunction initial(callback) { this.userData = getUserData() wx.getLocation({ type: 'wgs84', success (res) { callback() } })} // utils/wx.jsvar initial = require('./initial')var originPage = Pagefunction MyPage(config) { this.lifetimeBackup = { onLoad: config.onLoad } config.onLoad = function(options) { initial(() => { this.lifetimeBackup.onLoad.call(this, options) }) } // ... originPage(config)}

也可以使用更多高级的方法抽离出去,比如 event bus 之类的,就不多赘述。

看似很简单,但其实这样忽略了一个问题 —— 生命周期顺序被打乱了!如果初始化方法里有异步代码,那首先执行的可能就是 onShow ,而不是约定的 onLoad。

恢复生命周期顺序

为了保证生命周期函数能够按顺序执行,可以先临时清空生命周期函数,然后再依次执行,如下代码所示:

// utils/wx.jsconst LIFETIME_EVENTS = ['onLoad', 'onShow', 'onReady']var initial = require('./initial')var originPage = Pagefunction MyPage(config) { LIFETIME_EVENTS.forEach((event) => { // 备份生命周期函数 this.lifetimeBackup[event] = config[event] // 临时清空 config[event] = function() {} }) config.onLoad = function(options) { initial(() => { // 依次执行生命周期函数 LIFETIME_EVENTS.forEach((event) => { this.lifetimeBackup[event].call(this, options) }) }) } // ... originPage(config)}

注意上述代码还是有问题的,当小程序业务跳走再返回或者切后台到前台时,onShow 无法正常触发,因为被设置为空函数了。

为了保证 onShow 等生命周期函数的后续正常运行,需要在依次执行完生命周期函数后,再把它们恢复到 config 下,这是必不可少的。完整代码如下:

// utils/wx.jsconst LIFETIME_EVENTS = ['onLoad', 'onShow', 'onReady']var initial = require('./initial')var originPage = Pagefunction MyPage(config) { LIFETIME_EVENTS.forEach((event) => { // 备份生命周期函数 this.lifetimeBackup[event] = config[event] // 临时清空 config[event] = function() {} }) config.onLoad = function(options) { initial(() => { // 依次执行生命周期函数 LIFETIME_EVENTS.forEach((event) => { this.lifetimeBackup[event].call(this, options) // 执行完后,恢复过来 config[event] = this.lifetimeBackup[event] }) }) } // ... originPage(config)}

总结

代理了 onLoad 后,就可以手动控制其执行的时机,可以折腾的事情就多了很多。比如当初始化函数需要执行(请求)的内容比较多,耗时比较长时,可以统一给页面增加一些 loading 提示等。总之,可以自由控制了。

第一步,登陆微信小程序后台第二步,点击左侧设置第三步,找到微信小程序头像点击修改第四步,选择图片上传第五步,调整图片提交保存内容来自www.zgxue.com请勿采集。


  • 本文相关:
  • 微信小程序onlaunch异步,首页onload先执行?
  • 微信小程序之onlaunch与onload异步问题详解
  • 微信小程序中的onload详解及简单实例
  • 值得分享的bootstrap table使用教程
  • javascript模块化机制实现原理详解
  • 详解微信小程序实现仿微信聊天界面(各种细节处理)
  • react中实现搜索结果中关键词高亮显示
  • 微信小程序websocket的使用方法
  • 基于jstree的无限级树json数据的转换代码
  • javascript cookie原理及使用实例
  • javascript 实现鼠标拖动元素实例代码
  • js简单生成随机数(随机密码)的方法
  • 浅谈js对象添加getter与setter的5种方法
  • 小程序头像怎么改,需要详细流程?
  • 如何在写javasirpt时候在window.onload=function() { };这样一个函数里面写不同的程序,刚学习不懂..
  • ios 系统怎么把微信小程序添加到桌面
  • 小程序如何改变人们的生活方式
  • 微信小程序如何进行一键复制?
  • taro微信小程序 点击view怎样改变背景颜色
  • 小程序的是如何运营的 日常运营小程序攻略
  • 微信小程序审核通过发布后。线上版本。怎么上传修改新内容
  • 网站首页网页制作脚本下载服务器操作系统网站运营平面设计媒体动画电脑基础硬件教程网络安全基础知识javascript类库表单特效广告代码网页特效黑客性质javascript技巧domnode.jsjs其它首页javascript微信小程序onlaunch异步,首页onload先执行?微信小程序之onlaunch与onload异步问题详解微信小程序中的onload详解及简单实例值得分享的bootstrap table使用教程javascript模块化机制实现原理详解详解微信小程序实现仿微信聊天界面(各种细节处理)微信小程序websocket的使用方法基于jstree的无限级树json数据的转换代码javascript cookie原理及使用实例javascript 实现鼠标拖动元素实例代码js简单生成随机数(随机密码)的方法浅谈js对象添加getter与setter的5种方法js刷新页面方法大全js中settimeout()的用法详解js截取字符串常用方法详细整理js页面跳转常用的几种方式js打开新窗口的2种方式js数组与字符串的相互转换方法js设置cookie、读取cookie、删除js删除数组里的某个元素方法js 将json字符串转换为json对象的javascript深入理解js闭包一个js实现的所谓的滑动门wap手机端解决返回上一页的js实例利用javascript阻止表单提交的两种方法bootstrap模态框调用功能实现方法比较详细的javascript对象的property和prjavascript中检查对象property的存在性方js监听组合按键思路及实现过程js 自制滚动条的小例子微信小程序三级联动选择器使用方法javascript array(数组)相关方法简述
    免责声明 - 关于我们 - 联系我们 - 广告联系 - 友情链接 - 帮助中心 - 频道导航
    Copyright © 2017 www.zgxue.com All Rights Reserved