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 หมายเหตุ : เทมเพลตนี้อาศัยการอึกในการประมวลผลล่วงหน้า การรวบรวม และการบีบอัด ดังนั้นจึงไม่ใช้ฟังก์ชันที่เกี่ยวข้องซึ่งจัดทำโดยเครื่องมือนักพัฒนา 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 native promise ไม่มีอยู่ในสภาพแวดล้อมของโมเดลระดับล่างบางรุ่น (เช่น iPhone5) และนักพัฒนาจำเป็นต้องแนะนำไลบรารี 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]' )
}
} )
