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、组件的创建与挂载

​ 创建:

<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的数据请求
  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){
        //开启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}
    
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值