wepy 微信小程序

最新推荐文章于 2023-05-31 22:28:30 发布

烟雨k

最新推荐文章于 2023-05-31 22:28:30 发布

阅读量213

点赞数

文章标签：微信小程序小程序 javascript

本文链接：https://blog.csdn.net/woaijskxh/article/details/127323563

版权

1、知道wepy是什么

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

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}

烟雨k

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
wepy 微信小程序

template > < div class = "home" > 首页 < p > {{{age } } < / p > < input type = "text" v - model = "age" / > < button @tap = "change('小五')" > 点击 < / button > < / div > < / template > < style > . home {// 选项 data : {
复制链接

扫一扫