微信小程序入门

了解微信小程序
掌握微信小程序开发工具的使用
了解小程序的目录以及文件结构
掌握小程序中常用的组件
掌握WXML、WXSS、WXS的基本使用

1、微信小程序介绍以及开发准备

1.1、了解微信小程序

百度百科：
微信小程序，简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用，它实现了应用“触
手可及”的梦想，用户扫一扫或搜一下即可打开应用。
全面开放申请后，主体类型为企业、政府、媒体、其他组织或个人的开发者，均可申请注册小程序。小程
序、订阅号、服务号、企业号是并行的体系。
2017年1月9日，张小龙在2017微信公开课Pro上发布的小程序正式上线。
2018年2月，微信官方发布公告称：已对涉及假货高仿、色情低俗和违规“现金贷”等超过2000个小程序，进
行永久封禁处理。
小程序是一种不用下载就能使用的应用，也是一项门槛非常高的创新，经过将近两年的发展，已经构造了新
的小程序开发环境和开发者生态。
小程序也是这么多年来中国IT行业里一个真正能够影响到普通程序员的创新成果，现在已经有超过150万的开
发者加入到了小程序的开发，与我们一起共同发力推动小程序的发展，小程序应用数量超过了一百万，覆盖
200多个细分的行业，日活用户达到两个亿，小程序还在许多城市实现了支持地铁、公交服务。小程序发展
带来更多的就业机会，2017年小程序带动就业104万人，社会效应不断提升。

小程序的特点：

• 小程序是一种不需要下载安装即可使⽤的应⽤，它实现了应⽤ “触⼿可及” 的梦想。
• ⽤户扫⼀扫或者搜⼀下即可打开应⽤，也体现了 “⽤完即⾛” 的理念。
• 用户不用关心是否安装太多应用的问题。应用将无处不在，随时可用，但又 无需安装卸载 。
• 目前微信小程序已经非常的成熟，依托于微信平台，我们常用的一些应用也都有了小程序。
• 

1.2、小程序开发准备工作

1.2.1、注册开发者账号

注册地址：https://mp.weixin.qq.com/wxopen/waregister?action=step1&token=&lang=zh_CN

注册信息提交后，需要通过邮箱激活，并且需要填写开发者信息（选择个人），才可以登录。

1.2.2、注册后的一些设置

注册成功后，需要进行一些设置，如设置项目名称、logo以及获取appid等。
获取appid（appid非常有用，后续的开发都会用到）：

1.2.3、开发者工具下载

微信小程序为小程序开发工程师提供了开发者工具，该工具下载地址：
https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html
版本自行选择

下载后，一路下一步安装即可。

1.3、开发工具的使用

启动开发者工具后，需要进行微信扫码登录：

选择小程序项目：

创建项目：

点击“确定”按钮，尽快进入工具，并且项目已经创建成功：

2、快速入门

2.1、目录结构说明

在小程序中，对于html、js、css均做了扩展与限制，并且对其文件后缀有了新的定义。

主体文件，由三个文件组成，必须放在项目的根目录，如下：

文件	必填	作用
app.js	是	小程序逻辑
app.json	是	小程序公共设置
app.wxss	否	小程序公共样式表

页面由四个文件组成，分别是：

文件类型	必填	作用
js	是	页面逻辑 ( 微信小程序没有window和document对象
wxml	是	页面结构 ( WeiXin Markup Language，不是HTML语法 )
wxss	否	页面样式表 (WeiXin Style Sheets 拓展了rpx尺寸单位，微信专属响应式像素 )
json	否	页面配置

2.2、配置说明

2.2.1、app.json配置项列表

app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。

例子：

{
"pages": ["pages/index/index", "pages/logs/index"],
"window": {
"navigationBarTitleText": "Demo"
},
"tabBar": {
"list": [
{
"pagePath": "pages/index/index",
"text": "首页"
},
{
"pagePath": "pages/logs/logs",
"text": "日志"
}
]
},
"networkTimeout": {
"request": 10000,
"downloadFile": 10000
},
"debug": true,
"navigateToMiniProgramAppIdList": ["wxe5f52902cf4de896"]
}

属性	类型	必填	描述	支持版本
pages	StringArray	是	页面路径列表
window	Object	否	全局的默认窗口表现
pages	StringArray	是	页面路径列表

aonvihfwpaernvhaewijvfao henv ;iauowhfvawhf;aklvnvvvvvvvvvvfvawoifhvawrhjopawehrvtoawtawpvnrawpvrawvmawvmrwvhrmwpvmrapwvnwwwwnnnnnnnnnnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwnwwwwwwwwwwwwwrwwwwwwv