小程序的开发与传统的web前端开发极其相似,想必各位博友们关心的是如何去开发一个小程序,这里我简单介绍总结一下近期学习的如何开发小程序。
首先注册微信小程序
如果还没有微信公众平台的账号,先进入微信公众平台首页,点击“立即注册”按钮进行注册。注册的账号类型可以是订阅号、服务号、小程序以及企业微信,我们选择“小程序”即可。
接着填写账号信息,需要注意的是,填写的邮箱必须是未被微信公众平台注册、未被个人微信号绑定的邮箱,而且每个邮箱仅能申请一个小程序。
激活邮箱之后,选择主体类型为“个人类型”,并按要求登记主体信息。
微信开发者工具
下载微信web开发者工具,根据自己的操作系统下载对应的安装包进行安装即可。
打开开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!
小程序新建项目
打开开发者工具,选择“小程序项目”,点击右下角的“+”新建项目。
选择一个空的文件夹作为项目目录,填入刚刚的AppID,再填写一个项目名称,比如我这里叫做hello-minipro。点击“确定"进入工具主界面。
创建微信小程序完毕
项目目录结构
├── app.js # 小程序的逻辑文件
├── app.json # 小程序的配置文件
├── app.wxss # 全局公共样式文件
├── pages # 存放小程序的各个页面
│ ├── index # index页面
│ │ ├── index.js # 页面逻辑
│ │ ├── index.wxml # 页面结构
│ │ └── index.wxss # 页面样式表
│ └── logs # logs页面
│ ├── logs.js # 页面逻辑
│ ├── logs.json # 页面配置
│ ├── logs.wxml # 页面结构
│ └── logs.wxss # 页面样式表
├── project.config.json
└── utils
└── util.js
根目录下有3个文件: app.js、app.json、app.wxss,小程序必须有这3个描述APP的文件,并放在根目录下。这3个是应用程序级别的文件,与之平行的还有一个pages文件夹,用来存放小程序的各个页面。
我们可以和web前端开发技术做个类比:
- wxml类似于HTML文件,用来编写页面的标签和骨架,但里面只能用小程序自己封装的组件
- wxss类似于CSS文件,用来编写页面样式,只是把css 文件换成了wxss文件
- js 文件类似于前端编程中的JavaScript 文件,用来编写小程序的页面逻辑
- json文件用来配置页面的样式和行为。