小程序进阶-基础入门

一、简介

小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。

文档

• 小程序开发指南
• 小程序设计指南
• 小程序官方文档

与普通网页区别

• 小程序的主要开发语言是 JavaScript，但与普通的网页开发有所区别。网页开发渲染线程和脚本线程是互斥的，而小程序分别运行在不同的程序。前端一些常见的库以及Nodejs的npm包无法在小程序运行。
• 小程序运行环境

特色

• 应用触手可及
• 快速的加载和渲染能力，配套云能力、运维能力和数据汇总能力。
• 使得微信可以开放更多的数据，开发者可以得到用户的一些基础信息。

二、代码结构

JSON配置

• JSON是一种数据结构，在小程序中扮演静态配置的角色，不能被动态修改。
• JSON配置包含在一个{}中，并通过key-value的形式表达数据。
• JSON的key必要包含在双引号内。
• JSON中只支持6种数据类型：字符串 - 双引号括起来、布尔型 - true/false、数组 - []括起来、NULL、数字 - 整型、浮点型、对象 - {}括起来。
• JSON不支持注释。

WXML

• 小程序框架标签语言，结合小程序基础组件、事件系统，构建页面。
• 基本语法同HTML类似，标签严格闭合，属性及变量名区分大小写.
• 使用数据绑定功能，动态渲染页面。
• 通过{{变量}}绑定WXML和javasript文件种的数据结构。
• {{变量名}}使得WXMl拥有动态渲染的能力，并且还能进行简单的逻辑运算，或者直接放置字符串、数字或数组。
• 使用 wx:if 判断WXML是否需要渲染该模块，并使用 wx:elif和wx:else添加另一个模块。如果要一次性判断多个组件标签，可以使用一个 标签将多个组件包装起来。
• 在组件上使用 wx:for 控制属性绑定一个数组，使用数组的数据重复渲染该组件。默认数组当前下标变量名为index，当前项的变量名为item。wx:for-item指定当前元素变量名，wx:for-index指定当前下标变量名。wx:for也可以 用在 <block/> 标签上，以渲染一个包含多节点的结构块。
• 使用 wx:key 来指定列表中项目的唯一的标识符。如果为字符串，代表for循环数组中某个item的元素，该元素值在数组中唯一且不能动态改变。如果为this，则表示item本身是唯一的字符串或数字。
• WXML提供模板（template）,可以在模板中定义代码片段，使用name指定模板名称。使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入。
• WXML提供两种文件引用：include和import。import不具备递归的特性，而include 可以将目标文件中除了<template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置。

<!-- item.wxml -->
<template name="item">
  <text>{{text}}</text>
</template>

<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>

• 共同属性
  

WXSS

• WXSS是小程序的一套样式语言，用于描述WXML的组件样式，与web开发css类似。
• 分为公共样式和页面样式，公共样式作用于每个页面。
• WXSS引入rpx尺寸单位，适配不同的屏幕，避免使用px页面留白过多的问题。
• 小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。
  举个例子：iPhone6屏幕宽度为375px，共750个物理像素，那么1rpx = 375 / 750 px = 0.5px。
• 使用 @import ‘./test_0.wxss’ 引入另一个css。由于WXSS最终会被编译打包到目标文件中，用户只需要下载一次，在使用过程中不会因为样式的引用而产生多余的文件请求。
• 小程序支持动态更新内联样式：

<!--
{
 eleColor: 'red',
 eleFontsize: '48rpx'
}
-->
<view style="color: {{eleColor}}; font-size: {{eleFontsize}}"></view>

• 选择器
  
• 选择器优先级
  
• 为了减轻开发者样式开发的工作量，我们提供了WeUI.wxss基础样式库。

JavaSript

• 小程序使用JavaSript作为主要开发语言，用来开发业务逻辑和调用API。
• ECMAScript是一种由Ecma国际通过ECMA-262标准化的脚本程序设计语言。JavaSript是ECMASript的一种实现。小程序的JavaSript同普通网页、nodejs都是不一样的。
  
• 类似 JQuery、Zepto这种浏览器类库是无法在小程序中运行起来的，同样的缺少 Native 模块和NPM包管理的机制，小程序中无法加载原生库，也无法直接使用大部分的 NPM 包。
• 小程序目前可以运行在三大平台：iOS平台，包括iOS9、iOS10、iOS11；Android平台；小程序IDE。
• 小程序中可以将任何一个JavaScript 文件作为一个模块，通过module.exports 或者 exports 对外暴露接口。
• app.js 执行结束后，小程序会按照开发者在 app.json 中定义的 pages 的顺序。
• 在文件中声明的变量和函数只在该文件中有效，不同的文件中可以声明相同名字的变量和函数，不会互相影响。