花了(le)幾天時間體(ti)驗了(le)微信小程序,借助知(zhi)乎專欄的API 碼出(chu)一個項目，也深有體(ti)會(hui) 拿(na)出(chu)來跟大家(jia)分享下

頁面

1. 查看專欄首頁
2. 查看專欄文章列表
3. 查看文章詳情
4. 編寫文章
5. 功能

1. 各種基本組件使用
2. 微信上拉加載更多
3. 本地預覽圖片API
4. 本地上傳圖片API
5. 彈窗 toast loading等
6. 視圖模板使用
7. 基于flexbox封裝庫的使用
8. 事件使用catchtap bindtap
9. promise集成

API分析

微信小程序渲染方式？

目前網上(shang)流傳(chuan)2種論點

第(di)一種: 認(ren)為微信基于(yu)react native 那(nei)套高(gao)性能jsbridge 造了一個輪子.所(suo)有的(de)視圖渲染(ran)為 是原生解析繪制

第(di)二種 認為(wei)微信(xin)創造了一(yi)個沙箱 webview環境(jing)， 渲(xuan)染由 一(yi)個優(you)化過，定制過的webkit去做.

就我目前體驗來看 小程(cheng)序極有(you)可(ke)能(neng)為第二種 ，在(zai)我開發過程(cheng)中 我是用了大量目前前端現有(you)的(de)經(jing)驗 比如說 負外邊距居中，absolute 定位 relative,css3 animation等 這些在(zai)rn中應該沒有(you)或者實現不全面的(de).

微信小程序體驗？

1. 離線cache
   微信端的html5產品有個通病 靜態資源沒有離線cache 訪問慢 每次打開白屏等待，離線環境不能用.
   小程序很好解決了這個問題 首次訪問時候會下載靜態資源包 解壓到本地 從本地打開文件訪問 剩下的數據請求 從服務器拉保證 和原生相同的體驗。
   (增量更新目前未知)

      2.轉場性能
眾所(suo)周知 html5模(mo)擬轉(zhuan)場動畫(hua) 在(zai)android機型中 會出現(xian)卡(ka)頓性能(neng)不(bu)佳. 微信小程序 采用(yong)原生界面做轉(zhuan)場動畫(hua)切換

      3.布局性能
flexbox 當下布(bu)(bu)局(ju)的熱門規范 小程(cheng)序(xu)正好實現(xian)了它 目前體驗了下 實現(xian)度挺高(gao) 簡單(dan) 復(fu)雜的布(bu)(bu)局(ju)也能去做(zuo).

     4.mvvm
目前前端已經進入了 組件式開發 和 數據驅動UI的時代 小程序自然也不例外
總體(ti)來說熟(shu)悉 vue 和 react 的同學 應該能很容易(yi)上手 目前mvvm 完整實現度不是非常高(gao) 只能滿足簡單(dan)業務開發。

     5.es6的擁抱
公測(ce)的版本 已經(jing)可(ke)以使用es6開發了(le) 小(xiao)程序會(hui)使用bable進行編(bian)譯，但是小(xiao)程序并(bing)未集成promise 需(xu)要我們(men)自(zi)己去找對應的polyfill

以上幾點保證微信(xin)小程序 開發體驗 和 用(yong)戶使用(yong)體驗.

最佳實踐

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 方便使用.
//github.com/sherlock221/zhihuZhuanlan/blob/master/utils/flex.wxss

<view class="fx-row fx-row-center fx-row-space-between"> <text class="cover-util-left">小明·6個月前</text> <text class="cover-util-right">300贊·200評論</text> </view>

<view class="fx-row fx-row-center " wx:for="{{postList}}" wx:key="{{index}}"> <image mode="aspectFill" class="column-head" src="{{item.image_url}}"></image> <view class="fx"> <text>標題</text> <text>描述</text> </view> <view class="column-enter fx-col-center">{{item.column.name}}</view> </view>

這樣的網(wang)格也是支持的:

3. 上拉加載更多

這(zhe)個地方 很(hen)簡單 微信已經幫我們封裝(zhuang)好了 不需要我們自(zi)己判斷 onReachBottom 為(wei)觸(chu)底觸(chu)發的事件

1.在(zai)(zai)當前頁面page注冊此(ci)方法函數(shu) 2.聲明兩個狀(zhuang)態(tai)isLoadmore和isEnd 代表(biao) 正在(zai)(zai)加(jia)載更多 和 加(jia)載完成 3.在(zai)(zai)onReachBottom 做判斷 if(!this.data.isEnd && !this.data.isLoadMore) 4.返回(hui)的業務接口里面控制顯示

  Page({
  data: {
    commentList : [],
    isLoadMore : false,
    isEnd : false
  },
onReachBottom : function(){
       //加載更多
      if(!this.data.isEnd && !this.data.isLoadMore){
          this.loadComment();
      }
  }
  });

loadComment 為業務接口拉取數(shu)據

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視(shi)圖層

    <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>

 是(shi)不(bu)是(shi)很簡單，同樣的(de)上拉刷新官方(fang)也(ye)封裝了 具體文檔.

微信小程序限制 2016.11.10

1.服務端須為https 安全接口需要在微信后臺配置
2.程序包大小為1m 超出報錯
3.不完全的 component
目前只能使用template抽象view層 不能完整抽離組件
4.不支持npm模塊 希望開放
5.app bar上(shang)面 無法定(ding)制右側按(an)鈕(niu)