CanisMinor WxApp 2.0

阅读难度:★★★☆☆

技能要求:小程序开发、Taro

字数:700字

阅读时长:3分钟

作者:ML06-CanisMinor

这是社区ML06-CanisMinor的小程序作品,

CanisMinor的斜杆:

UI/UX Desinger / FE Developer / 产品经理 / 设计管理

mixlab也曾经访谈过他在《关于【科技中的设计师】,这可能是最走心的一篇文章》。

本文是他的开源项目的重构记录:

Taro + Dva 小程序重构记录

--------------

以下为正文:

随着前几天的个网 2.0 改版,因为重构了前端和后端导致之前的微信小程序使用的很多旧接口已不再维护,所以抽了 2 天时间把微信小程序从头到尾连 UI 到框架都重写了一遍(? 设计师开发的好处就是可以不画设计稿直接开写...)。年初找类 React 框架的时候,只发现了食之无味弃之可惜的 weact,但是繁琐的编译流程和相对糟糕的开发体验最终没有列入 1.0 的选择范围,但这次在选框架的时候 Taro 就冒了出来 ?。

Taro 是由京东·凹凸实验室团队开发,语法规则基于 React 规范,它采用与 React 一致的组件化思想,组件生命周期与 React 保持一致,同时在书写体验上也尽量与 React 类似,支持使用 JSX 语法,让代码具有更丰富的表现力,必须再在 js / wxss / wxml / json 文件中来回切换。同时也拥有了更优美的命名规范和项目结构,微信文档中的各种命名规范 ( 驼峰、小写中划线、小写连写 ),惨不忍睹 ?。

作为一个 Reacter,那么用 Taro 来开发项目的简直可以用丝滑柔顺来形容,正如 Taro 自己所说的,只需要写一个版本的代码,就可以编译生成 H5、微信小程序以及 RN 的代码,在效率上确实会有所提升。但是如果是没有写过 react 项目的,那么可能最开始还是有学习成本。

代码示例

import Taro, { Component } from "@tarojs/taro";

import { View, Button } from "@tarojs/components";

import { connect } from "@tarojs/redux";

import "./index.scss";

@connect(({ home, loading }) => ({
  ...home,
  loading: loading.effects["home/get"]}))

export default class extends Component {
  constructor() {
    super(...arguments);
    this.state = {
      title: "首页",
      list: [1, 2, 3]
    };
  }

  config = {
    navigationBarTitleText: "Home"
  };

  componentWillMount() {}

  componentDidMount = () => {
    this.props.dispatch(action("home/get"));
  };

  componentWillUpdate(nextProps, nextState) {}

  componentDidUpdate(prevProps, prevState) {}

  shouldComponentUpdate(nextProps, nextState) {
    return true;
  }

  onShareAppMessage = () => {
    return {
      title: "Home",
      path: "routes/home/index"
    };
  };

  onClick = str => {
    // dosth
  };

  render() {
    return (
      <View className="index">
        <View className="title">{this.state.title}</View>
        <View className="content">
          {this.state.list.map(item => (
            <View className="item">{item}</View>
          ))}
          <Button className="add" onClick={this.onClick.bind(this, "str")}>
            添加         
         </Button>
        </View>
      </View>
    );
  }}

Intro

  • 支持使用 npm / yarn 安装管理第三方依赖。
  • 支持使用 ES7 / ES8 甚至更加新的 ES 规范,一切都可自行配置。
  • 使用 prettier 进行代码格式管理。
  • 支持使用 CSS 预编译器,如 SASS / LESS / postCSS 等。
  • 支持使用 Dva / Redux 进行状态管理。
  • 小程序 API优化,异步 API Promise 化等等。
  • 使用 remarkable 提供完整 markdown 解析方案。
  • 所有外链自动转换为 Qrcode 并将连接复制到剪切板。
  • 因为个人开发者不支持 video 也自动转为 Qrcode

Preview

Extra

Dev

Github Repo: https://github.com/canisminor1990/canisminor-wxapp

使用 npm 或者 yarn 全局安装

$ npm install -g @tarojs/cli
# or

$ yarn global add @tarojs/cli

使用 npm 或者 yarn 安装依赖

$ npm install

# or

$ yarn

启动 / 编译小程序

# dev + watch

$ yarn start
# build + opt

$ yarn build

使用小程序开发工具打开 dist 目录

项目结构

+ src
  + components
    + Card
      - index.js
      - index.scss
    ...
  + models
    - hola.js
    ...
  + routes
    + hola
      - index.js
      - index.scss
    ...
  + styles
    - var.scss
    ...
  + utils
    - request.js
    ...
  - app.js
  - dva.js
  - index.scss
  - index.html
+ public
  - assets.png
  ...
- project.config.json
- package.json

Link

GITHUB地址:

https://github.com/canisminor1990/canisminor-wxapp

点击阅读原文直达。

原文发布于微信公众号 - 无界社区mixlab(Design-AI-Lab)

原文发表时间:2018-09-06

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

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏鹅厂优文

开发效率太低?您可能没看这篇文章

还记得刚参加工作的时候, 有位开发的同事软件使用效率奇高. 我曾亲眼目睹他在几秒之内打开开发软件, 优雅地调出隐藏的功能, 输入数据输出结果的过程行云流水, 一...

78120
来自专栏开源项目

没想到公司新来小白竟然做了这样的事……

13350
来自专栏腾讯Bugly的专栏

《客厅TV-APP首页瀑布流后台猫腻细窥》

1、项目概况 横版式已经持续使用了约2年,内容排布、主题细分、露出效率、操作便利等方面都有一些不足。而瀑布流则能很好的解决这些不足,在业界已经是一种通用的做法。...

564100
来自专栏程序员的知识天地

Web 开发人员的文档生成工具【推荐】

工欲善其事必先利其器,在此给 Web 开发人员推荐几款优秀的开源文档生成工具,希望能对大家有所帮助。

41020
来自专栏知晓程序

微信,我小鸡忍你很久了…… | 开发

20650
来自专栏编程

《6大爬虫利器,轻松搞定爬虫》

工欲善其事必先利其器,Python之所以流行在于她有非常丰富的第三方包,无论是Web框架还是机器学习框架、抑或是爬虫框架,多得让人眼花缭乱,这给了开发者极大的选...

24380
来自专栏糊一笑

Taro开发微信小程序之初体验

57820
来自专栏知晓程序

只要 5 分钟,让你立刻拥有自己的小程序 | 知晓云

Hello,各位知晓程序的读者们,我是犯迷糊的小羊。目前是 ifanr 的一只前端攻城狮,同时也是知晓云团队的一员。

21930
来自专栏用户2442861的专栏

必不可少的Firefox插件

Adblock Plus 去广告,包括youku的开头广告 All-in-One Sidebar 最大的好处就是省去书签栏 NoSquint :用firefo...

78410
来自专栏JarvanMo的IT专栏

Fluwx:让在Flutter中使用微信SDK成为可能

之前有了解的小伙伴可能已经看过Fluwx的一篇文章,不过那个时候Fluwx还是不太成熟。现在Fluwx的主体功能已经过成了。如果你正在或想开发一个Flutter...

2.2K20

扫码关注云+社区

领取腾讯云代金券