canisminor wxapp

CanisMinor WxApp 2.0

В версии личной сети 2.0, выпущенной несколько дней назад, из-за реконструкции внешнего и внутреннего интерфейса многие старые интерфейсы, используемые предыдущим апплетом WeChat, больше не поддерживаются, поэтому я потратил 2 дня, чтобы подключить апплет WeChat к пользовательскому интерфейсу. от начала до конца. Переписано всё вплоть до фреймворка (? Преимущество дизайнерской разработки в том, что можно начать писать напрямую, не рисуя эскизный проект...). Когда я в начале года искал React-подобный фреймворк, то нашел только Weact, который был безвкусным и от него было жалко отказываться. Однако громоздкий процесс компиляции и относительно плохой опыт разработки не вошли в круг выбора. 1.0, но на этот раз при выборе фреймворка было выбрано Taro Out?.

Taro был разработан командой JD·Above Lab. Правила синтаксиса основаны на спецификации React. В нем принята идея компонентизации, соответствующая React. В то же время опыт написания аналогичен. максимально React и поддерживает использование синтаксиса JSX, что делает код более выразительным без необходимости переключаться между файлами js/wxss/wxml/json. В то же время у него более красивое соглашение об именах и структура проекта. Различные соглашения об именах в документах WeChat (верблюжий регистр, подчеркивание строчными буквами, непрерывное написание строчными буквами) ужасны?

Как Reacter , использование 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 для управления форматом кода.
• Поддерживает использование прекомпиляторов CSS , таких как SASS / LESS / postCSS и т. д.
• Поддерживает управление состоянием с помощью 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

Связь

• Таро:
  • Репо
  • документ
• WxApp:
  • рамка
  • компоненты
  • API
  • Инструменты разработчика