canisminor wxapp 다운로드 - canisminor wxapp 소스 코드 다운로드

canisminor wxapp

AI 소스 코드

v2.0.2

다운로드

캐니스마이너 WxApp 2.0

며칠 전 개인 네트워크 2.0 개정으로 프런트엔드와 백엔드 재구성으로 인해 이전 위챗 애플릿에서 사용하던 오래된 인터페이스가 더 이상 유지되지 않아 위챗 애플릿을 UI에 연결하는 데 2일이 걸렸습니다. 처음부터 끝까지 프레임워크까지 모두 다시 작성되었습니다(? 디자이너 개발의 장점은 디자인 초안을 그리지 않고도 바로 글쓰기를 시작할 수 있다는 점입니다...). 연초에 React같은 프레임워크를 찾던 중, 맛도 없고 버리기 아까운 Weact만 찾았습니다. 하지만 번거로운 컴파일 과정과 상대적으로 열악한 개발 경험은 선택 범위에 포함되지 않았습니다. 1.0인데 이번에 프레임워크를 선택할 때 Taro가 나왔나요?.

Taro는 JD·Above Lab 팀에 의해 개발되었습니다. 구문 규칙은 React와 일치하는 구성 요소화 아이디어를 채택했습니다. 동시에 구성 요소의 수명 주기도 React와 유사합니다. 가능한 한 많이 반응하고 JSX 구문 사용을 지원하여 js/wxss/wxml/json 파일 간에 전환할 필요 없이 코드를 더욱 표현력 있게 만듭니다. 동시에 WeChat 문서의 다양한 명명 규칙(카멜 케이스, 소문자 밑줄, 소문자 연속 쓰기)이 형편없죠?

Reacter 로서 Taro를 사용하여 프로젝트를 개발하는 것은 매끄럽고 원활하다고 설명할 수 있습니다. Taro 자신이 말했듯이 H5, WeChat 애플릿 및 RN 코드를 컴파일하고 생성하려면 한 가지 버전의 코드만 작성하면 됩니다. 하지만 리액트 프로젝트를 한번도 작성해 본 적이 없다면 처음에는 여전히 학습 비용이 발생할 수 있습니다.

코드 예

 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 >
    ) ;
  }
}

소개

npm / yarn 사용하여 타사 종속성을 설치하고 관리하도록 지원합니다.
ES7 / ES8 또는 최신 ES 사양의 사용을 지원하며 모든 것을 구성할 수 있습니다.
코드 형식 관리를 위해 prettier 사용하세요.
SASS / LESS / postCSS 등과 같은 CSS 사전 컴파일러 사용을 지원합니다.
Dva / Redux 사용한 상태 관리를 지원합니다.
미니 프로그램 API 최적화, 비동기 API Promise 등
remarkable 사용하여 완전한 markdown 구문 분석 솔루션을 제공하세요.
모든 외부 링크는 자동으로 Qrcode 로 변환되며 해당 링크는 클립보드에 복사됩니다.

시사

추가의

데브

Github 레포: 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