mini programm template

mini-programm-template

Stopped maintenance~ It is recommended to use the webpack version

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

Features

• enable eslint
• Turn on autoprefixer
• Compatible with promises
• Support async/await
• Support scss
• Encapsulating wx API
• Cross-page event communication event
• Monitor data changes watch

Note : This template relies on gulp for preprocessing, compilation and compression, so it does not use the related functions provided by WeChat developer tools. WeChat developer tool option settings: Do not use es6 -> es5. Do not use style auto-completion when uploading code. ( project.config.json configured)

Structure

In the developer tools, please select the compiled dist for the applet directory.

 # 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

Library

Promise

native promise does not exist in the environment of some low-end models (eg. iPhone5), and developers need to introduce the promise library (issue) by themselves. The applet does not run in the browser, does not exist document/window and other objects, and cannot introduce third-party libraries that rely on these objects, so it is recommended to use bluebird .

async/await syntax

Directly using async/await syntax will cause an error:

 Uncaught ReferenceError: regeneratorRuntime is not defined

Facebook/regenerator needs to be introduced to resolve errors. regenerator will generate promise after compilation, and promise compatibility issues will occur again in low-end models. Therefore, a third-party promise was manually introduced at the beginning of the regenerator library.

event.js

The cross-page communication mechanism is based on the publish-subscribe model. Please see the source code comments for specific usage. And use examples pages/eventSamplePage , pages/eventSamplePage2 .

Simple introduction to use:

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

The principle of data monitoring is the publish-subscribe model. Please see the source code comments for specific usage. Source library address

Simple introduction to use:

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