})
页面
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. UIBarButtonSystemItem

    typedefenum { UIBarButtonSystemItemDone, UIBarButtonSystemItemCancel, UIBarButtonSystemItemEdit, UIB ...

  2. dhclient 简介

    dhclient 就和它名字一样,用来通过 dhcp 协议配置本机的网络接口. 使用方法就是 #dhclient ifN # ifN 就是 ifconfig 中输出的接口名称,etc. eth0,wl ...

  3. 倍福TwinCAT(贝福Beckhoff)常见问题(FAQ)-有时候项目会无法编译,重新生成就自动卡死或者自动退出怎么办

    删除所有中文注释,有中文注释则不一定能编译成功.     更多教学视频和资料下载,欢迎关注以下信息: 我的优酷空间: http://i.youku.com/acetaohai123   我的在线论坛: ...

  4. Win7无法安装Flash Player怎么办

    在IE的工具选项中把安全选项中的ActiveX控件一系列都改为启用即可.

  5. Linux命令计算文件中某一列的平均值

    例如每秒执行一次top命令,把结果输出到某个文件中保存,现在需要统计这段时间内某个进程的平均CPU占用率,可使用以下命令 | grep "GameServer_r" | awk ' ...

  6. 【MVC5】使用权限+角色

    1.在Ticket中设置用户角色 在权限的Ticket中设置用户的角色(这里是逗号分割). List<string> roles = new List<string>(); i ...

  7. 用Markdown写博客快速入门

    Markdown,简单来说,就是一种可以方便转换为HTML的带标记符号纯文本. 它是对我等键盘党的福音:我不用再费劲挪动鼠标去按加粗.设置段落了,用键盘输入所有文本,一气呵成. 最重要的是,cnblo ...

  8. Spring入门示例

    开发环境 Spring 4.3.0+Myeclipse2015+JDK1.8 准备阶段: 1.新建一Spring01项目,然后新建一个lib文件.将下面的添加到lib文件中 2.将lib文件所有的包导 ...

  9. lspci查看硬件信息时提示找不到命令

    系统环境:centos 6.3 X64 错误信息:[root@localhost ~]# lspci-bash: lspci: command not found 问题原因:这是因为没有安装pciut ...

  10. android的五大布局(layout)

    Android的界面是有布局和组件协同完成的,布局好比是建筑里的框架,而组件则相当于建 筑里的砖瓦.组件按照布局的要求依次排列,就组成了用户所看见的界面.Android的五大布局分别是LinearLa ...