注意
【项目地址】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"
})
自动合并页面相关的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/51.html