mini programm template

templat program mini

Menghentikan pemeliharaan~ Disarankan untuk menggunakan versi webpack

git clone https://github.com/Akiq2016/mini-programm-template.git yourFolderName
cd yourFolderName

npm install -g gulp-cli
npm install

# 生成 dist 目录
npm run build

# 开发目录监听
npm run dev

# 安装 gulp 的 plugins 后，如果报错找不到 gulp 需手动重新安装 gulp4
npm install gulp@next --save-dev

Fitur

• aktifkan eslint
• Aktifkan awalan otomatis
• Kompatibel dengan janji
• Mendukung async/menunggu
• Dukungan scss
• Mengenkapsulasi API wx
• Acara komunikasi acara lintas halaman
• Pantau perubahan data jam tangan

Catatan : Templat ini mengandalkan gulp untuk prapemrosesan, kompilasi, dan kompresi, sehingga tidak menggunakan fungsi terkait yang disediakan oleh alat pengembang WeChat. Pengaturan opsi alat pengembang WeChat: Jangan gunakan es6 -> es5. Jangan gunakan pelengkapan otomatis gaya saat mengunggah kode. ( project.config.json dikonfigurasi)

Struktur

Di alat pengembang, silakan pilih dist yang dikompilasi untuk direktori applet.

 # src 结构

├── assets
|   ├── [pictures]
└── └── [icons]

├── config
|   ├── [global constant]
└── └── [configuration]

├── libs
└── └── [libary]

├── pages
└── └── [package page]
├── subPages
└── └── [subPackage page]

├── components
└── └── [components]
├── templates
└── └── [templates]

├── style
└── └── [scss]

├── utils
└── └── [tools]

├── project.config.json
├── app.js
├── app.json
├── app.scss

Perpustakaan

Janji

native promise tidak ada di lingkungan beberapa model kelas bawah (misalnya iPhone5), dan pengembang perlu memperkenalkan sendiri pustaka promise (masalah). Applet tidak berjalan di browser, tidak ada document/window dan objek lainnya, dan tidak dapat memperkenalkan perpustakaan pihak ketiga yang mengandalkan objek tersebut, jadi disarankan untuk menggunakan bluebird .

sintaks async/menunggu

Menggunakan sintaks async/await secara langsung akan menyebabkan kesalahan:

 Uncaught ReferenceError: regeneratorRuntime is not defined

Facebook/regenerator perlu diperkenalkan untuk mengatasi kesalahan. regenerator akan menghasilkan promise setelah kompilasi, dan masalah kompatibilitas promise akan terjadi lagi pada model kelas bawah. Oleh karena itu, promise pihak ketiga diperkenalkan secara manual di awal perpustakaan regenerator .

acara.js

Mekanisme komunikasi lintas halaman didasarkan pada model terbitkan-berlangganan. Silakan lihat komentar kode sumber untuk penggunaan spesifik. Dan gunakan contoh pages/eventSamplePage , pages/eventSamplePage2 .

Pengenalan sederhana untuk digunakan:

 // 入口文件app.js
import Event from 'libs/event.js'

App ( {
  onLaunch : function ( options ) {
  } ,

  // 添加一个全局的事件总线
  event : new Event ( ) ,
} ) 

 // 写法一：在页面中写events对象
// 在合适的地方（比如页面生命周期钩子中）进行事件初始化 initEventOnPage
// initEventOnPage 会帮助遍历events中的事件 逐个进行listen
// 且改写了onUnload钩子，令页面在销毁时，将页面中事件销毁
Page ( { // A页面
  events : {
    eventA ( arg1 ) {
    } ,
    eventB ( arg2 ) {
    } ,
  } ,
  onLoad ( ) {
    getApp ( ) . event . initEventOnPage ( this )
  } ,
} )

Page ( { // B页面
  someHandler ( ) {
    getApp ( ) . event . trigger ( 'eventA' , { data : 888 } )
  }
} ) 

 // 写法二：手动注册事件
// 注册 getApp().event.listen(keyname, callback, pageInstance)
// 销毁 getApp().event.remove(keyname, pageInstance)
Page ( { // A页面
  someHandler ( ) {
    getApp ( ) . event . listen ( 'eventA' , function ( arg ) { console . log ( arg ) } , this )
  }
  onUnload ( ) {
    getApp ( ) . event . remove ( 'eventA' , this )
  }
} )

Page ( { // B页面
  someHandler ( ) {
    getApp ( ) . event . trigger ( 'eventA' , { data : 888 } )
  }
} ) 

tonton.js

Prinsip pemantauan data adalah model terbitkan-berlangganan. Silakan lihat komentar kode sumber untuk penggunaan spesifik. Alamat perpustakaan sumber

Pengenalan sederhana untuk digunakan:

 // A页面
import Watch from '../../libs/watch'

let watch ;
Page ( {
  data : {
    a : '1' ,
    b : {
      c : { d : 33 } ,
      e : [ 1 , 2 , [ 3 , 4 ] ]
    }
  } ,
  // 可以将需要监听的数据放入watch里面，当数据改变时推送相应的订阅事件
  watch : {
    a : function ( val , oldVal ) {
      console . log ( 'new: %s, old: %s' , val , oldVal )
    } ,
    'b.c.d' : function ( val , oldVal ) {
      console . log ( 'new: %s, old: %s' , val , oldVal )
    } ,
    'b.e[2][0]' : function ( val , oldVal ) {
      console . log ( 'new: %s, old: %s' , val , oldVal )
    } ,
    // 不在data里面的数据项不会放入观察者列表
    'b.e[3][4]' : function ( val , oldVal ) {
      console . log ( 'new: %s, old: %s' , val , oldVal )
    } ,
  } ,
  onLoad ( options ) {
    // 实例化watch
    watch = new Watch ( this )
  } ,
  method1 ( ) {
    // 扩展原生小程序setData方法: (改变数据 更新视图) + 触发回调（假如有配置）
    watch . setData ( {
      a : 2 ,
      'b.c.d' : 3 ,
      'b.e[2][0]' : 444 ,
      c : 123  
    } )
    
    // 扩展原生小程序对data对象直接赋值的操作: (改变数据 不更新视图) + 触发回调（假如有配置）
    // watch.data(key, val)
    watch . data ( 'b.e[2][0]' , 555 )

    // 删除观察者，改变数据不触发回调
    // watch.unSubscribe(key)
    watch . unSubscribe ( 'b.e[2][0]' )
  }
} )