欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

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

程序员文章站 2023-12-17 12:42:16
一、微信小程序wepy框架简介: 微信小程序wepy框架是腾讯官方推出来的框架,类似的框架还有美团的mpvue,京东的taro等; 目前公司开发小程序主要用到的是微信...

一、微信小程序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使用心得总结:

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
  }
}


四 、最后一点点感悟:

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

参考资料:

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


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

上一篇:

下一篇: