gulp-vue2mini 使用教程-zodream梦想开源/个人编程日记

资源

npm i gulp-vue2mini

示例

前言

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

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

那么，这样做有必要吗？

有！

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

使用

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

直接下载本代码，

在 vscode 中打开

npm i

安装依赖

src/app.vue 为程序入口

src/pages/index 为首页

编译程序

npm run build

如果你的 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配置生成


@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属性中

methods = {
    aa() {

    }
}

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

12345678910

最终生成

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

    }
}

1234567

标准模板

index.vue

<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


<view></view>

123

index.wxss

index.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

注意

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

转载请保留原文链接： https://zodream.cn/blog/id/133.html