微信小程序学习笔记.

1. 基础知识

• 小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及 JavaScript，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

• 小程序文件结构和传统 Web 对比

  结构	传统 Web	微信小程序
  结构	HTML	WXML
  样式	CSS	WXSS
  逻辑	JavaScript	JavaScript
  配置	无	JSON

• 项目的基本目录：

• 全局配置：根目录下 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

  • pages 字段：用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

  • window 字段：定义小程序所有页面的顶部背景颜色，文字颜色定义等。

    • navigationBarBackgroundColor :导航栏背景颜色，如 #000000

    • navigationBarTextStyle : 导航栏标题颜色，仅支持 black / white

    • navigationBarTitleText : 导航栏标题文字内容

    • backgroundTextStyle : 下拉 loading 的样式，仅支持 dark / light

    • enablePullDownRefresh : 是否开启当前页面下拉刷新。

  • tabBar 字段：如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。

    • color ：tab 上的文字默认颜色，仅支持十六进制颜色

    • backgroundColor：tab 的背景色，仅支持十六进制颜色

    • list：tab 的列表，最少 2 个、最多 5 个 tab

      • pagePath：页面路径，必须在 pages 中先定义

      • text：tab 上按钮文字

      • iconPath：图片路径

      • selectedIconPath：选中时的图片路径

• 页面配置：每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项。文件内容为一个 JSON 对象。

  • navigationBarBackgroundColor：导航栏背景颜色，如 #000000

  • navigationBarTextStyle：导航栏标题颜色，仅支持 black / white

  • navigationBarTitleText：导航栏标题文字内容

  • backgroundColor：窗口的背景色

  • backgroundTextStyle：下拉 loading 的样式，仅支持 dark / light

• 数据绑定：在页面 js 文件的 data 中定义数据，在 wxml 使用 {{}} 取出数据。

• boolean 类型需要使用 {{false}} 或者 {{true}}，例如：<view><checkbox checked="{{false}}"></checkbox></view>

• 取值作用于属性上面时，" 和 { 之间不能有空格。不能出现以下情况：

  1<view><checkbox checked=" {{false}}"></checkbox></view>

• 列表渲染：

  项的变量名默认为 item，wx:for-item 可以指定数组当前元素的变量名

  下标变量名默认为 index，wx:for-index 可以指定数组当前下标的变量名

   1data: {
   2    arr:["苹果","香蕉","西瓜"],
   3    person:{
   4      name:"小明",
   5      height:180
   6    }
   7}
   8
   9<view wx:for="{{arr}}" wx:key="{{index}}">
  10    {{index}}-{{item}}
  11</view>
  12<view wx:for="{{person}}" wx:key="{{index}}" wx:for-item="key">
  13    {{key}}-{{item}}
  14</view>

  wx:key 可以提升效率

2. WXSS

• rpx：可以根据屏幕宽度进行自适应。规定屏幕宽为 750rpx。如在 iPhone6 上，屏幕宽度为 375px，共有 750 个物理像素，则 750rpx = 375px = 750 物理像素，1rpx = 0.5px = 1 物理像素。

• 在 wxss 中使用 @import 语句可以导入外联样式表，@import 后跟需要导入的外联样式表的相对路径，用 ; 表示语句结束。

• 定义在 app.wxss 中的样式为全局样式，作用于每一个页面。在 page 的 wxss 文件中定义的样式为局部样式，只作用在对应的页面，并会覆盖 app.wxss 中相同的选择器。

3. 基本组件

• text 显示普通的文本，text 只能嵌套 text

  • selectable 属性：文本是否可选，默认 false

  • decode 属性：是否解码(&nbsp)，默认 false

• image：图片标签，image 组件的默认宽度 320px，高度 240px

  • mode：图片裁剪、缩放的模式

    • scaleToFill：缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素

    • widthFix：缩放模式，宽度不变，高度自动变化，保持原图宽高比不变

    • heightFix：缩放模式，高度不变，宽度自动变化，保持原图宽高比不变

• swiper：微信内置轮播图组件，默认宽度 100%，高度 150px

  • indicator-dots：是否显示面板指示点

  • indicator-color：指示点颜色

  • indicator-active-color：当前选中的指示点颜色

  • autoplay：是否自动切换

  • interval：自动切换时间间隔

  • circular：是否采用衔接滑动

• swiper-item：滑块，默认宽度和高度都是 100%

   1swiper{
   2  width: 100%;
   3  height: 150px;
   4}
   5swiper-item{
   6
   7}
   8image{
   9  width: 100%;
  10}
  11
  12<swiper autoplay indicator-dots indicator-color="blue">
  13  <swiper-item><image mode="widthFix" src="../../images/1.jpg"></image></swiper-item>
  14  <swiper-item><image mode="widthFix" src="../../images/1.jpg"></image></swiper-item>
  15  <swiper-item><image mode="widthFix" src="../../images/1.jpg"></image></swiper-item>
  16  <swiper-item><image mode="widthFix" src="../../images/1.jpg"></image></swiper-item>
  17</swiper>

• navigator：导航组件，类似超链接标签

  • target：在哪个目标上发生跳转，默认当前小程序

  • url：当前小程序内的跳转链接

  • open-type：跳转方式

    • navigate：保留当前页面，跳转到应用内的某个页面，但是不能跳到 tabbar 页面

    • redirect：关闭当前页面，跳转到应用内的某个页面，但是不允许跳转到 tabbar 页面

    • switchTab：跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

    • reLaunch：关闭所有页面，打开到应用内的某个页面

• video：视频组件

  • controls：是否显示默认播放控件

  • autoplay：是否自动播放

• 自定义组件

  • 类似于界面，一个自定义组件由 JSON、wxml、wxss、js 4 个文件组成

  • 在自定义组件的 js 文件中，需要使用 Component() 来注册组件，并提供组件的属性定义、内部数据和自定义方法

  • 使用时，需要在页面的 JSON 文件中进行引用声明。还要提供对应的组件名和组件路径。

    1{
    2  // 引用声明
    3  "navigationBarTitleText": "bilibili",
    4  "usingComponents":{
    5    // 要使用的组件的名称   //组件的路径
    6    "component-tag-name":"path/to/the/custom/component"
    7  }
    8}