微信小程序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 相关文章推荐
如何将JS的变量值传递给ASP变量
Dec 10 Javascript
js自定义事件及事件交互原理概述(一)
Feb 01 Javascript
下载文件个别浏览器文件名乱码解决办法
Mar 19 Javascript
javascript对下拉列表框(select)的操作实例讲解
Nov 29 Javascript
3种Jquery限制文本框只能输入数字字母的方法
Dec 03 Javascript
JavaScript实现带标题的图片轮播特效
May 20 Javascript
vue init webpack 建vue项目报错的解决方法
Sep 29 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
从0到1构建vueSSR项目之node以及vue-cli3的配置
Mar 07 Javascript
Jquery动态列功能完整实例
Aug 30 jQuery
微信小程序如何获取用户头像和昵称
Sep 23 Javascript
vue-iview动态新增和删除的方法
Jun 17 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
简单的方法让你的后台登录更加安全(php中加session验证)
2012/08/22 PHP
解析PHP缓存函数的使用说明
2013/05/10 PHP
php之Memcache学习笔记
2013/06/17 PHP
php实现给一张图片加上水印效果
2016/01/02 PHP
EditPlus注册码生成器(js代码实现)
2013/03/25 Javascript
原生JavaScript实现连连看游戏(附源码)
2013/11/05 Javascript
js实现iframe框架取值的方法(兼容IE,firefox,chrome等)
2015/11/26 Javascript
js获取页面及个元素高度、宽度的代码
2016/04/26 Javascript
jQuery获取table行数并输出单元格内容的实现方法
2016/06/30 Javascript
树结构之JavaScript
2017/01/24 Javascript
实例解析js中try、catch、finally的执行规则
2017/02/24 Javascript
微信小程序实现留言板
2018/10/31 Javascript
JavaScript之数组扁平化详解
2019/06/03 Javascript
使用layui 的layedit定义自己的toolbar方法
2019/09/18 Javascript
微信小程序webSocket的使用方法
2020/02/20 Javascript
跟老齐学Python之for循环语句
2014/10/02 Python
python计算auc指标实例
2017/07/13 Python
Python列表list操作符实例分析【标准类型操作符、切片、连接字符、列表解析、重复操作等】
2017/07/24 Python
python定向爬取淘宝商品价格
2018/02/27 Python
pycharm安装和首次使用教程
2018/08/27 Python
influx+grafana自定义python采集数据和一些坑的总结
2018/09/17 Python
Python 一键制作微信好友图片墙的方法
2019/05/16 Python
Django ORM 聚合查询和分组查询实现详解
2019/08/09 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
python tkinter之 复选、文本、下拉的实现
2020/03/04 Python
VSCode基础使用与VSCode调试python程序入门的图文教程
2020/03/30 Python
浅谈keras 模型用于预测时的注意事项
2020/06/27 Python
python正则表达式的懒惰匹配和贪婪匹配说明
2020/07/13 Python
BeautifulSoup获取指定class样式的div的实现
2020/12/07 Python
Selenium环境变量配置(火狐浏览器)及验证实现
2020/12/07 Python
挪威手表购物网站:Klokker
2016/09/19 全球购物
大学毕业感言100字
2014/02/03 职场文书
市政管理求职信范文
2014/05/07 职场文书
三好学生个人先进事迹材料
2014/05/17 职场文书
建筑工程技术专业求职信
2014/07/16 职场文书
交通事故责任认定书
2015/08/06 职场文书