mini programm template

modèle de mini-programme

Maintenance arrêtée ~ Il est recommandé d'utiliser la version 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

Caractéristiques

• activer Eslint
• Activer le préfixe automatique
• Compatible avec les promesses
• Prise en charge asynchrone/attente
• Prise en charge du CSS
• Encapsulation de l'API wx
• Événement de communication événementielle cross-page
• Surveiller les changements de données

Remarque : Ce modèle s'appuie sur gulp pour le prétraitement, la compilation et la compression, il n'utilise donc pas les fonctions associées fournies par les outils de développement WeChat. Paramètres des options de l'outil de développement WeChat : n'utilisez pas es6 -> es5. N'utilisez pas la saisie semi-automatique de style lors du téléchargement de code. ( project.config.json configuré)

Structure

Dans les outils de développement, veuillez sélectionner la dist compilée pour le répertoire de l'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

Bibliothèque

Promesse

native promise n'existe pas dans l'environnement de certains modèles bas de gamme (par exemple iPhone5), et les développeurs doivent introduire eux-mêmes la bibliothèque promise (problème). L'applet ne s'exécute pas dans le navigateur, n'existe pas document/window ni d'autres objets, et ne peut pas introduire de bibliothèques tierces qui s'appuient sur ces objets, il est donc recommandé d'utiliser bluebird .

syntaxe asynchrone/attente

L'utilisation directe de la syntaxe async/await provoquera une erreur :

 Uncaught ReferenceError: regeneratorRuntime is not defined

Facebook/regenerator doit être introduit pour résoudre les erreurs. regenerator générera promise après la compilation, et des problèmes de compatibilité promise se reproduiront dans les modèles bas de gamme. Par conséquent, une promise tierce a été introduite manuellement au début de la bibliothèque regenerator .

événement.js

Le mécanisme de communication entre pages est basé sur le modèle de publication-abonnement. Veuillez consulter les commentaires du code source pour une utilisation spécifique. Et utilisez les exemples pages/eventSamplePage , pages/eventSamplePage2 .

Introduction simple à utiliser :

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

montre.js

Le principe de surveillance des données est le modèle de publication-abonnement. Veuillez consulter les commentaires du code source pour une utilisation spécifique. Adresse de la bibliothèque source

Introduction simple à utiliser :

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