mini programm template

modelo de miniprograma

Manutenção interrompida ~ Recomenda-se usar a versão 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
• Ativar o prefixo automático
• Compatível com promessas
• Suporte assíncrono/espera
• Suporte scss
• Encapsulando API wx
• Evento de comunicação de evento entre páginas
• Monitore as alterações de dados

Nota : Este modelo depende do gulp para pré-processamento, compilação e compactação, portanto, não usa as funções relacionadas fornecidas pelas ferramentas de desenvolvedor do WeChat. Configurações de opção da ferramenta de desenvolvedor WeChat: Não use es6 -> es5. Não use o preenchimento automático de estilo ao fazer upload do código. ( project.config.json configurado)

Estrutura

Nas ferramentas do desenvolvedor, selecione o dist compilado para o diretório do miniaplicativo.

 # 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

Promessa

native promise não existe no ambiente de alguns modelos de baixo custo (por exemplo, iPhone5), e os desenvolvedores precisam introduzir a biblioteca promise (problema) por conta própria. O applet não roda no navegador, não existe document/window e outros objetos, e não pode introduzir bibliotecas de terceiros que dependam desses objetos, por isso é recomendado usar bluebird .

sintaxe assíncrona/aguardada

Usar diretamente a sintaxe async/await causará um erro:

 Uncaught ReferenceError: regeneratorRuntime is not defined

Facebook/regenerator precisa ser introduzido para resolver erros. regenerator gerará promise após a compilação, e problemas de compatibilidade promise ocorrerão novamente em modelos de baixo custo. Portanto, uma promise de terceiros foi introduzida manualmente no início da biblioteca regenerator .

evento.js

O mecanismo de comunicação entre páginas é baseado no modelo publicar-assinar. Consulte os comentários do código-fonte para uso específico. E use exemplos pages/eventSamplePage , pages/eventSamplePage2 .

Introdução simples para usar:

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

assistir.js

O princípio do monitoramento de dados é o modelo publicar-assinar. Consulte os comentários do código-fonte para uso específico. Endereço da biblioteca de origem

Introdução simples para usar:

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