微信小程序开发系列——2. 开发者工具以及开发框架简介
2017-06-30 14:34
1226 查看
摘要:本文介绍了微信小程序的开发者工具、微信小程序使用的基本前后端框架
总体来说,微信小程序遵循传统前端框架开发界面,后端服务器语言提供基础支持的模式。开发还是非常容易的。
基本的开发步骤为这样:
1、配置开发环境,只要下载开发者工具(点这里)就可以了。安装开发者工具以后,使用微信扫码登录,自行填写下面的条目。关于AppID这一栏,如果App需要在应用里上线的话,需要去官方申请,如果只是体验一下的话,可以不用填AppID,直接点旁边的”无AppID”就可以了。
![](https://img-blog.csdn.net/20170630141709486?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGxvbmxpbmU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
在开发者工具创建项目时会提示,是否需要创建一个 quick start 项目。选择“是”,会自动生成一个简单的原始模型。
点击左边的编辑,里面含有整个Project的文件结构。具体来说,
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
![](https://img-blog.csdn.net/20170630141943318?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGxvbmxpbmU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
每个单独的小程序页面由四个文件组成,分别是:
这两个表格内的文件,就是小程序运行的所有组件。具体的内容,根据详细的开发框架,完成需要制作的程序即可。
点击左侧的”项目”,再点击预览,扫码后即可在微信客户端中体验小程序在手机端运行的效果。
![](https://img-blog.csdn.net/20170630144330081?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGxvbmxpbmU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
1. 视图层使用微信自行开发的的WXML和WXSS语言开发,基本可以看做是XML和CSS的缩小版。
2. 逻辑层使用JavaScript开发,提供一系列数据绑定、传输和事件系统。
听到这里我赶紧把三年前买的书从书架上拿出来,把上面的灰尘擦干净,压压惊。
![](https://img-blog.csdn.net/20170630142738383?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvdGxvbmxpbmU=/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
我记得从前有为架构师说过,凡是能用JS开发的软件折腾到最后都会用JS开发。说这句话的人具体是谁?管他呢!
另外,官方文档也提供了一大堆设计标准、组件、视图中的基础部件、快捷调用手机硬件功能的API,比如用户信息,本地存储,支付功能等等,总之,用最简单的方法让程序员快速、流畅地开发软件,看起来小程序还是做到了。
1.简介
为了鼓励广大程序员跳入微信小程序开发这个大坑,腾讯很贴心地提供了微信小程序开发框架以及灰常详细的开发文档(点这里),文档言简意赅清晰易懂,读完令人如沐春风,赞一个。我读了两遍就打算开始正式开发了,有意向专攻这方面开发的同学可以多读两遍。总体来说,微信小程序遵循传统前端框架开发界面,后端服务器语言提供基础支持的模式。开发还是非常容易的。
基本的开发步骤为这样:
1、配置开发环境,只要下载开发者工具(点这里)就可以了。安装开发者工具以后,使用微信扫码登录,自行填写下面的条目。关于AppID这一栏,如果App需要在应用里上线的话,需要去官方申请,如果只是体验一下的话,可以不用填AppID,直接点旁边的”无AppID”就可以了。
在开发者工具创建项目时会提示,是否需要创建一个 quick start 项目。选择“是”,会自动生成一个简单的原始模型。
点击左边的编辑,里面含有整个Project的文件结构。具体来说,
小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。
一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:
文件类型 | 必填 | 作用 |
---|---|---|
app.js | 是 | 小程序逻辑 |
app.json | 是 | 小程序公共设置 |
app.wxss | 否 | 小程序的css样式表 |
文件类型 | 必填 | 作用 |
---|---|---|
js | 是 | 页面逻辑 |
wxml | 是 | 页面结构 |
wxss | 否 | 页面样式表 |
json | 否 | 页面配置 |
点击左侧的”项目”,再点击预览,扫码后即可在微信客户端中体验小程序在手机端运行的效果。
2. 框架分析
根据小程序官方文档的介绍,框架的核心为两块视图层和一个逻辑层。1. 视图层使用微信自行开发的的WXML和WXSS语言开发,基本可以看做是XML和CSS的缩小版。
2. 逻辑层使用JavaScript开发,提供一系列数据绑定、传输和事件系统。
听到这里我赶紧把三年前买的书从书架上拿出来,把上面的灰尘擦干净,压压惊。
我记得从前有为架构师说过,凡是能用JS开发的软件折腾到最后都会用JS开发。说这句话的人具体是谁?管他呢!
另外,官方文档也提供了一大堆设计标准、组件、视图中的基础部件、快捷调用手机硬件功能的API,比如用户信息,本地存储,支付功能等等,总之,用最简单的方法让程序员快速、流畅地开发软件,看起来小程序还是做到了。
相关文章推荐
- WePY框架开发的小程序如何在微信web开发者工具中运行起来 3ff0
- 微信小程序 开发 微信开发者工具 快捷键
- 微信小程序开发《1. 准备工作以及工具》
- 微信小程序开发系列六:微信框架API的调用
- 微信小程序开发详解(二)---开发工具使用简介
- 微信小程序 开发 微信开发者工具 快捷键
- 微信小程序学习(2)_开发准备和开发工具简介
- 微信开发准备(三)——框架以及工具的基本使用
- 微信小程序 开发 微信开发者工具 快捷键
- 微信小程序游戏开发文档以及开发工具地址
- 微信web开发者工具(小程序开发工程),打开后卡住显示黑色或白色窗口解决办法
- 微信开发准备(三)--框架以及工具的基本使用
- 微信小程序前端开发者工具-小程序定制开发神器
- 【转】mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案
- 小程序自学系列(零基础学小程序)---实现底部导航栏和顶部导航栏及微信开发工具常用快捷键
- wepy微信小程序框架和wept第三方小程序开发工具
- 微信开发准备(三)——框架以及工具的基本使用
- mac版微信web开发者工具(小程序开发工具)无法显示二维码 解决方案
- ACE框架简介以及一个基于ACE的C/S服务程序实例
- 常用开发框架以及打包工具