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