Skip to content

小程序开发流程

前提

1. 注册小程序账号

首先,开发者需要在微信公众平台注册账号,选择小程序类型进行注册。注册过程中需要填写邮箱、设置密码、填写小程序信息等步骤。

注册完成后,开发者将获得小程序的AppID,这是小程序的唯一标识。

2. 微信开发者工具设置

在微信开发者工具中新建项目,输入AppID,选择代码存放路径,创建项目。

项目创建后,开发者可以编写小程序的前端显示和后台服务器代码。前端代码包括使用WXML进行页面布局,WXSS定义样式,JS实现页面逻辑等。后台服务器代码主要负责数据处理和API接口的实现。

小程序代码构成

  1. .json 后缀的 JSON 配置文件
  2. .wxml 后缀的 WXML 模板文件
  3. .wxss 后缀的 WXSS 样式文件
  4. .js 后缀的 JS 脚本逻辑文件

小程序VS原生HTML

  • div 改成 view
  • span、font 改成 text
  • a 改成 navigator
  • img 改成 image
  • input 仅仅是输入框。 原html规范中input不仅是输入框,还有radio、checkbox、时间、日期、文件选择功能。在小程序规范中,input仅仅是输入框。其他功能都有单独的组件或API:radio组件、checkbox组件、时间选择、日期选择、图片选择、视频选择、多媒体文件选择(含图片视频)、通用文件选择。
  • form、button、label、textarea、canvas、video 这些还在。
  • select 改成 picker
  • iframe 改成 web-view
  • ul、li没有了,都用view替代。做列表一般使用自定义的组件

除了改动外,新增了一批手机端常用的新组件

  • scroll-view 区域滚动
  • swiper 可华东区域视图容器(轮播)
  • icon 图标
  • rich-text 富文本(不可执行js,但可以渲染各种文字格式和图片)
  • progress 进度条
  • slider 滑块指示器
  • switch 开关选择器
  • camera 相机
  • live-player 直播
  • map 地图
  • cover-view 可覆盖原生组件的视图容器