WeChat 미니 프로그램 개발의 효율성을 향상시키는 세부 단계를 가르쳐주세요.

WeChat 애플릿의 API 구현은 모든 측면을 고려해야 하므로 콜백 작성 방법이 계속 사용됩니다.

우리 모두 알고 있듯이 Callback-Hell은 전통적인 JS 구문의 역사적인 문제입니다. 그러나 결국 편리한 도구는 개발 효율성의 원천이므로 저자는 WeChat 애플릿 API의 현재 버전인 weapp을 간단하게 캡슐화했습니다.

동시에 WeChat 애플릿 프레임워크 자체는 상호 작용 및 UI 구현에 중점을 두고 있으며 내장된 상태 관리를 제공하지 않습니다. 많은 비동기 작업을 App이나 Page에서 하나씩 직접 구현한다면 개발도 힘들고 테스트도 어려울 것이라고 생각합니다.

따라서 애플릿에서 애플리케이션 상태 관리 redux-weapp을 용이하게 하기 위해 WeChat 애플릿용 Redux 솔루션 기반 상태 관리 모듈을 구현했습니다.

특히 WeChat 애플릿은 빌드(컴파일) 시 App 범위 외부에서 파일 요구를 지원하지 않으므로 여기서는 npm을 사용하기가 쉽지 않습니다.

따라서 실시간으로 애플리케이션에서 로컬로 종속성을 구축하고 WeChat 애플릿에서 로컬 모듈을 참조해야 합니다.

이런 구축 시나리오에서는 webpack이 가장 편리한 솔루션이라고 생각합니다.

시작하기 전에 준비해야 할 사항

• 공식 문서에서 WeChat 미니 프로그램이 무엇인지 이해하세요.

• Redux 애플리케이션 상태 관리 솔루션을 이해하고 Flux 아키텍처 의 특정 구현이기도 합니다. >

• ES6/7 코드 번역(트랜컴파일) 도구 Babel에 대해 알아보세요. 원칙은 구문 분석 도구를 사용하여 코드를 추상 구문 트리로 구문 분석한 다음 이를 최종 코드로 "다시 작성"하는 것입니다.
  Jest 및 Mocha와 같은 JavaScript 테스트 도구는 다음과 같습니다. 귀하의 필요에 따라 선택됩니다.
• 도구 및 종속 모듈 설치
  WeChat Mini 프로그램 개발자 도구 다운로드

개발자 도구는 NW.js를 사용합니다. WeChat의 환경은 JavascriptCore 환경입니다.

하지만 걱정하지 마세요. 두 개의 서로 다른 VM일 뿐 본질은 동일합니다.

NW.js에는 사소한 버그가 있을 수 있으므로 코드를 작성할 때 주의하세요.

npm 명령을 사용하여 WeChat 미니 프로그램 프로젝트 시작

mkdir myappcd myapp
npm init

필요한 종속성 모듈 설치 시작

미니 프로그램을 실행하는 데 필요한 모듈 외에, 건설 모듈에 필요한 모듈도 있습니다.

많아 보일 수 있지만 걱정하지 마세요. 대부분은 선언적이므로 직접 전화할 필요가 없습니다.

경험이 적은 학생들의 이해를 돕기 위해 이러한 종속성을 단계별로 설치하겠습니다.

첫 번째는 코드 번역 도구인 Babel입니다:

npm install --save-dev babel-cli babel-core babel-loader babel-plugin-add-module-exports babel-polyfill babel-preset-es2015 babel-preset-stage-0

위 모듈을 사용하면 빌드 중에 ES6/7 코드를 ES5 코드로 번역할 수 있습니다(실제로 인터프리터는 ES5만 인식합니다).

다음으로 패키징 도구인 웹팩을 설치합니다:

npm install webpack --save-dev

개발 서버 및 핫 모듈 교체 기능 없이 코드만 패키징하면 됩니다.

따라서 다른 확장 프로그램이나 플러그인을 설치하지 않고 웹팩 모듈 자체만 설치하면 됩니다.

다음으로 Redux를 설치해 보겠습니다.

npm install redux redux-thunk --save-dev

실제 애플리케이션에서는 API 서버의

인터페이스

를 비동기적으로 호출해야 하는 경우가 많기 때문에 비동기식

동작

을 처리하려면

이 모듈이 필요합니다.

그런 다음 미니 프로그램 개발을 위한 보조 모듈을 설치합니다:

npm install xixilive/weapp xixilive/redux-weapp --save-dev

그 중 weapp 모듈은 WeChat 미니 프로그램 API의 래퍼로 사용하기 쉬운 API와 redux를 제공합니다. -weapp은 상태 관리를 위해 Redux를 기반으로 합니다. redux-thunk프로젝트 만들기디렉토리 구조

myapp
 |- es6                # 源代码
   |- myapp.js         # 在app.js文件中require此文件
 |- lib                # 存放编译之后的js文件
 |- pages              # 小程序页面定义
   |- projects
     |- projects.js
     |- projects.json
     |- projects.wxml
     |- projects.wxss
   ...
 |- app.js             # 小程序入口文件
 |- app.json
 |- app.wxss
 |- webpack.config.js  # webpack配置文件

빌드 스크립트 작성

먼저 작성

이 필요합니다. 이 빌드는 WeChat 애플릿의 종속성을 현지화하기 위한 것이므로 JS 파일만 처리합니다. 다른 리소스를 패키지해야 하는 경우 직접 조사해 보세요.

또한 WeChat 미니 프로그램 패키지의 최대 용량은 1MB라는 점도 주목할 만합니다.

// webpack.config.jsvar path = require('path'), webpack = require('webpack')var jsLoader = {
  test: /\.js$/, // 你也可以用.es6做文件扩展名, 然后在这里定义相应的pattern
  loader: 'babel',
  query: {    // 代码转译预设, 并不包含ES新特性的polyfill, polyfill需要在具体代码中显示require
    presets: ["es2015", "stage-0"]
  },  // 指定转译es6目录下的代码
  include: path.join(dirname, 'es6'),  // 指定不转译node_modules下的代码
  exclude: path.join(dirname, 'node_modules')
}module.exports = {  // sourcemap 选项, 建议开发时包含sourcemap, production版本时去掉(节能减排)
  devtool: null,  // 指定es6目录为context目录, 这样在下面的entry, output部分就可以少些几个`../`了
  context: path.join(dirname, 'es6'),  // 定义要打包的文件  // 比如: `{entry: {out: ['./x', './y','./z']}}` 的意思是: 将x,y,z等这些文件打包成一个文件,取名为: out  // 具体请参看webpack文档
  entry: {
    myapp: './myapp'
  },

  output: {    // 将打包后的文件输出到lib目录
    path: path.join(dirname, 'lib'),    // 将打包后的文件命名为 myapp, `[name]`可以理解为模板变量
    filename: '[name].js',    // module规范为 `umd`, 兼容commonjs和amd, 具体请参看webpack文档
    libraryTarget: 'umd'
  },  module: {
    loaders: [jsLoader]
  },

  resolve: {
    extensions: ['', '.js'],    // 将es6目录指定为加载目录, 这样在require/import时就会自动在这个目录下resolve文件(可以省去不少../)
    modulesDirectories: ['es6', 'node_modules']
  },

  plugins: [    new webpack.NoErrorsPlugin(),    // 通常会需要区分dev和production, 建议定义这个变量    // 编译后会在global中定义`process.env`这个Object    new webpack.DefinePlugin({      'process.env': {        'NODE_ENV': JSON.stringify('development')
      }
    })
  ]
}

npm 명령 정의webpack.config.js

첫 번째는 코드 테스트 명령

입니다.

저는 Jest를 즐겨 사용하기 때문에 여기서도 Jest를 예로 들어보겠습니다.

// package.json"scripts": {  "pretest": "eslint es6", //推荐进行静态检查  "test": "jest",
  ...
},
...,// jest允许在package.json中定义配置"jest": {  "automock": false,  "bail": true,  "transform": {    ".js": "/node_modules/babel-jest" //用babel转译
  },  "testPathDirs": [    "/tests/"
  ],  "testRegex": ".test.js$",  "unmockedModulePathPatterns": [    "/node_modules/"
  ],  "testPathIgnorePatterns": [    "/node_modules/"
  ]
}

다음 단계는 흥미로운

명령입니다. 성공이냐 실패냐가 단숨에 결정됩니다

위 내용은 WeChat 미니 프로그램 개발의 효율성을 향상시키는 세부 단계를 가르쳐주세요.의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!