注意
【项目地址】GITHUB
本程序不做任何引入其他代码做为底层，仅支持原生代码
本框架基于 typescript gulp sass 开发，自动生成原生小程序代码
本框架优化 ts 智能提示，自动转换 html 为 wxml 自动编译 sass 为 wcss
本项目自带转化工具
支持 ts sass
支持拆解html js ts sass css 写在一个文件上的情况
sass 引用模式未做处理
自动转化html 为 wxml, 自动转化 v-if v-for v-else v-show
支持json自动生成，支持 属性合并
更新
定义WxPage WxCommpent 两个类，增强 setData 的智能提示，
export 是为了避免提示未使用，编译时会自动去除
增加自动添加 Page(new Index()) Commpent(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
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/51.html