文章目录
第四天笔记 - WePY一、WePY 简介001 - 什么是 `WePY`002 - 为什么使用 `WePY`二、`WePy` 的安装与运行001 - 安装 `WePY`002 - 初始化 `WePY` 项目003 - 运行编译 `WePY` 项目004 - 认识`WePY` 项目目录004 - 将 `WePy` 项目导入到开发者工具中005 - `WePY` 和 小程序项目的关系三、`WePY` 文件介绍001 - 介绍`.wpy`文件的组成部分002 - `.wpy` 文件的使用说明003 - 小程序入口 `app.wpy`004 - `app.wpy` 全局配置小程序外观005 - 页面 `.wpy` 文件中 `script` 标签组成结构四、 `WePY` 框架开发规范与使用001 - 如何设置默认首页002 - 创建页面的注意事项003 - 页面绑定事件以及传参004 - 页面绑定事件的注意事项005 - 页面以及文本框数据绑定006 - `wxs` 脚本的使用007 - 配置 `promisify` 启用 `async` 和 `await`008 - `WePY` 发送 `get` 和 `post` 请求009 - 异步更新数据第四天笔记 - WePY
一、WePY 简介
001 - 什么是WePY
WePY是腾讯官方出品的一个小程序快速开发框架，对原生小程序的开发模式进行了再次封装
002 - 为什么使用WePY
开发风格接近于 Vue.js，支持很多vue中的语法特性；通过 polyfill 让小程序完美支持 Promise；可以使用ES6等诸多高级语法特性，简化代码，提高开发效率；对小程序本身的性能做出了进一步的优化；支持第三方的 npm 资源；支持多种插件处理和编译器；
WePY相比于原生小程序开发，拥有众多的开发特性和优化方案，
二、WePy的安装与运行
001 - 安装WePY
WePY的安装或更新都通过npm进行全局安装npm install wepy-cli -g
002 - 初始化WePY项目
使用命令行方式进行初始化项目结构wepy init standard myproject
”wepy init” – 是固定写法，代表要初始化wepy项目；”standard” – 代表模板类型为标准模板，可以运行 ”wepy list” 命令查看所有可用的项目模板”myproject” – 为自定义的项目名称。
注意：创建项目的时候，要勾选ESLint选项！
003 - 运行编译WePY项目
运行cd myproject切换至 `WePY`` 项目根目录运行npm install安装WePY项目依赖项运行wepy build --watch开启实时编译wepy build --watch命令，会循环监听WePY项目中源代码的变化，自动编译生成小程序项目注意：生成的小程序项目默认被存放于 dist 目录中。
004 - 认识WePY项目目录
004 - 将WePy项目导入到开发者工具中
1.7.0 版本之后的wepy-cli工具生成的项目根目录下，包含project.config.json文件， 记录了项目的基本配置信息，例如：项目的名称、appId、生成的小程序项目根路径等。 如果项目中存在project.config.json文件， 使用 微信开发者工具 --> 导入项目，”项目目录”请选择wepy项目根目录，会根据project.config.json文件的配置，把wepy编译生成的小程序项目加载到微信开发者工具中。005 -WePY和 小程序项目的关系
通过wepy init命令初始化的wepy项目，实际是一个模板项目，不能直接当作小程序运行。需要运行相关的命令，把模板项目编译为小程序项目，才可以运行。三、WePY文件介绍
001 - 介绍.wpy文件的组成部分
一个 .wpy 文件可分为三大部分，各自对应于一个标签： 脚本部分，即<script></script>标签中的内容，又可分为两个部分： 逻辑部分，除了config对象之外的部分，对应于原生的.js文件配置部分，即config对象，对应于原生的.json文件 结构部分，即<template></template>模板部分，对应于原生的.wxml文件。样式部分，即<style></style>样式部分，对应于原生的.wxss文件。 其中，小程序入口文件app.wpy不需要template，所以编译时会被忽略。002 -.wpy文件的使用说明
.wpy文件中的script、template、style这三个标签都支持lang和src属性，
lang决定了其代码编译过程，src决定是否外联代码，存在src属性且有效时，会忽略内联代码。
语法属性
案例代码
<style lang="less" src="page1.less"></style><template lang="wxml" src="page1.wxml"></template><script>// some code</script>
003 - 小程序入口app.wpy
入口文件
app.wpy中所声明的小程序实例继承自wepy.app类，包含一个config属性和其它全局属性、方法、事件。
config属性会被编译为小程序的app.json全局配置文件；config属性之外的其它节点，会被编译为小程序的app.js文件；style 标签会被编译为小程序的app.wxss全局样式；004 -app.wpy全局配置小程序外观
在小程序的入口文件中找到 window 节点：
app.wpy->script标签 ->config->window即可全局配置小程序的外观
window: {backgroundTextStyle: 'dark',navigationBarBackgroundColor: '#fff',navigationBarTitleText: '小程序电商项目',navigationBarTextStyle: 'black'}
005 - 页面.wpy文件中script标签组成结构
页面文件
page.wpy中所声明的页面实例继承自wepy.page类
四、WePY框架开发规范与使用
001 - 如何设置默认首页
打开src->app.wpy入口文件，将新创建的页面路径，注册到config->pages数组中，并调整为数组的第一项即可pages: ['pages/home','pages/index'],
002 - 创建页面的注意事项
每个页面的script标签中，必须导入wepy模块，并创建继承自wepy.page的页面类；否则会报错。每个页面的路径，必须记录到app.wpy的config->pages数组中。页面路径记录完毕之后，必须再回到页面文件中，摁下Ctrl + S快捷键重新编译生成页面，否则会报错。003 - 页面绑定事件以及传参
在在
wepy框架中，优化了事件绑定机制，支持类似于Vue.js的事件绑定语法
WePY中，统一使用@绑定事件，传递参数直接采用@tap='handle({{params}})'传递案例代码<button type='warn' @tap='handle({{age}})'>WePY 绑定事件</button>
data = {age: 18}methods = {handle: function (params) {console.log('触发函数')console.log(params)}}
004 - 页面绑定事件的注意事项
通过
@符号绑定的事件处理函数，必须定义到页面的methods节点下。
WePY中的methods属性只能声明页面wxml标签的事件处理函数，不能声明自定义方法，自定义方法需要声明到和methods平级的节点位置，这与Vue中的用法是不一致的。data = {age: 18}methods = {handle: function (params) {console.log('触发函数')console.log(params)this.add()}}add () {console.log('自定义事件')}
005 - 页面以及文本框数据绑定
.wpy页面中的私有数据，需要定义到 data 节点中，页面上使用双大括号语法 {{ }} 渲染 data 中的数据文本框与 data 做双向数据绑定需要定义事件案例代码<view>{{ age }}</view><input type="text" @input='inputHandle' value="{{ val }}" />
data = {age: 18,val: ''}methods = {inputHandle: function (e) {console.log(e.detail.value)this.val = e.detail.value}}
006 -wxs脚本的使用
将wxs脚本定义为外联文件，并且后缀名为.wxs在<script></script>标签内，通过import导入相对路径的wxs模块在当前页面的class类中，通过wxs = { }注册刚才导入的wxs模块案例代码<view>{{ homeData.a }}</view>
import homeWxs from '../wxs/home.wxs'export default class Home extends wepy.page {wxs = {homeData: homeWxs}}
007 - 配置promisify启用async和await
默认使用wepy-cli创建的项目，不支持使用ES7的async和await来简化Promise API的调用。需要手动开启此功能：打开src->app.wpy，找到constructor()构造函数，在构造函数中代码的最后一行，添加this.use(‘promisify’)constructor () {super()this.use('requestfix')this.use('promisify')}
008 -WePY发送get和post请求
WePY框架对原生小程序做了封装，之前通过wx调用的API，都可以直接使用wepy进行调用
// wepy 发送 Get 请求async getInfo () {const res = await wepy.request('接口地址')console.log(res)}
// wepy 发送 Post 请求async getInfo () {const res = await wepy.request({url: '接口地址',method: 'post',data: {name: 'loong'}})console.log(res)}
009 - 异步更新数据
在异步函数中更新数据的时候，页面检测不到数据的变化，必须手动调用 this.$apply 方法。
作用是强制页面重新渲染
// 被 async 修饰的函数叫做异步函数async getInfo() {const res = await wepy.request('接口地址’)this.getMsg = res.datathis.$apply()}
