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


Posted in Javascript onMay 24, 2019

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

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

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

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

npm install wepy-cli -g

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

wepy new myproject

切换至项目目录

cd myproject

安装依赖

npm install

开启实时编译

wepy build --watch

WePY项目的目录结构如下

├── dist          小程序运行代码目录(该目录由WePY的build指令自动编译生成,请不要直接修改该目录下的文件)
 ├── node_modules      
 ├── src          代码编写的目录(该目录为使用WePY后的开发目录)
 |  ├── components     WePY组件目录(组件不属于完整页面,仅供完整页面或其他组件引用)
 |  |  ├── com_a.wpy   可复用的WePY组件a
 |  |  └── com_b.wpy   可复用的WePY组件b
 |  ├── pages       WePY页面目录(属于完整页面)
 |  |  ├── index.wpy   index页面(经build后,会在dist目录下的pages目录生成index.js、index.json、index.wxml和index.wxss文件)
 |  |  └── other.wpy   other页面(经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写法的区别
  <repeat for="{{list}}" key="index>
    <view>{{item}}</view>
  </repeat>
  
  // vue 列表循环,外面可套一层template标签
  <template v-for="(item,index) in list" :key="index"> // 不推荐key直接用索引index
    <div>{{item}}<div>
  </template>

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

<view wx:if="{{show}}"></view>
<div v-if="show"></div>

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

// parent.wpy
    
    <child :title="parentTitle" :syncTitle.sync="parentTitle" :twoWayTitle="parentTitle"></child>
    
    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+特性,如async await 等;

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
async function request () {
  let d = await wepy.request('xxxxx');
  console.log(d);

// 原生的事件传参方式:
<view data-id="{{index}}" data-title="wepy" data-other="otherparams" bindtap="tapName"> Click me! </view>
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
  }
});

// WePY 1.1.8以后的版本,只允许传string。
<view @tap="tapName({{index}}, 'wepy', 'otherparams')"> Click me! </view>
methods: {
  tapName (id, title, other, event) {
    console.log(id, title, other)// output: 1, wepy, otherparams
  }
}

四 、最后一点点感悟:

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

参考资料:

wepy官方文档 ;

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

 vue官方开发文档

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript作用域容易记错的两个地方分析
Jun 22 Javascript
js时间日期和毫秒的相互转换
Feb 22 Javascript
js判断当页面无法回退时关闭网页否则就history.go(-1)
Aug 07 Javascript
javascript实时显示北京时间的方法
Mar 12 Javascript
JS动态改变表格边框宽度的方法
Mar 31 Javascript
AngularJS 中的指令实践开发指南(一)
Mar 20 Javascript
jQuery插件Validation快速完成表单验证的方式
Jul 28 Javascript
基于JavaScript实现图片连播和联级菜单实例代码
Jul 28 Javascript
Vue弹出菜单功能的实现代码
Sep 12 Javascript
vue.js实现会动的简历(包含底部导航功能,编辑功能)
Apr 08 Javascript
微信小程序云开发修改云数据库中的数据方法
May 18 Javascript
JS可断点续传文件上传实现代码解析
Jul 30 Javascript
JS实现可切换图片的幻灯切换效果示例
May 24 #Javascript
微信小程序动态添加view组件的实例代码
May 23 #Javascript
Vue+Element实现动态生成新表单并添加验证功能
May 23 #Javascript
vue elementui el-form rules动态验证的实例代码详解
May 23 #Javascript
vue.js表单验证插件(vee-validate)的使用教程详解
May 23 #Javascript
使用vue自定义指令开发表单验证插件validate.js
May 23 #Javascript
微信小程序开发实现消息推送
Nov 18 #Javascript
You might like
收音机的保养
2021/03/01 无线电
smarty学习笔记之常见代码段用法总结
2016/03/19 PHP
Yii数据库缓存实例分析
2016/03/29 PHP
PHP使用SOAP调用API操作示例
2018/12/25 PHP
使用jscript实现二进制读写脚本代码
2008/06/09 Javascript
让你的博文自动带上缩址的实现代码,方便发到微博客上
2010/12/28 Javascript
关于JQuery($.load)事件的用法和分析
2013/04/09 Javascript
使用javascript实现页面定时跳转总结篇
2013/09/21 Javascript
js原型继承的两种方法对比介绍
2014/03/30 Javascript
用队列模拟jquery的动画算法实例
2015/01/20 Javascript
基于jQuery实现响应式圆形图片轮播特效
2015/11/25 Javascript
使用伪命名空间封装保护独自创建的对象方法
2016/08/04 Javascript
EasyUI学习之Combobox级联下拉列表(2)
2016/12/29 Javascript
javaScript生成支持中文带logo的二维码(jquery.qrcode.js)
2017/01/03 Javascript
Node.js实现文件上传的示例
2017/06/28 Javascript
使用Vue完成一个简单的todolist的方法
2017/12/01 Javascript
使用axios实现上传图片进度条功能
2017/12/21 Javascript
基于Vue+element-ui 的Table二次封装的实现
2018/07/20 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
JavaScript 反射和属性赋值实例解析
2019/10/28 Javascript
js实现坦克大战游戏
2020/02/24 Javascript
vue+element获取el-table某行的下标,根据下标操作数组对象方式
2020/08/07 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
antd配置config-overrides.js文件的操作
2020/10/31 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
使用Python编写简单的画图板程序的示例教程
2015/12/08 Python
pyttsx3实现中文文字转语音的方法
2018/12/24 Python
详解Ubuntu16.04安装Python3.7及其pip3并切换为默认版本
2019/02/25 Python
Python集合操作方法详解
2020/02/09 Python
Python3 集合set入门基础
2020/02/10 Python
澳大利亚领先的在线药房:Pharmacy Online(有中文站)
2020/02/22 全球购物
大专生自荐书范文
2014/06/22 职场文书
政工例会汇报材料
2014/08/26 职场文书
Mysql 性能监控及调优
2021/04/06 MySQL
ajax请求前端跨域问题原因及解决方案
2021/10/16 Javascript
CSS中妙用 drop-shadow 实现线条光影效果
2021/11/11 HTML / CSS