Taro template

Install dependencies

$ yarn
或
$ cnpm install
或
npm install
Copy the code

The directory structure

│ ├─ Config # ├─ SRC │ ├─ API # ├─ Assets # Local │ ├─ Temporary │ ├─ Icon # Static Icon │ │ ├ ─ ─ tabBar # tabBarIcon │ │ └ ─ ─ parser # applet rich text resolution plug-in │ ├ ─ ─ components # business common component │ ├ ─ ─ pages page # business entrance │ ├ ─ ─ PagesA # A │ ├─ pagesB # B │ ├─ pagesC # C │ ├─ pagesD # D │ ├─ Service # ├─ base │ ├─ ├─ ├─ ├─ class # ├─ ├─ class # ├─ class # ├─ class # ├─ class # ├─ class # ├─ class # ├─ class # ├─ class # ├─ class # ├─ class # ├─ class # │ │ ├ ─ ─ common. # SCSS global general style │ │ └ ─ ─ the variables. The SCSS # custom theme │ ├ ─ ─ utils # tool library │ │ ├ ─ ─ index. The ts # tool methods │ │ └ ─ ─ pay. Ts # │ ├─ ├─ app.config.ts # ├─ app.tsx # App ├─ app.scSS # ├─ download.jsonCopy the code

data

Taro document Taro Ui materials market https://taro-ext.jd.com https://taro-ui.jd.com https://taro-docs.jd.com/taro/docs/README applet rich text parser https://jin-yufeng.gitee.io/mp-html/#/overview/quickstartCopy the code

introduce

• Original intention of creation – for more convenient and fast development

• Development template based on Taro applets

• Currently compatible with wechat, other small programs can also, but need to modify the use

• Technology stack: Taro(version 3.0 + (author Taro version 3.2.13)) + hooks + MOBx

• Built-in Mobx, TaroUI, powerful small program rich text parser author make version slightly older a little bit no special features recommended use of the latest

• Using mobx

  1. Create an example test.ts file under/SRC /store

  import { observable } from 'mobx'
  
      const testStore = observable({
          counter: 0.counterStore() {
              this.counter++
          },
          increment() {
              this.counter++
          },
          decrement() {
              this.counter--
          },
          incrementAsync() {
              setTimeout(() = > {
              this.counter++
              }, 1000)}})export default testStore
  Copy the code

  2. Import files in app.tsx

      import testStore from './store/test'
      const store = {
          testStore
      }
  Copy the code

  3. Use in pages

      import { observer, inject } from 'mobx-react'
      const Index: React.FC = (props:any) = > {
          // mobx
          const { testStore } = props.store
  
          return (
              <>
                  <Button onClick={() = > testStore.increment() }>+</Button>
                  <Button onClick={() = > testStore.decrement() }>-</Button>
                  <Button onClick={() = > testStore.incrementAsync() }>Add Async</Button>
                  <Text>{ testStore.counter }</Text>
              </>)}export default inject('store')(observer(Index))
  Copy the code

• For an example of parsing rich text content, see index.tsx.

  1. Copy the code package (dist/ Platform) of the corresponding platform in the source code to assets directory, and customize the name of the parser used here

  2. Add to the JSON file where you want to use the page

      {
          "usingComponents": {
              "parser": ".. /.. /assets/parser/parser"}}Copy the code

  3. In the need to use the pagetsxAdd to file

      // Define tags to block syntax errors
      declare global {
          namespace JSX {
              interface IntrinsicElements {
                  parser: any
              }
          }
      }
      // Set the tag style in the rich text plug-in
      const tagStyle = {
          p: 'font-size:20px; color: red; '
      }
      const Index: React.FC = (props:any) = > {
          // mobx
          const { testStore } = props.store
          // Rich text content
          const [isHtml,setIsHtml] = useState<any>('
   tag p tag p tag p tag p tag 
  < SPAN > SPAN tag 
           
  
            div tag 
           
  ')
  
          return (
              <>
                  <parser html={ isHtml } tagStyle={ tagStyle} / >
              </>)}export default Index
  Copy the code

• Growth is the power of life, come on new generation of migrant workers!

• Template source code address