微信小程序学习（一）

一、小程序的代码构成

JSON配置：json是一种数据格式，并不是编程语言，在微信小程序中起到静态配置的作用。

app.json在微信小程序中起到全局配置的作用，包括了小程序内的所有页面路径、网页表现、网络超时时间、底部Tab等。

{
  "pages":[
    "pages/index/index",
    "pages/logs/logs"    //用于存放页面路径信息，默认第一个优先访问
  ],
  "window":{
    "backgroundTextStyle":"light",    //背景文本样式
    "navigationBarBackgroundColor": "#fff",    //导航背景色样式
    "navigationBarTitleText": "WeChat",        //导航文本信息
    "navigationBarTextStyle":"black"           //导航文本样式
                         //设置页面窗口的属性
  }，
  "tabBar": {
    "list": [
      {
        "pagePath": "pages/index/index",
        "text": "首页"
      },
      {
        "pagePath": "pages/logs/logs",
        "text": "日志"
      }
    ]
  } ，                               //对导航栏进行配置
 "networkTimeout": {
    "request": 10000,
    "downloadFile": 10000
  }                                  //对超时时间进行配置
}
//注意在json配置中不能有注释存在

page.json在微信小程序中起到页面配置的作用，与全局配置方法基本一致。开发者可以独立定义每个页面的属性等相关信息。

WXML模板：类似于Web开发中的HTML，语法与其基本一致；

常用的标签有<view> <text> <button> <image> 等。对于小程序还提供了“{{}}”来对数据进行绑定，“wx:if”起到逻辑控制的作用。

WXSS样式：类似于Web开发中的CSS，语法与其基本一致；（仅仅支持部分选择器如类选择器，标记选择器等）

优点：WXSS在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可。

JS交互逻辑：类似于js脚本，用于实现动态的按键响应；

第一个小程序：

<!--pages/mywx/mywx.wxml-->
<text>{{info}}</text>
<view>{{name}}</view>
                                   //WXML页面
/* pages/mywx/mywx.wxss */
page{
  text-align: center;
  color: red;
  font-size: medium;
}
view{
  color:black;
  margin: auto;
  margin-top: 20rpx;
}                                  //页面的css样式

// pages/mywx/mywx.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    info:"Hello WX World",
    name:"这是我初次进行微信开发"    //对页面数据进行静态配置
  }
})

二、微信小程序的环境

定义：称微信客户端给小程序所提供的环境为宿主环境。小程序借助宿主环境提供的能力，可以完成许多普通网页无法完成的功能。（说白了就是我们使用的终端设备^_^）

小程序的运行环境：渲染层和逻辑层，其中 WXML 模板和 WXSS 样式工作在渲染层，JS 脚本工作在逻辑层。

一个小程序存在多个界面，所以渲染层存在多个WebView线程，这两个线程的通信会经由微信客户端（下文中也会采用Native来代指微信客户端）做中转，逻辑层发送网络请求也经由Native转发，小程序的通信模型下图所示。

（多用户使用微信小程序时微信客户端会在中间进行调度，简化了我们的操作过程）

除此之外微信小程序还提供了强大的API，能够满足用户的各种需求：

如：使用getLocation和scanCode来调用微信所提供的服务

wx.getLocation({
  type: 'wgs84',
  success: (res) => {
    var latitude = res.latitude // 纬度
    var longitude = res.longitude // 经度
  }
})     //获取地理信息
wx.scanCode({
  success: (res) => {
    console.log(res)
  }
})     //调用扫一扫功能

（注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。）

对于更多的API的使用在后面的文章中会有更多的介绍，哈哈其实微信小程序也没有多么难嘛（^_^）。

三、小程序的设计与发布

对于运营的数据可以登录微信小程序管理后台对数据进行查看。（连管理系统都不用做了，哈哈）

四、微信小程序的其他概念

场景值：用来描述用户进入小程序的路径。

开发者可以通过下列方式获取场景值：

对于小程序，可以在 App 的 onLaunch 和 onShow，或wx.getLaunchOptionsSync中获取上述场景值。
对于小游戏，可以在wx.getLaunchOptionsSync和wx.onShow中获取上述场景值

返回来源信息的场景>

逻辑层（JS）：每个小程序都需要在 app.js 中调用 App 方法注册小程序示例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。整个小程序只有一个 App 实例，是全部页面共享的。开发者可以通过 getApp 方法获取到全局唯一的 App 示例，获取App上的数据或调用开发者注册在 App 上的函数。

视图层（WXML）：

{{}}	数据绑定，page页面中data中的数据
wx:if	条件渲染，起到判断的逻辑作用
wx:for	列表渲染的功能，绑定多条数据
template	模板功能，简化程序员的操作

例子：输出列表中大于3的数据集合

<!--pages/mywx/mywx.wxml-->
<view wx:for="{{list}}" wx:if="{{item>3}}" wx:key="{{item}}">
第{{item}}条数据
</view>
                //列表渲染以及条件渲染的综合应用

// pages/mywx/mywx.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    info:"Hello WX World",
    name:"这是我初次进行微信开发",
    list:['1','2','3','4','5']
  }
})