微信小程式實踐總結
阿新 • • 發佈:2019-02-04
基礎的介紹
框架
小程式開發框架的目標是通過儘可能簡單、高效的方式讓開發者可以在微信中開發具有原生 APP 體驗的服務。
框架提供了自己的檢視層描述語言 WXML 和 WXSS,以及基於 JavaScript 的邏輯層框架,並在檢視層與邏輯層間提供了資料傳輸和事件系統,可以讓開發者可以方便的聚焦於資料與邏輯上。
響應的資料繫結
框架的核心是一個響應的資料繫結系統。
整個系統分為兩塊檢視層(View)和邏輯層(App Service)
框架可以讓資料與檢視非常簡單地保持同步。當做資料修改的時候,只需要在邏輯層修改資料,檢視層就會做相應的更新。
js
小程式開發框架的邏輯層由 JavaScript 編寫。
邏輯層將資料進行處理後傳送給檢視層,同時接受檢視層的事件反饋。
在 JavaScript 的基礎上,我們做了一些修改,以方便地開發小程式。
- 增加 App 和 Page 方法,進行程式和頁面的註冊。
- 增加
getApp
和getCurrentPages
方法,分別用來獲取 App 例項和當前頁面棧。 - 提供豐富的 API,如微信使用者資料,掃一掃,支付等微信特有能力。
- 每個頁面有獨立的作用域,並提供模組化能力。
- 由於框架並非執行在瀏覽器中,所以
JavaScript
在 web 中一些能力都無法使用,如document
,window
等。(js不能直接控制HTML裡的內容,只能改變繫結的資料,這是開始接觸時最不習慣的地方) - 開發者寫的所有程式碼最終將會打包成一份
JavaScript
實際遇到的問題
1.資料動態更新
Page({/** * 頁面的初始資料 */ data: { length:0, result:[] },
……
})
page或app中先宣告賦初值,然後根據需要在事件函式中呼叫
this.setData({ result:res.data, length: length1 })2.servlet分離
小程式沒有jsp的功能,需要把小程式能力以外的部分分離成servlet,語言任意
呼叫類似ajax
wx.request({
url: 'http://localhost:8080/WebsiteMode/AdminLogin', //地址,可以用變數拼接
method: 'POST',
header: {
'content-type': 'application/x-www-form-urlencoded' // post方法專門設定
},
success: function (res) { //訪問成功的回撥函式
console.log(".....success.....");
var length1 = res.data.length; //返回的資料使用時必須加 .data
//動態更新繫結的資料
pagethis.setData({
result:res.data,
length: length1
})
},
fail: function (res) { //訪問失敗的回撥函式
console.log(".....fail.....");
},
dataType: "json" //返回資料是json則必須寫
})
3.HTML中的迴圈顯示
<view class="flex-wrp" style="flex-direction:row;" wx:for="{{result}}">
<view class="flex-item name">{{item.name}}</view>
<view class="flex-item date">{{item.year}}-{{item.month+1}}-{{item.day}}</view>
<view class="flex-item time">{{item.hour}}:{{item.minute}}:{{item.second}}</view>
<view class="flex-item address">{{item.address}}</view>
</view>
wx:for="{{陣列變數名或整個陣列}}" wx:for-item="item(default)"那麼class為flex-wrp的view會迴圈result陣列的長度那麼多次,若長度為0則不顯示
item類似foreach(i in arr)裡的 i ,可以不寫,預設為item
4.居中顯示
.flex-wrp {
display: flex;
align-items:stretch;
justify-content: center;
}
.flex-item {
display: flex;
align-items:center;
justify-content: center;
}
flex似乎不能被子元素繼承
第一個是水平居中,垂直高度同最高的,並且居中
第二個是普通的水平垂直居中