美文网首页微信小程序开发微信开发运营WEB前端程序开发
【小程序入门集锦】5,使用小程序组件化开发框架wepy

【小程序入门集锦】5,使用小程序组件化开发框架wepy

作者: 石桥码农 | 来源:发表于2017-04-04 23:06 被阅读296次

    wepy是一个很棒的工具式框架,它简化了小程序组件的开发和使用,将小程序这个编程新物种与既有的js世界连接了起来。

    1,项目创建与使用(以下安装都通过npm安装)

    安装(更新) wepy 命令行工具。

    sudo npm install wepy-cli -g

    在开发目录生成开发DEMO。

    wepy new myproject

    切换至项目目录,开发实时编译。

    cd myproject

    wepy build --watch

    2,测试(将微信开发者工具当成weapp player使用)

    使用微信开发者工具新建项目,本地开发选择dist目录。

    微信开发者工具 --> 项目 --> 关闭ES6转ES5。(这一步很重要,不然运行不正常)

    运行效果:

    3,WebStorm下代码高亮

    打开Preferences,搜索Plugins,搜索Vue.js插件并安装。

    打开Preferences,搜索File Types,找到Vue.js Template,在Registered Patterns添加*.wpy,即可高亮。

    推荐使用webstorm,多种编程语言都可以用它,在这里可以得到免费的试用激活码。如果有钱,建议购买正版。

    关于组件化开发

    这个效果来源于示例,是通过使用一个wepy-com-toast组件实现的。

    importToastfrom'wepy-com-toast'

    该组件位于node_modules目录下,是一个被依赖的npm,可以被自动安装。在package.json中有其描述:

    通过该机制,wepy将小程序与原来的js代码世界连接了起来。

    程序员们可以造很多小程序组件轮子,然后很方便的在项目中使用。

    目前在wepy项目中使用第三方组件,基本有三步:

    1,引用importToastfrom'wepy-com-toast'

    2,声明,相当于声明了一个toast变量

    3,使用

    toast是一个事件函数。

    使用步骤是相当简洁的,其实还可以更简洁。将常用组件封装在一起,像$.weui.toast('')这样使用,或许更简单。

    wepy:https://github.com/wepyjs/wepy

    wepy是一个不错的框架,非常值得老程序员学习,因为它站在了时代的前沿。小程序开发新手不建议学习,没有基础的同学还是建

    在微信公众号哲学李论,回复“小程序入门集锦”可以看到这个系列的所有文章。

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

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

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

    相关文章

      网友评论

        本文标题:【小程序入门集锦】5,使用小程序组件化开发框架wepy

        本文链接:https://www.haomeiwen.com/subject/psazottx.html