mini programm template 다운로드 - mini programm template 소스 코드 다운로드

mini programm template

AI 소스 코드

1.0.0

다운로드

미니 프로그램 템플릿

점검이 중지되었습니다~ 웹팩 버전 사용을 권장합니다

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 호환성 문제가 다시 발생합니다. 따라서 regenerator 라이브러리 시작 부분에 타사 promise 수동으로 도입되었습니다.

event.js

페이지 간 통신 메커니즘은 게시-구독 모델을 기반으로 합니다. 구체적인 사용법은 소스 코드 설명을 참조하세요. 그리고 예제 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 } )
  }
} )

watch.js

데이터 모니터링의 원칙은 게시-구독 모델입니다. 구체적인 사용법은 소스 코드 설명을 참조하세요. 소스 라이브러리 주소

사용 방법에 대한 간단한 소개:

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