微信小程序入门

简介: 微信小程序入门


一、小程序简介

1.1 什么是小程序?

  1. 2017年度百度百科十大热词之一
  2. 微信小程序(wei xin xiao cheng xu),简称小程序,英文名Mini Program,是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装,用完即走,实际上是需要安装的,只不过小程序的体积特别小, 下载速度很快,用户感觉不到下载的过程 )
  3. 限制:同一个分包中的页面享有共同的预下载大小限额 2M,限额会在工具中打包时校验。
  4. 2017年1月9日0点,万众瞩目的微信第一批小程序正式低调上线。

1.2 小程序可以干什么?

  1. 同App进行互补,提供同app类似的功能,比app操作更加简洁的轻应用
  2. 通过扫一扫或者在微信搜索即可下载
  3. 用户使用频率不高,但又不得不用的功能软件,目前看来小程序是首选
  4. 连接线上线下
  5. 开发门槛低, 成本低

1.3 申请帐号

进入小程序注册页 根据指引填写信息和提交相应的资料,就可以拥有自己的小程序帐号。

在这个小程序管理平台,你可以管理你的小程序的权限,查看数据报表,发布小程序等操作。

登录 小程序后台 ,我们可以在菜单 “开发”-“开发设置” 看到小程序的 AppID 了 。

小程序的 AppID 相当于小程序平台的一个身份证,后续你会在很多地方要用到 AppID (注意这里要区别于服务号或订阅号的 AppID)。

有了小程序帐号之后,我们需要一个工具来开发小程序。

1.4 安装开发工具

前往 开发者工具下载页面 ,根据自己的操作系统下载对应的安装包进行安装,有关开发者工具更详细的介绍可以查看 《开发者工具介绍》

打开小程序开发者工具,用微信扫码登录开发者工具,准备开发你的第一个小程序吧!

1.5 创建第一个小程序

2.基础操作及语法

2.1目录结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。

一个小程序主体部分由三个文件组成,必须放在项目的根目录,如下:

app.js:小程序逻辑

app.json:小程序公共配置

app.wxss:小程序公共样式表

一个小程序页面由四个文件组成,分别是:

js : 页面逻辑

wxml : 页面结构

json : 页面配置

2.2 常见语法及文件类型

(1)JSON(JavaScript Object Notation):

JSON 文件用于配置小程序的全局配置,如project.config.json、app.json。

用于指定小程序的页面、窗口样式、网络超时时间等设置。

(2)WXML(WeiXin Markup Language):

WXML 文件用于描述小程序的页面结构,类似于HTML。

包含视图标签、组件引用、数据绑定等。

支持小程序特有的标签和属性,如、 、{{}} 数据绑定等。

(3)WXSS(WeiXin Style Sheet):

WXSS 文件用于定义小程序的样式,类似于CSS。

包括样式类的定义、样式属性、样式引用等。

支持小程序特有的样式单位(rpx)、尺寸单位(rem)、样式继承等。

(4)JavaScript:

JavaScript 文件用于编写小程序的逻辑。

包括页面逻辑、事件处理、网络请求、数据处理等。

支持小程序特有的生命周期函数、事件监听、数据更新等。

(5)模板文件:

模板文件(.wxml)用于定义可复用的页面部分,可以在多个页面中引用。

可以使用标签定义模板,然后在不同页面中引用该模板。

(6)页面文件:

页面文件用于定义小程序的不同页面。

每个页面通常包括一个对应的WXML、JS、WXSS文件。

小程序通过路由机制实现不同页面的切换。

(7)组件:

组件是小程序中可复用的UI元素,类似于自定义标签。

可以通过标签定义组件,然后在页面中引用。

组件通常包括WXML、JS、WXSS文件。

(8)事件绑定:

可以在WXML中通过事件绑定(如bindtap、bindinput)将用户的操作和JavaScript逻辑关联起来。

事件处理函数定义在JS文件中。

(9)数据绑定:

数据绑定允许将页面上的数据与JavaScript中的数据关联。

通过{{}}语法在WXML中实现数据的显示和更新。

目录
相关文章
|
2月前
|
存储 JSON 小程序
微信小程序入门之新建并认识小程序结构
微信小程序入门之新建并认识小程序结构
53 1
|
2月前
|
XML 小程序 JavaScript
小程序入门之项目配置说明和数据绑定
小程序入门之项目配置说明和数据绑定
42 1
|
4月前
|
小程序 前端开发 Java
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
JavaDog Chat v1.0.0 是一款基于 SpringBoot、MybatisPlus 和 uniapp 的简易聊天软件,兼容 H5、小程序和 APP,提供丰富的注释和简洁代码,适合初学者。主要功能包括登录注册、消息发送、好友管理及群组交流。
112 0
SpringBoot+uniapp+uview打造H5+小程序+APP入门学习的聊天小项目
|
2月前
|
小程序 前端开发 JavaScript
小程序入门之认识view和text组件
小程序入门之认识view和text组件
81 0
|
6月前
|
小程序
微信小程序学习笔记(入门篇)
微信小程序学习笔记(入门篇)
67 0
|
6月前
|
监控 小程序 前端开发
基础入门-抓包技术&HTTPS协议&WEB&封包监听&网卡模式&APP&小程序
基础入门-抓包技术&HTTPS协议&WEB&封包监听&网卡模式&APP&小程序
185 0
|
6月前
|
移动开发 小程序 安全
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
基础入门-APP架构&小程序&H5+Vue语言&Web封装&原生开发&Flutter
|
6月前
|
小程序
微信小程序快速入门 - 10分钟入门
微信小程序快速入门 - 10分钟入门
49 0
|
7月前
|
小程序 Java 编译器
性能工具之JMeter 微信小程序 WebSocket 脚本入门
【5月更文挑战第12天】性能工具之JMeter 微信小程序 WebSocket 脚本入门
220 1
|
7月前
|
小程序 JavaScript 容器
微信小程序入门学习02-TDesign中的自定义组件
微信小程序入门学习02-TDesign中的自定义组件