微信小程式初步入坑小指南

安裝工具

app.json

為json格式的檔案，為一個配置檔案，屬於全域性的
初始化的檔案內容

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
 

  }
}

pages

各個引數的解釋，pages為頁面，每一次更改頁面，增加或者新增加頁面都需要修改pages引數。不需要加字尾名，微信框架會自動新增字尾名。

window

對於全域性導航欄的設定。
navigationBarBackgroundColor 設定全域性的導航欄的顏色
navigationBarTitleText 設定導航欄的文字內容
navigationStyle 設定導航欄的樣式
backgroundColor 設定窗體的顏色，即下拉重新整理透露出的顏色
即需要設定 “enablePullDownRefresh”: true, 其布林值為true即可進行漏出設定的窗體顏色。
backgroundTextStyle 設定下拉的loding樣式

tabBar

app.json檔案如下

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"dark",
    "navigationBarBackgroundColor": "#c7dbc8",
    "navigationBarTitleText": "小小",
    "navigationBarTextStyle":"whiter",
    "enablePullDownRefresh": true,
    "backgroundColor
 
": "#fceaea"
  },
  "tabBar": {
    "list": [{
      "text": "ming",
      "pagePath": "pages/logs/logs"
    }, {
      "text":"home",
      "pagePath": "pages/index/index"
    }],
    "color": "#f8fcea",
    "backgroundColor": "#ff9999",
    "selectedColor": "#c5ff99",
    "borderStyle": "white",
    "position": "top"
  },
  "functionalPages": true
}

project.config.json

該檔案為一個本地的配置檔案
就是對於微信的一些設定

wxml模板

wxml ≈ html

感覺很像ejs，好吧

wxml中內容

<text>{{mesg}}</text>

在同路下的js檔案中

Page({
  data: {
    msg: "hello world"
  }
})

渲染出來的結果

js互動

Page({
  data: {
    msg: "hello world"
  },
  clickMe: function() {
    this.setData({msg: "3333"});
  }
})

wxml

<text>{{msg}}</text>
<button bindtap="clickMe">點選按鈕</button>

點選按鈕將會自動更新頁面的資料

小程式的啟動

客戶端開啟小程式之前，會把小程式全部下載到本地。
通過app.json可以知道頁面的啟動地址。
小程式只有一個app的例項，全域性共享。
啟動完成後觸發onLaunch事件，然後執行回撥函式
在小程式啟動完畢以後控制檯輸出內容

App({
  onLaunch: () => {
    console.log('小程式啟動完畢')
  }
})

上方進行了一次回撥

小程式的頁面

一個頁面有四個檔案，分別是json(配置檔案)，wxml（頁面檔案，類似於html），js檔案（處理頁面的相關互動，和網頁類似）
js中有一個page，為一個頁面的構造器，渲染頁面的時候先裝載json檔案，配置當前的頂部導航，接著裝載wxml檔案，配置頁面的DOM，在裝載wxss，進行對頁面樣式的處理

和網頁的類似，都是同樣的

最後將會讀取js檔案，根據頁面中的page函式即構造器中的內容，將wxml和data進行繫結，渲染出結果，為mvvm

mvc 分別是模型層，檢視層，和控制器，當用戶請求到達以後，將會先經過路由，即入口檔案，即主檔案中的server.js檔案，接著進入lib目錄下的route.js檔案，對路由進行分發，路由在將資料傳遞給控制器，controller ，controller 收到請求以後再向model 索要資料，索要完成以後，在將資料導向view層，即ejs檔案的地方，渲染完成檔案以後返回給使用者。

　mvp 在mvc的基礎上，view中不寫邏輯，，在原先控制器的地方完成頁面的合併

mvvm 和mvp類似，只不過view和原先的控制器雙向繫結，即使用get 和 set方式，達到當資料更改的時候，進行回撥

元件

是滴，小程式採用元件化，例如生成地圖map即可

ps 在網頁中，生成地圖，需要引入第三方的js檔案，以及第三方的api，達到生成地圖的目的。

api 實現呼叫api的能力

api的回撥為非同步操作，所以呢，依舊要進行回撥

釋出者-訂閱模型

小程式的邏輯層

小程式使用的是js引擎進行渲染，邏輯層將資料傳送給檢視層，檢視層接受事件的反饋，開發者寫的所有檔案都會打包成為一份js檔案，小程式執行時啟動，小程式離開時銷燬，

吐槽 一些瀏覽器裡的js在微信小程式無法使用，小程式還有npm？ 天哪，

註冊程式

app()函式，必須在app.js檔案中呼叫，接受一個object的引數

前臺後臺定義，當用戶點選左上角關閉的時候， 或者按住home離開微信，小程式，沒有銷燬，將會進入後臺，再次開啟進入前臺，當小程式進入後臺一段時間以後，系統資源佔用過高將會不定時的銷燬

onLaunch

程式碼如下

//app.js
App({
  onLaunch: (onlaunch) => {
    console.log(onlaunch)
  }
})

效果如下

即獲取頁面的引數

相比較網頁好輕鬆，，網頁還需要進行先字串分隔，然後再次以=進行分隔，然後將其迴圈，遍歷該陣列，將其儲存進入物件，完成。如果使用json字串進行傳，可能稍微方便一點

getAPP

getApp函式能獲取小程式的各種函式，即onLaunch等其他的一些函式
即獲取到小程式的一個例項

註冊頁面

page為一個建構函式，接受物件，用來對頁面進行初始化

data

data和渲染層，進行資料的繫結

onLoad

進行引數的傳值

Page({
  data: {
    msg: "hello world"
  },
  clickMe: function() {
    this.setData({msg: "3333"});
  },
  onLoad: (query) => {
    console.log(query);
  }
})

onShow

頁面切入的時候，將會進行顯示。
例： 按住home按鍵，在回到小程式介面的時候，將會回撥該註冊的函式

onReady

頁面渲染完成以後，將會回撥該函式

onHide

頁面切換的時候，將會回撥註冊的函式

onUnload

頁面解除安裝的時候，將會觸發

頁面事件

onPullDownRefresh

使用者下拉，需要設定onReachBottomDistance，即使用者下拉到頁面底部多少的時候，觸發該事件

onPageScroll

使用者滑動的距離，沒有正負之分

onShareAppMessage

使用者轉發的介面
在button元件中設定

open-type="share"

即可設定為轉發按鈕
需要有return進行返回引數

onTabItemTap

單擊tab將會觸發該內容

  onTabItemTap: (item)=>{
    console.log(item.index)
    console.log(item.pagePath)
    console.log(item.text)
  }

如果按住導航，將會進行輸出

當單擊元件的時候，發生事件

這一點終於和網頁類似了。網頁中也可以實現一個元素和事件進行相互的繫結

  viewTap: () => {
    console.log('您已經單擊按鈕')
  }

<button bindtap="viewTap">這是按鈕</button>

Page.route

當前頁面的路徑，類似於網頁的

window.location.href

可以獲取到當前頁面的url

  onShow: function() {
    console.log('頁面進行顯示切入前臺');
    console.log(this.route);
  },

當用戶切換tab的時候，將會立馬輸出當前頁面的path值
其中this指代當前的page，因為是在一個page函式內部

Page.prototype.setData

為page的繼承函式，將資料從邏輯層傳送到檢視層（非同步），this.data的值，（同步
）

ps 單純的改變this.data的值，不會起作用，因為頁面已經渲染完成，需要進行傳送到檢視層，進行更新檢視
ps 是的。小程式使用的就是mvvm

js

Page({
  data: {
    text0: "11111",
    text1: "22222",
    text2: "333333",
    text3: "444444"
  },
  changeText0: function() {
    this.setData({text0: "22222"})
  },
  changeText1: function () {
    this.setData({ text1: "33333" })
  },
  changeText2: function () {
    this.setData({ text2: "44444" })
  },
  changeText3: function () {
    this.setData({ text3: "55555" })
  },
})

wxml

<view>{{text0}}</view>
<button bindtap="changeText0">更改上方文字</button>
<view>{{text1}}</view>
<button bindtap="changeText1">更改上方文字</button>
<view>{{text2}}</view>
<button bindtap="changeText2">更改上方文字</button>
<view>{{text3}}</view>
<button bindtap="changeText3">更改上方文字</button>

路由

小程式中的路由是有框架達到的
框架用棧的方式維護了當前的所有頁面

ps 又見到棧了

getCurrentPages

該函式用於獲取當前頁面的棧，返回的是一個數組
適用於獲取上一個返回的頁面

全域性變數

js檔案中宣告的變數，和函式只在檔案中有用，不同檔案可以宣告相同的

ps 如果載入到一個頁面的時候，將會發生命名衝突

可以在app.js檔案中設定全域性的資料

// a.js
var app = getApp();
console.log(app.globalData)

//app.js
App({
  onLaunch: (onlaunch) => {
    console.log(onlaunch)
  },
  globalData: 333
})

模組化

類似於node.js的包
使用的同樣是exports進行介面的暴露

是滴，類比node.js即可，是滴，小程式還不支援引入npm包

然後就可以歡快的引入npm包了。

ps 貌似有個小坑。