首页 > 代码库 > 微信小程序demo解读(二)

微信小程序demo解读(二)

  技术分享

  小程序最外层有三个文件,上次我们介绍了全局样式app.wxss,接着我们来说另外两个文件。

  我们来看看脚本文件App.js。为了方便解读我已经加上了注释。

//app.js
App({
    /*启动函数
    * */
    onLaunch: function () {
        var logs = wx.getStorageSync(‘logs‘) || [];     //调用API从本地缓存中获取数据
        logs.unshift(Date.now());
        wx.setStorageSync(‘logs‘, logs);    //存入缓存
    },
    /*获取用户信息
    *   @param cb获取成功时的回调
    * */
    getUserInfo: function (cb) {
        var that = this;
        if (this.globalData.userInfo) {
            typeof cb == "function" && cb(this.globalData.userInfo);  //执行回调
        } else {
            wx.login({      //调用登录接口
                success: function () {
                    wx.getUserInfo({
                        success: function (res) {
                            that.globalData.userInfo = res.userInfo;  //保存信息
                            typeof cb == "function" && cb(that.globalData.userInfo); //执行回调 
                        }
                    })
                }
            })
        }
    },
    /*全局对象
    * */
    globalData: {
        userInfo: null
    }
});

  App.js是小程序的入口,也就是程序的启动位置。Demo里面定义了两个初始化函数和一个全局对象,从小程序的API上可以查到。我们一个一个来说。

  1.onLaunch函数是小程序初始化完成后执行的函数,此时可以调取微信端的一些资源,比如缓存。

  2.getUserInfo函数并不是API中直接获取用户信息的函数,而其内部的wx.getUserInfo才是。它只是对获取函数进行了封装,要调用时可以写:

app.getUserInfo(function (userInfo) {
    操作用户信息userInfo;
})

  3.globalData用于存放全局变量,调用时可以用app.globalData。开发者可以往里面添加变量,也可以设置新的全局变量。

 

  app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成,配置小程序的窗口的背景色,配置导航条样式,配置默认标题。注意该文件不可添加任何注释(因为是json格式文件)。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

  1.pages就是我们小程序包含的页面,小程序规定页数不可以超过5个,可以看出小程序并不适合开发大型应用。

  2.window包含了一些窗口的样式设置,backgroundTextStyle是下拉背景字体、loading 图的样式,仅支持 dark/light;其余三个键值都是设置窗口的导航栏的属性,也是app.wxss作用域意外的地方的样式属性。导航栏在什么地方?修改navigationBVarTitleText为“轻松一哈”,可以看到导航栏就是位于屏幕的最上方的小程序的标题。

  技术分享

 

微信小程序demo解读(二)