资源
npm gulp-vue2mini
前言
本插件开发初衷，以类似于 vue 的代码语法开发微信小程序
但是，本程序不能直接把vue 程序转化为小程序代码。
那么，这样做有必要吗？
有！
- 熟悉vue语法的开发者能快速上手
- 小程序代码本身是
js、css、html、json分离的，这样看上出去文件繁多，一个小项目干嘛要那么麻烦 - 本程序是使用
typescript，有很好的代码提示
使用
本程序提供配套示例代码，这是一个初始化版本，
直接下载本代码，
在 vscode 中打开
安装依赖
src/app.vue 为程序入口
src/pages/index 为首页
编译程序
如果你的 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， 如果已有 属性会自动合并
methods @WxMethod
lifetimes @WxLifeTime
pageLifetimes @WxPageLifeTime自定义部件自动合并方法到methods属性中
最终生成
标准模板
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>最终会处理为3个文件
index.wxml
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());注意
新增了一些指定的声明请参考
转载请保留原文链接： https://zodream.cn/blog/id/133.html