打开微信官方文档上来就开发指南
小程序提供了一个简单、高效的应用开发框架和丰富的组件及API，帮助开发者在微信中开发具有原生 APP 体验的服务。
本章分主题的介绍了小程序的开发语言、框架、能力、调试等内容，帮助开发者快速全面的了解小程序开发的方方面面。
想要更具体了了关于框架、组件、API的详细内容，请参考对应的参考文档：
好了,关键词【简单高效】、【丰富的组件】、【丰富API】、【开发语言】、【框架】、【能力】、【调试】
【原生APP】
让我们先来提出几个问题：
简单高效怎么体现？
丰富的组件如何丰富？都有哪些？
使用的开发语言是什么？为什么选择？其优势何在？
这样的框架有什么好处？
有什么特别的能力？
如何进行调试最快？
原生APP？还有非原生的吗？存在扩展能力？
概念总结:
JS-SDK：JS-SDK是对之前的 WeixinJSBrige 的一个包装
JSCore：JSCore全称为JavaScriptCore，是苹果公司在iOS中加入的一个新的framework。该framework为OC与JS代码相互操作的提供了极大的便利。
V8: V8 JS引擎
NWJS:nw.js跨平台技术
逻辑层和渲染层
WKWebView：IOS进阶之WKWebView
chromium内核：chromium
Chrome WebView：实际上就是谷歌浏览器的web视窗
JSON:是一种数据格式，并不是编程语言
WXML 模板:WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。
数据绑定:{{}}
wx:for
wx:if
template
好，接下来开始阅读吧，以下是本人从中获得的认为重要的
小程序简介：
JS-SDK：JS-SDK是对之前的 WeixinJSBrige 的一个包装解决了移动网页能力不足的问题，通过暴露微信的接口使得 Web 开发者能够拥有更多的能力，然而在更多的能力之外，JS-SDK 的模式并没有解决使用移动网页遇到的体验不良的问题。用户在访问网页的时候，在浏览器开始显示之前都会有一个的白屏过程，在移动端，受限于设备性能和网络速度，白屏会更加明显。我们团队把很多技术精力放置在如何帮助平台上的Web开发者解决这个问题。因此我们设计了一个 JS-SDK 的增强版本，其中有一个重要的功能，称之为“微信 Web 资源离线存储”。
微信 Web 资源离线存储：（没有最终对外开放）微信 Web 资源离线存储是面向 Web 开发者提供的基于微信内的 Web 加速方案。
通过使用微信离线存储，Web 开发者可借助微信提供的资源存储能力，直接从微信本地加载 Web 资源而不需要再从服务端拉取，从而减少网页加载时间，为微信用户提供更优质的网页浏览体验。每个公众号下所有 Web App 累计最多可缓存 5M 的资源。
这个设计有点类似 HTML5 的 Application Cache，但在设计上规避了一些 Application Cache的不足。
在内部测试中，我们发现 离线存储 能够解决一些问题，但对于一些复杂的页面依然会有白屏问题，例如页面加载了大量的 CSS 或者是 JavaScript 文件。除了白屏，影响 Web 体验的问题还有缺少操作的反馈，主要表现在两个方面：页面切换的生硬和点击的迟滞感。
因此小程序诞生了:
微信面临的问题是如何设计一个比较好的系统,需要一个全新的系统来完成，它需要使得所有的开发者都能做到,它拥有:
- 快速的加载
- 更强大的能力
- 原生的体验
- 易用且安全的微信数据开放
- 高效和简单的开发
这就是小程序的由来。
小程序的主要开发语言是 JavaScript
网页开发和小程序开发的不同
小程序代码构成
JSON配置
JSON 是一种数据格式，并不是编程语言，在小程序中，JSON扮演的静态配置的角色。
app.json 是当前小程序的全局配置
，包括了小程序的所有页面路径、界面表现、网络超时时间、底部 tab 等。QuickStart 项目里边的 app.json 常用配置内容如下：
{
"pages": [ //页面路径
"pages/index/index",
"pages/logs/index"
],
"window": {//定义小程序所有页面的顶部背景颜色，文字颜色定义等
"navigationBarTitleText": "Demo",
"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
},
"debug": true,
"navigateToMiniProgramAppIdList": [
"wxe5f52902cf4de896"
]
}
JSON的值只能是以下几种数据格式：
数字，包含浮点数和整数
字符串，需要包裹在双引号中
Bool值，true 或者 false
数组，需要包裹在方括号中 []
对象，需要包裹在大括号中 {}
Null
JSON 文件中无法使用注释，试图添加注释将会引发报错。
WXML 模板
WXML 全称是 WeiXin Markup Language，是小程序框架设计的一套标签语言，结合小程序的基础组件、事件系统，可以构建出页面的结构。WXML 文件后缀名是 .wxml ,单的 WXML语句在语法上同 HTML 非常相似。没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml
数据绑定
案例:显示当前时间
pages/wxml/index.wxml如下:
<!--pages/wxml/index.wxml-->
<text>当前时间：{{time}}</text>
pages/wxml/index.js如下:
// pages/wxml/index.js
Page({
/**
* 页面的初始数据
*/
data: {
time: (new Date()).toString()
},
}}
- 关于Date请参考Date - JavaScript | MDN 、JavaScript Date() 方法
- 需要注意的是变量名是大小写敏感的
- 没有被定义的变量的或者是被设置为 undefined 的变量不会被同步到 wxml 中
逻辑语法
可以在 {{ }} 内进行简单的逻辑运算
三元运算、算数运算、还支持字符串的拼接，还可以直接放置数字、字符串或者是数组
条件逻辑
使用 wx:if="{{condition}}" 来判断是否需要渲染该代码块,并且可以使用 wx:elif 和 wx:else 来添加一个 else 块,如果要一次性判断多个组件标签，可以使用一个** <block/>** 标签将多个组件包装起来，并在上边使用 wx:if 控制属性
<view wx:if="{{condition}}"> True </view>
<view wx:if="{{length > 5}}"> 1 </view>
<view wx:elif="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>
<block wx:if="{{true}}">
<view> view1 </view>
<view> view2 </view>
</block>
列表渲染
wx:for 控制属性绑定一个数组，即可使用数组中各项的数据重复渲染该组件。默认数组的当前项的下标变量名默认为index，数组当前项的变量名默认为 item
列表渲染示例:
<!-- array 是一个数组 -->
<view wx:for="{{array}}">
{{index}}: {{item.message}}
</view>
<!-- 对应的脚本文件
Page({
data: {
array: [{
message: 'foo',
}, {
message: 'bar'
}]
}
})
-->
使用 wx:for-item 指定数组当前元素的变量名，使用 wx:for-index 指定数组当前下标的变量名
<view wx:for="{{array}}" wx:for-index="idx" wx:for-item="itemName">
{{idx}}: {{itemName.message}}
</view>
类似 block wx:if ，也可以将 wx:for 用在 <block/> 标签上，以渲染一个包含多节点的结构块。例如：
<block wx:for="{{[1, 2, 3]}}">
<view> {{index}}: </view>
<view> {{item}} </view>
</block>
如果列表中项目的位置会动态改变或者有新的项目添加到列表中，并且希望列表中的项目保持自己的特征和状态（如 <input/> 中的输入内容， <switch/> 的选中状态），需要使用 wx:key 来指定列表中项目的唯一的标识符。
其实就是说如果不是按照默认排序,则需要指定wx:key来进行排序
wx:key 的值以两种形式提供：
1.字符串:代表在 for 循环的 array 中 item 的某个 property，该 property 的值需要是列表中唯一的字符串或数字，且不能动态改变。
2.保留关键字:this 代表在 for 循环中的 item 本身，这种表示需要 item 本身是一个唯一的字符串或者数字，如：
当数据改变触发渲染层重新渲染的时候，会校正带有 key 的组件，框架会确保他们被重新排序，而不是重新创建，以确保使组件保持自身的状态，并且提高列表渲染时的效率。
使用 wx:key 示例（WXML）本案例可用于参考写swiper随机刷新
<switch wx:for="{{objectArray}}" wx:key="unique" > {{item.id}} </switch>
<button bindtap="switch"> Switch </button>
<button bindtap="addToFront"> Add to the front </button>
<switch wx:for="{{numberArray}}" wx:key="*this" > {{item}} </switch>
<button bindtap="addNumberToFront"> Add Number to the front </button>
使用 wx:key 示例（JavaScript）
Page({
data: {
objectArray: [
{id: 5, unique: 'unique_5'},
{id: 4, unique: 'unique_4'},
{id: 3, unique: 'unique_3'},
{id: 2, unique: 'unique_2'},
{id: 1, unique: 'unique_1'},
{id: 0, unique: 'unique_0'},
],
numberArray: [1, 2, 3, 4]
},
switch: function(e) {
const length = this.data.objectArray.length //获取长度
for (let i = 0; i < length; ++i) {
const x = Math.floor(Math.random() * length)
const y = Math.floor(Math.random() * length)
const temp = this.data.objectArray[x]
this.data.objectArray[x] = this.data.objectArray[y]
this.data.objectArray[y] = temp
}
this.setData({
objectArray: this.data.objectArray
})
},
addToFront: function(e) {
const length = this.data.objectArray.length
this.data.objectArray = [{id: length, unique: 'unique_' + length}].concat(this.data.objectArray)
this.setData({
objectArray: this.data.objectArray
})
},
addNumberToFront: function(e){
this.data.numberArray = [ this.data.numberArray.length + 1 ].concat(this.data.numberArray)
this.setData({
numberArray: this.data.numberArray
})
}
})
- 我的理解:在不使用 wx:key的情况下, 如果 array 内的数据发生改变，则会重新创建每个Item对象然后渲染列表（费时费力）
在使用 wx:key的情况下，如果array中的数据发生改变，只是将对应的对象重新排序。未发生变化的对象，不会重新创建(Very good)
模板
WXML提供模板（template），可以在模板中定义代码片段，然后在不同的地方调用。使用 name 属性，作为模板的名字。然后在 <template/> 内定义代码片段
使用 is 属性，声明需要的使用的模板，然后将模板所需要的 data 传入，如代码2-17所示。
模板使用示例:
<!--
item: {
index: 0,
msg: 'this is a template',
time: '2016-06-18'
}
-->
<template name="msgItem">
<view>
<text> {{index}}: {{msg}} </text>
<text> Time: {{time}} </text>
</view>
</template>
<template is="msgItem" data="{{...item}}"/>
<!-- 输出
0: this is a template Time: 2016-06-18
-->
is可以动态决定具体需要渲染哪个模板
动态使用模板:
<template name="odd">
<view> odd </view>
</template>
<template name="even">
<view> even </view>
</template>
<block wx:for="{{[1, 2, 3, 4, 5]}}">
<template is="{{item % 2 == 0 ? 'even' : 'odd'}}"/>
</block>
<!-- 输出
odd
even
odd
even
odd
-->
引用
WXML 提供两种文件引用方式import和include。
import 可以在该文件中使用目标文件定义的 template
需要注意的是 import 有作用域的概念，即只会 import 目标文件中定义的 template，而不会 import 目标文件中 import 的 template，简言之就是import 不具有递归的特性。
在 index.wxml 中引用了 item.wxml，就可以使用 item模板：
<import src="item.wxml"/>
<template is="item" data="{{text: 'forbar'}}"/>
include 可以将目标文件中除了 <template/> <wxs/> 外的整个代码引入，相当于是拷贝到 include 位置，如
<!-- index.wxml -->
<include src="header.wxml"/>
<view> body </view>
<include src="footer.wxml"/>
共同属性
所有wxml 标签都支持的属性称之为共同属性
和HTML的差不多
image.png
WXSS样式
文件组成
WXSS（WeiXin Style Sheets）是一套用于小程序的样式语言,WXSS与Web开发中的CSS类似,WXSS对CSS做了一些补充以及修改。
项目公共样式：根目录中的app.wxss为项目公共样式，它会被注入到小程序的每个页面
页面样式：与app.json注册过的页面同名且位置同级的WXSS文件
其它样式：其它样式可以被项目公共样式和页面样式引用.
尺寸单位
引入了rpx（responsive pixel）尺寸单位。引用新尺寸单位的目的是，适配不同宽度的屏幕，开发起来更简单。
WXSS引用
小程序中，我们依然可以实现样式的引用，样式引用是这样写：
@import './test_0.wxss'
内联样式
WXSS内联样式与Web开发一致
选择器
选择器
权重:WXSS优先级与CSS类似,权重越高越优先。在优先级相同的情况下，后设置的样式优先级高于先设置的样式。
WeUI.wxss基础样式库=官方样式库,包含button(按钮)、cell(可以理解为边框)、dialog(对话)、progress(进程)、toast(顶部弹窗)、article(正文)、actionsheet(上下拉菜单)、icon(图标)等各式原生。
网友评论