wepy的基本安装和使用

分手后的思念是犯贱 2023-06-13 08:56 50阅读 0赞

#### wepy的基本使用 ####

##### 1、WePY 简介和安装 #####

###### 001 - 什么是 `WePY` ######

> `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` 项目目录 ######

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA_size_16_color_FFFFFF_t_70]

###### 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` 类

<table> 
 <thead> 
  <tr> 
   <th align="left">属性</th> 
   <th align="center">说明</th> 
  </tr> 
 </thead> 
 <tbody> 
  <tr> 
   <td align="left">config</td> 
   <td align="center">页面配置对象，对应于原生的<code>page.json</code>文件，类似于<code>app.wpy</code>中的config</td> 
  </tr> 
  <tr> 
   <td align="left">components</td> 
   <td align="center">页面组件列表对象，声明页面所引入的组件列表</td> 
  </tr> 
  <tr> 
   <td align="left">data</td> 
   <td align="center">页面渲染数据对象，存放可用于页面模板绑定的渲染数据</td> 
  </tr> 
  <tr> 
   <td align="left">methods</td> 
   <td align="center">wxml事件处理函数对象，存放响应wxml中所捕获到的事件的函数，如<code>bindtap</code>、<code>bindchange</code></td> 
  </tr> 
  <tr> 
   <td align="left">computed</td> 
   <td align="center">和vue的计算属性是一样的</td> 
  </tr> 
  <tr> 
   <td align="left">onLoad</td> 
   <td align="center">小程序页面生命周期函数</td> 
  </tr> 
 </tbody> 
</table>

###### 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}})'`传递
 *  案例代码

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)
    }

[wepy]: https://tencent.github.io/wepy/donate.html
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20191115094833669.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MTgxOTA5OA==,size_16,color_FFFFFF,t_70