549 小程序阶段2 小程序架构和配置：全局配置，页面配置，的双线程模型，界面渲染过程，小程序的启动流程，注册小程序，获取用户信息，注册页面，Page实例生命周期

配置小程序

--

--

--

{
  "pages": [
    "pages/home/home",
    "pages/about/about",
    "pages/profile/profile",
    "pages/category/category"
  ],
  "window": {
    "navigationBarBackgroundColor": "#ff5777",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "我的小程序",
    "backgroundColor": "orange",
    "backgroundTextStyle": "light",
    "enablePullDownRefresh": false
  },
  "tabBar": {
    "selectedColor": "#ff5777",
    "list": [
      {
        "pagePath": "pages/home/home",
        "text": "首页",
        "iconPath": "assets/tabbar/home.png",
        "selectedIconPath": "assets/tabbar/home_active.png"
      },
      {
        "pagePath": "pages/category/category",
        "text": "分类",
        "iconPath": "assets/tabbar/category.png",
        "selectedIconPath": "assets/tabbar/category_active.png"
      }
    ]
  },
  "sitemapLocation": "sitemap.json"
}

--

页面配置

---

category.json

{
  "usingComponents": {},
  "navigationBarTitleText": "商品分类",
  "navigationBarBackgroundColor": "#ff0000",
  "enablePullDownRefresh": true
}

---

--

--

--

--

--

--

--

--

--

--

--

--

--

--

app.js

// 注册一个小程序示例
App({
  // 小程序初始化完成时
  onLaunch: function (options) {
    // 获取用户信息
    console.log(options)
  },
  // 小程序显示出来时
  onShow: function (options) {
    // 1.判断小程序的进入场景
    console.log(options)
    switch(options.scene) {
      case 1001:
        break;
      case 1005:
        break;
    }

    // 2.获取用户的信息, 并且获取到用户信息之后, 将用户的信息传递给服务器
    wx.getUserInfo({
      success: function(res) {
        console.log(res)
      }
    })
  },
  // 小程序隐藏时
  onHide: function () {
    
  },
  // 小程序产生一些错误
  onError: function (msg) {
    
  },
  // 全局共享的（单例对象），所以我们可以将一些共享数据放在这里
  globalData: {
    name: '哈哈哈',
    age: 18
  }
})

--

home.wxml

<!--pages/home/home.wxml-->
<text class='title'>Hello World</text>
<button size='mini'>按钮</button>

<!-- 2.获取用户信息的方式 -->
<button size='mini' 
        open-type='getUserInfo'
        bindgetuserinfo='handleGetUserInfo'>
  获取授权
</button>

<!-- 3.展示用户信息的方法 -->
<open-data type="userNickName"></open-data>
<open-data type="userAvatarUrl"></open-data>

<view bindtap='handleViewClick'>{{message}}</view>

<view wx:for="{{list}}">{{item.title}}</view>

--

home.json

{
  "usingComponents": {},
  "enablePullDownRefresh": true
}

--

home.js

// pages/home/home.js
// getApp()获取App()产生的示例对象 【getApp是系统内置函数。】
// const app = getApp()

// const name = app.globalData.name;
// const age = app.globalData.age;

// 注册一个页面
// 页面也有自己的生命周期函数
Page({
  // ------------ 2.初始化数据 -------------------
  data: {
    message: '哈哈哈',
    list: []
  },

  // ------------ 1.监听页面的生命周期函数 -------------------
  // 页面被加载出来
  onLoad() {
    console.log('onLoad')
    const _this = this;
    wx.request({
      url: 'http://123.207.32.32:8000/recommend',
      // 箭头函数中的this一层层向上找
      success: function(res) {
        console.log(res)
        const data = res.data.data.list;
        _this.setData({
          list: data
        })
      }
    })
  },
  // 页面显示出来时
  onShow() {
    console.log('onShow')
  },
  // 页面初次渲染完成时
  onReady() {
    console.log('onReady')
  },
  // 当页面隐藏起来时
  onHide() {
    console.log('onHide')
  },
  onUnload() {
    console.log('onUnload')
  },

  // ------------ 3.监听wxml中相关的一些事件 -------------------

  // 获取用户信息
  handleGetUserInfo(event) {
    console.log(event)
    console.log(event.detail.rawData);
  },
  handleViewClick() {
    console.log('哈哈哈被点击了')
  },

  // ------------ 4.其他事件 -------------------

  // 监听页面的滚动
  onPageScroll(obj) {
    // console.log(obj)
  },
  // 监听页面滚动到底部
  onReachBottom() {
    console.log('页面滚动到底部')
  },
  onPullDownRefresh() {
    console.log('下拉刷新的事件')
  }
})

--

--