小程序初识--仿Vue.js中文论坛

Nero

小程序的秉承着 “体验极简化”、“用完即走” 的理念应运而生。许久之前,我就对小程序的个人版的推出满怀期待,想做点小玩意儿体验一下小程序,而后又忙于工作,没有付诸行动,如今在找工作期间得闲,花了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!

阅读 2.6k

前端搬砖之路
一个小前端,拥有大梦想。记录我的搬砖之路~

前端搬砖者。

3.2k 声望
2.5k 粉丝
0 条评论
你知道吗?

前端搬砖者。

3.2k 声望
2.5k 粉丝
文章目录
宣传栏