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	页面渲染数据对象，存放可用于页面模板绑定的渲染数据
methods	wxml事件处理函数对象，存放响应wxml中所捕获到的事件的函数，如bindtap、bindchange
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 启用 async 和 await

• 默认使用 wepy-cli 创建的项目，不支持使用 ES7 的 async 和 await 来简化 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)
}