【实战】云开发菜谱小程序 —— 环境篇

物料准备

小程序文档：

新建项目选择一个空目录，填入 AppID（使用云开发能力必须填写 AppID）

因此，登录 微信公众号平台 申请个人主体小程序，获取AppID

搭建环境

新建项目

1. 打开小程序开发工具，新建项目（因为我打算前后端项目整合在一层，于是选择这个模板创建项目）

2. 我们来看看项目创建成功之后的目录：

• client —— 客户端，也就是前端代码模块
• server —— 服务端，存放nodejs代码的模块

前端环境搭建

1. 先进入前端代码目录

cd client

2. 全局安装gulp（跟第一步没啥关系，不影响，避免后面安装插件时装错目录了）

npm install  -g gulp

3. 安装插件：这里大家自行安装，代码不贴出来了，插件包如下所示

  "devDependencies": {
    "@babel/core": "^7.9.0",
    "@babel/preset-env": "^7.9.5",
    "@babel/register": "^7.9.0",
    "gulp": "^4.0.2",
    "gulp-pug": "^4.0.1",
    "gulp-rename": "^2.0.0",
    "gulp-stylus": "^2.7.0"
  }

4. 打开 package.json文件添加 script 命令

  "scripts": {
    "dev": "gulp watch",
    "build": "gulp"
  }

编写gulp编译文件

这里的前端采用的gulp进行文件的编译工作，所以需要我们先写好gulpfile文件，然后才能对pug stylus进行文件编译工作，使其能成功转化成微信小程序能够给正常识别的wxml wxss文件；

这里限于篇幅关系，简单写一些出来供大家参考：

import gulp from 'gulp';
import pug from 'gulp-pug';
import rename from 'gulp-rename';

// pages 目录下的pug模板文件
const pugFiles = 'pages/**/*.pug'

async function doPUG(path, distPath) {
	return gulp.src(path)
    	    .pipe(pug())
            .pipe(rename{
            	extname: '.wxml',
            })
            .pipe(gulp.dest(distPath))
}

// 转化pages目录下的模板文件
gulp.task('pug', async() => {
	return doPUG(pugFiles, 'pages')
})

// 建立文件监听
gulp.task('watch', gulp.series(
    gulp.parallel('pug'),
    () => {
        gulp.watch(pugFiles, gulp.parallel('pug'))
    },
))

// 启动默认执行任务
gulp.task('default', gulp.parallel(
    'pug',
))

启动脚本命令

• 我的项目目录结构

1. 启动

npm run dev

2. 文件监听编译如图所示：

到这里，凡是在client里面修改和新增的pug，stylus都会成功转化小程序可以识别的文件了，前提是要保证 npm 脚本正常执行就可以了

忽略编译后的文件

一般来说，我们只要保证开发工具能成功生成编译后的文件，使其可以成功提交到小程序远端服务器就可以了，但是不需要提交到代码版本库里面的，所以这里也简单贴一下需要忽略的文件代码：

#忽略项目的所有包#
**/node_modules

#忽略项目的所有样式#
**/*.wxss

#忽略项目的所有静态文件#
**/*.wxml