微信小程序--学习 wepy

第六单元 wepy

一、昨日知识点回顾

1.小程序组件
2.组件的数据与方法
3.Properties
4.组件通信

---

二、本单元知识点概述

---

三、本单元教学目标

（Ⅰ）重点知识目标

1.wepy的安装与运行
2.wepy配置

（Ⅱ）能力目标

1.掌握wepy的安装与运行
2.掌握wepy配置

---

四、本单元知识详讲

6.1. wepy

• 官网：WePY Document

6.1.1 wepy简介

1. 什么是wepy

   • WePY 是腾讯官方出品的一个小程序快速开发框架，对原生小程序的开发模式进行了再次封装，更贴近于 MVVM 架构模式，并支持ES6/7的一些新特性，同时语法风格更接近于 Vue.js，使用 WePY 框架能够提高 小程序的开发效率

   • 注意：WePY 只是小程序的快速开发框架之一，市面上还有诸如 mpvue 之类的小程序开发框架也比较流行

2. 为什么要使用wepy

   1. 开发风格接近于 Vue.js，支持很多vue中的语法特性

   2. 通过 polyfill 让小程序完美支持 Promise

   3. 以使用ES6等诸多高级语法特性，简化代码，提高开发效率

   4. 对小程序本身的性能做出了进一步的优化

   5. 支持第三方的 npm 资源

   6. 持多种插件处理和编译器

6.1.2 wepy的安装与运行

1. 安装wepy

   npm i -g @wepy/cli

2. 运行

   wepy init standard myproject # 使用 standard 模板初始化项目
   cd myproject # 进入到项目目录
   npm install # 安装项目依赖包
   npm run dev # 监听并且编译项目

   ”wepy init” 是固定写法，代表要初始化 wepy 项目；

   ”standard” 代表模板类型为标准模板，可以 运行 ”wepy list” 命令查看所有可用的项目模板；

   ”myproject” 为自定义的项目名称

6.2. wepy文件介绍

6.2.1 介绍.wpy文件的组成部分

• 一个 .wpy 文件可分为四大部分，各自对应于一个标签：

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

  • 脚本部分，即 <script></script> 标签中的内容，又可分为两个部分：

  • 配置部分，即 <config></config>标签部分，对应于原生的 .json 文件

  • 样式部分，即<style></style>样式部分，对应于原生的 .wxss 文件。 其中，小程序入口文件 app.wpy 不需要 template，所以编译时会被忽略。

6.2.2 .wpy文件使用说明

• wpy 文件中的 script、template、style 这三个标签都支持 lang 和 src 属性，lang 决定了其代码编译过程，src 决定是否外联代码，存在 src 属性且有效时，会忽略内联代码

• 各标签对应的 lang 值如下表所示

  标签	lang 默认值	lang 支持值
  style	css	css、less、scss、stylus、postcss
  template	html	html、wxml、xml、pug(原jade)
  script	babel	babel、TypeScript

6.2.3 小程序入口app.wpy

• 入口文件 app.wpy 中所声明的小程序实例继承自 wepy.app 类

  • <style></style>标签：会被编译为小程序的 app.wxss 全局样式

  • <script></script>标签：会被编译为小程序的 app.js文件

  • <config></config>标签：会被编译为小程序的 app.json 全局配置文件

• wepy.app中相关配置说明

  wepy.app({
      // 内置钩子事件，方便开发者可以对内置流程的控制
      hooks: {
          // 在用户注册的所有响应事件前触发(@tap, @change),返回 false 时会取消该事件的响应
          'before-event': function(data) {},
          // 在进行数据绑定之前触发，返回 false 时会取消该时事件绑定
          'before-setData': function(dirty) {}
      },
      // 全局变量，整个小程序内有效
      golbalData: '',
      // 生命周期函数，小程序初始化完毕执行
      onLaunch() {},
      // 方法定义
      methods: {}
  })

6.2.4 页面.wpy文件中的script标签组成结构

• 页面文件 page.wpy 中所声明的页面实例继承自 wepy.page 类，该类的主要属性介绍如下

  属性	说明
  data	页面渲染数据对象，存放可用于页面模板绑定的渲染数据
  methods	wxml事件处理函数对象，存放响应wxml中所捕获到的事件的函数，如bindtap、bindchange
  events	WePY组件事件处理函数对象，存放响应组件之间通过$broadcast、$emit、$invoke所传递的事件的函数
  computed	计算属性
  watch	监听属性
  其它	小程序页面生命周期函数，如created、mounted等，以及其它自定义的方法与属性

6.3. wepy框架开发规范与使用

6.3.1 如何设置默认首页

• 如果要把刚创建的 home.wpy 设置为默认首页，需要打开 src -> app.wpy 入口文件，将 home.wpy 的页面 路径，注册到 config -> pages 数组中，并调整为数组的第一项即可

• 示例代码

  <config>
      {
          pages: ['pages/home', 'pages/index']
      }    
  </config>

6.3.2 创建页面的注意事项

1. 每个页面的 script 标签中，必须导入 @wepy/core 模块，并创建继承自 wepy.page 的页面类,否则会报错

2. 每个页面的路径，必须记录到 app.wpy 的 config -> pages 数组中

6.3.3 页面绑定事件以及传参

• 原生小程序使用 bindtap、bindinput 等绑定事件处理函数，在 wepy 框架中，优化了事件绑定机制，支持类似于 Vue.js 的事件绑定语法

• 例如：

  • 原 bindtap="clickHandler" 替换为 @tap="clickHandler"

  • 原 bindinput="inputHandler" 替换为 @input="inputHandler"

• 代码示例

  <template>
      <button @tap="handleTap(1)">点击</button>
  </template>
  <script>
      import wepy from '@wepy/core'
      wepy.page({
          methods: {
              handleTap(id) {
                  console.log(id)
              }
          }
      })
  </script>

6.3.4 页面以及文本框数据绑定

• 通过v-model指令实现文本框与页面的双向绑定

• 示例代码

  <template>
      <input v-model="msg" /> <br />
      <div>{{ msg }}</div>
  </template>
  <script>
      import wepy from '@wepy/core'
      wepy.page({
          data: {
              msg: "hello world"
          }
      })
  </script>

6.3.5 Wxs脚本的使用

• 与小程序中wxs脚本的使用方式一致，分为外联与内嵌

• 代码示例：

  <template>
    <div>
      {{ mod.upper(msg) }}
    </div>
  </template>
  <wxs module="mod">
    var upper = function(str) {
      return str.substring(0, 1).toUpperCase() + str.substring(1)
    }
    module.exports = {
      upper: upper
    }
  </wxs>
  <script>
  import wepy from '@wepy/core';
  ​
  wepy.page({
    data: {
      msg: "hello world",
    }
  })
  </script>

• 注意：被注册的 wxs 模块，只能在当前页面的 template 中使用，不能在script中使用

6.3.6 配置promisify启用async和await

1. 下载@wepy/use-promisify

   npm i @wepy/use-promisify

2. 基本用法

   import wepy from '@wepy/core';
   import promisify  from '@wepy/use-promisify';
   ​
   wepy.use(promisify)

3. 小程序中异步API调用方法

   • 安装@wepy/use-promisify后，小程序中所有的异步API调用格式为：wepy.wx.方法名

   • 示例代码：

     wepy.wx.getStorage('mykey').then(res => console.log(res));

4. 简化参数

   • weapp-style 函数始终需要一个Object参数，并且此插件将简化参数

   • 示例代码：

     wepy.use(promisify);
     // wepy.wx.getStorage({ key: 'mykey' });
     wepy.wx.getStorage('mykey');
     ​
     // wepy.wx.request({ url: myurl });
     wepy.wx.request(myurl);

6.3.7 Wepy发送get和post请求

• 如果没有安装@wepy/use-promisify,请求示例：

  wx.request({
      url: '', // url地址
      method: '', // GET 或 POST
      data: {}, // 数据请求
      // 请求成功的回调函数
      success() {}
  })

• 如果安装了@wepy/use-promisify,请求示例：

  wepy.wx.request({
      url: '',
      methods: '',
      data: {}
  }).then(data => {
      console.log(data)
  })

• 如果安装了@wepy/use-promisify并且是GET请求，可直接简写成

  wepy.wx.request('url').then(data => { console.log(data) })

五、本单元知识总结**

1.明白下单的流程

---

​