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

小程序入门集锦,你觉得如何

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

自从2016年9月我发布第一套小程序视频教程后,很多同学都开始利用这套视频教程走上了小程序开发的道路,同时建立了几个小程序交流QQ群,到目前也都是人满为患,已经不能为大家在群里解答小程序的相关问题了。

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

但是有时候又想分享点干货,怎么办呢?我想了想,还是通过 [微信公众号] 吧。

安装 wepy 命令行工具。

小程序发展到了今天,已经开放出了太多的利好消息,API 也已经非常丰富和完善了。

sudo npm install wepy-cli -g

但是开发小程序,很多时候非常繁琐,这个原因是小程序的架构,编写一个页面需要4个文件:

在开发目录生成开发DEMO。

page.wxml

page.wxss

page.js

page.json

wepy new myproject

同时还有很多问题、不完善的ES6/7语法支持、很差劲的代码编写体验。

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

有好的解决方案吗?

cd myproject

答案是:WePY!

wepy build --watch

WePY是腾讯开源的一个小程序开发框架,注意,是腾讯开源的。WePY发布的第一个版本是2016年12月份,也就是小程序刚刚推出的时候,到目前为止,WePY已经发布了52个版本。

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

在WePY的GitHub官方网站是这么描述的:

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

“ WePY 是一款让小程序支持组件化开发的框架,通过预编译的手段让开发者可以选择自己喜欢的开发风格去开发小程序。框架的细节优化,Promise,Async Functions的引入都是为了能让开发小程序项目变得更加简单,高效。”

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

同时,WePY借鉴了Vue.js(后文简称Vue)的语法风格和功能特性。支持了Vue的诸多特征,比如父子组件、组件之间的通信、computed属性计算、wathcer监听器、props传值、slot槽分发,还有很多高级的特征支持:Mixin混合、拦截器等等等等。

运行效果:

这么好?如何使用呢?

3,WebStorm下代码高亮

第一步:在你的电脑上安装 WePY

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

npm install wepy-cli -g

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

第二步:通过WePY创建项目

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

wepy init standard myproject

关于组件化开发

第三步:安装依赖

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

npm install

importToastfrom'wepy-com-toast'

此时,项目创建完毕,我们就可以通过第三方开发工具打开这个项目了,这里我用的是webstom(这个工具对我个人来说是全球最好的开发者工具)。

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

图片 1

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

image

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

如果想看项目运行效果,只需要在上图的terminal中执行命令:

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

wepy build - - watch

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

此命令执行完毕后,会在myproject目录下生产一个叫 dist 的文件夹,然后用 微信开发者工具 打开dist这个文件夹,就可以看到如下图显示了。

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

图片 2

3,使用

image

toast是一个事件函数。

注意:通过微信开发者工具打开的时候可能会有错误,记得不要勾选 ES6转ES5/上传代码是样式自动补全/上传代码时自动压缩 这三项。

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

同时,我们在webstorm编写的任何代码,会实时反馈到 微信开发者工具 的预览窗口上。

wepy:

在以上图片中,我能能看到一个叫 app.wpy 的文件,它是小程序的入口文件,打开它,我们会看到如下代码:

本文由金沙澳门官网网址发布于电脑系统,转载请注明出处:小程序入门集锦,你觉得如何

关键词: