})
页面
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. linux 遇见错误Could not get lock /var/lib/dpkg/lock

    通过终端安装程序sudo apt-get install xxx时出错:E: Could not get lock /var/lib/dpkg/lock - open (11: Resource te ...

  2. EffectiveJava(28)怎么利用有限制的通配符类型来提升API的灵活性

    有时候,我们需要的灵活性要比不可变类型所能提供的更多.所以针对一些通用性的方法,通常用泛型代替固定的数据类型,特别是当你要将某个方法打包成Jar的时候. 结合之前的例子,我们增加尝试用有限制的通配符类 ...

  3. Java Nio Socket通讯

    Server端: #############服务器端连接请求处理############### public class MultiplexerServer implements Runnable { ...

  4. org.eclipse.e4.core.di.InjectionException:org.eclipse.swt.SWTException: Widget is disposed

    org.eclipse.e4.core.di.InjectionException:org.eclipse.swt.SWTException: Widget is disposed 开发环境为ecli ...

  5. ionic 进入二级目录以后隐藏底部导航栏(tabs)

    1.在标签ion-tabs中添加:ng-class=”{‘tabs-item-hide’: $root.hideTabs}”,源码如下: <ion-tabs class="tabs-i ...

  6. IT痴汉的工作现状36-做好准备再上路

    软件开发流程管理是採用瀑布式好还是敏捷好? 如今非常多人会选择敏捷.由于眼下的现状是需求的变化是一天一个样,这是当前(移动)互联网的飞速发展所带来的.当我们仍採用原始的先做全盘的计划.然后在按部就班的 ...

  7. DataTable转换成匿名类的List类型

    DataTable转换成匿名类的List类型   因为匿名类是不能够 Activator.CreateInstance进行反射实例化的 /// <summary> /// 匿名类的转换方式 ...

  8. Linux上寻找并杀死僵尸进程

    转载: http://blog.csdn.net/shanzhizi/article/details/47320595 linux服务器上,多少会出现一些僵尸进程,下面介绍如何快速寻找和消灭这些僵尸进 ...

  9. ANSI实现动态 sql

    /* 包含C头文件 */ #include <stdio.h> #include <stdlib.h> #include <string.h> /* 包含SQLCA ...

  10. photoshop 动作 自己定义快捷键 播放选定的动作

    今天在制作一组效果图.要用到动作.而且是同一个动作,便在网上寻找"播放选定的动作"就是那个三角形播放button的快捷键. 预期这样会大大加快制作过程. 首先制作好动作. 然后,在 ...