canisminor wxapp

CanisMinor WxApp 2.0

With the personal network 2.0 revision a few days ago, due to the reconstruction of the front end and back end, many old interfaces used by the previous WeChat applet are no longer maintained, so I spent 2 days to connect the WeChat applet to the UI from beginning to end. Everything down to the framework has been rewritten (? The advantage of designer development is that you can start writing directly without drawing a design draft...). When I was looking for a React-like framework at the beginning of the year, I only found Weact, which was tasteless and a pity to abandon. However, the cumbersome compilation process and relatively poor development experience were not included in the selection range of 1.0, but this time when choosing a framework, Taro was Came out?.

Taro was developed by the JD·Above Lab team. The syntax rules are based on the React specification. It adopts the componentization idea consistent with React. The component life cycle is consistent with React. At the same time, the writing experience is as similar as React as much as possible, and supports the use of JSX syntax. , making the code more expressive without having to switch back and forth between js/wxss/wxml/json files. At the same time, it also has a more beautiful naming convention and project structure. The various naming conventions in WeChat documents (camel case, lowercase underscore, lowercase continuous writing) are terrible?

As a Reacter , using Taro to develop projects can be described as silky and smooth. As Taro himself said, you only need to write one version of the code to compile and generate H5, WeChat applet and RN code. Efficiency will indeed be improved. But if you have never written a react project, there may still be learning costs at the beginning.

code example

 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

• Supports using npm / yarn to install and manage third-party dependencies.
• Supports the use of ES7 / ES8 or even newer ES specifications, everything is configurable.
• Use prettier for code format management.
• Supports the use CSS precompilers such as SASS / LESS / postCSS , etc.
• Supports state management using Dva / Redux .
• Mini program API optimization, asynchronous API Promise , etc.
• Use remarkable to provide a complete markdown parsing solution.
• All external links are automatically converted to Qrcode and the links are copied to the clipboard.

Preview

Extra

Dev

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

Install globally using npm or yarn

$ npm install -g @tarojs/cli
# or
$ yarn global add @tarojs/cli

Use npm or yarn to install dependencies

$ npm install
# or
$ yarn

Start/compile applet

 # dev + watch
$ yarn start

# build + opt
$ yarn build

Use the mini program development tool to open the dist directory

Project structure

 + 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

• Taro:
  • Repo
  • document
• WxApp:
  • frame
  • components
  • API
  • Developer Tools