微信小程序01

开发前准备工作

第一步：登入微信公众平台，注册账号进行登入

第二步：下载微信开发者工具：文档-->工具

目录结构

小程序的双线程模型

小程序的宿主环境：微信客户端

宿主环境为了执行小程序的各种文件：wxml文件、wxss文件、js文件，提供了小程序的双线程模型

wxml模板和wxss运行在渲染层，渲染层使用WebView线程渲染（一个程序由多个页面，会使用多个WebView的线程）
js脚本运行在逻辑层，逻辑层使用JsCore运行js脚本
这两个线程都会经由微信客户端（Native）进行中转交互

wxml等价于一棵dom树，也可以使用一个JS对象来模拟（虚拟dom）

wxml先转成js对象，再渲染出真正的dom树

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

通过setData把msg数据从 "Hello World" 变成 "Goodbye"
产生一个新的js对象
对比前后两个js对象得到变化的部分
然后将变化应用到原来的dom树上，从而达到更新UI的目的，这就是”数据驱动“的原理

界面渲染整体流程：

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

配置文件

小程序的很多开发需求被规定在了配置文件中，比如导航栏、顶部TabBar，以及页面路由等通过修改配置文件即可实现。

project.config.json 　　项目配置文件，比如项目名称、appid等
sitemap.json 　　　　和小程序搜索相关
app.json 　　　　　　全局配置（对整个小程序）
page.json 　　　　　页面配置（针对某一个页面进行配置）

全局配置（app.json)

pages：页面路径列表

用于指定小程序由哪些页面组成，每一项都对应一个页面的路径信息

小程序中所有页面都必须在pages中进行注册

未指定entryPagePath时，数组的第一项代表小程序的初始页面（即首页）

{
  "pages": [
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
    
  ]
}

window

用于设置小程序的状态栏、导航条、标题、窗口背景色。

navigationBarBackgroundColor 　　设置导航栏背景颜色（十六进制颜色值，默认值为#000000）
navigationBarTextStyle 　　　　　设置导航栏标题和状态栏文字颜色（仅支持 black/white）
navigationBarTitleText 　　　　　设置导航栏标题文字内容
backgroundColor 　　　　　　　　设置窗口的背景颜色（设置下拉刷新时的背景颜色，默认值#ffffff）
enablePullDownRefresh 　　　　是否开启全局的下拉刷新（默认值false）

{
  "pages": [
    "pages/test/test",
    "pages/index/index",
    "pages/logs/logs"
    
  ],
  "window": {
    "backgroundTextStyle": "light",
    "navigationBarBackgroundColor": "#000000", 
    "navigationBarTitleText": "智慧小区",
    "navigationBarTextStyle": "white"
  }
}

tabBar：标题栏的展示

通过tabBar配置项指定底部tab栏的表现，以及tab切换时显示的对应页面

color 　　　　　　　　设置tab上文字默认颜色
selected 　　　　　　设置tab上文字选中时的颜色
backgroundColor 　　设置tab的背景色
list 　　　　　　　　tab的列表
position 　　　　　　tabBar的位置，仅支持bottom/top （默认值bottom）

其中list接受一个数组，只能配置最少2个、最多5个tab。tab按数组顺序排序，每个项都是一个对象，其属性值如下：
pagePath 　　　　　　pages中定义的页面路径
text 　　　　　　　　tab上的按钮文字
iconPath 　　　　　　未选中状态的icon路径，限制大小40kb，建议尺寸81px*81px，不支持网络图片，且当position为top时，不显示icon
selectedIconPath 　　选中状态的icon路径，限制大小40kb，建议尺寸81px*81px，不支持网络图片，且当position为top时，不显示icon

  "tabBar": {
    "selectedColor": "#ff0000",
    "list": [{
        "pagePath": "pages/test/test",
        "text": "主页",
        "iconPath": "assets/tabbar/home.png",
        "selectedIconPath": "assets/tabbar/home_focused.png"
      },
      {
        "pagePath": "pages/profile/profile",
        "text": "我的",
        "iconPath": "assets/tabbar/profile.png",
        "selectedIconPath": "assets/tabbar/profile_focused.png"
      }
    ]
  }

小程序启动流程

注册App时可以进行的操作

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

// app.js
//注册App
App({
  onLaunch() {
    // 展示本地存储能力
    const logs = wx.getStorageSync('logs') || []
    logs.unshift(Date.now())
    wx.setStorageSync('logs', logs)

    // 登录
    wx.login({
      success: res => {
        // 发送 res.code 到后台换取 openId, sessionKey, unionId
      }
    })
  },
  globalData: {
    userInfo: null
  }
})

注册Page时可以进行的操作

在生命周期函数中发送网络请求，从服务器获取数据
初始化一些数据，以方便被wxml引用展示
监听wxml中的事件，绑定对应的事件函数
其他一些监听（比如页面滚动、下拉刷新、上拉加载更多等）

// pages/test/test.js
//注册一个页面
Page({

  /**
   * 页面的初始数据
   */
  data: {
    movies: ['11', '22', '33'],
    counter: 0,
    msg: 'Hello World'
  },
  btnClick() {
    //错误做法：界面不会自动刷新
    this.data.counter += 1
    //正确做法：使用this.setData()
    this.setData({
      counter: this.data.counter+1
    })
  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  },

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

  }
})

posted @ 2021-04-11 10:44 455994206 阅读(113) 评论(0) 收藏举报

刷新页面返回顶部