mini programm template

Mini-Programmvorlage

Wartung gestoppt ~ Es wird empfohlen, die Webpack-Version zu verwenden

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

Merkmale

• eslint aktivieren
• Aktivieren Sie den automatischen Präfix
• Kompatibel mit Versprechen
• Unterstützt async/await
• Unterstützen Sie scss
• Kapselung der WX-API
• Seitenübergreifende Event-Kommunikationsveranstaltung
• Überwachen Sie Datenänderungen und beobachten Sie sie

Hinweis : Diese Vorlage basiert auf Gulp für die Vorverarbeitung, Kompilierung und Komprimierung und verwendet daher nicht die entsprechenden Funktionen, die von den WeChat-Entwicklertools bereitgestellt werden. Optionseinstellungen des WeChat-Entwicklertools: Verwenden Sie nicht es6 -> es5. Verwenden Sie beim Hochladen von Code keine automatische Stilvervollständigung. ( project.config.json konfiguriert)

Struktur

Wählen Sie in den Entwicklertools bitte den kompilierten dist für das Applet-Verzeichnis aus.

 # 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

Bibliothek

Versprechen

In der Umgebung einiger Low-End-Modelle (z. B. iPhone5) gibt es kein native promise , und Entwickler müssen die promise (Problem) selbst einführen. Das Applet wird nicht im Browser ausgeführt, es sind keine document/window und andere Objekte vorhanden und es können keine Bibliotheken von Drittanbietern eingeführt werden, die auf diesen Objekten basieren. Daher wird die Verwendung von bluebird empfohlen.

async/await-Syntax

Die direkte Verwendung async/await -Syntax führt zu einem Fehler:

 Uncaught ReferenceError: regeneratorRuntime is not defined

Um Fehler zu beheben, muss Facebook/regenerator eingeführt werden. regenerator generiert nach der Kompilierung promise , und bei Low-End-Modellen treten erneut Probleme mit promise auf. Daher wurde zu Beginn der regenerator manuell ein promise eines Drittanbieters eingeführt.

event.js

Der seitenübergreifende Kommunikationsmechanismus basiert auf dem Publish-Subscribe-Modell. Informationen zur spezifischen Verwendung finden Sie in den Kommentaren zum Quellcode. Und verwenden Sie die Beispiele pages/eventSamplePage und pages/eventSamplePage2 .

Einfache Einführung in die Nutzung:

 // 入口文件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 } )
  }
} ) 

watch.js

Das Prinzip der Datenüberwachung ist das Publish-Subscribe-Modell. Informationen zur spezifischen Verwendung finden Sie in den Kommentaren zum Quellcode. Adresse der Quellbibliothek

Einfache Einführung in die Nutzung:

 // 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]' )
  }
} )