wx miniprogram boilerplateダウンロード - wx miniprogram boilerplateソースコードダウンロード

wx miniprogram boilerplate

AI ソースコード

1.0.0

ダウンロード

️説明する

️ ️ ️更新は停止されています。学習の参考のみに使用してください。他の成熟した小規模プログラム開発フレームワークを使用することをお勧めします。

wx-ミニプログラム-ボイラープレート

Gulp に基づく WeChat アプレット開発ワークフロー

ネイティブの小さなプログラムの開発モデルはスタイルの点で単純すぎるため、スタイラスと Sass の記述に慣れている学生には wxss の記述方法に耐えられない可能性があるため、 gulp自動化ツールを使用することにしました。 WeChat の小さなプログラム開発のセットを構築するための基本的なテンプレートは、WeChat アプレットの機能と機能をlessに保持しながら、スタイルを記述するのに使用できると同時に、画像圧縮やクイックコマンドなどの機能も追加します。テンプレートのライン作成で開発効率アップ！

特性

gulp+lessに基づく WeChat ミニプログラムプロジェクト
プロジェクト画像の自動圧縮
ESLint コード検査
コマンドラインを使用してpage 、 template 、 componentすばやく作成します
実稼働環境のパッケージ化をサポート

はじめる

0. 開始する前に、node と npm がインストールされていること、および gulp-cli がグローバルにインストールされていることを確認してください。

 $ npm install --global gulp-cli

1. コードをダウンロードする

 $ git clone https://github.com/YangQiGitHub/wx-miniprogram-boilerplate.git

2. ディレクトリに入り、依存関係をインストールします。

 $ cd wx-miniprogram-boilerplate && npm install

3. コードをコンパイルし、dist ディレクトリを生成し、開発者ツールを使用して dist ディレクトリを開きます。

 $ npm run dev （开发环境打包）
$ npm run test (测试环境打包)

4. 新しいページ、テンプレート、またはコンポーネントを作成します

  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

5. コードをアップロードする前にコンパイルする

 $ npm run build （生产环境打包）

6. コードをアップロード、レビュー、リリースする

工学構造

 wx-miniprogram-boilerplate
├── dist         // 编译后目录
├── node_modules // 项目依赖
├── src 
│    ├── components // 微信小程序自定义组件
│    ├── env        // 请求域名配置
│    ├── images     // 页面中的图片和icon
│    ├── pages      // 小程序page文件
│    ├── styles     // ui框架，公共样式
│    ├── template   // 模板
│    ├── utils      // 公共js文件
│    ├── app.js
│    ├── app.json
│    ├── app.less
│    ├── project.config.json // 项目配置文件
│    └── api.config.js       // 项目api接口配置
├── .gitignore
├── .eslintrc.js
├── package-lock.json
├── package.json
└── README.md

ガルプの説明

 Tasks:
  dev              开发编译，同时监听文件变化
  test             整体编译，请求指向测试环境
  build            整体编译

  clean            清空产出目录
  wxml             编译wxml文件（仅仅copy）
  js               编译js文件，同时进行ESLint语法检查
  json             编译json文件（仅仅copy）
  wxss             编译less文件为wxss
  img              编译压缩图片文件
  watch            监听开发文件变化
  devEnv/testEnv/prodEnv 生成对应环境的请求域名配置

  auto             自动根据模板创建page,template或者component(小程序自定义组件)

gulp auto 

选项：
  -s, --src        copy的模板                     [字符串] [默认值: "_template"]
  -p, --page       生成的page名称                                       [字符串]
  -t, --template   生成的template名称                                   [字符串]
  -c, --component  生成的component名称                                  [字符串]
  --msg            显示帮助信息                                           [布尔]

示例：
  gulp auto -p mypage           创建名为mypage的page文件
  gulp auto -t mytpl            创建名为mytpl的template文件
  gulp auto -c mycomponent      创建名为mycomponent的component文件
  gulp auto -s index -p mypage  复制pages/index中的文件创建名称为mypage的页面

Q&A

Q: js 変換、スタイル補完、コード圧縮がワークフローに含まれていないのはなぜですか?
A: WeChat 開発者ツールには、ES6 から ES5 への変換、スタイル補完、JS コード圧縮といった babel の機能が付属しています。このワークフローでは追加の追加は必要ありません。
Q: _templateディレクトリ内のファイルは何に使用されますか?
A: gulp autoコマンドを使用して、ファイルを自動的に生成します。 -sでは、対応するディレクトリ内のフォルダー内のファイルがコピーオブジェクトとして_templateます。開発者は、ビジネスニーズに応じて_template内のファイルをカスタマイズできます。
Q: _templateディレクトリ内のファイルはdistディレクトリにコンパイルされますか?
A:いいえ。