微信小程序demo解读

Posted 2020-09-19

　　

　　小程序最外层有三个文件，上次我们介绍了全局样式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为“轻松一哈”，可以看到导航栏就是位于屏幕的最上方的小程序的标题。