【实战】云开发菜谱小程序 —— 环境篇
发布于 18 天前 作者 yanye 4327 次浏览 最后一次编辑是 17 天前 来自 分享

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

物料准备

小程序文档:

新建项目选择一个空目录,填入 AppID(使用云开发能力必须填写 AppID)

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

搭建环境

新建项目

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

  1. 我们来看看项目创建成功之后的目录:
  • client —— 客户端,也就是前端代码模块
  • server —— 服务端,存放nodejs代码的模块

前端环境搭建

  1. 先进入前端代码目录
cd client
  1. 全局安装gulp(跟第一步没啥关系,不影响,避免后面安装插件时装错目录了)
npm install  -g gulp
  1. 安装插件:这里大家自行安装,代码不贴出来了,插件包如下所示
  "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"
  }
  1. 打开 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
  1. 文件监听编译如图所示:

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

忽略编译后的文件

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

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

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

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