来自 电脑系统 2019-10-10 00:31 的文章
当前位置: 金沙澳门官网网址 > 电脑系统 > 正文

金沙澳门官网网址微信小程序组件化解决方案w

在wech内部有一段这样的代码:

思想

静态模板

利用微信小程序支持的template特性,在page中使用template去调用组件,并把组件的methods提升到page的属性中去,这样便可以在component中使用bindtap等绑定组件“私有”事件方法。

component和page的互相调用

在component的私有方法或onLoad等事件中,可以使用parent获取page对象:

this.parent.setData({text:"my btn text"})let{ text } =this.parent.data

你也可以在page中使用childrens获取component对象:

Page({data: {},components: {login: {text:"my login btn text",      onLogin() {        ...      }    }  },  onLoad() {this.childrens.login.setData({text:"my text"})let{ text } =this.childrens.login.data  }})

props和data

在page中声明组件依赖,可以传入props,如:

Page({data: {},components: {// 传入`props`login: {text:"my login btn text",      onLogin() {        ...      }    }  }})

你可以在component中通过this.props取到所有的prop值。

当然,小程序不支持props的概念,所有的props都会合并到data中

component的methods

组件私有的方法,但最终会被合并到page的config属性里,以便于在component的template中调用。

Page

wx-component会重新定义小程序原有的Page方法,所以你只需要在项目根目录的app.js中require一次就可以,后续无需重新

require:/project/app.js

require("/libs/wx-component/index")App({  onLaunch() {    ...  },globalData: {    ...  }})

component的onLoad和onUnload

这两个事件对应page的onLoad和onUnload,但不支持onShow等其他page事件,你可以在page的onShow中使用this.childrens获取组件并调用其私有方法。

推荐的目录结构

├─project                项目

├─components          功能组件

├─login              登录组件

├─index.wxss

├─index.wxml

├─index.js

├─pages                页面

component的结构

{// 组件名// 也可以不填,不填写会用`components/{X}/index.js`中的X命名name:"login",// 组件私有数据data: {item: [1,2,3]  },// 组件属性// 可以预先定义默认值// 也可以外部传入覆盖默认值props: {text:"start"},// 当组件被加载onLoad() {this.setData({is_loaded:true})  },// 当组件被卸载onUnload() {this.setData({is_unloaded:true})  },// 组件私有方法methods: {    getMsg() {      ...    },    sendMsg() {      ...    }  },// 其他....}

API文档

更详细的API文档请见Github。

题外话

青团社正招聘前端工程师,简历发至:hr@qtshe.com

前面的路

由于这几乎是以Hack的方式去解决非静态微信组件化,data、props和methods的merge也会有些混乱,终究只是更方便更快速的解决业务需求。

期待微信小程序团队尽快发布Component支持。

page.data.maskVisible = true;

前言

最近摩拜单车小程序需求越来越多,多人协作,甚至多个项目并行。如何合作的更顺畅,提升团队成员开发效率,这便是这段时间思考的问题。

其中很重要的一点就是,小程序功能组件化。但小程序的开发框架目前还不支持component,结合具体开发经验,我们封装了wx-component。

今天介绍的这款组件化实现方案,是wech:

青团社招聘:

招聘岗位:资深前端开发工程师

简历投递到:hr@qtshe.com || haochen@qtshe.com

职位描述:

1、建设工具、提炼组件、抽象框架,促进前端工程化、服务化,持续提升研发效率,保障线上产品质量

2、构建H5/PC应用基础设施,主导建设前端各种发布/监控等平台,指导落实解决方案

3、持续优化前端页面性能,维护前端代码规范,钻研各种前沿技术和创新交互,增强用户体验、开拓前端能力边界

这个注入的处理手法值得学习,但是不建议使用这个框架。不过,demo里附带了一个多日日历组件,它的效果还是很不错的,见文未,值得学习。

但是这个属性被Object.defineProperty重定义了。绑定,是微信实现的,嫁接与转移是wech做的。wxml页面中的visible指向了props中的visible(),而visible()又是:

return $props[j];

因为set(){}属性设置器是空的,所以对props的处理是单向数据流,

showMask () {

那么,看一下mask组件,在wxml中:

1.git clone

如果觉得本文还行,请转发到朋友圈让更多朋友看到。

小程序官方的架构为了适应各种情况,总是取最中正的布局和安排,不取巧,不卖巧。第三方工具/框架,每多一分功能就给开发者多带来了一分束缚。相对于大而全的框架,我最喜欢的是工具式的、对原开发模式没有改变或少改变的,可替换的框架。可能就像是一个utils集合,随处可用,随处可换。


在公众号回复"0基础周末学习小程序开发",可以免费领券,限量500名。

1,查看demo

本文同时在多个平台、社群转发,在公众号回复“社群”可与其它艺友热情连接。

如果您看到有料的文章,欢迎与10W艺友分享,荐文热线:liyi@rixingyike.com。

get() {

},

if (typeof $props[j] === 'function') {

}, 1000);

page.setData(page.data);

2.将wechat-ide-binding-directory目录绑定为小程序开发目录,在开发者工具中运行项目

});

本文由金沙澳门官网网址发布于电脑系统,转载请注明出处:金沙澳门官网网址微信小程序组件化解决方案w

关键词: