小程序开发的初步经验

小程序开发


浏览:476 次

小程序入门

微信小程序上线已经一年多了。打开微信小程序搜索,大量应用已入驻,包括京东、当当、苏宁易购等各大电商平台。在微信流量门户网站的支持下,我相信小程序的爆发只是时间问题。

碰巧我周末有时间体验一个小程序的开发过程。

开发语言

小程序的开发语言是JavaScript。模板是类似wxml的html,样式是类似wxss的css。完成网络开发的学生可以直接开始。

此外,您可以使用es6编写程序。官方开发工具提供了将esx转换为JavaScript的功能。

客户和开发工具

点击填写信息并根据指南提交相应信息,即可拥有自己的小程序账户。

微信开发者工具

该工具是开发、调试和模拟微信小程序的核心工具,因此必须安装。下载地址:

代码组成

小程序由JSON配置、WXML模板、WXSS样式和JS(交互式逻辑)文件组成。

演示文件的目录结构如下:

├── app.js

├── app.json

├── app.wxss

├── 图像

│ ├── 图标_ seo.png

│ ├── 图标_ seo_ HL.png

│ ├── 图标_速度.png

│ └── icon_速度_ HL.png

├── 页

│ ├── 指数

│ │ ├── 索引.js

│ │ ├── 索引.wxml

│ │ └── 索引.wxss

│ └── 日志

│ ├── 日志.js

│ ├── 日志.json

│ ├── 日志.wxml

│ └── 日志.wxss

├── 项目配置.json

└── 实用程序

└── 实用程序.js

JSON文件用于三个位置:小程序全局配置、页面配置和项目配置。

app。Json是当前小程序的全局配置,包括小程序的所有页面路径、界面表示、网络超时和底部选项卡。

页面配置页面Json用于表示pages/logs目录中与Json等小程序页面相关的日志。

工具配置project.config。json用于一些个性化配置,如界面颜色、编译配置等。

WXML和WXSS文件相当于web开发中的html和css。

JS用于交互逻辑,例如与用户交互:响应用户的点击并获取用户的位置。

不充分的

因为微信小程序的运行环境不是标准的浏览器环境,微信的封装也不完善。当小程序开发工具打包时,它实现了require函数加载依赖项,但它不是一个完整的CommonJS依赖项管理,不能调用npm包。此外,小程序组件重用仍停留在模板级别,不支持组件级别的重用,如react。

为此,开源框架WePY解决了微信小程序的固有缺点。

开发框架

它是一个允许小程序支持组件开发的框架。通过预编译,开发人员可以选择自己喜欢的开发风格来开发小程序。框架的详细优化、Promise和Async函数的引入都是为了使小程序项目的开发更容易、更高效。

Vue式开发风格

支持自定义组件开发

支持引入NPM包

支持

支持ES2015+功能,如

支持多种编译器,Less/Ass/Stylus/PostCSS,Babel/Typescript,Pug

支持多插件处理、文件压缩、图像压缩、内容替换等

支持Sourcemap、ESLint等

优化小程序细节,如请求排队、事件优化等