第一章总结

小程序简介

微信(WeChat)是腾讯公司于2011年1月21日推出的一款为智能终端提供即时通信(Instant Messaging, IM)服务的应用程序。

小程序特征

1.无须安装
小程序内嵌于微信程序之中，用户在使用过程中无须在应用商店下载安装外部应用。
2.触手可及
用户通过扫描二维码等形式直接进入小程序，实现线下场景与线上应用的即时联通。
3.用完即走
用户在线下场景中，当有相关需求时，可以直接接入小程序，使用服务功能后便可以对其不理会，实现用完即走。
4.无须卸载
用户在访问小程序后可以直接关闭小程序，无须卸载。

第一个小程序项目

代码示例

Component({
  options: {
    multipleSlots: true // 在组件定义时的选项中启用多slot支持
  },
  /**
   * 组件的属性列表
   */
  properties: {
    extClass: {
      type: String,
      value: ''
    },
    title: {
      type: String,
      value: ''
    },
    background: {
      type: String,
      value: ''
    },
    color: {
      type: String,
      value: ''
    },
    back: {
      type: Boolean,
      value: true
    },
    loading: {
      type: Boolean,
      value: false
    },
    homeButton: {
      type: Boolean,
      value: false,
    },
    animated: {
      // 显示隐藏的时候opacity动画效果
      type: Boolean,
      value: true
    },
    show: {
      // 显示隐藏导航，隐藏的时候navigation-bar的高度占位还在
      type: Boolean,
      value: true,
      observer: '_showChange'
    },
    // back为true的时候，返回的页面深度
    delta: {
      type: Number,
      value: 1
    },
  },
  /**
   * 组件的初始数据
   */
  data: {
    displayStyle: ''
  },
  lifetimes: {
    attached() {
      const rect = wx.getMenuButtonBoundingClientRect()
      wx.getSystemInfo({
        success: (res) => {
          const isAndroid = res.platform === 'android'
          const isDevtools = res.platform === 'devtools'
          this.setData({
            ios: !isAndroid,
            innerPaddingRight: `padding-right: ${res.windowWidth - rect.left}px`,
            leftWidth: `width: ${res.windowWidth - rect.left }px`,
            safeAreaTop: isDevtools || isAndroid ? `height: calc(var(--height) + ${res.safeArea.top}px); padding-top: ${res.safeArea.top}px` : ``
          })
        }
      })
    },
  },
  /**
   * 组件的方法列表
   */
  methods: {
    _showChange(show: boolean) {
      const animated = this.data.animated
      let displayStyle = ''
      if (animated) {
        displayStyle = `opacity: ${
          show ? '1' : '0'
        };transition:opacity 0.5s;`
      } else {
        displayStyle = `display: ${show ? '' : 'none'}`
      }
      this.setData({
        displayStyle
      })
    },
    back() {
      const data = this.data
      if (data.delta) {
        wx.navigateBack({
          delta: data.delta
        })
      }
      this.triggerEvent('back', { delta: data.delta }, {})
    }
  },
})

运行结果

微信小程序功能介绍

  1.工具栏
在工具栏中可以实现多种功能，例如账号的切换，模拟区、编辑区、调试区的显示/隐藏，小程序的编译、预览、切换后台，清理缓存等。
2. 模拟区
在模拟区中选择模拟手机的类型、显示比例、网络类型后，模拟器中会显示小程序的运行效果。
3.目录文件区
目录文件区用来显示当前项目的目录结构，单击左上角的“+”按钮可以进行目录和文件的创建，右键单击目录文件区中的文件或目录可以进行“硬盘打开”“重命名”“删除”等相关操作。
4.编辑区
编辑区用来实现对代码的编辑操作，编辑区中支持对，wxml、.wxss、.js及.json文件的操作，使用组合键能提高代码的编辑效率。常用的组合键

5. 调试区
调试区的功能是帮助开发者进行代码调试及排查有问题的区域。小程序系统为开发者提供了9个调试功能模块，分别是Console、Sources、Network、Security、Storage、AppData、Wxml、Sensor和Trace。最右边的扩展菜单项“：”是定制与控制开发工具按钮，