微信小程序初学

一、小程序发展

• JS-SDK

解决了移动网页能力不足的问题，通过暴露微信更多的接口使得开发时拥有更多的API,但是在体验上还是存在不足，在用户打开小程序页面时，会出现一段时间的白屏，而这个白屏的时间取决于设备性能和网络速度。所以微信团队就创造了一个JS-SDK增强版。

• JS-SDK增强版

这个增强版里面有一个重要的功能就是，微信Web资源离线存储。离线缓存下来，当加载页面时，直接从微信本地加载资源，而不是从服务器拉取资源，这样就减少了白屏的时间。但是微信本地做了限制，最大只能存储5M的资源。当某个小程序里面有很多的css，js文件，势必会超出5M。

• 一般存在的体验问题
  1.白屏
  2.缺少操作的反馈（页面生硬切换和点击的迟滞感）
  对于白屏的问题，上述有相应的解决方案。
  对于第二个缺少操作的反馈问题，可以通过开发者自己来解决，通过一些SPA的框架，去模拟客户端原生页面的切换，

二、WXML模板

（一）数据绑定
动态数据，不同变量值渲染不同的页面。

<!--pages/wxml/index.wxml-->
<text>当前时间：{{time}}</text>

// pages/wxml/index.js
Page({
  /**
   * 页面的初始数据
   */
  data: {
    time: (new Date()).toString()
  },
})

属性名也可以动态，但是必须加上双引号。

<!-- 正确的写法 -->
<text data-test="{{test}}"> hello world</text>


<!-- 错误的写法  -->
<text data-test={{test}}> hello world </text >

<!--
{
  w: 'w',
  W: 'W'
}
-->


<view>{{w}}</view>
<view>{{W}}</view>


<!-- 输出
w
W
-->

注意：没有被定义的变量或是被设置为undefined的变量不会被同步到wxml中。

<!--
{
  var2: undefined,
  var3: null,
  var4: "var4"
}
-->


<view>{{var1}}</view>
<view>{{var2}}</view>
<view>{{var3}}</view>
<view>{{var4}}</view>


<!--
输出：
null
var4
-->

三、JavaScript脚本

（一）模块化
每一个单独的js文件被看做为一个模块，不同的模块可以定义相同的变量名，相同的变量名不会被影响。
声明在一个文件中的变量是局部变量。声明全局变量的方式是，使用getApp（）方法获取全局变量实例，并设置相关属性值。

// 设置全局变量
let global = getApp();
global.name = "ddd"

// 访问全局变量
let global = getApp();
console.log(global.name) //ddd

但是得先设置了全局变量才能访问它。
重点：当所有的js文件想要访问全局变量的时候，可以直接在app.js里面App()方法里设置。

APP({
	globalValue : "ddd"
})