微信小程序浅践
1-微信小程序起步
一、申请账号
申请微信小程序账号，用于管理微信小程序，申请步骤可以参考微信开发官网文档说明，这里不赘述。
拥有微信小程序账号，可以进行小程序的权限、查看数据报表、发布小程序等操作。
小程序 id 就是 AppId，是小程序的唯一标识，用于搜索查找小程序，非常重要的信息。
二、安装开发工具
进行小程序开发，就需要使用开发工具，可前往下载页面下载对应操作系统的开发工具，详细信息可查看《开发者工具介绍》。
三、第一个小程序
安装好开发工具之后，使用微信小程序账号进行登陆，然后就可以创建第一个小程序了。在“项目”选项栏中，选择“新建项目”，之后选择“小程序项目”。随后，填入“项目目录”，“AppId”，“项目名称”等信息，最后勾选“创建 QuickStart 项目”，就得到了第一个小程序。
四、编译预览
可以在工具上点击“编译”和“预览”，即可在工具栏左侧通过模拟器界面看到小程序的表现，也可点击“预览”按钮，通过微信扫一扫体验小程序。
2-代码构成
上一节，快速启动了“QuickStart 项目”，项目自动生成了以下文件类型：
.json 文件，用于配置信息；
.wxml 文件，作用在于模板作用；
.wxss 文件，功能在于样式；
.js 文件，功能在于程序逻辑。
下面具体介绍这些文件的作用。
一、JSON 文件
通过创建的文件目录，有 client 和 server，client 也就是客户端运行的小程序，而 server 则是服务器端用于接收用户请求，进行方法处理。client 下关注小程序配置和页面配置，server 下工具配置。
1、小程序配置
app.json，是对小程序的全局配置，包括所有页面的路径、界面表现、网络超时时间、底部 tab 等等。
包含所有配置信息的代码示例如下：
pages：用于配置小程序所有页面路径，让微信客户端知道当前的小程序页面运行定义在哪个目录下；
window：定义小程序所有页面的顶部背景颜色、文字颜色。
详细说明请参见文档《小程序配置 app.json》。
2、工具配置
project.config.json，使用开发工具时，会各自设置自我喜欢的配置，如界面颜色、编译配置等等，当你换了另一台电脑或者重新安装开发工具时，需要重新配置。
为了解决以上文件，开发工具提供了一个在项目根目录下的 project.config.json 文件，用于保存开发者的个性配置。当发生开发工具变更时，直接导入项目包，即可继续使用之前设置好的配置。
详细信息参见文档《开发者工具的配置》。
3、页面配置
page.json，用来表示 pages/logs 目录下的 logs.json 这类和小程序页面相关的配置。虽然可以使用 app.json 进行整个小程序风格定义，但是每一个页面又会有各自不同的定义，故提供了 page.json 文件进行每个页面的独立配置。
详细信息参见《小程序的配置 page.json》。
二、WXML 模板
讲解 WXML，就需要先讲讲网页编程中的页面结构。网页由 HTML、CSS、JS 组成，HTML 用于定义页面的结构，CSS 用于定义页面的样式，JS 用于页面的动态交互，也即与用户的交互。
在微信小程序中，WXML 充当的就是 HTML 的角色，用于定义页面结构。
WXML 与 HTML 的简单区别：
HTML 可以使用这些基础标签 div、p、span，组合出不同的组件，如日历、弹窗等等。而微信小程序则直接对基础组件进行封装，例如 view、button、text 标签，更多的封装组件可参考《小程序能力》。
增加了 wx:if 和{{}}表达式，通过 js 操作 DOM，产生页面动态效果。为了产生页面动态效果，js 需要记录变量，同时通过 DOM api 操作 DOM。但是，一旦项目变大，不利于开发，便出现了 MVVM 模式（例如 React、Vue），把渲染和逻辑分开。也即是不要使用 js 直接操作 DOM，js 只管理状态，然后通过一种模板语法来描述状态和界面结构的关系即可。
如果你需要把一个 Hello World 的字符串显示在界面上。
WXML 是这么写：
JS 只需要管理状态即可：this.setData({ msg: "Hello World" })
通过 {{ }} 的语法把一个变量绑定到界面上，我们称为数据绑定。仅仅通过数据绑定还不够完整的描述状态和界面的关系，还需要 if/else, for 等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。
詳細信息説明參看文檔《WXML》。
三、WXSS 樣式
WXSS 擁有 CSS 大部分特性，同時，也進行了相應的擴充。
1、新增了尺寸单位。在写 CSS 样式时，开发者需要考虑到手机设备的屏幕会有不同的宽度和设备像素比，采用一些技巧来换算一些像素单位。WXSS 在底层支持新的尺寸单位 rpx ，开发者可以免去换算的烦恼，只要交给小程序底层来换算即可，由于换算采用的浮点数运算，所以运算结果会和预期结果有一点点偏差；
2、提供了全局的样式和局部样式。和前边 app.json, page.json 的概念相同，你可以写一个 app.wxss 作为全局样式，会作用于当前小程序的所有页面，局部页面样式 page.wxss 仅对当前页面生效；
3、WXSS 仅支持部分 CSS 选择器。
詳細文檔參看《WXSS》。
四、JS 交互邏輯
在小程序中，通过 JS 脚本文件处理与用户交互的操作。
同时，也可以定义丰富的 API 接口，用于方便调用，例如获取用户信息、本地存储、微信支付等等。在 QuickStart 项目中，pages/index/index.js 文件就调用了 wx.getUserInfo 接口获取微信用户的头像和昵称，最后通过 setData 把获取的信息显示在界面上。
详细信息参看《WXML-事件》。
3-小程序能力
一、小程序的启动
微信客户端在打开小程序之前，会把整个小程序的代码包下载到本地。
紧接着通过 app.json 的 pages 字段就可以知道当前小程序的所有页面路径：
{
"pages":[
"pages/index/index",
"pages/logs/logs"
]
}
通过配置，说明项目中有两个页面，分别位于 pages/index/index 和 pages/logs/logs 目录下。写在 pages 字段的第一个页面就是小程序首先打开时看到的第一个页面。随后，微信客户端把首页的代码装载进去，通过小程序底层的一些机制，渲染出页面效果。
小程序启动之后，在 app.js 定义的 App 实例的 onLaunch 回调会被执行：
App({
onLaunch: function () {
// 小程序启动之后 触发
}
})
整个小程序只有一个 App 实例，是全部页面共享的，更多的事件回调参考文档《注册程序 App》。
二、程序与页面
这里以 pages/index/index 页面为例进行说明，微信客户端会先根据 index.json 配置生成一个界面，顶部的颜色和文字都可以在这个文件中定义好。接下来微信客户端会装载 WXML 结构和 WXSS 样式。最后，客户端装载 index.js。index.js 的大体内容如下：
Page({
data: { // 参与页面渲染的数据
logs: []
},
onLoad: function () {
// 页面渲染后 执行
}
})
Page 是一个页面构造器，这个构造器就生成了一个页面，在生成页面的时候，小程序框架会把 data 数据和 index.wxml 一起渲染出最终的结构，于是就得到了小程序最终的样子。
在渲染完界面之后，页面实例会进行 onLoad 回调，便可以在这个回调中处理逻辑。
有关于 Page 构造器更多详细的文档参考《注册页面 Page 》。
三、组件
小程序提供了丰富的基础组件，开发者可以通过这些组件实现需求。
在小程序里，只需要在 WXML 中写上对应组件标签就可以实现页面效果。例如地图，可以使用
使用组件的时候，还可以通过属性传递值给组件，让组件可以以不同的状态去展现，例如，我们希望地图一开始的中心的经纬度是广州，那么你需要声明地图的 longitude(中心经度) 和 latitude(中心纬度) 两个属性:
组件的内部行为也会通过事件的形式让开发者可以感知，例如用户点击了地图上的某个标记，你可以在 js 编写 markertap 函数来处理：
也可以通过 style 或者 class 来控制组件的外层样式，以便适应你的界面宽度高度等等。
更多的组件可以参考《小程序的组件》。
四、API
为了让开发者可以很方便的调起微信提供的能力，例如获取用户信息、微信支付等等，小程序提供了很多 API 给开发者去使用。
要获取用户的地理位置时，只需要：
wx.getLocation({
type: 'wgs84',
success: (res) => {
var latitude = res.latitude // 经度
var longitude = res.longitude // 纬度
}
})
调用微信扫一扫能力，只需要：
wx.scanCode({
success: (res) => {
console.log(res)
}
})
需要注意的是：多数 API 的回调都是异步，你需要处理好代码逻辑的异步问题。
更多的 API 能力见《小程序的 API》。
4-微信小程序 Flex 布局
微信小程序页面采用的是 Flex 布局。
Flex 布局提供了元素在容器中的对齐、方向以及顺序，甚至包含动态的或者不确定的大小等。
Flex 布局的主要特征是能够调整其子元素在不同的屏幕大小中能够用最适合的方法填充合适的空间。
Flex 布局的特点
任意方向的伸缩，向左，向右，向下，向上；
在样式层可以调换和重排顺序；
主轴和侧轴方便配置；
子元素的空间拉伸和填充；
沿着容器对齐。
伸缩容器
设有 display:flex 或者 display:block 的元素就是一个 flex container(伸缩容器)，里面的子元素称为 flex item(伸缩项目)，flex container 中子元素都是使用 Flex 布局排版。
display:block 指定为块内容器模式，总是使用新行开始显示，微信小程序的视图容器(view,scroll-view 和 swiper)默认都是 dispaly:block。
display:flex:指定为行内容器模式，在一行内显示子元素，可以使用 flex-wrap 属性指定其是否换行，flex-wrap 有三个值:nowrap(不换行),wrap(换行),wrap-reverse(换行第一行在下面)
使用 display:block(默认值)的代码:
主轴与侧轴
Flex 布局的伸缩容器可以使用任何方向进行布局。
容器默认有两个轴：主轴(main axis)和侧轴(cross axis)。
主轴的开始位置为主轴起点(main start)，主轴的结束位置为主轴终点(main end),而主轴的长度为主轴长度(main size)。
同理侧轴的起点为侧轴起点(cross start),结束位置为侧轴终点(cross end),长度为侧轴长度(cross size)。
主轴并不是一定是从左到右的，同理侧轴也不一定是从上到下，主轴的方向使用 flex-direction 属性控制，它有 4 个可选值：
row：从左到右的水平方向为主轴；
row-reverse：从右到左的水平方向为主轴；
column：从上到下的垂直方向为主轴；
column-reverse：从下到上的垂直方向为主轴。
如果水平方向为主轴，那个垂直方向就是侧轴，反之亦然。
对齐方式
子元素有两种对齐方式：
justify-conent：定义子元素在主轴上面的对齐方式；
align-items：定义子元素在侧轴上对齐的方式。
justify-content 有 5 个可选的对齐方式：
flex-start：主轴起点对齐(默认值)；
flex-end：主轴结束点对齐；
center：在主轴中居中对齐；
space-between：两端对齐，除了两端的子元素分别靠向两端的容器之外，其他子元素之间的间隔都相等；
space-around：每个子元素之间的距离相等，两端的子元素距离容器的距离也和其它子元素之间的距离相同。
justify-content 的对齐方式和主轴的方向有关，下图以 flex-direction 为 row，主轴方式是从左到右，描述 jstify-content5 个值的显示效果：
align-items 表示侧轴上的对齐方式：
stretch 填充整个容器(默认值)；
flex-start 侧轴的起点对齐；
flex-end 侧轴的终点对齐；
center 在侧轴中居中对齐；
baseline 以子元素的第一行文字对齐。
align-items 设置的对齐方式，和侧轴的方向有关，下图以 flex-direction 为 row,侧轴方向是从上到下，描述 align-items 的 5 个值显示效果：
有了主轴和侧轴的方向再加上设置他们的对齐方式，就可以实现大部分的页面布局了。
还未添加个人签名 2019-11-21 加入
还未添加个人简介
评论