分享我用cnode社區api作微信小應用的入門過程

首先感謝cnode社區提供的api，本次實現了簡單的cnode社區應用號製做。 實現了數據的讀取、展現， 實現了簡單的佈局， 實現了下一頁功能。

下面就說說我作這個的過程，不足之處，請多多指教，只願爲進步。

1.建立項目

首先，在官網下載工具，下載地址 個人是選擇mac版本0.9.092300。

而後跟着官方的簡版教程 建立一個項目。

注：如今官方的工具支持無appid建立項目。

1.打開開發者工具，選擇「添加項目」

2.選擇無appid，填寫地址，建立項目

3.建立成功，看到默認的Demo項目頁面

2.配置

默認的項目裏已經沒有關於tabBar的配置信息，因此爲了學習，我把這個配置進行了修改。

首先關於配置的說明一樣來自於官方

注意：官方的代碼有些字段是不同的，當心被坑。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  },
  "tabBar":{
    "list": [{
      "pagePath": "pages/index/index",
      "text": "首頁"
    }, {
      "pagePath": "pages/logs/logs",
      "text": "日誌"
    }]
  }
}

增長了tabBar, 查看調試 看界面是如此的簡陋，爲此針對tabBar參考官方說明進行了簡單的美化。

"tabBar":{
    "color":"#272636",
    "selectedColor":"#80bd01",
    "backgroundColor":"#fff",
    "borderStyle":"white",
    "list":[{
      "pagePath":"pages/index/index",
      "text":"首頁",
      "iconPath":"images/tabBar/my.png",
      "selectedIconPath":"images/tabBar/my_hl.png"
    },{
      "pagePath":"pages/index/index",
      "text":"個人",
      "iconPath":"images/tabBar/list.png",
      "selectedIconPath":"images/tabBar/list_hl.png"
    }]
  }

效果如圖 最後根據文檔，對默認頁面的窗口表現進行了修改

"window":{
    "backgroundTextStyle":"black",
    "backgroundColor":"#fff",
    "navigationBarBackgroundColor":"#000",
    "navigationBarTitleText":"CNODE 應用號版",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":"true"
  },

效果如圖 總體配置文件爲

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"black",
    "backgroundColor":"#fff",
    "navigationBarBackgroundColor":"#000",
    "navigationBarTitleText":"CNODE 應用號版",
    "navigationBarTextStyle":"white",
    "enablePullDownRefresh":"true"
  },
  "tabBar":{
    "color":"#272636",
    "selectedColor":"#80bd01",
    "backgroundColor":"#fff",
    "borderStyle":"white",
    "list":[{
      "pagePath":"pages/index/index",
      "text":"首頁",
      "iconPath":"images/tabBar/my.png",
      "selectedIconPath":"images/tabBar/my_hl.png"
    },{
      "pagePath":"pages/index/index",
      "text":"個人",
      "iconPath":"images/tabBar/list.png",
      "selectedIconPath":"images/tabBar/list_hl.png"
    }]
  }
}

3.製做首頁列表

根據官方要求，我在pages文件夾內建立了topics文件夾，並建立了對應了 topics.js、topics.wxml、topics.wxss 三個文件。

1.註冊頁面

首先在配置文件裏註冊這個topics,

"pages":[
    "pages/topics/topics",
    "pages/index/index",
    "pages/logs/logs"
  ],

而且制定tabBar點擊跳到對應的topics頁面

"tabBar":{
    "color":"#272636",
    "selectedColor":"#80bd01",
    "backgroundColor":"#fff",
    "borderStyle":"white",
    "list":[{
      "pagePath":"pages/topics/topics",
      "text":"首頁",
      "iconPath":"images/tabBar/my.png",
      "selectedIconPath":"images/tabBar/my_hl.png"
    },{
      "pagePath":"pages/index/index",
      "text":"個人",
      "iconPath":"images/tabBar/list.png",
      "selectedIconPath":"images/tabBar/list_hl.png"
    }]
  }

注意：我發現註冊頁面的順序會影響到默認顯示tabBar的順序，因此我把"pages/topics/topics"放到了"pages/index/index"的前面

而後編寫topics.js

Page({
  data: {
    title: '首頁列表'
  },
  onLoad: function () {
    console.log('onLoad by topics');
  }
});

以及topics.wxml文件

<view class="topics-main">
  測試首頁列表界面
</view>

和topics.wxss文件

.topics-main {
  background: #f60;
  height: 100%;
}

最後效果如圖

2.建立請求

根據文檔請求數據，在util文件夾內建立一個api.js文件，專門進行數據請求處理。

'use strict';
var HOST_URI = 'https://cnodejs.org/api/v1';

var GET_TOPICS = '/topics';
var GET_TOPIC_BY_ID = '/topic/';

function obj2uri (obj) {
    return Object.keys(obj).map(function (k) {
        return encodeURIComponent(k) + '=' + encodeURIComponent(obj[k]);
    }).join('&');
}

module.exports = {
    // 獲取列表數據
    getTopics: function (obj) {
        return HOST_URI + GET_TOPICS + '?' + obj2uri(obj);
    },
    // 獲取內容頁數據
    getTopicByID: function (id, obj) {
        return HOST_URI + GET_TOPIC_BY_ID + id + '?' + obj2uri(obj);
    }
};

修改topics.js

var Api = require('../../utils/api.js');

Page({
  data: {
    title: '首頁列表'
  },
  onLoad: function () {
    console.log('onLoad by topics');
    this.fetchData();// 獲取數據
  },
  fetchData: function (data) {
    // 處理參數
    if (!data) data = {};
    if (!data.page) data.page = 1;
    wx.request({
      url: Api.getTopics(data),
      success: function (res) {
        console.log(res);
      }
    });
  }
});

效果如圖 成功拿到了數據。

3.完善首頁列表

拿到了數據，也能修改界面，那麼就直接完善這個首頁吧

代碼就不放了，直接上圖 我認爲這裏值得說的大概只有loading、循環、傳參、下一頁和頁面跳轉了。

1.loading

<loading hidden="{{hidden}}">
    加載中...
  </loading>

在topics.wxml中寫官方提供的loading組件，根據在topics.js中對hidden值的修改，來觸發loading。

2.循環數據，展現列表

文檔提供了列表渲染

經過wx:for實現列表的渲染。

注意: 默認數組的當前項的下標變量名默認爲index，數組當前項的變量名默認爲item。

<block wx:for="{{postsList}}">
  <view class="posts-item" index="{{index}}" id="{{item.id}}" catchtap="redictDetail">
    <view class="author">
      <image class="author-avatar" src="{{item.author.avatar_url}}"></image>
      <view class="author-name">{{item.author.loginname}}</view>
      <view class="posts-tag hot" wx:if="{{item.top === true}}">置頂</view>
      <view class="posts-tag" wx:if="{{item.good === true}}">精華</view>
      <view class="posts-last-reply">{{item.last_reply_at}}</view>
    </view>
    <view class="posts-title">{{item.title}}</view>
    <view class="bar-info">
      <view class="bar-info-item">
        <image class="bar-info-item-icon" src="/images/icon/reply.png"></image>
        <view class="bar-info-item-number">{{item.reply_count}}</view>
      </view>
      <view class="bar-info-item">
        <image class="bar-info-item-icon" src="/images/icon/visit.png"></image>
        <view class="bar-info-item-number">{{item.visit_count}}</view>
      </view>
    </view>
  </view>
</block>

附上一個沒有樣式的列表展示

3.傳參，實現tab切換

根據cnode的api能夠知道經過tab不一樣的值，得到到不一樣標籤下的內容列表。

因此 在頁面的最上面 tab 欄中

<view class="top-bar">
    <view class="top-bar-item" id="all" catchtap="onTapTag">所有</view>
    <view class="top-bar-item" id="good" catchtap="onTapTag">精華</view>
    <view class="top-bar-item" id="share" catchtap="onTapTag">分享</view>
    <view class="top-bar-item" id="ask" catchtap="onTapTag">問答</view>
    <view class="top-bar-item" id="job" catchtap="onTapTag">招聘</view>
  </view>

將id進行定義，經過獲取id拿到對應的tab類型。

其中catchtap是事件綁定。

bind事件綁定不會阻止冒泡事件向上冒泡，catch事件綁定能夠阻止冒泡事件向上冒泡。

在topics.js獲取

onTapTag: function (e) {
    var self = this;
    var tab = e.currentTarget.id;
    // 這裏就能獲取到不一樣的tab值了
    self.setData({
      tab: tab
    });
    if (tab !== 'all') {
      this.fetchData({tab: tab});
    } else {
      this.fetchData();
    }
  },

4.下一頁的實現

根據文檔，組件的視圖容器中有scroll-view這個可滾動視圖區域。

注意：使用豎向滾動時，須要給<scroll-view/>一個固定高度。

<scroll-view class="posts-list" style="height:100%" scroll-y="true" bindscrolltolower="lower">
  <block wx:for="{{postsList}}">
    ...
  </block>
</scroll-view>

topics.js文件

lower: function (e) {
    var self = this;
    // 修改當前頁碼
    self.setData({
      page: self.data.page + 1
    });
    // 判斷當前頁的tab值 進行請求數據
    if (self.data.tab !== 'all') {
      this.fetchData({tab: self.data.tab, page: self.data.page});
    } else {
      this.fetchData({page: self.data.page});
    }
  }

5.跳頁的實現

在posts-item中已經進行了事件綁定。利用wx.navigateTo實現頁面的跳轉。

注意：一個應用同時只能打開5個頁面，當已經打開了5個頁面以後，wx.navigateTo不能正常打開新頁面。

redictDetail: function (e) {
  console.log('我要看詳情');
  var id = e.currentTarget.id,
      url = '../detail/detail?id=' + id;
      // 這裏的detail是須要建立對應的文件，以及頁面註冊的
  wx.navigateTo({
    url: url
  })
},

4.實現詳情頁

一樣的原理，建立detail文件，並註冊，獲取數據，並美化頁面。

5.總結

• 微信小應用頁面的腳本邏輯在是在JsCore中運行，JsCore是一個沒有窗口對象的環境，因此不能再腳本中使用window，也沒法在腳本中操做組件
• 一樣不能用jquery
• 也不能操做dom
• 部分標籤不支持，好比 h1-h6 會編譯報錯。
• 暫時沒找到解決富文本詳情頁顯示的辦法。
• 總體下來，感受開發簡單，限制不少。
• 寫過react的看這個確實比較簡單。

放上個人github地址 https://github.com/coolfishstudio/wechat-webapp-cnode

最後感謝：cnode社區和博卡君

附上 博卡君的教程

全球首個微信應用號開發教程！通宵吐血趕稿，每日更新！

博卡君的應用號（小程序）開發教程首發第二彈！（0923）

第三彈！全球首個微信應用號開發教程！通宵吐血趕稿，每日更新！

第四彈！全球首個微信應用號開發教程！通宵吐血趕稿，每日更新！