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

素颜马尾好姑娘i 2021-09-19 04:14 431阅读 0赞

## 文件 ##

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

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

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

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

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

总结：  **编译后上述三种类型对应生成各自的原生类型 `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][]

本文来源：[开源中国][Link 1] 如需转载请联系原作者

[NotFound403]: https://my.oschina.net/u/2948566
[Link 1]: https://my.oschina.net/u/2948566/blog/1832947