小程序基礎知識點講解-WXML + WXSS + JS，生命週期

小程序基礎

小程序官方地址，小程序開發者工具，點擊此處下載。在微信小程序中有一個配置文件project.config.json，此文件能夠讓開發者在不一樣設備中進行開發。

微信小程序共支持5種文件，wxml，wxss，js，json，wxs以及圖片文件等。每一頁面都具備wxml，wxss，js，json文件，但比不是必須的，小程序和網頁相似，一種以html+css+js，而小程序則是wxml+wxss+js，如wxml用來描述頁面結構，wxss用例描述頁面的樣式，js用來添加邏輯信息的。

wxml

wxml用來構建頁面的結構

//數據綁定
<!--wxml-->
<view> {{message}} </view>
複製代碼

// page.js
Page({
  data: {
    message: 'Hello world!'
  }
})
複製代碼

學會用數據綁定，wxml中的動態數據均可來自對應的Page的data中的數據，如何綁定是很簡單易懂的。如

// 使用{{ ... }}
<view> {{ message }} </view>

<view id="item-{{id}}"> </view>

// 對應中的Page的data數據
Page({
  data: {
    id: 0
  }
})

<view wx:if="{{condition}}"> </view>
Page({
  data: {
    condition: true
  }
})
複製代碼

重點

true：表明真值。 false：表明假值。

// 不可少的 {{ ... }}
<checkbox checked="{{ture}}"> </checkbox>

<view hidden="{{flag ? true : false}}"> Hidden </view>
複製代碼

// 必備掌握
<view>{{object.key}} {{array[0]}}{{array[1]}}</view>
Page({
  data: {
    object: {
      key: 'Hello '
    },
    array: ['hh','da']
  }
})
複製代碼

// 數組
<view wx:for="{{[zero, 1, 2, 3]}}"> {{item}} </view>
Page({
  data: {
    zero: 0
  }
})
// item，條目
複製代碼

<template is="object" data="{{for: a, bar: b}}"></template>
Page({
  data: {
    a: 1,
    b: 2
  }
})
// {for: 1, bar: 2}
複製代碼

// 用...來將一個對象展開
<template is="object" data="{{...obj1, ...obj2, e: 5}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      c: 3,
      d: 4
    }
  }
})
// {a: 1, b: 2, c: 3, d: 4, e: 5}
複製代碼

<template is="object" data="{{foo, bar}}"></template>
Page({
  data: {
    foo: 'my-foo',
    bar: 'my-bar'
  }
})
// {foo: 'my-foo', bar:'my-bar'}
複製代碼

// 後邊的會覆蓋前面
<template is="object" data="{{...obj1, ...obj2, a, c: 6}}"></template>
Page({
  data: {
    obj1: {
      a: 1,
      b: 2
    },
    obj2: {
      b: 3,
      c: 4
    },
    a: 5
  }
})
// {a: 5, b: 3, c: 6}
複製代碼

列表的渲染，經過wx:for，下標變量名爲 index，數組當前項的變量名爲 item。

<view wx:for="{{array}}">
  {{index}}: {{item.message}}
</view>
Page({
  data: {
    array: [{
      message: 'foo',
    }, {
      message: 'bar'
    }]
  }
})
複製代碼

wx:for-item
wx:for-index
複製代碼

<view wx:for="{{array}}" wx:for-index="indexcoding" wx:for-item="itemcoding">
  {{indexcoding}}: {{itemcoding.message}}
</view>
複製代碼

// wx:if="{{condition}}" wx:else wx:elif
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
複製代碼

重點

wx:if 爲 false，框架什麼也不作，只有爲真的時候纔開始局部渲染。 wx:if 有更高的切換消耗而， hidden 有更高的初始渲染消耗。

// 模板 template
<template is=" ... " data="{{...item}}"/>
Page({
  data: {
    item: {
      msg: 'this is a template'
    }
  }
})
複製代碼

// 事件
bindtap="tapName"

Page({
  tapName: function(event) {
    console.log(event)
  }
})
複製代碼

事件分類：（即區分父節點有事件也會被響應）

1. 冒泡事件：會向父節點傳遞
2. 非冒泡事件：不會向父節點傳遞

<view bindtap="add"> {{count}} </view>
Page({
  data: {
    count: 1
  },
  add: function(e) {
    this.setData({
      count: this.data.count + 1
    })
  }
})
複製代碼

import和include

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
複製代碼

<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>

<!-- header.wxml -->
<view> header </view>

<!-- footer.wxml -->
<view> footer </view>
複製代碼

WXSS

wxss與css大部分相同，但wxss對css進行了修改和補充，wxss的特性有尺寸單位和樣式導入，在小程序中你會看到rpx這樣的尺寸單位，小程序開發初期是以iPhone 6標準的，固定750rpx爲屏幕寬度。

尺寸單位，屏幕寬固定爲750rpx，在iPhone6 上，屏幕寬度爲375px，換算750rpx = 375px = 750物理像素。iPhone6中，1rpx = 0.5px。

樣式導入，使用@import語句，路徑爲相對路徑；如：

/** index.wxss **/
.name {
  padding:5px;
}

/** app.wxss **/
@import "index.wxss";
.age {
  padding:15px;
}
複製代碼

選擇器

.class
#id
element
::after
::before
複製代碼

JS

在js中文件運用到API的調用，點擊傳送門

生命週期

不用立刻懂，別作項目別懂就行。

App()用來註冊一個小程序，接受一個object參數。

onLaunch 監聽小程序初始化
onShow 監聽小程序顯示
onHide 監聽小程序隱藏
複製代碼

getApp()用來獲取到小程序實例。

var app = getApp()
console.log(app.globalData)
複製代碼

頁面 Page

onLoad 監聽頁面加載
onShow 監聽頁面顯示
onReady 監聽頁面初次渲染完成
onHide 監聽頁面隱藏
onUnload 監聽頁面卸載
複製代碼

前臺、後臺定義：擊左上角關閉或者按了Home鍵離開，進入了後臺，只有當小程序進入後臺必定時間，或者系統資源佔用太高，纔會被銷燬。

結語

• 本文主要講解 小程序基礎知識點講解-WXML + WXSS + JS，生命週期

• 下面我將繼續對小程序中的其餘知識 深刻講解 ，有興趣能夠繼續關注

• 小禮物走一走 or 點贊