小程序开发框架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

相关文章
预约按摩小程序开发,为什么很多上门按摩平台根本招聘不到优秀技师?
上门按摩平台面临招不到优秀技师的问题,主要原因是平台众多,技师选择多样。为解决此问题,平台可引入技师等级制度,根据订单数量和好评率划分高、低等级技师。高等级技师可享受70%-90%的高提成及首页推荐,这不仅能激励技师的积极性,还能帮助平台筛选出优质技师,提升服务质量和口碑,形成良性循环。
|
19天前
|
人工智能 小程序
【一步步开发AI运动小程序】五、帧图像人体识别
随着AI技术的发展,阿里体育等公司推出的AI运动APP,如“乐动力”和“天天跳绳”,使云上运动会、线上健身等概念广受欢迎。本文将引导您从零开始开发一个AI运动小程序,使用“云智AI运动识别小程序插件”。文章分为四部分:初始化人体识别功能、调用人体识别功能、人体识别结果处理以及识别结果旋转矫正。下篇将继续介绍人体骨骼图绘制。
|
20天前
|
人工智能 小程序 vr&ar
AI运动小程序开发常见问题集锦二
截至当前,我们的AI运动识别小程序插件已迭代至第23个版本,广泛应用于健身、体育、体测、AR互动等场景。本文针对近期用户咨询,汇总了常见问题,帮助用户减少开发成本,提高效率。主要涵盖计时与计数模式的区别、综合排行榜生成方法、全屏模式适配及无开发能力用户的解决方案。
|
20天前
|
小程序 数据挖掘 UED
开发1个上门家政小程序APP系统,都有哪些功能?
在快节奏的现代生活中,家政服务已成为许多家庭的必需品。针对传统家政服务存在的问题,如服务质量不稳定、价格不透明等,我们历时两年开发了一套全新的上门家政系统。该系统通过完善信用体系、提供奖励机制、优化复购体验、多渠道推广和多样化盈利模式,解决了私单、复购、推广和盈利四大痛点,全面提升了服务质量和用户体验,旨在成为家政行业的领导者。
|
25天前
|
开发框架 人工智能 小程序
小程序常见的 UI 框架
【10月更文挑战第17天】小程序 UI 框架为开发者提供了便捷的工具和资源,帮助他们快速构建高质量的小程序界面。在选择框架时,需要综合考虑各种因素,以找到最适合项目的解决方案。随着技术的不断进步,UI 框架也将不断发展和创新,为小程序开发带来更多的便利和可能性。
44 2
|
30天前
|
存储 传感器 小程序
跳绳计数小程序开发系统
首先,我们需要明确跳绳计数小程序的核心功能:为用户提供跳绳计数的便捷方式。这意味着小程序需要能够准确地记录用户的跳绳次数,并为用户提供清晰、直观的计数展示。
|
30天前
|
人工智能 编解码 小程序
【一步步开发AI运动小程序】四、小程序如何抽帧
随着AI技术的发展,阿里体育等公司推出的“乐动力”、“天天跳绳”等APP使云上运动会、线上健身等概念备受关注。本文将引导您从零开始开发一个AI运动小程序,利用“云智AI运动识别小程序插件”。文中详细介绍了微信小程序抽帧的相关API、设置及注意事项,帮助开发者更好地实现AI运动功能。下篇将介绍人体识别技术,敬请期待。
|
1月前
|
传感器 存储 小程序
跳绳计数小程序开发
跳绳计数小程序旨在通过智能设备(如手机或智能手表)记录用户在跳绳过程中的次数、时间、速度等关键数据,为用户提供便捷的运动记录和数据分析服务
|
30天前
|
小程序 搜索推荐 前端开发
小剧场短剧影视小程序开发
小剧场短剧影视小程序旨在为用户提供一个便捷、互动的平台,让用户能够随时随地观看、分享和评论各类小剧场短剧。通过小程序,用户可以浏览热门短剧、搜索感兴趣的内容、参与社区互动,以及享受个性化的推荐服务。
|
1月前
|
小程序 搜索推荐 前端开发
短剧小程序开发案例
首先,明确你的短剧平台的目标用户群体和他们的需求。比如,年轻用户可能更倾向于轻松、幽默的短剧内容,而家庭用户则可能更偏爱教育、亲子类的短剧。了解用户需求有助于你设计更符合他们口味的功能和界面

热门文章

最新文章