gulp-vue2mini 使用教程

Fork Me On Github

资源

npm gulp-vue2mini

 
npm i gulp-vue2mini
1

示例

前言

本插件开发初衷,以类似于 vue 的代码语法开发微信小程序

但是,本程序不能直接把vue 程序转化为小程序代码。

那么,这样做有必要吗?

有!

  1. 熟悉vue语法的开发者能快速上手
  2. 小程序代码本身是 jscsshtmljson 分离的,这样看上出去文件繁多,一个小项目干嘛要那么麻烦
  3. 本程序是使用 typescript ,有很好的代码提示

使用

本程序提供配套示例代码,这是一个初始化版本,

直接下载本代码,

vscode 中打开

 
npm i
1

安装依赖

src/app.vue 为程序入口

src/pages/index 为首页

编译程序

 
npm run build
1

如果你的 vscode 安装了 Code Runner 扩展,支持右键编译当前单个文件

功能介绍

支持 ts sass

支持拆解html js ts sass css 写在一个文件上的情况

sass 支持ttf文件自动转化为 base64

sass 引用模式自动处理

自动转化html 为 wxml, 自动转化 v-if v-for v-else v-show

支持json自动生成,支持 属性合并

注意:span 标签下不能包含其他标签,否则会自动转换为view

标签属性转化列表

属性名 目标属性
v-if wx:if="{{ }}"
v-elseif wx:elif="{{ }}"
v-else wx:else
v-bind:src src
href url
@click bindtap
v-on:click bindtap
(click) bindtap
@touchstart bindtouchstart
@touchmove bindtouchmove
@touchend bindtouchend
:key
v-show hidden="{{! }}"
v-for wx:for="{{ }}" wx:for-index=" " wx:for-item=""
v-model value="{{ }}" bind:input=" Changed"
第一个字符为@且值不为空 bind:
第一个字符为: ={{ }}
其他包含@

支持 对 picker switch slider 执行 v-model 值绑定

支持 :class 数组形式及 {active: true} 形式自动会合并 class

支持 @click 直接赋值及直接传参数 @click="i = 1" @click="tap(i, a)"

定义WxPage WxCommpent WxApp 三个类,增强 setData 的智能提示,

export 是为了避免提示未使用,编译时会自动去除

增加自动添加 Page(new Index()) Commpent(new Index()) App(new Index()) 到末尾

增加json配置生成

ts
           

@WxJson({
    usingComponents: {
        MenuLargeItem: "/components/MenuLargeItem/index",
        MenuItem: "/components/MenuItem/index"
    },
    navigationBarTitleText: "个人中心",
    navigationBarBackgroundColor: "#05a6b1",
    navigationBarTextStyle: "white"
})
1234567891011

自动合并页面相关的json文件

支持自动合并 methods lifetimes pageLifetimes, 如果已有 属性会自动合并

methods  @WxMethod
lifetimes @WxLifeTime
pageLifetimes @WxPageLifeTime

自定义部件自动合并方法到methods属性中

ts
          
methods = {
    aa() {

    }
}

@WxMethod()
tapChange(mode: number) {
}
12345678910

最终生成

ts
       
methods = {
    tapChange(mode: number) {
    },
    aa() {

    }
}
1234567

标准模板

index.vue

html
                               
<template>
    <div>

    </div>
</template>
<script lang="ts">
import {
    IMyApp
} from '../../app';

const app = getApp<IMyApp>();

interface IPageData {
    items: number[],
}

export class Index extends WxPage<IPageData> {
    public data: IPageData = {
        items: []
    };

    onLoad() {
        this.setData({
            items: []
        });
    }
}
</script>
<style lang="scss" scoped>

</style>
12345678910111213141516171819202122232425262728293031

最终会处理为3个文件

index.wxml

html
   

<view></view>
123

index.wxss

css
 
1

index.js

js
                 
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
var app = getApp();
var Index = (function () {
    function Index() {
        this.data = {
            items: [],
        };
    }
    Index.prototype.onLoad = function () {
        this.setData({
            items: []
        });
    };
    return Index;
}());
Page(new Index());
1234567891011121314151617

注意

新增了一些指定的声明请参考

点击查看全文
标签: 小程序
0 263 0
玩转vue和小程序