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 に依存しているため、WeChat 開発者ツールが提供する関連機能は使用しません。 WeChat 開発者ツールのオプション設定: 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一部のローエンドモデル（例：iPhone5）の環境にはnative promise存在せず、開発者自身がpromiseライブラリ（課題）を導入する必要があります。アプレットはブラウザ内で実行されず、 document/windowやその他のオブジェクトが存在せず、これらのオブジェクトに依存するサードパーティ ライブラリを導入できないため、 bluebird使用することをお勧めします。
async/await構文を直接使用すると、エラーが発生します。
Uncaught ReferenceError: regeneratorRuntime is not defined
エラーを解決するにはFacebook/regenerator導入する必要があります。 regeneratorコンパイル後にpromise生成するため、ローエンド モデルではpromise互換性の問題が再び発生します。したがって、サードパーティのpromiseがregeneratorライブラリの最初に手動で導入されました。
クロスページ通信メカニズムは、パブリッシュ/サブスクライブ モデルに基づいています。具体的な使用方法については、ソース コードのコメントを参照してください。例として、 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]' )
}
} )
