美文网首页
20161123微信小程序学习笔记-js解析

20161123微信小程序学习笔记-js解析

作者: 局部方法 | 来源:发表于2016-11-23 19:26 被阅读0次

    js 是微信小程序的逻辑层,提供了app应该具备的API ,主要逻辑是基于javascript,但是也不完全一样,其中最明显的Alert('')是不可以使用的,只能使用console.log()进行调试;

    ** 逻辑层分为4个主要部分注册程序,注册页面,模块化,API **

    注册程序

    App();

    注册程序主要执行在App();函数中,并接收一个对象{} ,所有的配置项目都在这里配置;

    App({ 
      onLaunch: function() { 
        // Do something initial when launch.
        //当小程序初始化完成时,会触发 onLaunch(全局只触发一次)
      },
       onShow: function() {
         // Do something when show. 
        //当小程序启动,或从后台进入前台显示,会触发 onShow
      }, 
      onHide: function() {
         // Do something when hide. 
        // 当小程序从前台进入后台,会触发 onHide
      }, 
      globalData: 'I am global data'
    })
    

    getApp();

    我们提供了全局的 getApp()函数,可以获取到小程序实例

    var appInstance = getApp()
    console.log(appInstance.globalData) 
    // I am global data
    

    注册页面

    Page

    Page()函数用来注册一个页面。接受一个 object 参数,其指定页面的初始数据、生命周期函数、事件处理函数等。

    Page({ 
      data: 
      //页面的初始数据
        { text: "This is page data." }, 
      onLoad: function(options) { // Do some initialize when page load. },
       //生命周期函数--监听页面加载
      onReady: function() { // Do something when page ready. }, 
      //生命周期函数--监听页面初次渲染完成
      onShow: function() { // Do something when page show. }, 
      //生命周期函数--监听页面显示
      onHide: function() { // Do something when page hide. }, 
      //生命周期函数--监听页面隐藏
      onUnload: function() { // Do something when page close. },
      //生命周期函数--监听页面卸载 
      onPullDownRefresh: function() { // Do something when pull down. }, 
      //页面相关事件处理函数--监听用户下拉动作
      onReachBottom: function() { // Do something when page reach bottom. },
      //页面上拉触底事件的处理函数 一般用于执行加载程序或loading程序
       // Eventhandler. 
      viewTap: function() { this.setData({ text: 'Set some data for updating view.' }) },
      customData: { hi: 'MINA' }
    })
    

    模块化

    • 文件作用域
      在 JavaScript 文件中声明的变量和函数只在该文件中有效;不同的文件中可以声明相同名字的变量和函数,不会互相影响。
      通过全局函数getApp() 可以获取全局的应用实例,如果需要全局的数据可以在 App()中设置,如:
    app.jsApp({ globalData: 1})
    // a.js
    var app = getApp()
    app.globalData++
    // b.js
    var localValue = 'b'
    console.log(getApp().globalData)
    //这两个的输出结果是不一样的,是互相不会影响的
    
    • 模块化
      模块只有通过 module.exports或者 exports才能对外暴露接口。
      需要注意的是:exports是 module.exports的一个引用不能随便更改
      小程序目前不支持直接引入 node_modules
    // common.js
    function sayHello(name) { console.log(`Hello ${name} !`)}
    function sayGoodbye(name) { console.log(`Goodbye ${name} !`)}
    module.exports.sayHello = sayHello
    exports.sayGoodbye = sayGoodbye
    

    ​在需要使用这些模块的文件中,使用 require(path)将公共代码引入
    *** 这个有点python风格 ***

    var common = require('common.js')
    Page({ 
      helloMINA: function() { common.sayHello('MINA') }, 
      goodbyeMINA: function() { common.sayGoodbye('MINA') }
    })
    

    相关文章

      网友评论

          本文标题:20161123微信小程序学习笔记-js解析

          本文链接:https://www.haomeiwen.com/subject/ccpvpttx.html