呼啦啦dxy

微信小程序入门

一，简介

二，小程序开发环境搭建

1.申请账号

2.安装开发工具

3.小程序工具使用

三，目录结构以及json配置

1.目录结果

2.json配置

3.JSON 语法

4.WXML

5.wxss

6.JS 逻辑交互

四，小程序宿主环境

1.程序与页面

2.组件

3.API

五，小程序配置

1.全局配置

2.页面配置

3.sitemap 配置

参考官网：微信公众平台

一，简介

1.什么是小程序？

微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用( 张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小，下载速度很快，用户感觉不到下载的过程 )

限制：同一个分包中的页面享有共同的预下载大小限额 2M，限额会在工具中打包时校验。

2.小程序可以干什么？

同App进行互补，提供同app类似的功能，比app操作更加简洁的轻应用

通过扫一扫或者在微信搜索即可下载

用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选

连接线上线下

开发门槛低，成本低

二，小程序开发环境搭建

小程序开发环境搭建及项目展示
①申请小程序账号
②获取APPID
③下载安装小程序开发软件
④构建项目
⑤进行编译

1.申请账号

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

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

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

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

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

2.安装开发工具

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

选择对应的版本就可啦（安装目录一定是非中文目录）

安装完之后，就可以开始写第一个小程序啦

3.小程序工具使用

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，勾选 "不使用云服务" （注意: 你要选择一个空的目录才可以创建项目），点击新建。可以先预览别人写的项目

（如有加载不出来的情况可以多编译几次，可能存在网络问题）

三，目录结构以及json配置

1.目录结果

小程序包含一个描述整体程序的 app 和多个描述各自页面的 page。一个小程序主体部分由三个文件组成，必须放在项目的根目录

pages:放的是所有的页面（如：用户中心，会议管理）

page相当于Vue中的new vue

wxxml:放的是html代码

js:放的是页面的动态效果及定义

page.json 这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

app.json小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。

定义一个模板相当于vue中的定义组件

详情如下（以下都有官方文档可参考）

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

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

文件类型	必需	作用
js	是	页面逻辑
wxml	是	页面结构
json	否	页面配置
wxss	否	页面样式表

注意：为了方便开发者减少配置项，描述页面的四个文件必须具有相同的路径与文件名。

2.json配置

JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。

我们可以看到在项目的根目录有一个 app.json 和 project.config.json，此外在 pages/logs 目录下还有一个 logs.json，我们依次来说明一下它们的用途。

（1）小程序配置 app.json

app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。代码如下
{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "Weixin",
    "navigationBarTextStyle":"black"
  }
}
pages字段 —— 用于描述当前小程序所有页面路径，这是为了让微信客户端知道当前你的小程序页面定义在哪个目录。

window字段 —— 定义小程序所有页面的顶部背景颜色，文字颜色定义等。其他配置项细节可以参考文档小程序的配置 app.json 。

（2）工具配置 project.config.json

小程序开发者工具在每个项目的根目录都会生成一个 project.config.json，你在工具上做的任何配置都会写入到这个文件，当你重新安装工具或者换电脑工作时，你只要载入同一个项目的代码包，开发者工具就自动会帮你恢复到当时你开发项目时的个性化配置，其中会包括编辑器的颜色、代码上传时自动压缩等等一系列选项。其他配置项细节可以参考文档开发者工具的配置。

（3）页面配置 page.json

这里的 page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。

如果你整个小程序的风格是蓝色调，那么你可以在 app.json 里边声明顶部颜色是蓝色即可。实际情况可能不是这样，可能你小程序里边的每个页面都有不一样的色调来区分不同功能模块，因此我们提供了 page.json，让开发者可以独立定义每个页面的一些属性，例如刚刚说的顶部颜色、是否允许下拉刷新等等。

其他配置项细节可以参考文档页面配置。

3.JSON 语法

小程序里JSON配置的一些注意事项。

JSON文件都是被包裹在一个大括号中 {}，通过key-value的方式来表达数据。JSON的Key必须包裹在一个双引号中，在实践中，编写 JSON 的时候，忘了给 Key 值加双引号或者是把双引号写成单引号是常见错误。

JSON的值只能是以下几种数据格式，其他任何格式都会触发报错，例如 JavaScript 中的 undefined。

数字，包含浮点数和整数

字符串，需要包裹在双引号中

Bool值，true 或者 false

数组，需要包裹在方括号中 []

对象，需要包裹在大括号中 {}

Null

还需要注意的是 JSON 文件中无法使用注释，试图添加注释将会引发报错。

4.WXML

说白了wxml:放的是html代码。在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。打开 pages/index/index.wxml，你会看到以下的内容:
  
    
    
      
      {{userInfo.nickName}}
    
  
  
    {{motto}}
  
1.wxml与html的区别

（1）.标签名字有点不一样

往往写 HTML 的时候，经常会用到的标签是 div, p, span，开发者在写一个页面的时候可以根据这些基础的标签组合出不一样的组件，例如日历、弹窗等等。

小程序的 WXML 用的标签是 view, button, text 等等，这些标签就是小程序给开发者包装好的基本能力

（2）多了一些 wx:if 这样的属性以及 {{ }} 这样的表达式

在网页的一般开发流程中，我们通常会通过 JS 操作 DOM (对应 HTML 的描述产生的树)，以引起界面的一些变化响应用户的行为。

小程序的框架也是用到了这个思路，如果你需要把一个 Hello World 的字符串显示在界面上。

WXML 是这么写 :
{{msg}}
JS 只需要管理状态即可:
this.setData({ msg: "Hello World" })

5.wxss

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。

1.新增了尺寸单位。

2.提供了全局的样式和局部样式。

3.此外 WXSS 仅支持部分 CSS 选择器

更详细的文档可以参考 WXSS 。

6.JS 逻辑交互

一个服务仅仅只有界面展示是不够的，还需要和用户做交互：响应用户的点击、获取用户的位置等等。在小程序里边，我们就通过编写 JS 脚本文件来处理用户的操作。

{{ msg }}

点击 button 按钮的时候，我们希望把界面上 msg 显示成 "Hello World"，于是我们在 button 上声明一个属性: bindtap ，在 JS 文件里边声明了 clickMe 方法来响应这次点击操作：

Page({
  clickMe: function() {
    this.setData({ msg: "Hello World" })
  }
})

响应用户的操作就是这么简单，更详细的事件可以参考文档 WXML - 事件。