1. Environment preparation

Install the Node environment from the Node website: http://nodejs.cn/ # Set taobao mirror: NPM config set registry https://registry.npm.taobao.org global installation @ # tarojs/cli toolkit NPM I - g @ tarojs/cliCopy the code

2. Initialize the project

Select the project directory to initialize the Taro project in the current project directory

Taro Init XXX (Project name)Copy the code

3. Develop alipay mini program

3.1 How do I Run it?

Open the initialized project and look at the package.json file to find scripts

  "scripts": {
    "build:weapp": "taro build --type weapp",
    "build:swan": "taro build --type swan",
    "build:alipay": "taro build --type alipay",
    "build:tt": "taro build --type tt",
    "build:h5": "taro build --type h5",
    "build:rn": "taro build --type rn",
    "build:qq": "taro build --type qq",
    "build:quickapp": "taro build --type quickapp",
    "dev:weapp": "npm run build:weapp -- --watch",
    "dev:swan": "npm run build:swan -- --watch",
    "dev:alipay": "npm run build:alipay -- --watch",
    "dev:tt": "npm run build:tt -- --watch",
    "dev:h5": "npm run build:h5 -- --watch",
    "dev:rn": "npm run build:rn -- --watch",
    "dev:qq": "npm run build:qq -- --watch",
    "dev:quickapp": "npm run build:quickapp -- --watch"
  }
Copy the code

We are running alipay small program, so execute NPM run dev: Alipay, but you will find that the local is up, so how can I debug while developing locally?

At this time you want to think, if I develop alipay small procedures need to run on Alipay? How does that simulate to run on pay treasure?

At this point, if you have some experience developing small programs, you will know that there is such a thing as a small program developer platform.

Pay treasure to open platform address is: openhome.alipay.com/platform/ho…

Click the link to enter, register a login after the operation, you may not know how to do again, I successfully logged in and I debug small program have any relevance? Ha ha, this association can be big, you want to develop Alipay small program, you need to use the official website to provide development tools, our development code can be debug in the development tool.

Development tools download address: opendocs.alipay.com/mini/ide/do…

After coming out, open the dist folder in our project and start developing happily!!

4. Introduce taro-UI component library

4.1 installation taro – the UI

yarn add taro-ui
Copy the code

4.2 Introducing CSS styles

Go to app.tsx and import in the header

import 'taro-ui/dist/style/index.scss';
Copy the code

5. Component writing

I mainly use HOOK writing

const Home = () => {
  return (
    <View className=''>
      <View className='home-title-bg'></View>
    </View>
  )
};

export default inject()(observer(Home));
Copy the code

View tags in applets are similar to div and P tags in PC development. We’d better pay attention to naming conventions in the development process. I prefer the NAMESPACE CSS notation when writing

6. Request encapsulation

In case of incompatibility with H5, only mini-program-AXIos needs to be configured

Yarn User installation: yarn add mini-program-axios

NPM user install: NPM I mini-program-axios -d

Also add node_modules/mini-types to the end of typeRoots in tsconfig.json

Add to the utils/request.ts file

// Encapsulate the unified request method import miniAxios from 'mini-program-axios'; const request = miniAxios.create({ timeout: 30000, }); Request. The interceptors. Request. Use ((config) = > config, error = > {throw new error (' request exceptions); }); Request. The interceptors. Responce. Use (response = > the response, the error = > {throw new error (' abnormal response '); }); export default { get: (url, params) => { return new Promise((resolve) => { request({ url, method: 'GET', data: params }).then(resp => resolve(resp)); }); }, post: (url, params) => { return new Promise((resolve) => { request({ url, method: 'POST', data: params }).then(resp => resolve(resp)); }); }}Copy the code

7. Attach custom scaffolding code

Scaffold entrance