学习wepy

来源:简书 分类: 文章浏览史 发布时间:2023-11-07 22:50:22 最后更新:2023-11-07 浏览:135
转载声明:
本文为摘录自“简书”,版权归原作者所有。
温馨提示:
为了更好的体验,请点击原文链接进行浏览
摘录时间:
2023-11-07 22:50:22

第六单元 wepy

二、本单元知识点概述

三、本单元教学目标

(Ⅰ)重点知识目标

1.wepy的安装与运行

2.wepy配置

(Ⅱ)能力目标

1.掌握wepy的安装与运行

2.掌握wepy配置

四、本单元知识详讲

6.1. wepy

官网:WePY Document

6.1.1 wepy简介

什么是wepy

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

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

为什么要使用wepy

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

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

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

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

支持第三方的 npm 资源

持多种插件处理和编译器

6.1.2 wepy的安装与运行

安装wepy

npm i -g @wepy/cli

运行

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支持值

stylecsscss、less、scss、stylus、postcss

templatehtmlhtml、wxml、xml、pug(原jade)

scriptbabelbabel、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页面渲染数据对象,存放可用于页面模板绑定的渲染数据

methodswxml事件处理函数对象,存放响应wxml中所捕获到的事件的函数,如bindtap、bindchange

eventsWePY组件事件处理函数对象,存放响应组件之间通过$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 创建页面的注意事项

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

每个页面的路径,必须记录到 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

下载@wepy/use-promisify

npm i @wepy/use-promisify

基本用法

import wepy from '@wepy/core';

import promisify  from '@wepy/use-promisify';

wepy.use(promisify)

小程序中异步API调用方法

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

示例代码:

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

简化参数

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.明白下单的流程

php技术微信