微信小程序?qū)嵺`教程：知乎專欄：頁面，功能及API分析
花了幾天時間體驗了微信小程序,借助知乎專欄的API 碼出一個項目，也深有體會 拿出來跟大家分享下
頁面
- 查看專欄首頁
- 查看專欄文章列表
- 查看文章詳情
- 編寫文章
- 功能
- 各種基本組件使用
- 微信上拉加載更多
- 本地預(yù)覽圖片API
- 本地上傳圖片API
- 彈窗 toast loading等
- 視圖模板使用
- 基于flexbox封裝庫的使用
- 事件使用catchtap bindtap
- promise集成
API分析
微信小程序渲染方式？
目前網(wǎng)上流傳2種論點
第一種: 認為微信基于react native 那套高性能jsbridge 造了一個輪子.所有的視圖渲染為 是原生解析繪制
第二種 認為微信創(chuàng)造了一個沙箱 webview環(huán)境， 渲染由 一個優(yōu)化過，定制過的webkit去做.
就我目前體驗來看 小程序極有可能為第二種 ，在我開發(fā)過程中 我是用了大量目前前端現(xiàn)有的經(jīng)驗 比如說 負外邊距居中，absolute 定位 relative,css3 animation等 這些在rn中應(yīng)該沒有或者實現(xiàn)不全面的.
微信小程序體驗？
-
離線cache
微信端的html5產(chǎn)品有個通病 靜態(tài)資源沒有離線cache 訪問慢 每次打開白屏等待，離線環(huán)境不能用.
小程序很好解決了這個問題 首次訪問時候會下載靜態(tài)資源包 解壓到本地 從本地打開文件訪問 剩下的數(shù)據(jù)請求 從服務(wù)器拉保證 和原生相同的體驗。
(增量更新目前未知)
2.轉(zhuǎn)場性能
眾所周知 html5模擬轉(zhuǎn)場動畫 在android機型中 會出現(xiàn)卡頓性能不佳. 微信小程序 采用原生界面做轉(zhuǎn)場動畫切換
3.布局性能
flexbox 當下布局的熱門規(guī)范 小程序正好實現(xiàn)了它 目前體驗了下 實現(xiàn)度挺高 簡單 復雜的布局也能去做.
4.mvvm
目前前端已經(jīng)進入了 組件式開發(fā) 和 數(shù)據(jù)驅(qū)動UI的時代 小程序自然也不例外
總體來說熟悉 vue 和 react 的同學 應(yīng)該能很容易上手 目前mvvm 完整實現(xiàn)度不是非常高 只能滿足簡單業(yè)務(wù)開發(fā)。
5.es6的擁抱
公測的版本 已經(jīng)可以使用es6開發(fā)了 小程序會使用bable進行編譯，但是小程序并未集成promise 需要我們自己去找對應(yīng)的polyfill
以上幾點保證微信小程序 開發(fā)體驗 和 用戶使用體驗.
最佳實踐
1. 網(wǎng)絡(luò)層promise封裝
export default class NetUtil {
static postJson(url,data){
return NetUtil.requestJson(url,data,"post");
}
static getJson(url,data){
return NetUtil.requestJson(url,data,"get");
}
static requestJson(url,data,method){
data = data || {};
return new Promise(function(resolve, reject) {
wx.request({
"method":method,
"url": url,
"data": data,
"header": {
'Content-Type': 'application/json'
},
success: function(res) {
resolve(res);
},
fail : function(err){
reject(err);
}
})
});
}
}
使用的時候:
//獲得文章詳情
API.getPostDetailBySlug(this.query.slug)
.then((res)=>{
//業(yè)務(wù)處理
});
2. 布局層flexbox 封裝
為了方便使用flexbox布局，對常用布局封裝成class 方便使用.
https://github.com/sherlock221/zhihuZhuanlan/blob/master/utils/flex.wxss
這樣的網(wǎng)格也是支持的:
3. 上拉加載更多
這個地方 很簡單 微信已經(jīng)幫我們封裝好了 不需要我們自己判斷 onReachBottom 為觸底觸發(fā)的事件
1.在當前頁面page注冊此方法函數(shù) 2.聲明兩個狀態(tài)isLoadmore和isEnd 代表 正在加載更多 和 加載完成 3.在onReachBottom 做判斷 if(!this.data.isEnd && !this.data.isLoadMore) 4.返回的業(yè)務(wù)接口里面控制顯示
Page({
data: {
commentList : [],
isLoadMore : false,
isEnd : false
},
onReachBottom : function(){
//加載更多
if(!this.data.isEnd && !this.data.isLoadMore){
this.loadComment();
}
}
});
loadComment 為業(yè)務(wù)接口拉取數(shù)據(jù)
loadComment : function(){
this.setData({
isLoadMore : true
});
//獲得文章評論 API.getPostCommentsBySlug(this.query.slug,Config.POST_DETAIL.COMMENT.LIMIT,offset)
.then((res)=>{
console.log("res- POST>",res);
if(res.data.length <=0){
this.setData({
isLoadMore : false,
isEnd : true
});
return;
}
else{
this.setData({
commentList : this.data.commentList.concat(res.data)
isLoadMore : false
});
}
});
}
view視圖層
<view class="loading-more" >
<image wx-if="{{isLoadMore}}" src="../../imgs/loading_48.png" class="loading-img ani-loading" />
<text class="loading-more-end-text" wx-if="{{isEnd}}">加載完成</text>
</view>
是不是很簡單，同樣的上拉刷新官方也封裝了 具體文檔.
微信小程序限制 2016.11.10
1.服務(wù)端須為https 安全接口需要在微信后臺配置
2.程序包大小為1m 超出報錯
3.不完全的 component
目前只能使用template抽象view層 不能完整抽離組件
4.不支持npm模塊 希望開放
5.app bar上面 無法定制右側(cè)按鈕
