wepy 微信小程序

1、知道wepy是什么

1. 官网 https://wepyjs.github.io/wepy-docs/2.x/#/
2. 概念
   • WePY 是腾讯官方出品的一个小程序快速开发框架，对原生小程序的开发模式进行了再次封装，更贴近于 MVVM 架构模式，并支持ES6/7的一些新特性，同时语法风格更接近于 Vue.js，使用 WePY 框架能够提高 小程序的开发效率
   • 注意：WePY 只是小程序的快速开发框架之一，市面上还有诸如 mpvue 之类的小程序开发框架也比较流行
3. 优势
   1. 开发风格接近于 Vue.js，支持很多vue中的语法特性
   2. 通过 polyfill 让小程序完美支持 Promise
   3. 以使用ES6等诸多高级语法特性，简化代码，提高开发效率
   4. 对小程序本身的性能做出了进一步的优化
   5. 支持第三方的 npm 资源
   6. 持多种插件处理和编译器

2、新建页面

1. 先在pages文件夹中建立**.wpy
2. 在app.wepy中的 中的pages数组中添加数据 这个页面config标签就类似于原生app.json

3、属性和方法的定义

<template><div class="home">首页<p>{{username}}={{age}}</p><input type="text" v-model="age"/><button @tap="change('小五')">点击</button></div>
</template>
<style>
.home{width:750rpx;height:300px;background: red;
}
</style>
<script>
import wepy from '@wepy/core'
wepy.page({// 选项data:{username:"小三",age:""},//方法methods:{change(name){//console.log(12)this.username=name}}
})
</script>

4、组件的创建与挂载

​ 创建：

挂载：

{"usingComponents": {"head": "../components/head"}
}

5、wepy组件通信与插槽

head.wpy

cate.wpy

{"usingComponents": {"head": "../components/head"}
}

6、wepy的数据请求

1. 下载

   cnpm i @wepy/use-promisify
   

2. 配置 app.wepy

   import promisify  from '@wepy/use-promisify';
   wepy.use(promisify)
   

3. 使用

   <script>
   import wepy from "@wepy/core"
   wepy.page({data:{list:[]},onLoad(){//请求接口数据this.getList()},methods:{async getList(){let {data:res}=await wepy.wx.request({"url":"https://api-hmugo-web.itheima.net/api/public/v1/home/swiperdata"})this.list=res.message}}
   })
   </script>
   

   promise封装api请求接口

   //promise来封装http接口
   function  get(url){//开启loadingwx.showLoading({title: '加载中',})//resolve 成功后的回调  reject是失败后的回调return new Promise((resolve,reject)=>{//请求接口 拿到数据后调用成功后的回调wx.request({url,success:(res)=>{//关闭loadingwx.hideLoading()resolve(res)}})})
   }
   //url 是请求的url  obj 是请求参数
   function  post(url,obj){//开启loadingwx.showLoading({title: '加载中',})//resolve 成功后的回调  reject是失败后的回调return new Promise((resolve,reject)=>{//请求接口 拿到数据后调用成功后的回调wx.request({url,data:obj,methods:"post",success:(res)=>{//关闭loadingwx.hideLoading()resolve(res)}})})
   }
   //抛出
   module.exports={get,post}
   

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！