资源

npm gulp-vue2mini

npm i gulp-vue2mini

示例

前言

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

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

那么，这样做有必要吗？

有！

1. 熟悉vue语法的开发者能快速上手
2. 小程序代码本身是 js、css、html、json 分离的，这样看上出去文件繁多，一个小项目干嘛要那么麻烦
3. 本程序是使用 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"
})

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

支持自动合并 methods lifetimes pageLifetimes， 如果已有...