小程序初識--仿Vue.js中文論壇

小程序的秉承着 「體驗極簡化」、「用完即走」 的理念應運而生。許久以前，我就對小程序的我的版的推出滿懷期待，想作點小玩意兒體驗一下小程序，然後又忙於工做，沒有付諸行動，現在在找工做期間得閒，花了4天，基於Vue.js中文論壇提供的開發接口，開發了論壇的小程序版。

1. 主要功能：

• 論壇帖子查看、收藏
• 登錄發佈新帖子
• 評論和消息管理

2. 目錄結構

|——README.md          <= 項目介紹
|——app.js             <= 主要邏輯文件
|——app.json           <= 全局配置文件
|——app.wxss           <= 公共樣式文件 
|——component          <= 組件庫
|  |——timeTeanslate   <= 時間格式轉換組件
|  |——wxParse         <= 富文本解析組件
|  |——weui            <= weui樣式庫
|——pages              <= 頁面文件
|  |——detail
|  |——index           
|  |——user
|  |——api.js          <= 接口文件
|  |——const.js        <= 常量定義文件
|——static             <= 靜態資源
|  |——image

3. 效果演示

3.1 主頁

3.2 文章詳情

3.3 登錄

3.4 我的中心

3.5 發佈文章

3.6 個人收藏

3.7 個人消息

4.總結

4.1 小程序的基本功能

• 小程序的文件類型：

js ---------- 主要邏輯
json -------- 項目配置文件，負責窗口顏色等等
wxml ------- 相似HTML文件
wxss ------- 相似CSS文件

• 建立一個頁面：

在page文件夾下建立一個頁面的文件夾，裏面新建4個必要的基本文件，而後再app.json中配置路由：

{
  "pages":[
    "pages/index/index",
    "pages/detail/detail",
    "pages/user/user/user",
    "pages/user/login/login",
    "pages/user/message/message",
    "pages/user/collect/collect",
    "pages/user/newtopic/newtopic"
  ]
}

• 發起一個API請求：

wx.request({
      url: API.API.Post_mark_all,    // 請求url
      method: 'POST',                // 請求方式
      data: {
        'accesstoken': token         // 參數
      },
      success: function (res) {
        if (res.data.success) {
          wx.showToast({
            title: '標記成功',
            icon: 'success',
            duration: 1000
          })
          that.getMessage()
        }else {
          wx.showToast({
            title: res.data.error_msg,
            icon: 'success',
            duration: 1000
          })

• 本地緩存

因爲沒有相似Vuex的狀態管理工具，一些公用的數據保存在本地緩存中，例如登錄的狀態、accesstoken、用戶的信息等。
操做本地緩存的方法有：

// 設置
wx.setStorage()   //異步
wx.setStorageSync() //同步
// 獲取
wx.getStorage()   //異步
wx.getStorageSync() //同步
//清除
wx.clearStorage()   //異步
wx.clearStorageSync() //同步

• 頁面的生命週期的方法：

onLoad   //頁面加載
onReady  //頁面渲染完成
onShow   //頁面顯示
onHide   //頁面隱藏
onUnload  //頁面卸載

4.2 未實現的功能

因爲時間緣由,如下2個功能還沒有完成:

• 針對於某個特定用戶的回覆功能
• 點贊功能

4.3 有待優化的地方

• 文章的富文本解析
• 小程序的狀態管理

4.4 個值得推薦的組件和庫

• wxParse 富文本解析組件
• weui 微信官方UI庫

最後

項目的github地址：https://github.com/Ghostdar/wechat-weapp-vueForum

歡迎 star!