专栏首页IT米粉weui-react项目实战新心得

weui-react项目实战新心得

weui-react简介

weui是微信官方制作的一个基础样式UI库,打造与原生微信同样的视觉和交互体验,整个UI库包括网页版和小程序版,网页版包括传统的javascript版和react版本。 个人对react的偏爱超过传统js版本,就用了react版本做为自己的核心框架。 weui-react 官网:点击这里

背景介绍

计划做一个基于图书交换平台,大家可以通过平台发布自己的闲置书籍,如有人愿意通过自己的闲置书籍进行交换,即可达成交易。 作为一个后端的开发人员,想做一些可以上线运营的项目,没有好的前端配合是很难完成的。现在越来越多的开源UI可以使用,基本上能够上手即用。 为了便于开发,把精力更多的放在业务和后端,对前端的技术栈进行了选择,基于微信的项目,我选择这样的核心框架: 基础框架:react UI框架:weui-react 构建工具: webpack 路由工具: react-router

使用心得

具体的入门使用方法我就不介绍了,很简单,看官方文档。其实,现在的前端框架使用都是很简单的,基本都是npm install 、然后就是import 搞定,这是前端这些非常明显的进步。

升级到ES6

weui-react使用的前提是对react有一个基本认识,weui-react使用的是es6的语法,如果大家还在使用es5,依然是可以兼容的,但还是强烈建议大家还是切换到es6,这个是趋势,真的比es5的语法好很多,对于我们这种后端开发人员,es6的语法还是感觉很亲切的。

多看官方示例,文档基本没什么意义

weui的官方文档,相比开放平台的文档,还是有不少差距的,单是好在weui本身就是一个很简答的框架,使用起来也没有太大的问题,主要还是通过示例去了解使用方法,具体的文档说明,基本可以忽略。

使用wepack提升工作效率

使用时,强烈建议以webpack作为构建工具,虽然入门需要点时间,但是熟悉后真的是事半功倍。

react-router

单页面开发的时候,都会有很难点,就是页面间的路由,react还是推荐使用react-router,新旧版本的使用还是有些差别,建议直接用最新版本,虽然资料少了点,但是英文文档还是挺清晰的。这里可能要多换点时间调试。

界面预览

最后

代码地址:https://github.com/itmifen/bookdrift 现在还在做后端接口的开发,逐渐会完成前后端的代码,前后端的代码都会全部开源。欢迎fork。


本文分享自微信公众号 - IT米粉(itmifen),作者:IT米粉

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2018-04-01

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • 打造属于自己的博客app——基于react native和博客园接口

    关注react native这个技术很久了,去年就做了一个简单的Demo,最近有时间,重新了解了一下react native的现状,发现已经有很大的进步,现在完...

    itmifen
  • React Native 常见问题

    应该是最近有进行升级导致,0.29之前的版本文件是MainActivity.java,0.29之后是两个文件MainActivity.java 和MainApp...

    itmifen
  • MQ(消息队列)常见的应用场景解析

    提高系统性能首先考虑的是数据库的优化,之前一篇文章《数据库的使用你可能忽略了这些》中有提到过开发中,针对数据库需要注意的事项。但是数据库因为历史原因,横向扩展是...

    itmifen
  • 如何处理一个未知的BUG

    总有那么一些Bug让你切实的感觉到了自己知识的局限,让你对未知感到了恐惧亦或是愤怒

    lpe234
  • 实现create-osdoc-app脚手架

    好久没更新了,最近一直忙于业务开发,没有多少时间学习自己的东西,抽着某天晚上的功夫写了一个脚手架,其实就是一个简单的node脚本。

    w候人兮猗
  • 构建用于生产的React静态化单页面服务 原

    React 作为一项热门的前端开发技术,现在使用它的团队越来越多。之前也介绍了react 的所有的特性,但是仅仅了解怎么开发 react 只走了万里长征的第一步...

    随风溜达的向日葵
  • GAN秒变肖像画!清华刘永进提出APDrawingGAN ,CVPR Oral(附微信小程序)

    肖像画是一种独特的艺术形式,通常使用一组稀疏的连续图形元素如线条来捕捉一个人的外表特征。

    新智元
  • React 项目中使用 highstocks

    highstocks 是一个功能强大且丰富的股票资讯类图表的库,其具有代表意义的项目还有 highcharts 和 highmaps。我最近在做一个股票资讯类的...

    我与梦想有个约会
  • 为什么要把系统拆分成分布式的,为啥要用Dubbo?

    从这个问题开始就进行分布式系统环节了,好多同学给我反馈说,现在出去分布式成标配了,没有哪个公司不问问你分布式的事儿。

    良月柒
  • 人工智能时代,这8种技术逐渐在改变我们的生活

    谁也不能否认服务是人类实施的工作。但是技术可以增强服务,甚至可以接管某些任务。特别是促进数字化转型的技术,可以对服务的交付方式和客户体验产生重大影响。

    一墨编程学习

扫码关注云+社区

领取腾讯云代金券