零基础入门微信小程序(一)

微信小程序

1. 小程序简介

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，同时具有出色的使用体验。

1.2 小程序与普通网页开发的区别

小程序的主要开发语言是 JavaScript ，小程序的开发同普通的网页开发相比有很大的相似性。
网页开发者需要面对的环境是各式各样的浏览器，PC 端需要面对 IE、Chrome、QQ浏览器等，在移动端需要面对Safari、Chrome以及 iOS、Android 系统中的各式 WebView 。而小程序开发过程中需要面对的是两大操作系统 iOS 和 Android 的微信客户端，以及用于辅助开发的小程序开发者工具，小程序中三大运行环境也是有所区别的.
网页开发者在开发网页的时候，只需要使用到浏览器，并且搭配上一些辅助工具或者编辑器即可。小程序的开发则有所不同，需要经过申请小程序帐号、安装小程序开发者工具、配置项目等等过程方可完成。

2.目录结构

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

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

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

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

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

3.小程序配置

3.1 全局配置

小程序根目录下的 app.json 文件用来对微信小程序进行全局配置，决定页面文件的路径、窗口表现、设置网络超时时间、设置多 tab 等。
小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象，有以下属性请参考

全局配置属性

3.2 pages

用于指定小程序由哪些页面组成，每一项都对应一个页面的路径（含文件名）信息。文件名不需要写文件后缀，框架会自动去寻找对应位置的 .json, .js, .wxml, .wxss 四个文件进行处理。
数组的第一项代表小程序的初始页面（首页）。小程序中新增/减少页面，都需要对 pages 数组进行修改。
如开发目录为：
├── app.js
├── app.json
├── app.wxss
├── pages
│ │── index
│ │ ├── index.wxml
│ │ ├── index.js
│ │ ├── index.json
│ │ └── index.wxss
│ └── logs
│ ├── logs.wxml
│ └── logs.js
└── utils
则需要在 app.json 中写
零基础入门微信小程序(一)

3.3 window

用于设置小程序的状态栏、导航条、标题、窗口背景色。


{
  "window": {
    "navigationBarBackgroundColor": "#ffffff",
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "微信接口功能演示",
    "backgroundColor": "#eeeeee",
    "backgroundTextStyle": "light"
  }
}

零基础入门微信小程序(一)

3.4 tabBar

如果小程序是一个多 tab 应用（客户端窗口的底部或顶部有 tab 栏可以切换页面），可以通过 tabBar 配置项指定 tab 栏的表现，以及 tab 切换时显示的对应页面。
其中 list 接受一个数组，只能配置最少 2 个、最多 5 个 tab。tab 按数组的顺序排序，每个项都是一个对象
零基础入门微信小程序(一)

3.5 networkTimeout

各类网络请求的超时时间，单位均为毫秒。

3.6 debug

可以在开发者工具中开启 debug 模式，在开发者工具的控制台面板，调试信息以 info 的形式给出，其信息有 Page 的注册，页面路由，数据更新，事件触发等。可以帮助开发者快速定位一些常见的问题。

3.7 requiredBackgroundModes

微信客户端 6.7.2 及以上版本支持
申明需要后台运行的能力，类型为数组。目前支持以下项目：

audio: 后台音乐播放location: 后台定位
如：


{
  "pages": ["pages/index/index"],
  "requiredBackgroundModes": ["audio", "location"]
}

3.8 resizable

基础库 2.3.0 开始支持，低版本需做兼容处理。
在 iPad 上运行的小程序可以设置支持屏幕旋转。
在 PC 上运行的小程序，用户可以按照任意比例拖动窗口大小，也可以在小程序菜单中最大化窗口

3.9 permission PermissionObject 结构

permission: 小程序接口权限相关设置。字段类型为 ObjectPermissionObject 结构:小程序获取权限时展示的接口用途说明。最长 30 个字符
如:


{
  "pages": ["pages/index/index"],
  "permission": {
    "scope.userLocation": {
      "desc": "你的位置信息将用于小程序位置接口的效果展示" // 高速公路行驶持续后台定位
    }
  }
}

零基础入门微信小程序(一)

3.10 sitemapLocation

指明 sitemap.json 的位置；默认为 ‘sitemap.json’ 即在 app.json 同级目录下名字的 sitemap.json 文件
小程序根目录下的 sitemap.json 文件用来配置小程序及其页面是否允许被微信索引。所有页面都会被微信索引（默认情况）
零基础入门微信小程序(一)

3.11 entranceDeclare

微信客户端 7.0.9 及以上版本支持，iOS 暂不支持
聊天位置消息用打车类小程序打开，详情参考。


"entranceDeclare": {
    "locationMessage": {
        "path": "pages/index/index",
        "query": "foo=bar"
    }
}

位置消息
为了让用户更便捷地使用小程序的打车服务，我们在位置消息详情页的菜单中，新增了打车小程序入口。
打开聊天中的位置消息，点击详情页右下角绿色按钮，菜单中会展示符合条件的打车小程序，用户可以直接发起目的地为该位置的打车服务。
小程序的注册类目为“打车（网约车）”，且有用户最近使用的记录，才可以出现在该菜单中。
在此处点击打开小程序后，需要直接进入到发起打车页面。

位置消息入口声明
开发者需要在全局配置app.json声明支持从位置消息入口进入小程序。
配置示例：


"entranceDeclare": {
    "locationMessage": {
        "path": "pages/index/index",
        "query": "foo=bar"
    }
}

从启动参数获取位置信息
示例代码：


//app.js
App({
  onLaunch: function (options){
    console.log(options)
    var scene = options.scene 
    if (scene == 1146) { // 位置消息场景值
      var location = options.locationInfo
      var x = location.latitude
      var y = location.longitude
      var name = location.name
    }
  }
})