微信小程序基础-02-配置和架构

一、配置小程序

1. 小程序的很多 开发需求 被规定在了 配置文件 中。
2. 为什么这样做呢？

    这样做可以更有利于我们的 开发效率

    并且可以保证开发出来的小程序的某些 风格是比较一致 的；

    比如导航栏 顶部 TabBar ，以及页面路由等等。

3. 常见的配置文件有哪些呢

    project.config.json 项目配置文件 , 比如项目名称、 appid 等。一般不需要手动修改。

      https://developers.weixin.qq.com/miniprogram/dev/devtools/projectconfig.html

    sitemap.json 小程序搜索相关的。微信通过爬虫的形式获取关键字，用户可以通过关键字搜索到开发的小程序。一般不需要手动修改。

      https://developers.weixin.qq.com/miniprogram/dev/framework/sitemap.html

    app.json 全局配置；

    page.json 页面配置

二、全局配置

全局配置比较多 , 我们这里讲几个比较重要的，完整的查看官方文档。
https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

pages: 页面路径列表
  用于指定小程序由哪些页面组成，每一项都对应一个页面的 路径（含文件名） 信息。
  小程序中所有的页面都是必须在 pages 中进行注册的。
window: 全局的默认窗口展示
  用户指定窗口如何展示 , 其中还包含了很多其他的属性
tabBar: 顶部 tab 栏的展示
  具体属性稍后我们进行演示

三、案例实现

app.json：

{
  "pages": [
    "pages/home/home",
    "pages/about/about",
    "pages/profile/profile",
    "pages/category/category"
  ],

  "window": {
    "navigationBarBackgroundColor": "#ff5777",
    "navigationBarTextStyle": "white",
    "navigationBarTitleText": "购物街",
    "backgroundColor": "#eeeeee",
    "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"
    }]
  }
}

效果图：

四、页面配置

1.每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。
2.页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。
3.页面中的优先级是大于全局的。配置可以进行覆盖。

关于 usingComponents 选项，之后会进行讲解。

五、小程序的双线程模型

六、界面渲染过程——wxml和DOM树

首先，我们需要知道，wxml等价于一棵DOM树，也可以使用一个JS对象来模拟（虚拟DOM）

七、界面渲染过程——初始化渲染

那么，WXML可以先转成JS对象，再渲染出真正的DOM树

八、界面渲染过程——数据发生变化

九、界面渲染的整体流程

1. 在渲染层，宿主环境会把 WXML 转化成对应的 JS 对象
2. 将 JS 对象 再次转成 真实 DOM 树 ，交由渲染层线程渲染
3. 数据变化时，逻辑层提供最新的变化数据， JS 对象发生变化比较进行 diff 算法对比；
4. 将最新变化的内容反映到真实的 DOM 树中，更新 UI

十、小程序的启动流程

我们一起来看一下一个小程序的启动流程，通过了解小程序的启动流程，我们就知道了自己代码的执行顺序：
  app.json是加载入口。

十一、注册小程序参数解析

每个小程序都需要在 app.js 中调用 App 方法 注册小程序示例
  在注册时 , 可以绑定对应的生命周期函数 , 在生命周期函数中 , 执行对应的代码
  https://developers.weixin.qq.com/miniprogram/dev/reference/api/App.html

app.js代码示例：

App({

  //生命周期函数：关闭后后台会存活一定的时间
  /**
 1. 当小程序初始化完成时，会触发 onLaunch（全局只触发一次）
   */
  onLaunch: function () {
    // 获取用户信息
    console.log("小程序初始化完成：onLaunch");

    //异步调用
    //数据拿到之后，再进行回调的
    // wx.getUserInfo({
  
    // })

    setTimeout(()=>{
      const err = new Error();
      throw err;
    },3000)
  },

  /**
 2. 小程序界面显示出来之后会执行的生命周期函数
 3. 当小程序启动，或从后台进入前台显示，会触发 onShow
   */
  onShow: function (options) {
    console.log("界面显示出来：onShow")
  },

  /**
 4. 当小程序从前台进入后台，会触发 onHide
   */
  onHide: function () {
    console.log("界面被隐藏时会执行：onHide")
  },

  /**
 5. 当小程序发生脚本错误，或者 api 调用失败时，会触发 onError 并带上错误信息
   */
  onError: function (msg) {
    console.log("小程序中发生了一些错误时会执行：onError")
  }
})

十二、注册App 时做什么

思考 ：注册 App 时，我们一般会做什么呢？

6. 判断小程序的 进入场景
7. 监听 生命周期函数 ，在生命周期中执行对应的业务逻辑，比如在某个生命周期函数中获取微信用户的信息。
8. 因为 App() 实例只有一个，并且是 全局共享的（单例对象），所以我们可以将一些共享数据放在这里。

小程序的打开场景较多：

  常见的打开场景：群聊会话中打开、小程序列表中打开、微信扫一扫打开、另一个小程序打开
  https://developers.weixin.qq.com/miniprogram/dev/reference/scene list.html

如何确定场景

  在 onLaunch 和 onShow 生命周期回调函数中 会有 options 参数，其中有 scene 值

十三、获取用户信息方式

  之前的wx.getUserInfo()方法已经被废弃，微信官方提供了两种新的方法。

1. button 组件 将 open type 改成 getUserInfo ，并且绑定 bindgetuserinfo 事件去获取

<!-- open-type="getUserInfo"固定写法，之前的getUserInfo()已经被废弃 -->
  <button size="mini" open-type="getUserInfo" bindgetuserinfo="handleGetUserInfo">获取授权</button>

对应的js文件：

  handleGetUserInfo(event) {
    console.log(event)
  }

2. 使用 open data 组件展示用户信息

<open-data type="userNickName"></open-data>
<open-data type="userAvatarUrl"></open-data>

十四、保存全局变量

app.js：

  //定义全局数据，名称自定义
  globalData:{
    name:'王强',
    age:18
  }

page中的js文件

// pages/home/home.js
// getApp()获取App()产生的实例对象
const app = getApp();
console.log(app.globalData)
const name = app.globalData.name;
const age = app.globalData.age;

十五、注册页面

小程序中的每个页面 , 都有一个对应的 js 文件 , 其中调用 Page 方法 注册页面示例
在注册时 , 可以绑定初始化数据、生命周期回调、事件处理函数等。
  https://developers.weixin.qq.com/miniprogram/dev/reference/api/Page.html

思考： 注册一个 Page 页面时，我们一般需要做什么呢？

1. 在 生命周期函数 中发送网络请求，从服务器获取数据；
2. 初始化一些数据 ，以方便被 wxml 引用展示；
3. 监听 wxml 中的事件 ，绑定对应的事件函数
4. 其它一些 监听

相关代码示例：

  // -----------------监听页面的生命周期函数-----------------------

  /**
   * 生命周期函数--监听页面加载
   */
  // onLoad: function (options) {

  // },

  //es6语法
  //页面被加载出来
  onLoad(){
    // 网络请求
    wx.request({
      //需要进行配置
      url: 'http://123.207.32.32:8000/recommend',
      success:(res)=>{
        console.log(res);
      }
    })
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {

  },

  /**
   * 生命周期函数--监听页面显示
   * 页面显示出来时
   */
  onShow: function () {

  },

  /**
   * 生命周期函数--监听页面隐藏
   * 当页面隐藏起来时
   */
  onHide: function () {

  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {

  },

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {

  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {

  },

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {

  }

常用方法：

十六、Page实例生命周期

补充：箭头函数的this和普通方法的this
箭头函数会一层一层地向上找，在普通html代码中，this指向window，而在微信小程序中，如果使用function(){}，则不确定，可能是undefined。