• 前端技术前沿3


    wepy框架

    全局安装wepy: npm i -g wepy-cli

    初始化项目: wepy init standard myproject

    切换到项目目录: cd myproject

    安装依赖: npm install

    wepy框架是腾讯内部基于小程序的开发框架

    /index.js
    
    //获取应用实例
    
    var app = getApp()
    
    Page({
    
       data: {
    
           motto: 'Hello World',
    
           userInfo: {}
    
       },
    
       //事件处理函数
    
       bindViewTap: function() {
    
           console.log('button clicked')
    
       },
    
       onLoad: function () {
    
           console.log('onLoad')
    
       }
    
    })
    

    基于wepy的实现

    import wepy from 'wepy';
    
     
    
    export default class Index extends wepy.page {
    
     
    
       data = {
    
           motto: 'Hello World',
    
           userInfo: {}
    
       };
    
       methods = {
    
           bindViewTap () {
    
               console.log('button clicked');
    
           }
    
       };
    
       onLoad() {
    
           console.log('onLoad');
    
       };
    
    }
    
    // index.wpy
    
    <template>
    
       <view>
    
           <panel>
    
               <h1 slot="title"></h1>
    
           </panel>
    
           <counter1 :num="myNum"></counter1>
    
           <counter2 :num.sync="syncNum"></counter2>
    
           <list :item="items"></list>
    
       </view>
    
    </template>
    
    <script>
    
    import wepy from 'wepy';
    
    import List from '../components/list';
    
    import Panel from '../components/panel';
    
    import Counter from '../components/counter';
    
     
    
    export default class Index extends wepy.page {
    
     
    
       config = {
    
           "navigationBarTitleText": "test"
    
       };
    
       components = {
    
           panel: Panel,
    
           counter1: Counter,
    
           counter2: Counter,
    
           list: List
    
       };
    
       data = {
    
           myNum: 50,
    
           syncNum: 100,
    
           items: [1, 2, 3, 4]
    
       }
    
    }
    
    </script>
    

    image.png

    wepy中的生命周期
    onLoad,onReady,onShow,onPrefetch等,其中onReady,onShow,onPrefetch只有wepy.page中才有用。

    官方案例:
    // parent.wpy
    <child :title = 'parentTitle' :syncTitle.sync = 'parentTitle' :twoWayTitle = 'parentTitle'></child>
    在script中的设置
    data = {
        parentTitle: 'p-title'
    }
    
    // child.wpy
    props = {
        // 静态传值
        title: String,
    
        // 父向子单向动态传值
        syncTitle: {
            type: String,
            default: 'null'
        },
    
        twoWayTitle: {
            type: Number,
            default: 'nothing',
            twoWay: true
        }
    };
    
    onLoad () {
        console.log(this.title); // p-title
        console.log(this.syncTitle); // p-title
        console.log(this.twoWayTitle); // p-title
    
        this.title = 'c-title';
        console.log(this.$parent.parentTitle); // p-title.
        this.twoWayTitle = 'two-way-title';
        this.$apply();
        console.log(this.$parent.parentTitle); // two-way-title.  --- twoWay为true时,子组件props中的属性值改变时,会同时改变父组件对应的值
        this.$parent.parentTitle = 'p-title-changed';
        this.$parent.$apply();
        console.log(this.title); // 'c-title';
        console.log(this.syncTitle); // 'p-title-changed' --- 有.sync修饰符的props属性值,当在父组件中改变时,会同时改变子组件对应的值。
    }
    
    parent.wpy
    <template>
        <view>
            <children @childFun.user = 'someEvent'></children>
        </view>
    </template>
    <script>
    export default class Parent extends wepy.page{
        data = {
            name: 'parent'
        }
        events = {
            'some-event': (p1, p2, p3, $event) => {
                //  输出为'parent receive some-event children',$event.source指向子组件。
                console.log(`${this.name} receive ${$event.name} from ${$event.source.name}`)
            }
        }
        onLoad () {
                this.$broadcast('getIndex', 1, 4)
        }
        methods = {
            someEvent (...p) {
                // 输出[1, 2, 3, _class]。
                console.log(p)
            }
        }
    }
    </script>
    
    children.wpy
    <script>
    export default class Parent extends wepy.page{
        data = {
            name: 'children'
        }
        onLoad () {
            // this.$emit('some-event', 1, 2, 3)
            // 触发组件中的自定义事件
            this.$emit('childFun', 1, 2, 3)
        }
        events = {
            'getIndex': (...p) => {
                console.log(p)        // 输出[1, 4]
            }
        }
    }
    在父组件中给子组件添加属性@childFun.user = 'someEvent'后,在子组件中修改触发条件this.$emit('childFun', 1, 2, 3)
    
    
    //$invoke
    父组件向子组件发送事件:
    使用import导入子组件后,在使用时可以直接通过
    this.$invoke('子组件,必须要单引号括起来', '子组件方法名称',  param1,param2,param3.......);
    子组件间发送事件:
    this.$invoke('子组件的相对路径', '子组件方法名称',  param1,param2,param3.......);
    子组件的相对路径的理解: 当设置'./'即当前组件,'../'为父组件,以此类推。它可以指定向哪一个组件分发内容,但只适用于简单的组件树结构,复杂的结构考虑使用redux。
    
    // mixin.js
    export default class TestMixin extends wepy.mixin {
        data = {
            foo: 'foo defined by page',
            bar: 'bar defined by testMix'
        };
        methods: {
        tap () {
          console.log('mix tap');
        }
      }
    }
    ....
    import wepy from 'wepy';
    import TestMixin from './mixins/test';
    export default class Index extends wepy.page {
        data = {
            foo: 'foo defined by index'
        };
        mixins = [TestMixin ];
        onShow() {
            console.log(this.foo); // foo defined by index
            console.log(this.bar); // bar defined by testMix
        }
    }
    
    // mixin.js
    export default class TestMixin extends wepy.mixin {
        onLoad () {
            console.log(2222)
        }
    }
    ....
    import wepy from 'wepy';
    import TestMixin from './mixins/test';
    export default class Index extends wepy.page {
        data = {
            foo: 'foo defined by index'
        };
        mixins = [TestMixin ];
        onLoad() {
            console.log(11111); 
        }
    }
    结果打印为: 
    2222
    11111
    

    wxs的使用

    // 设置一个过滤器对超过10000的数字进行转化
    module.exports = {
      filter: function (num) {
        if (num < 10000) {
          return num
        } else {
          var reNum = (num / 10000).toFixed(1) 
          return reNum + '万'
        }
      }
    }
    
    // template中使用过滤器,mywxs对应下方wxs中设置的key值
    <view>{{mywxs.filter(mItem.playerCount)}}人</view>
    .....
    import mywxs from '@/wxs/fixed.wxs'
    export default class Index extends wepy.page{
    ......
    wxs = {
        mywxs: mywxs
    }
    .....
    }
    

    请点赞!因为你的鼓励是我写作的最大动力!

    官方微信公众号

    吹逼交流群:711613774

    吹逼交流群

  • 相关阅读:
    c++ 函数
    c++ 数字
    c++语句(判断)
    十九、夜间模式的开启与关闭,父模板的制作
    二十、开始Flask项目
    十八、完成登录与注册页面的前端
    十七、JavaScript 基础,登录前端验证
    CSS实例:图片导航块
    十五、导航,头部,CSS基础
    十四、web基础,用html元素制作web页面
  • 原文地址:https://www.cnblogs.com/dashucoding/p/11140236.html
Copyright © 2020-2023  润新知