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

Nero發表於2017-08-15
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!

相關文章