阅读 49

小程序基础

小程序基础

app.json 全局配置

pages

  • 1 小程序中所有的页面,都需要再 pages 配置中指定
  • 2 只要在 pages 中配置一个新的页面路径,微信开发者工具就会自动帮我们创建好这个页面
  • 3 pages 数组的第一项作为 首页
  • 4 页面文件夹和文件名称相同(约定)

window

  • 用于设置小程序的状态栏、导航条、标题、窗口背景色。
  • 如果需要给小程序设置外观样式,就配置 window

tabBar

  • 设置小程序底部 Tab 菜单
  • 注意:只有当前页面是 Tab 页面,才能看到 底部的 Tab 栏菜单

networkTimeout

  • 网络超时时间

debug

  • 是否开启 debug 模式,默认关闭

functionalPages

  • 是否启用插件功能页,默认关闭

subpackages

  • 分包结构配置 (相当于vue的按需加载)

workers

  • Worker 代码放置的目录 (Html5 web Workers)

requiredBackgroundModes

  • 需要在后台使用的能力,如「音乐播放」

plugins

  • 使用到的插件

preloadRule

  • 分包预下载规则 (性能优化)

resizable

  • iPad 小程序是否支持屏幕旋转,默认关闭

navigateToMiniProgramAppIdList

  • 需要跳转的小程序列表,详见 wx.navigateToMiniProgram

usingComponents

  • 全局自定义组件配置

permission

  • 小程序接口权限相关设置

sitemapLocation

  • 指明 sitemap.json 的位置

常用组件

  • 说明:所有小程序页面(wxml)都会被包裹在一个 page 组件(标签)中

view组件

  • 类似于HTML的div标签

text组件

  • 类似于HTML的span标签
  • selectable: 文本是否可选
  • space: 显示连续空格 (语法: space="nbsp")
  • decode: 是否解码 (语法: text组件 <)

icon组件

  • 类似于HTML的i标签
  • 功能: 展示小图标
  • type: icon的类型,有效值:success, success_no_circle, info, warn, waiting, cancel, download, search, clear

button组件

  • 类似于HTML的button标签

checkbox组件

  • 类似于HTML的input[type="checkbox"]

image组件

  • 类似于HTML的img标签 特点: 小程序图片组件有默认的宽高 320px 240px

数据绑定

  • 数据一般都是在 JS 中提供的,如果要把这些数据展示在页面中,需要通过 数据绑定{{}} 语法