小程序初识--仿Vue.js中文论坛
本文始于个人博客：https://ghostdar.github.io/2017/08/15/%E5%B0%8F%E7%A8%8B%E5%BA%8F%E5%88%9D%E8%AF%86-%E4%BB%BFVue-js%E4%B8%AD%E6%96%87%E8%AE%BA%E5%9D%9B/
小程序的秉承着 “体验极简化”、“用完即走” 的理念应运而生。许久之前，我就对小程序的个人版的推出满怀期待，想做点小玩意儿体验一下小程序，而后又忙于工作，没有付诸行动，如今在找工作期间得闲，花了4天，基于Vue.js中文论坛提供的开发接口，开发了论坛的小程序版。
1. 主要功能：
- 论坛帖子查看、收藏
- 登陆发布新帖子
- 评论和消息管理
2. 目录结构
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
|
|——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 主页
.png)
3.2 文章详情
.png)
3.3 登陆
.png)
3.4 个人中心
.png)
3.5 发布文章
.png)
3.6 我的收藏
.png)
3.7 我的消息
.png)
4.总结
4.1 小程序的基本功能
- 小程序的文件类型：
|
1
2
3
4
|
js ---------- 主要逻辑
json -------- 项目配置文件，负责窗口颜色等等
wxml ------- 类似HTML文件
wxss ------- 类似CSS文件
|
- 创建一个页面：
在page文件夹下创建一个页面的文件夹，里面新建4个必要的基本文件，然后再app.json中配置路由：
|
1
2
3
4
5
6
7
8
9
10
11
|
{
"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请求：
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
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、用户的信息等。
操作本地缓存的方法有：
|
1
2
3
4
5
6
7
8
9
|
// 设置
wx.setStorage() //异步
wx.setStorageSync() //同步
// 获取
wx.getStorage() //异步
wx.getStorageSync() //同步
//清除
wx.clearStorage() //异步
wx.clearStorageSync() //同步
|
- 页面的生命周期的方法：
|
1
2
3
4
5
|
onLoad //页面加载
onReady //页面渲染完成
onShow //页面显示
onHide //页面隐藏
onUnload //页面卸载
|
4.2 未实现的功能
由于时间原因,以下2个功能尚未完成:
-
针对于某个特定用户的回复功能
-
点赞功能
4.3 有待优化的地方
-
文章的富文本解析
-
小程序的状态管理
4.4 个值得推荐的组件和库
- wxParse 富文本解析组件
- weui 微信官方UI库
最后
项目的github地址：https://github.com/Ghostdar/wechat-weapp-vueForum
欢迎 star!
