All Projects → jinxuanzheng01 → xdk-cli

jinxuanzheng01 / xdk-cli

Licence: other
微信小程序cli脚手架,目前提供的功能有:快速创建启动模版功能【页面 / 组件】, 自动发布体验版功能,设置版本号/版本描述功能,自定义指令功能

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to xdk-cli

Wx Book
仿追书神器的小说阅读器小程序
Stars: ✭ 122 (+183.72%)
Mutual labels:  weapp, wxapp
weapp.request
为微信小程序提供的网络请求组件,是 wx.request 的扩展,基于 Promise API,添加缓存控制
Stars: ✭ 29 (-32.56%)
Mutual labels:  weapp, wxapp
We Cropper
微信小程序图片裁剪工具
Stars: ✭ 1,972 (+4486.05%)
Mutual labels:  weapp, wxapp
wxapp-boilerplate
微信小程序开发脚手架 (ES6, Redux, Immutable-js, Async/await, Promise, Reselect, Babel, ESLint, Stylelint, Gulp ... )
Stars: ✭ 35 (-18.6%)
Mutual labels:  weapp, wxapp
Wechat web devtools
微信开发者工具(微信小程序)linux完美支持
Stars: ✭ 2,664 (+6095.35%)
Mutual labels:  weapp, wxapp
Wechat Weapp Movie
🎬电影推荐 - 微信小程序
Stars: ✭ 1,355 (+3051.16%)
Mutual labels:  weapp, wxapp
Leshare Shop Weapp
基于微信小程序的电商平台,采用原生框架开发
Stars: ✭ 183 (+325.58%)
Mutual labels:  weapp, wxapp
Leshare Shop Wepy
基于微信小程序的在线商城,采用wepy框架开发
Stars: ✭ 839 (+1851.16%)
Mutual labels:  weapp, wxapp
Weapp
🐧 微信小程序组件和功能封装,基于微信Component自定义组件开发
Stars: ✭ 235 (+446.51%)
Mutual labels:  weapp, wxapp
Wxa Plugin Canvas
小程序海报组件-生成朋友圈分享海报并生成图片
Stars: ✭ 2,692 (+6160.47%)
Mutual labels:  weapp, wxapp
wxapp-computed
在微信小程序中使计算值(computed)
Stars: ✭ 20 (-53.49%)
Mutual labels:  weapp, wxapp
mobx-wxapp
在小程序中使用mobx
Stars: ✭ 54 (+25.58%)
Mutual labels:  weapp, wxapp
Tina
💃 一款轻巧的渐进式微信小程序框架
Stars: ✭ 1,153 (+2581.4%)
Mutual labels:  weapp, wxapp
Weapp Qrcode Base64
微信小程序生成二维码的插件,基于base64编码输出二维码,不依赖canvas
Stars: ✭ 100 (+132.56%)
Mutual labels:  weapp, wxapp
Weapp Fontawesome Component
微信小程序的 fa 图标模块
Stars: ✭ 21 (-51.16%)
Mutual labels:  weapp, wxapp
Dva Wxapp
微信小程序的dva集成
Stars: ✭ 183 (+325.58%)
Mutual labels:  weapp, wxapp
Miniapp
微信小程序服务端 SDK (for Golang)
Stars: ✭ 815 (+1795.35%)
Mutual labels:  weapp, wxapp
Alaweb
一套 Vue 代码,多端可用(H5、小程序、苹果App、安卓App、头条等)。系统含150+页面,200+组件(5端通用),30+元件(每个终端独立完成)
Stars: ✭ 837 (+1846.51%)
Mutual labels:  weapp, wxapp
Wxapp Webpack Plugin
📦 微信小程序 webpack 插件
Stars: ✭ 185 (+330.23%)
Mutual labels:  weapp, wxapp
weapp-OpenRadio
A base music weapp named OpenRadio for wechat. Can use on weapp getting started.
Stars: ✭ 14 (-67.44%)
Mutual labels:  weapp, wxapp

xdk-cli

微信小程序cli脚手架,作者平时有些忙,如果有哪些同学对这个项目感兴趣,可以一起进行维护和开发

目前提供了:

  • 快速创建启动模版功能【页面 / 组件】
  • 发布体验版功能,
  • 设置版本号,版本描述功能
  • 自定义指令功能

注:自定义指令配合发布钩子可以做更多有趣的事情,例如下文配置文件中的的更换环境变量提交版本commit

觉得有用的小伙伴希望可以点个star~ 😄😄😄

QQ20190716-183106-HD (1).gif

安装

使用npm进行全局安装

    npm install -g xdk-cli

当安装成功后可以使用查看当前版本号

    xdk-cli -v

使用 -h 查看当前提供的功能介绍

    xdk-cli -h

项目目录结构

  1. 小程序项目默认开发目录
    # 目录结构
    - app(小程序目录)
        - pages
        - app.js
        - app.json
        - project.config.json
    - template
        - page
            - page.js
            - page.json
            - page.wxml
            - page.wxss
        - component
            - component.js
            ...
    - xdk.config.js
    - xdk.verison.json

    # xdk.config.js 设置
    module.exports = {
        entry: './app'
    }
  1. gulp/rollup/webpack 等编译形式目录
    # 目录结构
    - dist
    - src(小程序目录)
        - pages
        - app.js
        - app.json
        - project.config.json
    - template
        - page
           ... 
        - component
           ...
    - xdk.config.js
    - xdk.verison.json

    # xdk.config.js 设置
    module.exports = {
        entry: './src',
        output: './dist'
    }

创建配置文件

需要在项目目录下创建xdk.config.js

module.exports = {

    // 小程序路径(可选,默认当前目录)
    entry: './src',

    // 小程序输出文件(可选,默认等于entry)
    // 使用gulp,webpack等打包工具开发会导致开发者编辑文件目录和微信编辑器使用目录不同,需要手动进行指定
    output: './dist'

    // 模版文件夹目录(可选,默认使用cli默认模版,使用默认模版情况下false即可)
    template: './template',

    // 发布体验版功能的钩子
    publishHook: {

        // 发布之前(注:必须返回一个Promise对象)
        // 参数answer 为之前回答一系列问题的结果
        before(answer) {
            this.spawnSync('gulp', [`--env=${answer.isRelease ?'online' : 'stage'}`]);
            return Promise.resolve();
        },

        // 发布之后(注:必须返回一个Promise对象)
        after(answer) {
        
            // 是否提交git commit 
            let {isCommitGitLog} = await inquirerGitCommit.call(this);

            // 当为正式版本时进行的操作
            if (!!answer.isRelease) {
                // 修改本地version code
                await rewriteVersionCode.call(this);

                // 提交git log
                !!isCommitGitLog && await commitGitLog.call(this);
            }

            return Promise.resolve();
        }
    },

    // 自定义命令
    // 自定义指令需要用 run 来执行,例如 xdk-cli run dev
    customScripts: [
        {
            name: 'dev',
            desc: '开发模式',
            async callback() {
                let {env} = await inquirerEnvAsync.call(this);
                this.spawn('gulp', [`--env=${env}`, '--watch']);
                return Promise.resolve();    
            }
        },
        {
            name: 'sassDoc',
            desc: '生成sass文档',
            async callback() {
             
                // 生成文档
                await sassdoc([`./src/stylesheets/**/*.scss`, `./src/stylesheets/*.scss`], {
                    dest: './sassdoc',
                    verbose: true,
                    display: {
                        access: ['public'],
                        alias: true,
                    },
                    autofill: ["requires", "throws", "content"],
                });

                // 自动打开文件
                if (process.platform === 'darwin'){
                    this.spawnSync('open', [`./sassdoc/index.html`]);
                }else {
                    this.log(`目前自动打开浏览器功能只支持darwin内核, 当前内核为: ${process.platform}`);
                    this.log(`请打开当前路径下html,路径:./sassdoc/index.html`);
                }
                
                return Promise.resolve();
            }
        }
    ],
};

// 询问是否提交git记录
function inquirerGitCommit() {
    return this.inquirer.prompt([
        {
            type: 'confirm',
            name: 'isCommitGitLog',
            message: '是否提交git log ?'
        }
    ])
}

// 提交git commit 到log
function commitGitLog() {
    return new Promise((resolve, reject) => {
        this.spawnSync('git', ['add', '.']);
        this.spawnSync('git', ['commit', '-m', `docs: 更改版本号为${versionConf.version}`]);
        resolve();
    });
}

创建模版文件

提供自动识别分包,页面,添加到app.json, ${page}.json的功能

    # 输入创建命令
    xdk-cli create

    # 选择创建模式
    ? 选择你想生成的模版类型:(Use arrow keys)
    ❯ page
      component

创建page

    # 输入页面名称
    ? 设置 page 的名字 (例如: index):

    # 选择所属分包(none为主包)
    ? 设置页面所属的分包 (Use arrow keys or type to search)

    # 创建成功
    >> createPage success

创建component

    # 输入组件名称
    ? 设置 component 的名字 (例如: swiper-card):

    # 选择组件所属范围
    ? 设置组件所属的作用域 (Use arrow keys)
    ❯ global
      module
      page

    # 选择所属页面/分包/全局范围
    ?设置组件所属的页面
    ❯ index
    logs
    user

    # 创建成功
    >> createComponent success

自定义模版文件

每个项目可能需要的模版都不太一致,xdk-cli提供一个文件夹插槽,方便自定义需要使用的模版

    // 在xcli.config.js 中配置模版目录
    module.exports = {
        // 模版文件夹
        template: './template'
    };

小程序目录结构详情见上文 【项目目录结构

自动化发布体验版

目前只支持mac版本,作者缺乏windows开发环境(比较懒),欢迎补充

  1. 创建版本号文件,xdk.config.json
{
	"version": "0.1.9",
	"versionDesc": "版本描述"
}
  1. 输入命令行 xdk-cli publish
# 正式版本会修改本地的xdk.config.json文件, 非正式版本不会,且体验版版本号默认为0.0.0
? 是否为正式发布版本? Yes         

# 设置版本号
? 设置上传的版本号 (当前版本号: 0.1.9.4): raise alter: 0.1.9

# 设置版本描述
? 写一个简单的介绍来描述这个版本的改动过: 提交了一个正式版

Initializing...
idePortFile: /Users/xuan/Library/Application Support/微信开发者工具/Default/.ide
IDE server has started, listening on http://127.0.0.1:27563
initialization finished
uploading project...

upload success
>> 上传体验版成功, 登录微信公众平台 https://mp.weixin.qq.com 获取体验版二维码

如果失败

  • 请确认是否登录微信开发者工具是否为登录状态
  • 重启开发者工具
  1. 发布前/后的钩子函数 因为在发布体验版前,可能需要对小程序做一些前置/后置的操作,例如发布前重新打包编译,所以提供了一个钩子函数, 可在 xdk.config.js进行设置
publishHook: {
    // 发布之前(注:必须返回一个Promise对象)
    before(answer) {
        console.log('要开始发布了');
        return Promise.resolve();
    },

    // 发布之后(注:必须返回一个Promise对象)
    after(answer) {
        console.log('发布结束了');
        return Promise.resolve();
    }
},

对外开放的API

所有的函数体内部的this指向继承了一些cli内部的一些基础方法

this.spawn 开启子进程(异步)
// this.spawn
// @param - String   命令行
// @param - Args     参数
// @param - Any      默认'ingerit' ['inherit' | null ]

publishHook: {
    before(answer) {
        this.spawn('gulp', [`--env=${env}`, '--watch']);
        return Promise.resolve();
    },
}
this.spawnSync 开启子进程(同步)
// this.spawnSync
// @param - String   命令行
// @param - Args     参数
// @param - Any      默认'ingerit' ['inherit' | null ]

publishHook: {
    before(answer) {
        this.spawnSync('git', ['add', '.']);
        this.spawnSync('git', ['commit', '-m', `docs: 更改版本号为${versionConf.version}`]);
        return Promise.resolve();
    },
}
this.log 日志输出
// this.log
// @param - String  文本内容
// @param - String  类型 success | error
publishHook: {
    after(answer) {
        this.log('成功了~');
        this.log('成功了~', 'error');
        return Promise.resolve();
    },
}
this.inquirer 交互命令行

详情查看 https://github.com/SBoudrias/Inquirer.js

publishHook: {
    async after(answer) {

        // 是否提交git commit 
        let {isCommitGitLog} = await inquirerGitCommit.call(this);
        return Promise.resolve();
    }
}
function inquirerEnvAsync() {
    return this.inquirer.prompt([
        {
            type: 'list',
            name: 'env',
            message: '选择当前所使用的环境:',
            choices: [
                'online',
                'stage',
            ],
        }
    ]);
}

联系我

如果你有好的意见或建议,欢迎扫面下面二维码交流 👇

image.png

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].