Unduhan wx miniprogram boilerplate - unduhan kode sumber wx miniprogram boilerplate

wx miniprogram boilerplate

Kode Sumber AI

1.0.0

Unduh

️ menjelaskan

️ ️ ️ Pembaruan telah dihentikan. Ini hanya untuk referensi pembelajaran. Disarankan untuk menggunakan kerangka pengembangan program kecil lainnya yang matang.

wx-miniprogram-boilerplate

Alur kerja pengembangan applet WeChat berdasarkan Gulp

Model pengembangan program kecil asli terlalu sederhana. Dari segi gaya, siswa yang terbiasa menulis kurang, stylus dan sass tidak akan bisa mentolerir metode penulisan wxss. Berdasarkan hal ini, saya memutuskan untuk menggunakan alat otomatisasi gulp untuk membangun satu set pengembangan program kecil WeChat. Templat dasar, meskipun sepenuhnya mempertahankan fungsi dan fitur applet WeChat, juga dapat menggunakan less gaya penulisan. Pada saat yang sama, ia juga menambahkan fitur seperti kompresi gambar dan perintah cepat pembuatan garis templat untuk meningkatkan efisiensi pengembangan!

ciri

Proyek program mini WeChat berdasarkan gulp+less
Kompresi otomatis gambar proyek
Pemeriksaan kode ESLint
Buat page , template , dan component dengan cepat menggunakan baris perintah
Mendukung pengemasan lingkungan produksi

Memulai

0. Sebelum memulai, pastikan node dan npm telah diinstal, dan gulp-cli diinstal secara global.

 $ npm install --global gulp-cli

1. Unduh kodenya

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

2. Masuk ke direktori dan instal dependensi

 $ cd wx-miniprogram-boilerplate && npm install

3. Kompilasi kode, buat direktori dist, dan gunakan alat pengembang untuk membuka direktori dist.

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

4. Buat halaman, template, atau komponen baru

  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. Kompilasi sebelum mengupload kode

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

6. Unggah kode, tinjau, dan rilis

struktur teknik

 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

Deskripsi tegukan

 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的页面

Tanya Jawab

T: Mengapa konversi js, penyelesaian gaya, dan kompresi kode tidak disertakan dalam alur kerja?
J: Alat pengembang WeChat hadir dengan fungsi babel untuk mengonversi ES6 ke ES5, penyelesaian gaya, dan kompresi kode js. Tidak diperlukan tambahan tambahan dalam alur kerja ini.
Q: Apa kegunaan file di direktori _template ?
J: Gunakan perintah gulp auto untuk menghasilkan file secara otomatis. Parameter -s dapat menentukan objek salinan. Secara default, file dalam folder di direktori terkait adalah _template sebagai objek salinan. Pengembang dapat menyesuaikan file di bawah _template sesuai dengan kebutuhan bisnis.
T: Apakah file di direktori _template akan dikompilasi ke dalam direktori dist ?
J: Tidak.