微信小程序的渐进式框架
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
origin
README.md
test.js
test.wxml

README.md

weapp-origin 小程序轻量级渐进式框架

v0.1

功能

  • 直接在小程序内使用,无需使用构建工具。
  • 无需js处理的,表单双向绑定。
  • 在任何地方都可以获取url参数this.$router.query,抛弃 onLoad()
  • 简洁的http请求:this.$http.post()
  • 简单的data参数获取/设置方式:this.$('msg') & this.$('msg',1)
  • 数据改变监听。
  • 渐进式框架,按需使用,你一样可以使用小程序自带的任何api。

开始

第一步,导入: const origin = require('./origin/origin');

第二步,替换Page函数: Page({}) 改成:origin({})

第三步,按需使用:

const origin = require('./origin/origin');
const Validator = require('./origin/Validator');

origin({
    /**
     * 页面的初始数据
     */
    data: {},
    // 监听值变化
    watch: {},
    /**
     * 用户登录后的回调,一切的起点。
     */
    mounted() {
        console.warn(this.$router.query);
    },
    // 所有函数在这写
    methods: {
        test() {},
        onShow() {
            console.warn(this.$router.query);
        }
    },
    // 也可以在这写
    test(){}
    /**
     * 生命周期函数--监听页面显示
     */
    onShow() {
        console.warn(this.$router.query);
    }
})

双向绑定

参数 说明
bind="o-model" o-model为双向绑定函数
data-model 想要改变的值的路径
data-value 当o-model调用后想要设置的值
data-methods 当值发生改变后调用的函数

简单使用

监听事件委托至o-model,并且使用data-model设置要改变的值的路径,不需要使用js监听。

<textarea bindinput="o-model" data-model="form.info"></textarea>

或使用在日期选择器上,不需要处理任何js。

<picker mode="date" value="{{form.date}}" bindchange="o-model" data-model="form.date">
    <input value='{{form.date}}' disabled placeholder='请选择'></input>
</picker>

做一个开关。

<!-- 点击后会切换显示 -->
<button bindtap="o-model" data-model="isShow" data-value="{{isShow?false:true}}">		{{isShow}}
</button>
<view wx:if="{{isShow}}">Hello Word</view>

当数值改变后,调用一个函数。

<!-- 值发生变化后调用函数,可以使用js中的watch或使用data-methods -->
<picker value="{{date}}" bindchange="o-model" data-methods="update" data-model="date">
</picker>

路由

使用this.$router进行路由操作。

路由跳转

this.$router.to({
       url: '', //url
           
       query: {
            // url参数
            id: 1
       }
});

指定跳转函数

this.$router.to({
       url: '', //url
            // url参数
       query: {
            id: 1
       }
},'reLaunch');//默认 navigateTo 跳转

取得当前页面的参数

this.$router.query//=>{id:1}

data操作

设置

this.$('id',1);//=> this.setData({a:1})

获取

this.$('form.id')//=> this.data.form.id

网络请求

// http请求
this.$http.post('接口名', {
    user_name: '',
    user_id: '',
}, res => {
    // 请求成功
}, error => {
    // 请求失败
});

监听器

注:目前仅能实现监听框架内对data操作的变化

origin({
    data:{},
    watch:{
        isShow(v){
           console.log(v);
        }
    },
    methods{}
})

完整代码

const origin = require('./origin/origin');
const Validator = require('./origin/Validator');

origin({
    /**
     * 页面的初始数据
     */
    data: {
        user_id: 1,
        id: 2,
        msg: 'Hello Word',
        userInfo: {
            head: 1,
            info: 2
        },
        form: {
            head: 1,
            info: 2,
            date: ''
        },
        isShow: true,
        flag: ''
    },
    // 监听值变化
    watch: {
        isShow(v) {
            console.warn(v);
        }
    },
    /**
     * 用户登录后的回调,一切的起点。
     */
    mounted() {

        // ======================================================

        // 获取url参数
        let query = this.$router.query; //返回如:{a:1}
        console.warn(query);

        // ======================================================

        // http请求
        this.$http.post('接口名/接口名', {
            user_name: '',
            user_id: '',
            userInfo: {
                head: 1,
                info: 2
            }
        }, res => {
            // 请求成功
        }, error => {
            // 请求失败
        });

        // ======================================================

        // 取data参数

        this.data.msg;//微信
        let msg = this.$('msg');//框架
        let head = this.$('userInfo.head');//框架
        console.warn('msg:', msg);
        console.warn('head:', head);
        console.warn('head:', this.$('userInfo.head'));

        // ======================================================

        // 设置data参数
        // 微信设置变量
        this.setData({
            flag: this.data.flag == 1 ? 0 : 1,
            user_id: 2,
            ['form.info']: 2
        })
        // 框架设置变量
        this.$('flag', this.$('flag') == 1 ? 0 : 1);

        this.$('form.info', 2);

        this.$('id', this.$router.query.id);

        // or
        this.$('flag', 1)
            .$('form.info', 2)
            .$('id', 3);

        // ======================================================

        // 页面跳转
        let url = this.$router.to({
            url: '', //url
            // url参数
            query: {
                id: 1
            }
        });
        console.warn(url);

        // ======================================================
        // 表单验证,下面是两种方式展示
        let map = {
            head: { required: true, error: () => this.$toast('头像不能为空!') },
            info: {
                required: true, error: () => {
                    this.$toast('签名不能为空!')
                }
            },
        };

        new Validator()
            .map(map)//指定一个规则
            .validate(this.$('form'), () => {
                this.$http.post('user/create', this.$('form'), res => {
                    // 成功回调
                }, e => {
                    this.$toast('提交失败!');
                });
            })

    },
    // 所有函数在这写
    methods: {
        test() {
            // 微信设置变量
            this.setData({
                flag: this.data.flag == 1 ? 0 : 1
            })
            // 框架设置变量
            this.$('flag', this.$('flag') == 1 ? 0 : 1)
        },
        onShow() {
            console.warn(this.$router.query);
        },
    },
    // 也可以在这写
    // test() { },
    /**
     * 生命周期函数--监听页面显示
     */
    // onShow() {
    //     console.warn(this.$router.query);
    // },

})

注意

目前本框架仅实现部分功能,有些业务逻辑,比如登录等操作,需要根据实际业务进行代码修改。