微信小程序學習筆記（一）

1.目錄及文件構成

1.1 根目錄下

　　** app.js 是小程序的腳本代碼，用來監聽並處理小程序的生命週期函數、聲明全局變量。

　　** app.json 是對整個小程序的全局配置，配置小程序是由哪些頁面組成，配置小程序的窗口背景顏色等。

　　** app.wxss 是整個小程序的公共樣式表。

　　其中 app.js 和 app.json 是必需的。

1.2 小程序頁面是由同路徑下同名但不一樣後綴的2 ~ 4個文件組成：

　　 ** .js後綴的文件是頁面腳本文件，該文件實現頁面邏輯與事件處理

　　** .json後綴的文件是頁面配置文件。

　　** .wxss後綴的是頁面樣式表文件。

　　** .wxml後綴的文件是頁面結構文件，該文件與.wxss文件一塊兒構建出頁面。

　　其中 .js 和 .wxml文件是必需的。

 

2. 每一個小程序包含一個描述總體程序的app實例和多個描述頁面的page

　　* 其中app由三個文件構成：
　　　　** 公共配置 app.json
　　　　** 公共樣式 app.wxss
　　　　** 主體邏輯 app.js

　　* 每一個page最多由四個文件構成
　　　　** 頁面配置 page.json
　　　　** 頁面樣式 page.wxss
　　　　** 頁面結構 page.wxml
　　　　** 頁面主體邏輯 page.js

　　咱們能夠按需在app.js和page.js中添加程序在生命週期的每一個階段相應的事件。
　　好比在頁面onLoad的時候進行數據加載，onShow的時候進行數據的更新

　　*** 怎麼寫js文件（注意：裏面的涉及的實例都是js實例）

　　　　* app.js首先寫app構造方法,即App()
　　　　這個構造方法裏面的參數是一個js實例,即App({})
　　　　參數實例裏面有生命週期函數還有全局變量

　　　　* page.js首先寫page構造方法,即Page()
　　　　這個構造方法裏面的參數是一個js實例,即Page({})
　　　　參數實例裏面有data屬性、生命週期函數、自定義的事件處理函數
　　　　data屬性的屬性值也是一個js實例，即data：{}
　　　　屬性值實例裏面也有屬性和屬性值，如data:{name:"wang",age:26}

 

　　典型的app.js代碼以下

　　App({
　　　　　　onLaunch:function(){
　　　　　　　　//啓動時執行的初始化工做
　　　　　　},

　　　　　　onShow:function(){
　　　　　　　　//小程序啓動或從後臺進入前臺時，觸發執行的操做
　　　　　　},

　　　　　　onHide:function(){
　　　　　　　　//小程序從前臺進入後臺時，觸發執行的操做
　　　　　　}

　　})

　　典型的一個頁面page.js代碼以下
　　Page({
　　　　　　date:{
　　　　　　　　text:'This is page data'
　　　　　　},

　　　　　　onLoad:function(){
　　　　　　　　//頁面加載時執行的初始化工做
　　　　　　},

　　　　　　onReady:function(){
　　　　　　　　//頁面就緒後觸發執行的操做
　　　　　　},

　　　　　　onShow:function(){
　　　　　　　　//頁面打開時，觸發執行的操做
　　　　　　}

　　　　　　onHide:function(){
　　　　　　　　//頁面隱藏時，觸發執行的操做
　　　　　　}

　　})

 

　　*** 怎麼寫app.json文件（注意：裏面的涉及的實例都是json實例）

　　　　* 提及json，首先想到的是json實例，即{}
　　　　* 既然是全局配置文件，那麼首先想到的是pages屬性，即{"pages":{}}
　　　　屬性值也是一個實例{}，裏面是逗號分隔的多個頁面的路徑字符串
　　　　* 接着是window屬性，即{"window":{}}
　　　　屬性值也是一個json實例,即{"頁面窗口屬性名稱":"屬性值"}
　　　　* 再接着是tabBar屬性，即{"tabBar":{}}
　　　　屬性值也是一個json實例，即{"標籤頁的表現":"屬性值"}

　　*** 怎麼寫page.wxml文件(相似html,寫各類標籤)
　　　　* 使用組件
　　　　* <view></view> <text></text>
　　　　* 綁定數據 {{數據}} ，這些數據均來自於對應頁面的.js文件中Page構造方法的data對象

　　　　* 結合事件系統
　　　　* 綁定事件的屬性 bindtap

3.WXML具備數據綁定、列表渲染、條件渲染、模板及事件綁定的能力

　　* 數據綁定

　　<!-- demo.wxml -->
　　<view>{{message}}</view>

　　//demo.js
　　Page({
　　　　date:{message:"Hello MINA!"}
　　})

　　* 列表渲染

　　<!-- demo.wxml -->
　　<view wx:for="{{array}}">{{item}}</view>

　　//demo.js
　　Page({
　　　　data:{
　　　　　　array:[1,2,3,4,5]
　　　　}
　　})　　

 

　　* 條件渲染

　　<!-- demo.wxml -->
　　<view wx:if="{{view == 'WEBVIEW'}}"> WEBVIEW </view>
　　<view wx:if="{{view == "APP"}}"> APP </view>
　　<view wx:if="{{view == "MINA"}}">MINA</view>

　　//demo.js
　　Page({
　　　　data:{
　　　　　　view:"MINA"
　　　　}
　　})

　　* 模板

　　<!-- demo.wxml -->
　　<template name="staffName">
　　　　<view>
　　　　　　FirstName:{{firstName}},lastName:{{lastName}}
　　　　</view>
　　</template>

　　<template is="staffName" data="{{...staffA}}"></template>
　　<template is="staffName" data="{{...staffB}}"></template>

　　//demo.js
　　Page({
　　　　data:{
　　　　　　staffA:{firstName:"Weiwei",lastName:"Hu"},
　　　　　　staffB:{firstName:"tianhao",lastName:"Wang"}
　　　　}
　　})

　　注:「...」 爲擴展運算符，用它來展開一個對象，如staffA對象

　　* 事件綁定

　　<!-- demo.wxml -->
　　<view bindtap="add">{{count}}</view>

　　//demo.js
　　Page({
　　　　data:{
　　　　　　count:1
　　　　},
　　　　add:function(){
　　　　　　this.setData({
　　　　　　　　count:this.data.count + 1
　　　　　　})
　　　　}
　　})

4.引用

　　WXML提供兩種文件引用方式：import和include
　　（1）import(引入的是模板)
　　<!-- item.wxml -->
　　<template name="item">
　　　　<text>{{name}}</text>
　　</template>

　　在index.wxml中引用了item.wxml,就可使用item模板了
　　<import src="item.wxml"/>
　　<template is="item" date="{{name:'圖書館'}}"/>

5.生命週期，每一個頁面第一次出現，都是經歷onLoad-onShow-onReady,
若是頁面跳轉了，則會onHide,再返回出現就是onShow。若是頁面被
重定向了，則會onUnload,之後不會再返回了。

6.頁面導航組件：跳轉

　　　wx.navigateTo(object):保留當前頁面，跳轉到應用內的某個頁面。能夠返回到原頁面

　　例如wx.navigateTo({url:"../index/index?name='wang'&age=26"})

　　wx.redirectTo(object):關閉當前頁面，跳轉到應用內的某個頁面。

　　wx.navigateBack(objext)：關閉當前頁面，回退至前一頁面。

　　wx.switchTab(object):跳轉tabBar頁面並關閉其餘全部非tabBar頁面。

 

7.相對定位和絕對定位

　　　相對定位的元素是相對自身進行定位，參照物是本身 position=relative; top=50px;

　　 絕對定位的元素是相對離他最近的一個已定位的父級元素進行定位 position=absolute; top=50px;

8.<scroll-view>滾動區域組件

　　屬性：　　　style="height:200px" :滾動區域的高度200px　　　scroll-y="true" :縱向滾動條　　　bindscroll="事件" ：只要一滾動，就觸發事件　　　bindscrolltoupper="toupper" :向上滾動到頂部觸發事件　　　bindscrolltolower="tolower" :向下滾動到低部觸發事件　　　upper-threshold:"50" :默認向上滾動至離頂部50px時，觸發bindscrolltoupper綁定的事件　　　lower-threshold:"50" :默認向下滾動至離低部50px時，觸發bindscrolltolower綁定的事件　　　scroll-top="0" :設置滾動條一開始出現，到頂部的距離　　　scroll-into-view="<scroll-view>的子元素的id" ：滾動條一開始就會出如今id對應的子元素那裏，子元素會出如今滾動區域的最頂部