微信小程序自我小總結(jié)
微信小程序是一個介于原生app和H5之間的一個東東。不過微信小程序是依賴微信開發(fā)平臺的，甚至連IDE都是專用的，做出來的成品，也只能在微信中通過搜索或掃碼找到入口，然后進行訪問。這些天一直用微信小程序來寫公司的項目。有一些小小的心得，怕過久了會忘記(laodayeyaoqiu)。
安裝
安裝簡單不多說，打開掃碼登陸，然后就可以進行下面的操作了。
結(jié)構
js：javascript 邏輯代碼區(qū)。
json：頁面配置區(qū)。
wxml：類類似HTML布局區(qū)，
wxss：CSS樣式區(qū)
（ json 與 wxss 并不是必須的，可按照產(chǎn)品風格做調(diào)整）
子文件中的 .json只能設置window相關的配置項，以決定本頁面的窗口表現(xiàn)，所以無需寫window這個鍵
window ：用于設置小程序的狀態(tài)欄、導航條、標題、窗口背景色。
同時我在說一下它的源碼結(jié)構，就這樣了，感覺廢話太多，重點是自己總結(jié)一下知識點
- 視圖層（將邏輯層的數(shù)據(jù)展現(xiàn)在視圖上）
- 邏輯層（通過改變數(shù)據(jù)[setData方法]來改變視圖）
- 配置文件
重點-知識點（項目中產(chǎn)生的疑惑）
1.先說一下頁面-不多說
頁面我并不是主要參與其中，但是也有許多的坑需要填寫，比如遇到了樣式背景顏色不出來，比如不支持外鏈圖片等，我了解到的WXML，WXCSS的知識點比如： view 組件對應 html 里的 div，text 對應 span，wxss 里選擇器只支持 element, #id, .className, ::after, ::before，樣式使用 @import 導入
2. js部分
- 提醒
- 微信小程序不運行在瀏覽器，所以不能操作Dom，也沒有document、window對象，類似于APP的東東，當然也沒有cookies
每一個頁面路徑最多5層,當已經(jīng)打開了5個頁面之后，wx.navigateTo不能正常打開新頁面,此處記一下跳轉(zhuǎn)API
當然還有其他跳轉(zhuǎn)方法，具體鏈接小程序API文檔 - 沒有外鏈，只能用app.json里配置的路由，a標簽不可用的
- wx:for循環(huán)渲染時，要添加wx:key，否則報警告
- 在滾動 scroll-view 時會阻止頁面回彈，所以在 scroll-view 中滾動，是無法觸發(fā) onPullDownRefresh
-
默認數(shù)組的當前項的下標變量名默認為 index，數(shù)組當前項的變量名默認為 item，可用<block>來渲染一個包含多節(jié)點的結(jié)構塊,eg
- 當綁定事件時bindetap，需要當前標簽的索引，標簽索引需對應綁定事件的那一行
- 頁面?zhèn)鲄?
- 開發(fā)時，注意需要打印出來，每次都會出錯，感覺很重要
Page({
onLoad (option) {
// 看看是不是你想要的
console.log(option.id)
}
})
+ 參數(shù)傳值
- data-id
設置data-id
data-*注意事項:data-*名稱不能有大寫字母.data-*屬性中不可以存放對象
<view class="orderbox-djlist cf" bindtap="goodsDetail" data-id="{{goods.sGoodsInfo.list[0].iGoodsId}}">
<image class="djlist-img" mode="widthFix" src="{{goods.sGoodsInfo.list[0].sGoodsPic}}"></image>
</view>
取值 + 傳值
+ 小程序建議用ES6語法，遇到的知識點
- 擴展運算符（ spread ）是三個點（...）。該運算符主要用于函數(shù)調(diào)用,它好比 rest 參數(shù)的逆運算，將一個數(shù)組轉(zhuǎn)為用逗號分隔的參數(shù)序列（以前知道，很少用）。
down了一些小例子以便鞏固
替代數(shù)組的 apply 方法
- 由于擴展運算符可以展開數(shù)組，所以不再需要apply方法，將數(shù)組轉(zhuǎn)為函數(shù)的參數(shù)了。
// ES5 的寫法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f.apply(null, args);
// ES6 的寫法
function f(x, y, z) {
// ...
}
var args = [0, 1, 2];
f(...args);
+ 滾動加載(用其他例子，可能公開，不寫項目例子)
微信沒有document、window對象，所以沒有onscroll給你用，那怎么辦呢？還好微信提供了<scroll-view>,實現(xiàn)如下：
wxml文件
<scroll-view scroll-y="true" scroll-into-view="{{toView}}" bindscrolltolower=“l(fā)oadMovies”>
<view wx:for="{{movies}}" wx:key="index">
{{item.name}}
</view>
</scroll-view>
js文件
Page({
data: {
movies: []
},
getMovies () {
let _self = this
wx.request({
url: 'https://......',
data: {},
success: function(res) {
// res.data才是你后端返回的真實數(shù)據(jù)
_self.setData({
movies: res.data
})
}
})
},
loadMovies () {
// 得到要更新的數(shù)據(jù)，setData重置movies
}
})
+ 事件總結(jié)/冒泡事件
小程序的事件主要有：
>
touchtab 點擊事件
touchstart 開始滑動
touchmove 滑動中
touchend 滑動結(jié)束
touchcancel 滑動中斷
小程序中的wxml中綁定事件有兩種：以touchtab為例 ，在wxml中必須有bind/catch不然無法實現(xiàn)上述事件
bindtouchtab和catchtouchtab bind的不會阻止事件冒泡（元素最里層到最外層函數(shù)執(zhí)行），catch會阻止冒泡，只是冒泡到當前層結(jié)束
+ 使用模板(發(fā)現(xiàn)模板真是個好東西哦!)
1:定義模板:name設置模板的名字
<template name="toast">
<view class="dialog-alert {{toast.display}}">
<view class="dialog-alert-txt">{{toast.msg}}</view>
</view>
</template>
2:使用模板
<import src="../../components/toast/toast.wxml"></import>
然后使用模板is后寫模板的name..通過data來傳遞需要是數(shù)據(jù)
<template is="toast" data="{{item}}"></template>
+ onPullDownRefresh和onReachBottom方法實現(xiàn)小程序下拉加載和上拉刷新
首先要在json文件里設置window屬性
| 屬性 | 類型| 描述|
|:-------------:|:-------------:| :-----:|
| enablePullDownRefresh| Boolean|是否開啟下拉刷新 ,詳見頁面相關事件處理函數(shù)。 |
| onPullDownRefresh| function|頁面相關事件處理函數(shù)——監(jiān)聽用戶下拉動作 |
| onReachBottom| function|頁面上拉觸發(fā)底事件的處理函數(shù) |
下拉加載說明：
當處理完數(shù)據(jù)刷新后，wx.stopPullDownRefresh可以停止當前頁面的下拉刷新。
onPullDownRefresh(){
console.log('--------下拉刷新-------')
wx.showNavigationBarLoading() //在標題欄中顯示加載
wx.request({
url: 'https://URL',
data: {},
method: 'GET',
// OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
// header: {}, // 設置請求的 header
success: function(res){
// success
},
fail: function() {
// fail
},
complete: function() {
// complete
wx.hideNavigationBarLoading() //完成停止加載
wx.stopPullDownRefresh() //停止下拉刷新
}
})
頁面上拉觸發(fā)底事件說明：
首次進入頁面，如果頁面不滿一屏時會觸發(fā) onReachBottom ，應為只有用戶主動上拉才觸發(fā)；手指上拉，會觸發(fā)多次 onReachBottom，應為一次上拉，只觸發(fā)一次；所以在編程時需要將這兩點考慮在內(nèi)。
onReachBottom() {
// 沒有到達最后一頁，就加載數(shù)據(jù)
if (!this.data.lastPages) {
let page = this.data.pages + 1; // 下一頁
this.data.pages = page; // 更新頁碼
this.showMoreLoading();
// 渲染數(shù)據(jù)
this.renderOrderList(page, this.data.orderID); // orderStatus 只有訂單這里有用
}
},
這么多吧，好困，睡覺~~~
[](http://www.itdecent.cn/u/a6116675f9e3)