小程序globaldata setdata 小程序开发

微信小程序的开发

• 微信小程序

• 开始
• 小程序代码的构成

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

• 小程序部分组件

• 容器组件：view
• 地图组件map

• 小程序API

• 小程序登录信息 wx.login()
• 小程序发起请求wx.request()

• 用户信息的获取

• 用户获取流程：
• 用户session校验

• 前端的发展趋势

• 小程序云开发 。。。

微信小程序

小程序是一种全新的连接用户与服务的方式，它可以在微信内被便捷地获取和传播，使用微信做载体，使用户无需下载便可使用各类的服务。

开始

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

安装开发工具

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

新建一个小程序

新建项目选择小程序项目，选择代码存放的硬盘路径，填入刚刚申请到的小程序的 AppID，给你的项目起一个好听的名字，最后，勾选 “创建 QuickStart 项目” （注意: 你要选择一个空的目录才会有这个选项），点击确定，你就得到了你的第一个小程序了，点击顶部菜单编译就可以在微信开发者工具中预览你的第一个小程序。

小程序代码的构成

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

1、.json后缀的配置文件

项目的根目录有一个 app.json 全局配置。和 project.config.json全局个性化配置，如界面颜色、编译配置等，page.json 其实用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。
小程序全局配置 app.json
app.json 是当前小程序的全局配置，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 配置内容如下：

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#fff",
    "navigationBarTitleText": "WeChat",
    "navigationBarTextStyle":"black"
  }
}

pages下所有的元素，是微信小程序要加载的路径，首页即默认为元素的第一位。在首次加载小程序的时候，会将pages下所有的页面一次性加载出来。
但小程序加载有2M的大小限制，一次性加载不能超过2M。独立分包subpackages是小程序中一种特殊类型的分包，可以独立于主包和其他分包运行。从独立分包中页面进入小程序时，不需要下载主包。当用户进入普通分包或主包内页面时，主包才会被下载。分配配置代码如下：

{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleB",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      "independent": true
    }
  ]
}

2、.wxml 后缀的 WXML 模板文件

网页编程采用的是 HTML + CSS + JS 这样的组合，其中 HTML 是用来描述当前这个页面的结构，CSS 用来描述页面的样子，JS 通常是用来处理这个页面和用户的交互。WXML 充当的就是类似 HTML 的角色，用来实现与用户交互的友好展示。如下例

<view class="container">
  <view class="userinfo">
    <button wx:if="{{!hasUserInfo && canIUse}}"> 获取头像昵称 </button>
    <block wx:else>
      <image src="{{userInfo.avatarUrl}}" background-size="cover"></image>
      <text class="userinfo-nickname">{{userInfo.nickName}}</text>
    </block>
  </view>
  <view class="usermotto">
    <text class="user-motto">{{motto}}</text>
  </view>
</view>

和 HTML 非常相似，WXML 由标签、属性等等构成。标签名字不太一样，如< view ></ view >，多了一些wx:if 这样的属性以及 {{ }} 这样的表达式。
与html实现不同的是，如果你需要把一个Hello World的内容显示在界面上。
只需要在view里添加：< text >{{msg}}</ text>，在相应的管理js添加：this.setData({ msg: “Hello World” })即可实现；

3、.wxss 后缀的 WXSS 样式文件

WXSS 具有 CSS 大部分的特性，小程序在 WXSS 也做了一些扩充和修改。
WXSS 在底层支持新的尺寸单位 rpx，免去对不同的手机像素换算的困扰
你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前对应的页面生效。
也可以通过下面代码，写到wxss首行位置，引入别的wxss文件

@import "common.wxss";

4、.js 后缀的 JS 脚本逻辑文件

用来实现与用户做交互：响应用户的点击、获取用户的位置等等。
例：

<view>{{ msg }}</view>
<button bindtap="clickMe">点击我</button>

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

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

在app.js中的函数是全局函数

其中onLaunch 是小程序的内置函数，当小程序初始化完成时，会触发 onLaunch （全局只触发一次）

getUserInfo 会在页面加载完成之后执行用来获取用户信息

globalData: 此对象为小程序的全局数据可以在任意页面调用

小程序部分组件

容器组件：view

view做为小程序里和html中的div类似的窗口组件，包含所有html的属性，也添加了一些新的属性功能

地图组件map

map使用主要是用来实现实时定位显示、各个标记点的显示。

在前台使用地图组件，需要在wxml里添加 < map id=“myMap” class=“mapHeight” >< /map>，然后在对应的JS里添加wx.createMapContext(‘myMap’);展示地图。可查看其他属性及方法；

小程序API

小程序登录信息 wx.login()

调用接口获取登录凭证（code）。通过凭证进而换取用户登录态信息，包括用户的唯一标识（openid）及本次登录的会话密钥（session_key）等。获取用户登录信息需要通过请求微信下面地址。

https://api.weixin.qq.com/sns/jscode2session?appid=APPID&secret=SECRET&js_code=JSCODE&grant_type=authorization_code

小程序发起请求wx.request()

发起网络请求可使用wx.request()方法实现，具体实现代码：

wx.request({
  url: 'test.do', //仅为示例，并非真实的接口地址
  data: {
    x: '',
    y: ''
  },
  method:'GET/POST',
  header: {
    'content-type': 'application/json' // 默认值
  },
  success (res) {
    console.log(res.data)//调用成功执行
  },
  fail(res) {
    console.log(res.data)//调用失败执行
  },
  complete(res) {
    console.log(res.data)//调用完成后执行
  }
})

用户信息的获取

用户获取流程：

wx.login({
  success (res) {
	 //成功获取到res.code
    if (res.code) {
       wx.request({
		  url: 'testLogin.do',//获取openid、session_key的接口。
		  data: data || {},
		  method: 'POST',
		  success: function (res) {
		    if (res.statusCode == 200) {
		    	//成功获取到openid和session_key
		    }
		  },
		  fail: function () {
		    return typeof cb == "function" && cb(false)
		  }
		})
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

用户session校验

登录后，有了openid、session_key的用户标识，session_key就保证了当前用户进行会话操作的有效性，这个session_key是微信服务端派发的。也就是说，这个标识来间接地维护小程序用户的登录状态，

• session_key和微信派发的code是一一对应的，同一code只能换取一次session_key。每次调用wx.login()，都会下发一个新的code和对应的session_key，为了保证用户体验和登录态的有效性，开发者需要清楚用户需要重新登录时才去调用wx.login()
• session_key是有失效性的，即便是不调用wx.login，session_key也会过期，过期时间跟用户使用小程序的频率成正相关，但具体的时间长短开发者和用户都是获取不到的
  校验session_key的流程：

校验成功：

校验失败后，则需要重新调用wx.login()，获取新的code以及获取新的session_key：

前端的发展趋势

关于前端的发展历史，可以查看这两篇文章：
前端开发发展简史-个人经验分享前端开发的历史和趋势

也可以通过下面这张图片大概了解下：

小程序云开发 。。。