vscode+gulp 간단한 프로그램 개발 전체 절차

gulp+vscode를 이용하여 작은 프로그램을 개발하는 작은 도구입니다. 일련의 wx 전역api 방법을 내장하여 확장하고 사용자 정의 설정에 대응하는 정보와 별명 등 문제를 지원합니다.
설치 방법:

#  
npm install -g wechat-mini-gulp
#  
wechat-gulp run init
#  
npm install

운행

# 
npm run gulpdev
# 
npm run gulpbuild
#  
npm run gulptest
#  console
npm run gulpclean
#  routerConfig
npm run gulpsync

프로젝트 디렉토리
루트 디렉토리
--gulp//gulp 퀘스트 패키지
| | – pageTemplate//페이지 템플릿 파일
| | – cleanplugin//console-gulp 플러그인 비우기
│   ├── changeEnvMode.js//환경 변수 수정
│   ├── config.js//구성
│   ├── createdWechatFile.js//새로 추가ybf.js 자동 동기화
│   ├── createdYbfcss.js//컴파일 scss
│   ├── createdYbftsbuild.js//컴파일ts
│   ├── createYbfPageTask.js//컴파일ybf.js
│   ├── env.js//환경 변수
│   ├── gulpCleanConsole.js//console-퀘스트 대기열 비우기
│   └── synsPages.js//동기화 app.json 아래의 페이지, 후기 루트 처리 권한
│   └── utils.js//도구 방법
├── gulpfile.js//gulp 작업 항목
├── package.json//npm 의존
ε-toulPlugins//확장 애플릿 루트 방법, 실체 방법 등
| – extendPage//페이지 확장 방법
| – extendWxApi//확장 wx 내장 방법
| – index//plugins 다음 파일 내보내기
|-routerHandle//위조 vue-router, 프록시 wx 내장 점프 방법
ε-routesConfig//vue-routes 위조, 현재 애플릿 페이지 경로
전역 방법 사용
앱에서js 아래 도입

//  
import './toulPlugins/index'

내장형 글로벌 wx 방법 제공
실행 변수 가져오기
이 파일은/gulp/env에 있습니다.js, 대외 내보내기
api 라우팅 방법
위챗 방법을 2차 봉인하여 상응하는query와params 쓰기를 확장하였다

wx.$router.push //  vue vue.router.push
wx.$router.replace //  vue vue.router.replace
wx.$router.switchTab //  tab switchTab 

wx.$router.push 및 wx.$router.replace 방법은 모두 전송된 매개 변수 대상이나 문자열을 지원합니다. 다음과 같습니다.

//  
wx.$router.push('/pages/index/index')

//  
wx.$router.push({
 url: '/pages/index/index',
 params: {},
 query: {}
 events: {} //  
})

위의 방법은 각 페이지 내부에서this.__query 전달된query,this._params 전송된 params 가져오기

//   this.__params
wx.$router.push('/pages/index/index?id=1')

특히 주의:!!!!!!!
프로젝트에서 공유 처리를 하려면 onLoad에서 전송된 파라미터를 단독으로 받아야 합니다. 구체적인 내용은
위챗 애플릿 페이지 라우팅(developers.weixin.qq.com/miniprogram..)
공유된 코드가 wx.$를 거치지 않았기 때문에router.xxx 방법의 처리
wxml 페이지 루트 방법
wxml 페이지에서 $toPage를 직접 호출하는 방법을 확장했습니다. wx.$를 직접 호출할 수 있습니다.router.xxx ,
태그에 대응하는 데이터-xxx 전송 필요
data-url 점프가 필요한 루트 주소
data-totype 점프 방법, 지원:

redirect 또는 replace

switchTab

reLaunch

push 기본

구체적인 사용은 다음과 같다.

<view catch:tap="$goPage" data-url="/pages/mine/order/index?userType=isC&orderStatus=4" data-totype="push"></view>

사진 업로드

// pages.js
//  chooseImage ， 
wx.$wxUploadFile(tempFilePaths[0]).then(obj => {})
//  
wx.$wxUploadFile = (imageUrl) => {
}

절류 함수

wx.$YBFThrottle = (cb, delay = 300) => {
 const nowPage = wx.$getNowPage()
 if (!nowPage.isCanClick) return
 nowPage.isCanClick = false
 cb && cb()

 setTimeout(() => {
 nowPage.isCanClick = true
 }, delay)
}

글로벌 라우팅 차단 처리

// /toulPlugins/extendWxApi.js
//  
wx.$beforeRouter = (from, to, next) => {
 // ...someCode
}

//  
wx.$afterRouter = (oldRoute, toRoute) => {
 // ...code
}

현재 페이지 정보 가져오기

//  
wx.$getNowPage = () => {
 // ...code
}

이전 페이지 정보 가져오기

//  
wx.$getPrevPage = () => {
 // ...code
}

탄창 확인 confirm
취소 및 확인 버튼 포함

// confirm 
// return promise
wx.$confirm = (options) =>{}

모드 상자 toast

// return promise
wx.$toast = (msg, cb) => {}

복사

// return void
wx.$copy = (msg) => {}

once 함수

wx.$once(fn)

기본 구성
파일은:gulp/config에 있습니다.js 거리
프로젝트 루트 디렉터리에 gulpconfig를 추가해야 합니다.js 파일, 변경 중

// gulpconfig.js

//  
module.exports = {
 //  
 alisa: {
 '@plugins': "./plugins",
 '@scss': './scss',
 '@utils': './utils',
 '@api': './api',
 '@config': './config',
 '@images': './images'
 },
 //  js ， ybf.js
 buildJsUrl: ['./pages/**/ybf.js'],
 //  ， gulp 
 
 //  scss ， abc.scss  abc.scss
 buildScssUrl: ['./pages/**/*.scss', './components/**/*.scss'],
 
 // ts 
 buildTsUrl: ['./**/*.ts'],
 // app.json   
 appJsonFilePath: './app.json',
 //  ts 
 isTs: false
}

routesConfig 구성
이 파일은 주로 wx.$를 구성하기 위해beforeRouter 및 wx.$afterRouter로 구성된 파일
파일은./toulPlugins/routesConfig.js
예:

export default [
 {
 path: 'pages/index/index' // app.json   pages 
 meta: {
  noPage: true //    
 }
 }
]

Gulp 파일 설명
에 위치/gulp
환경 변수
작은 프로그램이 웹 팩에 개발되는 것처럼api 환경을 자동으로 컴파일합니다

// changeEnvMode.js
//   /config/env.ts ， mode=dev  ts 
function changeEnvMode(mode) {
 // ...somecode
 buildTypeScript({})
}

이 파일의 역할은 개발자가 관련 코드를 닫는 것을 피하기 위해api의 조정을 크게 향상시켰다
감청ybf.js 생성 index.js

// createYbfPageTask.js
//  ybf ， @ , /pages ， index.js，
function createYbfPageTask(event) {
 // ...somecode 
}

scss 파일 생성 인덱스를 감청합니다.wxss

// createdYbfcss.js
//  px rpx  @ ， component pages index.scss， index.scss
function createdYbfcss(event) {
 // ...somecode 
}

ts 파일 생성에 대응하는 js 감청

// buildTypeScript.js
//  ts ， ts ， ts 
function buildTypeScript(event) {
 // ...somecode 
}

파일에 존재하는 console를 삭제합니다.log

// gulpCleanConsole.js
function gulpCleanConsole() {
 // ...somecode
}

새 ybf를 감청합니다.js 파일 (이 파일이 중점)

// createdWechatFile.js
//  pages ybf.js ， wxss,wxml,scss,ybf.js,json 
function generateFile(event) {
 
 generateJson()
 generateRoute()
}
//  app.json pages 
function generateJson(pageUrl) { 
}
//  /toulPlugins/routesConfig.js 
function generateRoute(pageUrl) {}

새 작은 프로그램 페이지가 필요할 때, 상대적인 폴더에서ybf를 추가합니다.js 파일은 대응하는 작은 프로그램 파일과 루트를 새로 만듭니다.
앱 동기화.json의 페이지

// synsPages.js
//  app.json pages ， 
function syncPage() {}

스타와 pr을 환영합니다.
github 주소:github.com/popup-jie/w …
총결산
이 vscode+gulp가 쉽게 프로그램을 개발하는 것에 관한 이 글은 여기까지 소개되었습니다. 더 많은 vscode+gulp 개발 프로그램에 관한 내용은 저희 이전의 글을 검색하거나 아래의 관련 글을 계속 훑어보십시오. 앞으로 많은 응원 부탁드립니다!