微信小程序自用框架开发

Fork Me On Github

注意

【项目地址】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配置生成

ts
           

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

ts
          
methods = {
    aa() {

    }
}

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

最终生成

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

    }
}
1234567

标准模板

index.vue

html
                               
<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

html
   

<view></view>
123

index.wxss

css
 
1

index.js

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
点击查看全文
0 532 0