资讯专栏INFORMATION COLUMN

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

sushi / 1624人阅读

摘要:四最后一点点感悟本文总结的比较浅显很多地方说的也不是太详细欢迎大家留言一起交流探讨坚持学习不断探索总结路漫漫其修远兮吾将上下而求索参考资料官方文档微信小程序官网开发文档官方开发文档

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

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

    1). wepy和vue列表循环对比:
     // wepy 列表循环,外面可套一层repeat标签,注意和vue写法的区别
     // 不推荐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+特性,如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);

// 原生的事件传参方式:
 Click me! 
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。
 Click me! 
methods: {
    tapName (id, title, other, event) {
        console.log(id, title, other)// output: 1, wepy, otherparams
    }
}
四 、最后一点点感悟:

本文总结的比较浅显,很多地方说的也不是太详细,欢迎大家留言一起交流探讨,坚持学习,不断探索总结,路漫漫其修远兮,吾将上下而求索!
参考资料:wepy官方文档 ; 微信小程序官网开发文档 ; vue官方开发文档

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/59373.html

相关文章

  • 信小程序wepy框架学习使用心得

    摘要:四最后一点点感悟本文总结的比较浅显很多地方说的也不是太详细欢迎大家留言一起交流探讨坚持学习不断探索总结路漫漫其修远兮吾将上下而求索参考资料官方文档微信小程序官网开发文档官方开发文档 一、微信小程序wepy框架简介: 微信小程序WePY框架是腾讯官方推出来的框架,类似的框架还有美团的mpvue,京东的Taro等; 目前公司开发小程序主要用到的是微信原生方法和官方的wepy框架; wepy...

    Baaaan 评论0 收藏0
  • 信小程序学习wepy框架使用详解

    摘要:,至此咱们的微信小程序的简单使用及了解算是分享完了,毕竟个人也是道行有限,没有钻研太深,这些只是本人在实际项目开发过程中用到和总结的经验,有太多不足或不对的地方,希望大家多多给予指出与改正,咱们一起来共同学习与进步 微信小程序是一种不需要下载安装即可使用的应用,在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度,然而就是因为它的备受欢迎度以及越来越被企业所重视,也就形成了咱们开...

    sf190404 评论0 收藏0
  • 信小程序学习wepy框架使用详解

    摘要:,至此咱们的微信小程序的简单使用及了解算是分享完了,毕竟个人也是道行有限,没有钻研太深,这些只是本人在实际项目开发过程中用到和总结的经验,有太多不足或不对的地方,希望大家多多给予指出与改正,咱们一起来共同学习与进步 微信小程序是一种不需要下载安装即可使用的应用,在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度,然而就是因为它的备受欢迎度以及越来越被企业所重视,也就形成了咱们开...

    stormjun 评论0 收藏0
  • 信小程序学习wepy框架使用详解

    摘要:,至此咱们的微信小程序的简单使用及了解算是分享完了,毕竟个人也是道行有限,没有钻研太深,这些只是本人在实际项目开发过程中用到和总结的经验,有太多不足或不对的地方,希望大家多多给予指出与改正,咱们一起来共同学习与进步 微信小程序是一种不需要下载安装即可使用的应用,在国内它在企业推广中的受欢迎度以及就这两年的使用及普及热度,然而就是因为它的备受欢迎度以及越来越被企业所重视,也就形成了咱们开...

    xiao7cn 评论0 收藏0
  • 程序开发 第二篇:使用信小程序开发者工具、wepy框架初始化项目

    摘要:上一篇小程序开发第一篇注册获取同步企业项目数据微信小程序开发者工具下载小程序开发者工具使用小程序原生开发直接使用小程序开发者工具打开项目即可小程序框架开发首选官方提供类开发框架,备选。 上一篇:小程序开发 第一篇:注册、获取unionid同步企业项目数据 1.微信小程序开发者工具 下载:小程序开发者工具 使用: 小程序原生开发:直接使用小程序开发者工具打开项目即可 小程序框架开发:...

    ivan_qhz 评论0 收藏0

发表评论

0条评论

sushi

|高级讲师

TA的文章

阅读更多
最新活动
阅读需要支付1元查看
<