wepy的基本使用
1、WePY 简介和安装
001 - 什么是 WePY

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

wepy官网

002 - 为什么使用 WePY

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

  • 开发风格接近于 Vue.js,支持很多vue中的语法特性;
  • 通过 polyfill 让小程序完美支持 Promise;
  • 可以使用ES6等诸多高级语法特性,简化代码,提高开发效率;
  • 对小程序本身的性能做出了进一步的优化;
  • 支持第三方的 npm 资源;
  • 支持多种插件处理和编译器;
003 - 安装 WePY
  • WePY 的安装或更新都通过 npm 、yarn、cnpm进行全局安装
npm install wepy-cli -g
004 - 初始化 WePY 项目
  • 使用命令行方式进行初始化项目结构

    • wepy init standard myproject
    • wepy init – 是固定写法,代表要初始化 wepy 项目;
    • standard – 代表模板类型为标准小程序模板
    • myproject – 为自定义的项目名称。
  • Project name () :项目的名字可以更改,如果不修改直接回车即可

  • AppId (touristappid):输入自己小程序的Appid

  • Project description:项目的描述,直接回车即可

  • Author ():项目作者,直接回车

  • Use ESLint to lint your code? (Y/n):真正开发的时候建议开启,现在学习阶段,先不开启

  • Use Redux in your project?:是否使用Redux框架语法,目录会多出store目录,no

  • Use web transform feature in your project?:是否开启web转换,no

005- WePY 和 小程序项目的关系
  • 通过 wepy init 命令初始化的wepy 项目,实际是一个模板项目,不能直接当作小程序运行。
  • 需要运行相关的命令,把模板项目编译为小程序项目,才可以运行。
02 - wepy项目介绍
2.1 - wepy项目运行
001 - 运行编译 WePY 项目
  • 运行 cd myproject 切换至 `WePY`` 项目根目录
  • 运行 npm install 安装 WePY 项目依赖项
  • 运行 wepy build --watch 开启实时编译
    • wepy build --watch 命令,会循环监听 WePY项目中源代码的变化,自动编译生成小程序项目

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

002 - 认识WePY 项目目录

在这里插入图片描述

003 - 将 WePy 项目导入到开发者工具中
  • 在微信开发者工具中选择导入项目,选择项目的根目录即可
  • 可以用vscode打开wepy项目
2.2、WePY 文件介绍
001 - 介绍.wpy文件的组成部分
  • 一个 .wpy 文件可分为三大部分,各自对应于一个标签:
    • 脚本部分,即 <script></script> 标签中的内容,又可分为两个部分:
      • 逻辑部分,除了 config 对象之外的部分,对应于原生的 .js 文件
      • 配置部分,即 config 对象,对应于原生的 .json 文件
    • 结构部分,即 <template></template> 模板部分,对应于原生的 .wxml 文件。
    • 样式部分,即<style></style>样式部分,对应于原生的 .wxss 文件。
  • 其中,小程序入口文件 app.wpy 不需要 template,所以编译时会被忽略。
002- 小程序入口 app.wpy

app.wpy主要分为两大部分script和style

  • config 属性会被编译为小程序的 app.json 全局配置文件;
  • config 属性之外的其它节点,会被编译为小程序的 app.js 文件;
  • style 标签会被编译为小程序的 app.wxss 全局样式;
003 - app.wpy 全局配置小程序外观

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

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

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

属性说明
config页面配置对象,对应于原生的page.json文件,类似于app.wpy中的config
components页面组件列表对象,声明页面所引入的组件列表
data页面渲染数据对象,存放可用于页面模板绑定的渲染数据
methodswxml事件处理函数对象,存放响应wxml中所捕获到的事件的函数,如bindtapbindchange
computed和vue的计算属性是一样的
onLoad小程序页面生命周期函数
005 - 尝试修改window窗口外观
  • 通过修改app.wpy里面的config》window来配置窗口外观
03-wepy的基本使用
3.1创建页面和事件绑定

如何设置默认首页

  • 在pages文件夹下面新建home.wpy文件

  • 定义基本的结构

    <template>
    
    </template>
    
    <script>
    
    import wepy from 'wepy'
    
    export default class Home extends wepy.page {
      data = {
      }
    
      config = {
      }
    
      methods = {
    
      }
    }
    
    </script>
    
    <style lang='less'>
    
    </style>
    
  • 配置用户代码片段,文件》首先项》用户代码片段》新建全局用户代码片段,取名wepy回车创建,将代码片段复制进文件内部即可

  • 将home.wpy路劲配置到全局的app.wpy下面的pages里面,并且是第一个

页面绑定事件以及传参

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

  • WePY 中,统一使用 @ 绑定事件,传递参数直接采用@tap='handle({{params}})'传递
  • 案例代码
<button type="primary" size="mini" @tap="tapHandle({{count}},{{count2}})">点我啊,老弟</button>
data = {
  msg: '锄禾日当午,汗滴禾下土,这是四个人',
  count:10,
  count2:20
}

config = {
}

methods = {
  tapHandle (num,num2) {
    console.log(num,num2)
  }
}
  • 如果想获取到事件对象,默认不传递参数,第一个形参为事件对象
  • 如果即想要传参还想要获取到事件对象,可以采取data-自定义属性的形式传参

页面绑定事件关于事件函数和非事件函数的注意事项

  • 事件函数我们定义在methods里面
  • 非事件函数我们推荐定义在methods同级的下面
3.2文本框和数据绑定同步
  • 案例逻辑:

    • 首先在data里面准备数据,并渲染到input输入框中

      data = {
        count: 10,
        value: '我和陆游说,我比较喜欢李白的诗,陆游气坏了,然后我家没网了'
      }
      
      <input type="text" value="{{value}}">
      
    • 给输入框注册input事件监听输入框的变化

      <input type="text" value="{{value}}" @input="inputHandle">
      
    • 在事件处理函数内部拿到最新的输入框的值,并同步给数据

      methods = {
        inputHandle (e) {
          console.log(e.detail.value)
          this.value = e.detail.value
        }
      }
      
04 - wepy的request请求
4.1wepy发送请求

WePY 框架对原生小程序做了封装,之前通过 wx 调用的 API,都可以直接使用 wepy 进行调用

  • 利用wepy调用原生的方法

    wepy.request({
      url: 'url',
      success(res){
        console.log(res)
      }
    })
    
  • 修改成基于promise的形式,结果发现报错不支持

    wepy.request({
      url: 'url
    }).then(res=>{
      console.log(res)
    })
    

配置 promisify 启用 asyncawait

  • 默认使用 wepy-cli 创建的项目,不支持使用 ES7asyncawait 来简化 Promise API 的调用。

  • 需要手动开启此功能:打开 src -> app.wpy,找到 constructor() 构造函数,在构造函数中代码的最后一行,添加 this.use(‘promisify’)

    constructor () {
      super()
      this.use('requestfix')
      this.use('promisify')
    }
    
  • 基于promise使用wepy发送get请求

    // wepy 发送 Get 请求
    
    wepy.request({
      url: 'url',
      data:{
        age: 18
      }
    }).then(res=>{
      console.log(res)
    })
    
  • 利用async和await简化promise

    async getData () {
      const res = await wepy.request({
        url: 'url',
        data:{
          age: 18
        }
      })
      console.log(res)
    }
    
4.2异步更新数据

在异步函数中更新数据的时候,必须手动调用 this.$apply 方法。

const res = await wepy.request({
  url: 'url',
  data:{
    age: 18
  }
})
console.log(res)
this.value = res.data.data.age
this.$apply()

#####4.3发送post请求

async postData () {
  const res = await wepy.request({
    url: 'url',
    method: 'post',
    data:{
      age: 18
    }
  })
  console.log(res)
}
Logo

前往低代码交流专区

更多推荐