微信小程序组件化开发框架wepy 学习(二)

简介: 1.文件结构 文件结构类似VUE文件 扩展名为 .wpy

文件

1.文件结构 文件结构类似VUE文件 扩展名为 .wpy

<template>
  <!--渲染模板 对应wxml -->
</template>

<script>
  // 脚本 对应 .js
</script>

<style>
  /*样式 对应 wxss*/
</style>

2.文件类型 文件类型声明与<script>有关

  • 声明为app 入口 即 原生 app.js 只能声明一个 声明类继承 ==wepy.app==

<script>
import wepy from 'wepy'
import 'wepy-async-function'

export default class extends wepy.app {
   //config app.json  你新增一个页面 都要配置pages
 config = {
   pages: [
     'pages/test'
   ],
   window: {
     backgroundTextStyle: 'light',
     navigationBarBackgroundColor: '#fff',
     navigationBarTitleText: 'WeChat',
     navigationBarTextStyle: 'black'
   }
 }
//   全局数据对象
 globalData = {
   userInfo: null
 }
//   构造器  使用了 requestfix 优化   不用可以忽略
 constructor () {
   super()
   this.use('requestfix')
 }
//   生命周期函数  自定义函数
    onLaunch() {}
}
</script>
  • 声明为page 页面 页面为 无组件页面或者 组件页面 声明类继承 ==wepy.page==

<script>
 
  import wepy from 'wepy'
 

  export default class Test extends wepy.page {
    customData = {}  // 自定义数据

    customFunction () {}  //自定义方法

    onLoad () {}  // 在Page和Component共用的生命周期函数

    onShow () {}  // 只在Page中存在的页面生命周期函数

    config = {};  // 只在Page实例中存在的配置数据,对应于原生的page.json文件

    data = {};  // 页面所需数据均需在这里声明,可用于模板数据绑定

    components = {};  // 声明页面中所引用的组件,或声明组件中所引用的子组件

    mixins = [];  // 声明页面所引用的Mixin实例

    computed = {};  // 声明计算属性(详见后文介绍)

    watch = {};  // 声明数据watcher(详见后文介绍)

    methods = {};  // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明

    events = {};  // 声明组件之间的事件处理函数
}
</script>

  • 声明为组件 页面 页面为 无组件页面或者 组件页面 声明类继承 ==wepy.page==

<script>
 
  import wepy from 'wepy'
 

  export default class com extends wepy.component {
    customData = {}  // 自定义数据

    customFunction () {}  //自定义方法

    onLoad () {}  // 在Page和Component共用的生命周期函数

    config = {};  //只在Page实例中存在的配置数据,对应于原生的page.json文件

    data = {};  // 页面所需数据均需在这里声明,可用于模板数据绑定

    components = {};  // 声明页面中所引用的组件,或声明组件中所引用的子组件

    mixins = [];  // 声明页面所引用的Mixin实例

    computed = {};  // 声明计算属性(详见后文介绍)

    watch = {};  // 声明数据watcher(详见后文介绍)

    methods = {};  // 声明页面wxml中标签的事件处理函数。注意,此处只用于声明页面wxml中标签的bind、catch事件,自定义方法需以自定义方法的方式声明

    events = {};  // 声明组件之间的事件处理函数
}
</script>

总结:  编译后上述三种类型对应生成各自的原生类型 json、 wxss、 js、 wxml 生成文件的文件名与wpy文件类名无关。类名仅对引用有关 例如类型为 Page的文件 index.wpy编译后会生成index.json、 index.wxss、 index.js、 index.wxml 类名可自行定义 约定 ==不要以$ _== 开头 类型声明与声明类的继承类型有关 app类 每个应用只能有一个 其他细节可阅读官方文档

组件

一个组件可以引用零到多个组件被引用的组件需要在宿主组件注册 组件的引用是静态类型的 也就是一个组件如果对另一个组件多次引用 如果需要隔离必须对每次的引用进行唯一标识

组件 mo.wpy


<template>
  <view>
    <text @tap="clickMe">{{text}}</text>
    <text class="sub-text">{{domain.title}}</text>
  </view>
</template>

<script>
  import wepy from 'wepy'
  //   引入组件
  import PropData from '@/components/propData'
  export default class mo extends wepy.component {
         // 组件引用组件  如果PropData多次被引用而且希望相互隔离 key 要保持唯一  
    components = { pro: PropData};
    props = {
      d: String
    };
    data = {
      text: 'this is demo'
    };
    methods = {
      clickMe() {
        this.text = ' click it '
      }
    };

    onLoad() {
      console.log('mo is loading now ')
      console.log(this.d)
    }
  }
</script>

<style>
  text {
    color: brown;
  }

  .sub-text {
    color: darkmagenta;
    font-size: larger;
  }
</style>

页面 test.wpy

<style>
  view {
    margin: 0 auto;
  }

  .view-class {
    color: darkmagenta;
    font-family: "Fira Code Retina";
    text-align: -webkit-center;
    text-transform: capitalize;
    font-weight: bolder;
  }
</style>

<script>
  import meths from '@/js/charts.js'
  import wepy from 'wepy'
//   组件引入
  import Mo from '@/components/mo'
  import PropData from '@/components/propData'

  export default class Test extends wepy.page {
    config = {};
    // 组件注册  如果Mo多次被引用而且希望相互隔离 key 要保持唯一  
    components = {mo: Mo, pro: PropData};
    data = {
      list: [{id: 1, title: '第一'}, {id: 2, title: '第二'}, {id: 3, title: '第三'}],
      valueText: '',
      viewClass: 'view-class',
      customData: {customText: '父组件参数'}
    };

    onLoad() {
      let {title} = this.list[1]
      console.table(this.list)
      console.log(meths.sub(title))
      meths.concatStr('hello', 'world', 'wepy')
    };

    methods = {
      inputChange(e) {
        this.valueText = e.detail.value
      }
    };
    watch = {
      valueText(newValue, oldValue) {
        console.log(`num value: ${oldValue} -> ${newValue}`)
      }
    }
  };

</script>

<template>
  <view><input type="text" value="{{valueText}}" @input="inputChange"></view>
  <view>{{valueText}}</view>
  <repeat for="{{list}}" item="item">
    <mo d="ssssssss" :domain="item"/>
  </repeat>
  <pro :n="viewClass" :valueText.sync="valueText"></pro>
</template>


总结 其实非常类似于VUE 生命周期函数 类似于vue 的钩子函数 如果熟悉VUE的方式 这个应该很容易上手 当然与VUE还有一些不同 可对官方文档进行学习 第三章将对 数据绑定交互进行研究和简单的分析


原文发布时间为:2018年06月20日
原文作者:NotFound403

本文来源:开源中国 如需转载请联系原作者


目录
相关文章
|
11天前
|
传感器 小程序 搜索推荐
(源码)java开发的一套(智慧校园系统源码、电子班牌、原生小程序开发)多端展示:web端、saas端、家长端、教师端
通过电子班牌设备和智慧校园数据平台的统一管理,在电子班牌上,班牌展示、学生上课刷卡考勤、考勤状况汇总展示,课表展示,考场管理,请假管理,成绩查询,考试优秀标兵展示、校园通知展示,班级文化各片展示等多种化展示。
34 0
(源码)java开发的一套(智慧校园系统源码、电子班牌、原生小程序开发)多端展示:web端、saas端、家长端、教师端
|
11天前
|
小程序 前端开发 JavaScript
微信小程序MINA框架
【6月更文挑战第4天】微信小程序MINA框架是一个专为小程序设计的框架,它主要分为两大部分:页面视图层(View)和AppService应用逻辑层。下面我将结合代码和图示来详细讲解MINA框架。
16 0
|
18天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的智慧旅游平台开发微信小程序的详细设计和实现
34 8
|
2天前
|
存储 小程序 前端开发
用云开发快速制作客户业务需求收集小程序丨实战
用云开发快速制作客户业务需求收集小程序丨实战
|
4天前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
17天前
|
小程序 JavaScript Java
基于SpringBoot+Vue+uniapp微信小程序的外卖小程序的研究与开发的详细设计和实现
基于SpringBoot+Vue+uniapp微信小程序的外卖小程序的研究与开发的详细设计和实现
20 0
|
2天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园导航微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
18 4
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的课堂考勤微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园顺路代送微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园顺路代送微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
|
4天前
|
JavaScript Java 测试技术
基于SpringBoot+Vue+uniapp的校园约拍微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)
基于SpringBoot+Vue+uniapp的校园约拍微信小程序的详细设计和实现(源码+lw+部署文档+讲解等)