mini programm template

plantilla-mini-programa

Mantenimiento detenido ~ Se recomienda utilizar la versión 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

Características

• habilitar eslint
• Activar el prefijo automático
• Compatible con promesas
• Soporte asíncrono/espera
• soporte scss
• Encapsulando la API wx
• Evento de comunicación de eventos entre páginas.
• Monitorear los cambios de datos.

Nota : esta plantilla se basa en gulp para el preprocesamiento, la compilación y la compresión, por lo que no utiliza las funciones relacionadas proporcionadas por las herramientas de desarrollo de WeChat. Configuración de opciones de la herramienta de desarrollador WeChat: no use es6 -> es5. No utilice el autocompletado de estilos al cargar código. ( project.config.json configurado)

Estructura

En las herramientas de desarrollo, seleccione el dist compilado para el directorio del subprograma.

 # 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

Biblioteca

Promesa

native promise no existe en el entorno de algunos modelos de gama baja (por ejemplo, iPhone5), y los desarrolladores deben introducir la biblioteca promise (problema) por sí mismos. El subprograma no se ejecuta en el navegador, no existe document/window ni otros objetos, y no puede introducir bibliotecas de terceros que dependan de estos objetos, por lo que se recomienda utilizar bluebird .

sintaxis asíncrona/espera

El uso directo de la sintaxis async/await provocará un error:

 Uncaught ReferenceError: regeneratorRuntime is not defined

Es necesario introducir Facebook/regenerator para resolver errores. regenerator generará promise después de la compilación y volverán a ocurrir problemas de compatibilidad promise en los modelos de gama baja. Por lo tanto, se introdujo manualmente una promise de terceros al comienzo de la biblioteca regenerator .

evento.js

El mecanismo de comunicación entre páginas se basa en el modelo de publicación-suscripción. Consulte los comentarios del código fuente para conocer un uso específico. Y use ejemplos pages/eventSamplePage , pages/eventSamplePage2 .

Introducción sencilla al uso:

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

reloj.js

El principio del seguimiento de datos es el modelo de publicación-suscripción. Consulte los comentarios del código fuente para conocer un uso específico. Dirección de la biblioteca fuente

Introducción sencilla al uso:

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