小程序的开发与传统的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文件用来配置页面的样式和行为。

以上便是微信小程序创建和结构的简单介绍,那么我们开始着手于我们的第一个项目吧!


后续内容将持续发布。

更多推荐

学习篇——微信小程序开发