mini programm template
1.0.0
停止維護~ 建議使用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注意: 本範本依賴gulp 進行預處理和編譯壓縮，因此不使用微信開發者工具提供的相關功能。微信開發者工具選項設定：不使用es6 -> es5。不使用上傳程式碼時樣式自動補全。 （ project.config.json已配置）
在開發者工具中，小程式目錄請選擇編譯後的dist 。
# 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部分低階機型(eg. iPhone5)環境中不存在native promise ，開發者需自行引入promise庫(issue)。小程式不運行在瀏覽器中，不存在document/window等對象，不能引入依賴這些對象的第三方庫，因此建議使用bluebird 。
直接使用async/await語法會出現報錯：
Uncaught ReferenceError: regeneratorRuntime is not defined
需要引入Facebook/regenerator解決報錯。 regenerator編譯後會產生promise ，在低階機型中會再次出現promise相容問題。因此手動在regenerator函式庫開頭引入了第三方promise 。
跨頁面通訊機制，原理是發布訂閱模式。具體使用請看原始碼註釋。及使用範例pages/eventSamplePage ， pages/eventSamplePage2 。
簡單使用介紹：
// 入口文件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 } )
}
} ) 數據監聽，原理是發布訂閱模式。具體使用請看原始碼註釋。來源庫位址
簡單使用介紹：
// 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]' )
}
} )
