小程序开发框架wepy

简介: 小程序目前主流的开发框架有mpvue 和wepy 两种,由于wepy是腾讯自己开发的框架,所以先来简单了解一下wepy。wepy的作用主要是提高开发者的开发效率,采用了类似使用了vue的代码书写风格, 结合使用webwack提供的多种插件,开发者可以熟练的上手小程序开发,但再开发过程中还有有很多与vue的不同需要注意。

小程序目前主流的开发框架有mpvue 和wepy 两种,由于wepy是腾讯自己开发的框架,所以先来简单了解一下wepy。
wepy的作用主要是提高开发者的开发效率,采用了类似使用了vue的代码书写风格, 结合使用webwack提供的多种插件,开发者可以熟练的上手小程序开发,但再开发过程中还有有很多与vue的不同需要注意。
(如果对VUE还不熟悉的同学,可以先一下vue的使用方法链接如下)
https://www.jianshu.com/writer#/notebooks/13518445/notes/17261801

1.methodes方法调用(vue中的methods中书写的方法直接用this可以调用,再wepy中this调用的方法需要写在和methodes同级的位置上)

   methods = {
    bindtap () {
        let rst = this.commonFunc();
        // doSomething
    },

    bindinput () {
        let rst = this.commonFunc();
        // doSomething
    },
  }

//正确:普通自定义方法在methods对象外声明,与methods平级
customFunction () {
    return 'sth.';
}

2.组件模版的创建(vue中组件的创建方法与页面的创建方法相同,wepy中组件的创建一定要用wepy.component 来创建)

      //wepy页面穿件方法 
      export default class Index extends wepy.page {}
      //wepy组件创建方法
      export default class yearProgress extends wepy.component {}

3.事件处理函数对象events 这个在vue中没有遇到过,他的主要作用是传递的事件的函数,在父组件调用子组件的方法,和子组件调用父组件的方法中比较常见。

        this.$emit('some-event', 1, 2, 3, 4);
        // events对象中所声明的函数为用于监听组件之间的通信与交互事件的事件处理函数
        events = {
            'some-event': (p1, p2, p3, $event) => {
           console.log(`${this.$name} receive ${$event.name} from${$event.source.$name}`);
            }
        };

4.config页面配置对象,对应于原生的page.json文件,类似于app.wpy中的config。

//用于设置小程序最上方的标题文字
config = {
        navigationBarTitleText: '我的楼码',
}

5.wepy中ajax请求的全局拦截器

        this.intercept('request', {
        // 发出请求时的回调函数
        config (p) {
            // 对所有request请求中的OBJECT参数对象统一附加时间戳属性
            p.timestamp = +new Date();
            console.log('config request: ', p);
            // 必须返回OBJECT参数对象,否则无法发送请求到服务端
            return p;
        },

        // 请求成功后的回调函数
        success (p) {
            // 可以在这里对收到的响应数据对象进行加工处理
            console.log('request success: ', p);
            // 必须返回响应数据对象,否则后续无法对响应数据进行处理
            return p;
        },

        //请求失败后的回调函数
        fail (p) {
            console.log('request fail: ', p);
            // 必须返回响应数据对象,否则后续无法对响应数据进行处理
            return p;
        },

        // 请求完成时的回调函数(请求成功或失败都会被执行)
        complete (p) {
            console.log('request complete: ', p);
        }
    });

6.页面跳转这个要注意一下,在小程序中页面跳转如果是tab中的页面就要用不同的页面跳转方法

        //一般的页面跳转方法
            wx.navigateTo({
                url: url
            })
      //遇到 tab 里面的转转的时候用这种方式跳转
            wx.switchTab({
              url: url
           })

7.数据的同步,通过设置子组件props的twoWay: true来达到子组件数据绑定至父组件的效果。那如果既使用.sync修饰符,同时子组件props中添加的twoWay: true时,就可以实现数据的双向绑定了。

         <child :title="parentTitle" :syncTitle.sync="parentTitle" 
          :twoWayTitle="parentTitle"></child>

          data = {
              parentTitle: 'p-title'
          };
          //child.wpy
        // 数据的双向绑定
        twoWayTitle: {
            type: String,
            default: 'nothing',
            twoWay: true
       }

还有最后是小程序的一些视频课程,感兴趣的小伙伴可以到我的百度网盘下载
https://pan.baidu.com/s/1wIQ2gZDyOWijpgu6bcwSIA

相关文章
|
1月前
|
人工智能 小程序
【一步步开发AI运动小程序】十五、AI运动识别中,如何判断人体站位的远近?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,无需后台支持,具有快速、体验好、易集成等特点。本文介绍如何利用插件判断人体与摄像头的远近,确保人体图像在帧内的比例适中,以优化识别效果。通过`whole`检测规则,分别实现人体过近和过远的判断,并给出相应示例代码。
|
5天前
|
存储 监控 小程序
TP6+Uni-app框架下,圈子系统小程序的快速上线开发步骤
社交圈子系统多端运营级应用,融合了推荐匹配、语音聊天、IM即时通讯、动态发布、一键约聊、同城交友、附近的人、充值提现、邀请推广等功能,为平台运营提供更多的盈利变现方式。程序源码开源,支持二次开发,根据客户不同应用场景需求,定制个性化解决方案。
31 9
|
5天前
|
小程序 IDE PHP
圈子源码如何打包生成App小程序/开发一个圈子系统软件所需要的费用体现在哪里?
将PHP源码打包成App的过程涉及多个步骤和技术选择。以圈子源码为例,首先明确需求,确定App功能和目标用户群体,并根据需求开发小程序页面,如用户注册、圈子列表等。源码准备阶段确保源码适用于小程序开发,环境配置需安装IDE(如微信开发者工具)及依赖库。最后在IDE中打包小程序并上传至管理平台,通过审核后发布。费用方面,模板开发成本较低,定制开发则更高,具体取决于需求复杂度和第三方服务费用。
41 0
|
23天前
|
开发框架 小程序 前端开发
圈子社交app前端+后端源码,uniapp社交兴趣圈子开发,框架php圈子小程序安装搭建
本文介绍了圈子社交APP的源码获取、分析与定制,PHP实现的圈子框架设计及代码编写,以及圈子小程序的安装搭建。涵盖环境配置、数据库设计、前后端开发与接口对接等内容,确保平台的安全性、性能和功能完整性。通过详细指导,帮助开发者快速搭建稳定可靠的圈子社交平台。
|
4天前
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
10 0
|
1月前
|
人工智能 小程序 UED
【一步步开发AI运动小程序】十六、AI运动识别中,如何判断人体站位?
【云智AI运动识别小程序插件】提供人体、运动及姿态检测的AI能力,本地引擎无需后台支持,具备快速、体验好、易集成等优势。本文介绍如何利用插件的`camera-view`功能,通过检测人体站位视角(前、后、左、右),确保运动时的最佳识别率和用户体验。代码示例展示了如何实现视角检查,确保用户正或背对摄像头,为后续运动检测打下基础。
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十七、如何识别用户上传视频中的人体、运动、动作、姿态?
【云智AI运动识别小程序插件】提供人体、运动、姿态检测的AI能力,支持本地原生识别,无需后台服务,具有速度快、体验好、易集成等优点。本文介绍如何使用该插件实现用户上传视频的运动识别,包括视频解码抽帧和人体识别的实现方法。
|
1月前
|
人工智能 小程序 API
【一步步开发AI运动小程序】十三、自定义一个运动分析器,实现计时计数02
本文介绍如何利用“云智AI运动识别小程序插件”开发AI运动小程序,详细解析了俯卧撑动作的检测规则构建与执行流程,涵盖卧撑和撑卧两个姿态的识别规则,以及如何通过继承`sports.SportBase`类实现运动分析器,适用于小程序开发者。
|
1月前
|
人工智能 小程序 数据处理
uni-app开发AI康复锻炼小程序,帮助肢体受伤患者康复!
近期,多家康复机构咨询AI运动识别插件是否适用于肢力运动受限患者的康复锻炼。本文介绍该插件在康复锻炼中的应用场景,包括康复运动指导、运动记录、恢复程度记录及过程监测。插件集成了人体检测、姿态识别等功能,支持微信小程序平台,使用便捷,安全可靠,帮助康复治疗更加高效精准。
|
1月前
|
人工智能 小程序 JavaScript
【一步步开发AI运动小程序】十四、主包超出2M大小限制,如何将插件分包发布?
本文介绍了如何从零开始开发一个AI运动小程序,重点讲解了通过分包技术解决程序包超过2M限制的问题。详细步骤包括在uni-app中创建分包、配置`manifest.json`和`pages.json`文件,并提供了分包前后代码大小对比,帮助开发者高效实现AI运动功能。

热门文章

最新文章