微信小程序wepy框架学习和使用心得详解

2023-08-23 03:03:04 75

一、微信小程序wepy框架简介:

微信小程序WePY框架是腾讯官方推出来的框架,类似的框架还有美团的mpvue,京东的Taro等;目前公司开发小程序主要用到的是微信原生方法和官方的wepy框架;wepy框架在开发过程中参考了Vue等现有框架的一些语法风格和功能特性，对原生小程序的开发模式进行了再次封装，更贴近于MVVM架构模式,并支持ES6/7的一些新特性。相对更容易上手,提高开发效率;

二、WePY项目的创建与目录结构

WePY的安装或更新都通过npm进行，全局安装或更新WePY命令行工具

npminstallwepy-cli-g

在开发目录中生成Demo开发项目

wepynewmyproject

切换至项目目录

cdmyproject

安装依赖

npminstall

开启实时编译

wepybuild--watch

WePY项目的目录结构如下

├──dist小程序运行代码目录（该目录由WePY的build指令自动编译生成，请不要直接修改该目录下的文件）
├──node_modules
├──src代码编写的目录（该目录为使用WePY后的开发目录）
|├──componentsWePY组件目录（组件不属于完整页面，仅供完整页面或其他组件引用）
||├──com_a.wpy可复用的WePY组件a
||└──com_b.wpy可复用的WePY组件b
|├──pagesWePY页面目录（属于完整页面）
||├──index.wpyindex页面（经build后，会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件）
||└──other.wpyother页面（经build后，会在dist目录下的pages目录生成other.js、other.json、other.wxml和other.wxss文件）
|└──app.wpy小程序配置项（全局数据、样式、声明钩子等；经build后，会在dist目录下生成app.js、app.json和app.wxss文件）
└──package.json项目的package配置

搭建好项目后，IDE需配置代码高亮，文件后缀为.wpy，可共用Vue的高亮规则，但需要手动设置，具体配置大家可参考wepy官方文档

三、wepy使用心得总结：

1.wepy代码风格类似Vue，如computed,data,methods等用法差不多,熟悉vue开发的同学看看文档可以轻松上手，不过还是有很多地方写法容易混淆，我工作中遇到的总结几个,如列表循环,条件渲染,父子组件值传递等,下面举例说明:

1).wepy和vue列表循环对比:

//wepy列表循环,外面可套一层repeat标签,注意和vue写法的区别

{{item}}


//vue列表循环,外面可套一层template标签
//不推荐key直接用索引index
{{item}}

2).wepy和vue条件渲染中,wepy需要加{{}},vue不需要,里面都可以写表达式进行判断:

3).父子组件值传递两者都在子组件中用props接收,props中可以定义能接收的数据类型，如果不符合会报错,wepy可以通过使用.sync修饰符来达到父组件数据绑定至子组件的效果，也可以通过设置子组件props的twoWay:true来达到子组件数据绑定至父组件的效果。那如果既使用.sync修饰符,同时子组件props中添加的twoWay:true时，就可以实现数据的双向绑定了;

//parent.wpy



data={
parentTitle:'p-title'
};


//child.wpy

props={
//静态传值
title:String,

//父向子单向动态传值
syncTitle:{
type:String,
default:'null'
},

twoWayTitle:{
type:String,
default:'nothing',
twoWay:true
}
};

onLoad(){
console.log(this.title);//p-title
console.log(this.syncTitle);//p-title
console.log(this.twoWayTitle);//p-title

this.title='c-title';
console.log(this.$parent.parentTitle);//p-title.
this.twoWayTitle='two-way-title';
this.$apply();
console.log(this.$parent.parentTitle);//two-way-title.---twoWay为true时，子组件props中的属性值改变时，会同时改变父组件对应的值
this.$parent.parentTitle='p-title-changed';
this.$parent.$apply();
console.log(this.title);//'c-title';
console.log(this.syncTitle);//'p-title-changed'---有.sync修饰符的props属性值，当在父组件中改变时，会同时改变子组件对应的值。

2.wepy支持自定义组件开发,实现组件复用,减少代码冗余,提高开发效率;

3.wepy支持引入npm包,拓展了很多方法;

4.支持Promise,ES2015+特性，如asyncawait等;

5.支持多种编译器，Less/Sass/Styus、Babel/Typescript、Pug;

6.支持多种插件处理，文件压缩，图片压缩，内容替换等;

7.支持Sourcemap，ESLint代码规范管理等;

8.对小程序wx.request方法参数进行了修改,返回Promise对象,优化了事件参数传递,具体用法如下:

//wx.request原生代码:
wx.request({
url:'xxx',
success:function(data){
console.log(data);
}
});

//WePY使用方式,需要开启Promise支持，参考开发规范章节
wepy.request('xxxx').then((d)=>console.log(d));

//async/await的使用方式,需要开启Promise和async/await支持，参考WIKI
asyncfunctionrequest(){
letd=awaitwepy.request('xxxxx');
console.log(d);

//原生的事件传参方式:
Clickme!
Page({
tapName:function(event){
console.log(event.currentTarget.dataset.id)//output:1
console.log(event.currentTarget.dataset.title)//output:wepy
console.log(event.currentTarget.dataset.other)//output:otherparams
}
});

//WePY1.1.8以后的版本，只允许传string。
Clickme!
methods:{
tapName(id,title,other,event){
console.log(id,title,other)//output:1,wepy,otherparams
}
}

四、最后一点点感悟:

本文总结的比较浅显,很多地方说的也不是太详细,如有错误的地方大家可以批评指正,欢迎大家留言一起交流探讨,坚持学习,不断探索总结,路漫漫其修远兮,吾将上下而求索!

参考资料:

wepy官方文档;

微信小程序官网开发文档;

vue官方开发文档

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

微信小程序wepy框架学习和使用心得详解

热门推荐

随机推荐