用taro写的cnode社区 求关注
发布于 11 天前 作者 zhangfan6989888 299 次浏览 来自 分享

项目介绍 项目链接

基于taro taro-ui构建的项目,目前兼容h5和微信小程序,样式自己设计,接口和数据来自于cnode社区

# 克隆项目
git clone https://github.com/zhangfan6644777/taro-cnode.git
  
# 安装依赖,或 npm i
yarn

# 运行小程序(微信 weapp)
npm run dev:weapp

# 运行 H5
npm run dev:h5

功能

  1.登录功能
  2.列表分页,滚动底部加载更多
  3.发帖,回复帖子
  4.查看消息
  5.个人中心

整体思路

1.在taro里面引入Redux,就是每个页面对应一个actions,constants,reducers,services,store, 主要由视图触发action 然后action 去dispatch对应页面的reducer,最后返回新的数据给对应的页面

  • Index主要是主页的列表信息,滚动底部加载更多
  • ArticleDetails对应文章内容页面详情,评论
  • Publish对应发布文章页面,默认是发布测试类型
  • Message对应账号的消息页面,包括已读消息和未读消息
  • Center对应账号的登录信息
  • Mytopic个人参与的文章,回复的文章

2.先做小程序,然后再去兼容H5,因为taro本来是以小程序为重心,再去兼容多端。

3.使用了taro-ui和taro原组件库混用的方式,自己去写更少的样式,在开发中达到更高的效率。如果是公司项目 对UI要求的比较严格,请使用taro原组件,然后自己去写样式

4.由于详情页面和评论返回的都是字符串html,这边针对h5和小程序分别使用了不用的处理方式,小程序自己将wxPrase封装成taro组件taro组件,如下

{process.env.TARO_ENV === 'weapp' ? <wemark desc={content}/> : ''}
{process.env.TARO_ENV === 'h5' ? <View dangerouslySetInnerHTML={{ __html: content }} /> : ''}

5.在开发中的一些注意点

其他说明

本项目代码没有做过多封装,方便阅读,如果有什么问题,可以提issue。

学习资源

taro taro-ui react redux jsNewbee

1 回复

有什么问题 还请各位大神指出

回到顶部