1、知道wepy是什么
- 官网 https://wepyjs.github.io/wepy-docs/2.x/#/
- 概念
- WePY 是腾讯官方出品的一个小程序快速开发框架,对原生小程序的开发模式进行了再次封装,更贴近于 MVVM 架构模式,并支持ES6/7的一些新特性,同时语法风格更接近于 Vue.js,使用 WePY 框架能够提高 小程序的开发效率
- 注意:WePY 只是小程序的快速开发框架之一,市面上还有诸如 mpvue 之类的小程序开发框架也比较流行
- 优势
- 开发风格接近于 Vue.js,支持很多vue中的语法特性
- 通过 polyfill 让小程序完美支持 Promise
- 以使用ES6等诸多高级语法特性,简化代码,提高开发效率
- 对小程序本身的性能做出了进一步的优化
- 支持第三方的 npm 资源
- 持多种插件处理和编译器
2、新建页面
- 先在pages文件夹中建立**.wpy
- 在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、组件的创建与挂载
创建:
<template>
<div>
我是组件{{obj.classname}}
</div>
</template>
<script>
import wepy from '@wepy/core'
wepy.component({
// 选项
data:{
obj:{id:1,"classname":"2107A"}
}
})
</script>
挂载:
<template>
<div>
<head></head>
</div>
</template>
<script>
import wepy from '@wepy/core'
wepy.page({
})
</script>
<config>
{
"usingComponents": {
"head": "../components/head"
}
}
</config>
5、wepy组件通信与插槽
head.wpy
<template>
<div>
我是组件{{obj.classname}}--{{classname}}
<button @tap="change">修改父组件的数据</button>
<slot name="one"></slot>
<view>---------------------</view>
<slot name="two"></slot>
</div>
</template>
<script>
import wepy from '@wepy/core'
wepy.component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
} ,
// 选项
data:{
obj:{id:1,"classname":"2107A"}
},
//获取父组件传输的数据
props:['classname'],
methods:{
change(){
this.$emit("event",["小三"])
}
}
})
</script>
cate.wpy
<template>
<div>
<head :classname="classname" @event="changeName">
<p slot="one">我是插槽内容</p>
<p slot="two">高蛋白</p>
</head>
</div>
</template>
<script>
import wepy from '@wepy/core'
wepy.page({
data:{
classname:"大积云"
},
methods:{
changeName(name){
console.log(name[0])
this.classname=name[0]
}
}
})
</script>
<config>
{
"usingComponents": {
"head": "../components/head"
}
}
</config>
6、wepy的数据请求
-
下载
cnpm i @wepy/use-promisify
-
配置 app.wepy
import promisify from '@wepy/use-promisify'; wepy.use(promisify)
-
使用
<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){ //开启loading wx.showLoading({ title: '加载中', }) //resolve 成功后的回调 reject是失败后的回调 return new Promise((resolve,reject)=>{ //请求接口 拿到数据后调用成功后的回调 wx.request({ url, success:(res)=>{ //关闭loading wx.hideLoading() resolve(res) } }) }) } //url 是请求的url obj 是请求参数 function post(url,obj){ //开启loading wx.showLoading({ title: '加载中', }) //resolve 成功后的回调 reject是失败后的回调 return new Promise((resolve,reject)=>{ //请求接口 拿到数据后调用成功后的回调 wx.request({ url, data:obj, methods:"post", success:(res)=>{ //关闭loading wx.hideLoading() resolve(res) } }) }) } //抛出 module.exports={get,post}