})
页面
Page() 函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。
data 页面的初始数据,data 将会以 JSON 的形式由逻辑层传至渲染层,
所以其数据必须是可以转成 JSON 的格式:字符串,数字,布尔值,
对象,数组。
onLoad 生命周期函数--监听页面加载,只会调用一次,
可以在 onLoad 中获取打开当前页面所调用的 query 参数
onReady 生命周期函数--监听页面初次渲染完成
onShow 生命周期函数--监听页面显示
onHide 生命周期函数--监听页面隐藏
onUnload 生命周期函数--监听页面卸载
onPullDownRefresh 页面相关事件处理函数--监听用户下拉动作,下拉刷新
onReachBottom 页面上拉触底事件的处理函数
onShareAppMessage 用户点击右上角转发,点击转发按钮的时候会调用
此事件需要 return 一个 Object,用于自定义转发内容
onPageScroll 页面滚动触发事件的处理函数
其他 开发者可以添加任意的函数或数据到 object 参数(data)中,
在页面的函数中用 this 可以访问
对界面的设置如wx.setNavigationBarTitle请在onReady之后设置
...
onPageScroll: function() { // Do something when page scroll }, // Event handler. viewTap: function() { this.setData({ text: 'Set some data for updating view.' }, function() { // this is setData callback }) }, customData: { hi: 'MINA' }
onPullDownRefresh:需要在app.json的window选项中或页面配置中开启enablePullDownRefresh。
onReachBottom 可以在app.json的window选项中或页面配置中设置触发距离onReachBottomDistance。在触发距离内滑动期间,本事件只会被触发一次。
除了初始化数据和生命周期函数,Page 中还可以定义一些特殊的函数:事件处理函数。
<view bindtap="viewTap"> click me </view>
Page({ viewTap: function() { console.log('view tap') } })
setData 函数用于将数据从逻辑层发送到视图层(异步),同时改变对应的 this.data 的值(同步)。
  1. 直接修改 this.data 而不调用 this.setData 是无法改变页面的状态的,还会造成数据不一致。
模块化
可以将一些公共的代码抽离成为一个单独的 js 文件,作为一个模块。模块只有通过 module.exports 或者 exports 才能对外暴露接口。
推荐开发者采用 module.exports 来暴露模块接口
// common.js function sayHello(name) { console.log(`Hello ${name} !`) } function sayGoodbye(name) { console.log(`Goodbye ${name} !`) } module.exports.sayHello = sayHello exports.sayGoodbye = sayGoodbye
使用
var common = require('common.js') Page({ helloMINA: function() { common.sayHello('MINA') }, goodbyeMINA: function() { common.sayGoodbye('MINA') } })
 require 暂时不支持绝对路径

微信小程序 js逻辑的更多相关文章

  1. 微信小程序js学习心得体会

    微信小程序js学习心得体会 页面控制的bindtap和catchtap 用法,区别 <button id='123' data-userDate='100' bindtap='tabMessag ...

  2. 微信小程序开发---逻辑层(App Service)

    再说逻辑层之前,先说说微信小程序框架(MINA) 小程序开发框架的目标是通过尽可能简单.高效的方式让开发者可以在微信中开发具有原生APP体验的服务. 框架提供了自己的视图层描述语言WXML和WXSS, ...

  3. “微信小程序” js部分注解

    1.小程序不提供获取dom的操作,而是让我们直接将事件绑定写入到组件内.区别在于bind不阻止冒泡,而catch阻止冒泡. <view id="tapTest" bindta ...

  4. 微信小程序 JS动态修改样式

    微信小程序这个坑啊,js动态修改样式,我们并不能用js或者jq 轻轻松松一行代码搞定.或者用removeClass addClass 来修改样式. 以下是一种动态修改样式的方法,原理是绑定数据,然后动 ...

  5. [转]微信小程序登录逻辑梳理

    本文转自:http://www.jianshu.com/p/d9996cafdb31 官方文档 文档相关地址: 用户登录 获取用户数据 用户数据的签名验证和加解密                   ...

  6. 微信小程序室内地图导航开发-微信小程序JS加载esmap地图

    一.在微信小程序里显示室内三维地图 需要满足的两个条件 调用ESMap室内地图需要用到小程序web-view组件,想要通过 web-view 调用ESMap室内地图需要满足以下 2 个条件: 1. 小 ...

  7. 微信小程序(二)--逻辑层与界面层

    一.逻辑层与界面层分离 小程序开发框架将我们需要完成的编码,划分成了两种类型的编码:逻辑编码(由JavaScript完成,业务数据供给界面事件处理),界面编码(页面结构WXML,页面样式WXSS,展示 ...

  8. 微信小程序登录逻辑

    wx.getStorage({ key: 'session_id', success: function(res) { //如果本地缓存中有session_id,则说明用户登陆过 console.lo ...

  9. 微信小程序 js结构

    // pages/index/index.js Page({ /** * 页面的初始数据 */ data: { }, /** * 生命周期函数--监听页面加载 */ onLoad: function ...

随机推荐

  1. [Android Pro] Android的5个进程等级

    1.foreground process     正处于activity resume状态     正处于bound服务交互的状态     正处于服务在前台运行的状态(StartForeGround( ...

  2. Python游戏引擎开发(七):绘制矢量图

    今天来完毕绘制矢量图形. 没有读过前几章的同学,请先阅读前几章: Python游戏引擎开发(一):序 Python游戏引擎开发(二):创建窗体以及重绘界面 Python游戏引擎开发(三):显示图片 P ...

  3. 利用HTML5与jQuery技术创建一个简单的自动表单完成

    来源:GBin1.com 在线演示   在线下载 谷歌快速搜索自带大量自动完成插件——库中甚至还有一个附带的jQuery UI共享选项.然而今天我要寻找一个替代的解决方案.由DevBridge开发的j ...

  4. iOS7重磅推新--不断尝试与重新设计的过程

    来源:GBin1.com iOS7重磅推新--不断尝试与重新设计的过程 或许你心里已经有了关于iPhone最新操作系统的评价,可能你喜欢它,也可能不喜欢,事实上大多数设计者不喜欢.设计界似乎一致认为I ...

  5. docker学习笔记-1

    docker学习笔记一:安装 mac安装docker docker官方文档上有这么一段话: Because the Docker daemon uses Linux-specific kernel f ...

  6. NSData 转 bytes 字节数据

    NSData 转 bytes 字节数据 NSData *data = [NSData dataWithContentsOfFile:filePath]; NSUInteger len = [data ...

  7. 开机自启动:从busybox到debian

    需要在mint上设置opensips的开机自启动,翻了半天资料还是一知半解.最后在opensips的官方文档,查到用下面的语句,添加自启动成功.不过貌似还是会有启动不成功,没有仔细测试过. updat ...

  8. PyPy与VirtualEnv的安装问题

    PyPy与VirtualEnv的安装问题 说明:本博客由bitpeach原创撰写,请勿商用.转载免费,请注明出处,谢谢. (零)背景 VirtualEnv工具的详细内容是什么,请自行百度.这里大概简介 ...

  9. 关于org.springframework.scheduling.concurrent.ThreadPoolTaskExecutor的队列

    今天查看源码发现spring的线程池是支持队列的: 并且队列支持的上限相当大: 当线程池的达到最大线程时,默认会把任务放在队列(内存)中,所以我们可以放心用这个东西来写日志了

  10. asp.net生成视图时报错 未引用System.Runtime, Version...

    这是没有添加程序集引用 在程序集中添加一条引用 <compilation debug="true" targetFramework="4.5.1"> ...