其他分享
首页 > 其他分享> > WePY

WePY

作者：互联网

WePY

一、WePY 简介
001 - 什么是 WePY

WePY 是腾讯官方出品的一个小程序快速开发框架，对原生小程序的开发模式进行了再次封装

002 - 为什么使用 WePY

WePY 相比于原生小程序开发，拥有众多的开发特性和优化方案，

二、WePy 的安装与运行
001 - 安装 WePY
npm install wepy-cli -g
002 - 初始化 WePY 项目
wepy init standard myproject
003 - 运行编译 WePY 项目

注意：生成的小程序项目默认被存放于 dist 目录中。

004 - 认识WePY 项目目录

[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-EWsggPF0-1617873323123)(./images/4projectlist.png)]

004 - 将 WePy 项目导入到开发者工具中
005 - WePY 和 小程序项目的关系

和 小程序项目的关系

三、WePY 文件介绍
001 - 介绍.wpy文件的组成部分
002 - .wpy 文件的使用说明
标签lang默认值lang支持值
stylecsscss、less、scss、stylus、postcss
templatewxmlwxml、xml、pug(原jade)
scriptbabelbabel、TypeScript
<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 属性和其它全局属性、方法、事件。

004 - app.wpy 全局配置小程序外观

在小程序的入口文件中找到 window 节点：app.wpy -> script标签 -> config -> window 即可全局配置小程序的外观

window: {
  backgroundTextStyle: 'dark',
  navigationBarBackgroundColor: '#fff',
  navigationBarTitleText: '小程序电商项目',
  navigationBarTextStyle: 'black'
}
005 - 页面 .wpy 文件中 script 标签组成结构

页面文件 page.wpy 中所声明的页面实例继承自 wepy.page 类

属性说明
config页面配置对象，对应于原生的page.json文件，类似于app.wpy中的config
components页面组件列表对象，声明页面所引入的组件列表
data页面渲染数据对象，存放可用于页面模板绑定的渲染数据
methodswxml事件处理函数对象，存放响应wxml中所捕获到的事件的函数，如bindtap、bindchange
eventsWePY组件事件处理函数对象，存放响应组件之间通过$broadcast、$emit、$invoke所传递的事件的函数
其它小程序页面生命周期函数，如onLoad、onReady等，以及其它自定义的方法与属性
四、 WePY 框架开发规范与使用
001 - 如何设置默认首页
pages: [
  'pages/home',
  'pages/index'
],
002 - 创建页面的注意事项
003 - 页面绑定事件以及传参

在 wepy 框架中，优化了事件绑定机制，支持类似于 Vue.js的事件绑定语法

<button type='warn' @tap='handle({{age}})'>WePY 绑定事件</button>

data = {
  age: 18
}

methods = {
  handle: function (params) {
    console.log('触发函数')
    console.log(params)
  }
}
004 - 页面绑定事件的注意事项

通过 @ 符号绑定的事件处理函数，必须定义到页面的 methods 节点下。

data = {
  age: 18
}

methods = {
  handle: function (params) {
    console.log('触发函数')
    console.log(params)

    this.add()
  }
}

add () {
  console.log('自定义事件')
}
005 - 页面以及文本框数据绑定
<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 脚本的使用
<view>{{ homeData.a }}</view>

import homeWxs from '../wxs/home.wxs'

export default class Home extends wepy.page {
  wxs = {
    homeData: homeWxs
  }
}
007 - 配置 promisify 启用 async 和 await
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('https://www.liulongbin.top:8082/api/get')
  
  console.log(res)
}

// wepy 发送 Post 请求

async getInfo () {
  const res = await wepy.request({
    url: 'https://www.liulongbin.top:8082/api/post',
    method: 'post',
    data: {
      name: 'loong'
    }
  })
  
  console.log(res)
}
009 - 异步更新数据

在异步函数中更新数据的时候，页面检测不到数据的变化，必须手动调用 this.$apply 方法。

作用是强制页面重新渲染

 // 被 async 修饰的函数叫做异步函数

async getInfo() {
  const res = await wepy.request('接口地址’)
  this.getMsg = res.data
  this.$apply()
}

标签：wpy,项目,app,WePY,wepy,页面
来源： https://blog.csdn.net/qq_45773127/article/details/115526180