微信小程序初步入坑指南

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

安裝工具

https://developers.weixin.qq....
打開連接下載小程序雲開發

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

是下方的導航欄的設置。這個直接看文檔吧。。
https://developers.weixin.qq....

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 貌似有個小坑。