zoukankan      html  css  js  c++  java
  • 对小程序框架WePY的精简总结


    一、注意点

    关闭ES6转ES5
    关闭上传代码时样式自动补全
    关闭代码压缩上传
    本地开发选择dist目录,dist目录也用在开发者工具上实时预览和调试
    WePY框架对应的开发目录为src
    二、代码规范
    - 变量方法名使用驼峰式命名,不能用$开头
    - WePY文件的后缀名为.wpy;外链的文件可以是其他后缀
    - 用ES6开发,语法糖简介代码
    - 用Promise
    - 事件绑定
    原bindtap=“click”,改为@tap=“click”
    原catchtap=“click”,改为@tap.stop=“click”
    原capture-bind:tap=“click”,改为@tap.capture=“click”
    原capture-catch:tap=“click”,改为@tap.capture.stop=“click”
    - 事件传参
    原bindtap=“click” data-index={{index}},改为@tap=“click({{index}})”
    - 事件绑定和冒泡
    bind不会阻止冒泡事件,catch会阻止。
    - 事件捕获阶段
    1.5.0起,触摸类事件支持捕获阶段。
    捕获阶段位于冒泡阶段之前,而且在捕获阶段中,事件到达节点的顺序与冒泡阶段恰好相反。

    三、.wpy文件说明
    一个.wpy文件可分为三大部分,各自对应于一个标签:

    1.脚本部分,即<script></script>标签中的内容,又可分为两个部分:
        逻辑部分,除了config对象之外的部分,对应于原生的.js文件;

        配置部分,即config对象,对应于原生的.json文件。

    2.结构部分,即<template></template>模板部分,对应于原生的.wxml文件。

    3.样式部分,即<style></style>样式部分,对应于原生的.wxss文件。

    1.脚本部分,即<script></script>标签中的内容,又可分为两个部分:
        逻辑部分,除了config对象之外的部分,对应于原生的.js文件;
    
        配置部分,即config对象,对应于原生的.json文件。
    
    2.结构部分,即<template></template>模板部分,对应于原生的.wxml文件。
    
    3.样式部分,即<style></style>样式部分,对应于原生的.wxss文件。

    其中,小程序入口文件app.wpy不需要template,所以编译时会被忽略。.wpy文件中的script、template、style这三个标签都支持lang和src属性,lang决定了其代码编译过程,src决定是否外联代码,存在src属性且有效时,会忽略内联代码。

    各标签对应的lang值:

    style:默认对应css,可选的有css、less、scss、stylus、postcss
    template:默认对应wxml,可选的有wxml、xml、pug(原jade)
    script:默认对应babel,可选的有babel、TypeScript
    四、pages结构分析

    config:页面配置对象,对应原生的page.json
    component:页面组件列表对象,表明页面所引入的组件开发
    data:页面渲染数据对象,存放可用于页面绑定的渲染数据
    methods:bindtap等事件
    events:组件事件处理函数对象,响应组件之间的$emit/broadcast/invoke所传递的事件的函数
    其他:生命周期函数,其他自定义的方法、属性
    五、WePY组件化

    components目录下的文件为可重复使用的组件
    当页面需要引入组件或组件需要引入子组件时,必须在.wpy文件的script脚本部分先import组件文件,然后在components对象中给组件声明唯一的组件ID,接着在template模板部分添加以component对象中所声明的组件ID进行命名的自定义标签以插入组件
    如果同一个组件引入一次以上,需要分配不同的组件ID,因为组件ID是唯一标识,每个ID对应一个组件实例,为了避免两个以上的组件共同用一个实例与数据,其中一个组件数据变化时,另一个也发生变化
    子组件的驼峰命名,在template中不能与vue那样写成短横杠式命名,就照搬即可
    六、组件的循环渲染
    1.4.6新增,循环渲染WePY组件时,必须使用WePY定义的辅助标签,原wx:for=“{{arr}}”,wx:key=”index”等,改为

    七、computed计算属性
    其是有返回值的函数,可直接被当作绑定数据来使用,因此类似于data属性,代码中可通过this.计算属性名来引用,模板也可通过{{计算属性名}}绑定data
    注意:组件中数据发生变化,计算属性就会被重新计算

    八、props传值
    父组件引入了子组件,然后往子组件传值

    静态传值:只能传string类型
    父组件->子组件
    父:
    子:props={title:string}
    onload(){console.log(this.title)}
    动态绑定:
    父->子,.sync,父影响父
    子->父,twoWay:true,子影响父
    九、组件之间的通信与交互 事件
    $broadcast/emit/invoke,写于events对象中,methods中写的是bindtap等事件

    $broadcast父组件发起,所有子组件都会收到此广播事件
    $emit,子组件发起,往上冒泡式接收
    invoke,一个页面或者组件对另一个组件中的方法直接调用,通过传入组件路径找到相应的组件,然后调用其方法this.invoke,一个页面或者组件对另一个组件中的方法直接调用,通过传入组件路径找到相应的组件,然后调用其方法this.invoke(“Path”,”Method”,”Arguments”)
    十、组件自定义事件处理函数
    例:@Event.user=“myFn”
    @事件修饰符,Event事件名称,.user事件后缀
    后缀:

    .default:绑定冒泡型事件,如bindtap、.default可省
    .stop:绑定捕获型事件,如catchtap等
    .user:用户自定义组件事件,通过$emit触发,如果用了自定义事件,则events中对应的监听函数不会再执行
    十一、slot组件内容分发插槽
    父定义,子引用
    父定义了但是没有内容,这样子设置的默认值也不会显示

    十二、数据绑定
    原生:this.setData({title:”content”})
    WePY:this.title = “content”,需要注意的是异步更新数据时,须手动调用$apply方法,触发脏数据检查流程的运行

    十三、wx.request接收参数

    原生:
    wx:request({
    url:'xxx',
    success:function(data){
    console.log(data);
    }
    })
    WePY:
    wepy.request('xxx').then((data)=>console.log(data))



  • 相关阅读:
    使用openURL实现程序间带参数跳转详解
    [翻译] DFCircleActivityIndicator DF圆形活动状态指示器
    ABC定制视图导航控制器
    [翻译] UIView-draggable 可拖拽的UIView
    [翻译] SFRoundProgressCounterView 带有进度显示的倒计时视图
    [翻译] ColourClock 将时间值转换成背景色
    Solr部署如何启动
    搜索引擎基本工作原理
    面试题 IQ
    解释一下,在你往浏览器中输入一个URL后都发生了什么,要尽可能详细
  • 原文地址:https://www.cnblogs.com/gavinjay/p/9988819.html
Copyright © 2011-2022 走看看