小程序-wepy入门-1

发表于 2019-03-11 更新于 2021-05-07 分类于前端，小程序

本文字数： 4.5k 阅读时长 ≈ 8 分钟

1.安装（版本1.7.x）

步骤：

(1)安装 npm install wepy-cli -g

(2)wepy list 查看项目模板，新建项目 wepy init standard myproject

(3)换至项目目录 cd myproject

(4)安装依赖 npm install

(5)开启实时编译 wepy build --watch

2.注意事项

(1)项目配置注意事项

project.config.json文件配置项

{
  "description": "project description",
  "setting": {
    "urlCheck": true,
    "es6": false, // 关闭ES6转ES5
    "postcss": false, // 关闭上传代码时样式自动补全
    "minified": false // 关闭代码压缩上传
  },
  "compileType": "miniprogram",
  "appid": "touristappid",
  "projectname": "Project name",
  "miniprogramRoot": "./dist"
}

(2)代码规范

变量与方法尽量使用驼峰式命名，并且注意避免使用$开头。
小程序入口、页面、组件文件名的后缀为.wpy；
事件绑定语法使用优化语法代替。
事件传参使用优化后语法代替。
自定义组件命名应避开微信原生组件名称以及功能标签<repeat>。不可以使用input、button、view、repeat等微信小程序原生组件名称命名自定义组件；另外也不要使用WePY框架定义的辅助标签repeat命名。

(3)开发注意事项

在Page页面实例中，可以通过this.$parent来访问App实例。
WePY中的methods属性只能声明页面wxml标签的bind、catch事件，不能声明自定义方法。普通自定义方法在methods对象外声明，与methods平级。
组件：WePY中的组件都是静态组件，是以组件ID作为唯一标识的，每一个ID都对应一个组件实例，当页面引入两个相同ID的组件时，这两个组件共用同一个实例与数据，当其中一个组件数据变化时，另外一个也会一起变化。为两个相同组件的不同实例分配不同的组件ID，从而避免数据同步变化的问题。
WePY中，在父组件template模板部分插入驼峰式命名的子组件标签时，不能将驼峰式命名转换成短横杆式命名(比如将childCom转换成child-com)
组件的循环渲染：当需要循环渲染WePY组件时(类似于通过wx:for循环渲染原生的wxml标签)，必须使用WePY定义的辅助标签<repeat>，例如：

<template>
    <!-- 注意，使用for属性，而不是使用wx:for属性 -->
    <repeat for="{{list}}" key="index" index="index" item="item">
        <!-- 插入<script>脚本部分所声明的child组件，同时传入item -->
        <child :item="item"></child>
    </repeat>
</template>

监听器适用于当属性改变时需要进行某些额外处理的情形。
组件传值：

静态传值：静态值也需要在父组件的data中定义后才能在组件上进行传值。不能直接将静态值写到组件上，虽然可以在html部分显示出来，但是不能在script中调用，子组件的data中为undefined。不能使用对象传值。框架bug 🤢🤢🤢

动态传值：父组件向子组件传递动态数据内容，父子组件数据完全独立互不干扰。但可以通过使用.sync修饰符来达到父组件数据绑定至子组件的效果，也可以通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。那如果既使用.sync修饰符，同时子组件props中添加的twoWay: true时，就可以实现数据的双向绑定了。

twoWay为true时，表示子组件向父组件单向动态传值，而twoWay为false(默认值，可不写)时，则表示子组件不向父组件传值。

示例：

// parent.wpy

<child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>

data = {
    parentTitle: 'p-title'
};


// child.wpy

props = {
    // 静态传值
    title: String,

    // 父向子单向动态传值
    syncTitle: {
        type: String,
        default: 'null'
    },

    twoWayTitle: {
        type: String,
        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属性值，当在父组件中改变时，会同时改变组件对应的值。
}

用于监听组件之间的通信与交互事件的事件处理函数需要写在组件和页面的events对象中。

父组件向所有子组件传递消息：$broadcast

$broadcast事件是由父组件发起，所有子组件都会收到此广播事件，除非事件被手动取消

子组件向父级和祖先组件传递消息：$emit

一个页面或组件对另一个组件中的方法的直接调用：$invoke

$invoke是一个页面或组件对另一个组件中的方法的直接调用，通过传入组件路径找到相应的组件，然后再调用其方法。
组件自定义事件处理函数，可以通过使用.user修饰符为自定义组件绑定事件，如：@customEvent.user="myFn"其中，@表示事件修饰符，customEvent 表示子组件中定义的事件名称，.user表示事件后缀。.user: 绑定用户自定义组件事件，在子组件中通过$emit触发。注意，如果用了自定义事件，则events中对应的监听函数不会再执行。
slot组件，父组件中的内容分发标签必须具有slot属性，并且其值为子组件中对应的插槽名称，这样父组件内容分发标签中的内容会覆盖掉子组件对应插槽中的默认内容。父组件中一旦声明了对应于子组件插槽的内容分发标签，即便没有内容，子组件插槽中的默认内容也不会显示出来，只有删除了父组件中对应的内容分发标签，才能显示出来。
Mixin混合

默认式混合：对于组件data数据，components组件，events事件以及其它自定义方法采用默认式混合，即如果组件未声明该数据，组件，事件，自定义方法等，那么将混合对象中的选项将注入组件之中。对于组件已声明的选项将不受影响。

兼容式混合：对于组件methods响应事件，以及小程序页面事件将采用兼容式混合，即先响应组件本身响应事件，然后再响应混合对象中响应事件。注意，这里事件的执行顺序跟Vue中相反，Vue中是先执行mixin中的函数，再执行组件本身的函数。
wepy数据绑定中，在异步函数中更新数据的时候，必须手动调用$apply方法，才会触发脏数据检查流程的运行，例如：

setTimeout(() => {
    this.title = 'this is title';
    this.$apply();
}, 3000);

注意：wepy脏数据检查流程。

3.优化细节

(1)request优化，promise

小程序中不能同时发5个以上的请求

// WePY 使用方式, 需要开启 Promise 支持，参考开发规范章节
wepy.request('xxxx').then((d) => console.log(d));

// async/await 的使用方式, 需要开启 Promise 和 async/await 支持，参考 WIKI
async function request () {
   let d = await wepy.request('xxxxx');
   console.log(d);
}

(2)优化事件参数传递

小程序中需要使用data-*进行传递数据

// WePY 1.1.8以后的版本，只允许传string。

<view @tap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view>

methods: {
    tapName (id, title, other, event) {
        console.log(id, title, other)// output: 1, wepy, otherparams
    }
}

(3)数据绑定方式

// WePY
<view> {{ message }} </view>

onLoad () {
    this.message = 'hello world';
}

4.存在的问题

WePY 1.x 版本中，组件使用的是静态编译组件，即组件是在编译阶段编译进页面的，每个组件都是唯一的一个实例，目前只提供简单的 repeat 支持。不支持在 repeat 的组件中去使用 props, computed, watch 等等特性。

// list.wpy
<repeat for="{{mylist}}">
    <view>{{item.name}}</view>
</repeat>

// index.wpy
<List :mylist.sync="mylist"></List>

关于组件循环很多坑，因为无法自定义设置组件的key，默认的key为index，组件内的值可能会被index相同的组件值覆盖。