一、概念
1、小程序的逻辑层与渲染层是分开的，逻辑层 js 运行在JSCore中，渲染层是 WXML 和 WXSS ，使用Webview进行渲染，小程序没有完整的浏览器对象。
2、小程序的运行环境
运行环境 逻辑层 渲染层
ios JavascriptCore WKWebview
Android v8 chromium 定制内核
小程序开发者工具 NWJS chrom webview
3、小程序代码构成
.json 文件 --> 配置文件
.wxml --> 模板文件
.wxss --> 样式文件
.js --> Js 脚本逻辑文件
4、小程序通信：
5、WXML
1、wxml与vue相似，通过 {{ }} 将数据绑定到页面中，text 是行内元素，view是块元素。
2、列表渲染：列表渲染的属性，也需要写在{{}}中，如wx:for="{{arr}}"，若写成wx:for="arr"会被当做字符串处理
<view>
<view wx:for="{{arr}}" wx:key="{{index}}">{{item}}</view>
</view>
3、条件渲染：wx:if wx:elif wx:eles
<view wx:if="{{judge}}"> <text>judge为true时显示</text> </view> <view wx:else> <text >judge为false时显示</text> </view>
4、模板：小程序同样支持 template，给 template 标签设置name属性，表示该模板的名称。在使用时，通过is属性选择相应名称的模板进行调用，且可以通过data属性传入相应参数。
<!--wxml-->
<template name="staffName">
<view>FirstName: {{firstName}}, LastName: {{lastName}}</view>
</template>
<template is="staffName" data="{{...staffA}}"></template>
<template is="staffName" data="{{...staffB}}"></template>
<template is="staffName" data="{{...staffC}}"></template>
// index.js
Page({
data: {
staffA: {firstName: 'Hulk', lastName: 'Hu'},
staffB: {firstName: 'Shang', lastName: 'You'},
staffC: {firstName: 'Gideon', lastName: 'Lin'}
}
})
5、事件：为标签绑定事件，可以用 bind+事件名 作为属性，方法名称不需要用 {{}} 绑定，与 vue 不同，绑定的方法不支持传参。小程序由于在移动端，绑定点击事件不能用 bindclick ,而是需要用 bindtap 。在方法中获取数据需要 this.data[name] , 修改数据需要 this.setData 方法。
<!--wxml--> <button type="primary" bindtap="onTap"> 修改条件渲染 </button> onTap() { this.setData({ judge: !this.data.judge }) } // 与data属性平级
6、scroll-view : 用来创建滚动视图，但需要设置 scroll-y="{{true}}" 才可以启动纵轴方向的滚动，同时需要通过 wxss 设置高度，超过高度才会触发滚动。
<scroll-view scroll-y="{{true}}" style="height: 100rpx;">
<view wx:for="{{arr}}" wx:key="{{index}}">{{item}}</view>
</scroll-view>
7、icon : 用来创建一个图标，它可以通过 type 属性使用微信的内置图标类型，如：success, success_no_circle, info, warn, waiting, cancel, download, search, clear。 还有 size 、color 属性。所有图标都是矢量图。若需要为图标插入文本，使用 text 标签即可。
<icon type="success" size="23" color="green" /> <text >成功</text>
8、navigator : navigator类似于HTML中的a标签，可通过 url 属性设置跳转地址，仅支持当前小程序内的跳转。
<navigator url="/pages/login/login">跳转到login</navigator>
9、radio 和 checkbox : radio 和 checkbox 都需要放在 radio-group 和 checkbox-group 标签中使用，前者用于实现单选功能，后者用于数据分组。
<form action="">
<radio-group>
<label wx:for="{{options}}" wx:for-item="item" wx:key="{{item.id}}">
<radio value="{{item.value}}" /> {{item.name}}
</label>
</radio-group>
<checkbox-group>
<label wx:for="{{options}}" wx:for-item="item" wx:key="{{item.id}}">
<checkbox value="{{item.value}}" /> {{item.name}}
</label>
</checkbox-group>
</form>
10、picker : picker 可以创建一个选择器，默认的 mode 为普通选择器 selector ，它还支持多列选择器，时间选择器，日期选择器，省市区选择器。
picker的children可以是一个标签，点击children时会弹出选择器。
picker的range属性为必须，它可以绑定Array / Object Array，其值为选择器的选项，当其类型为Object Array时，需要用range-key属性指定选择器显示的内容。
picker的value属性为必须，绑定的是选中项目的index。
当选择器发生选择时，需要通过bindchange事件改变绑定的value值，bindchange的参数为event，其中event.detail = {value: value}。
<!--wxml-->
<form >
<picker mode="selector" range="{{options}}" value="{{pickerSelected}}" bindchange="onPickerChange">
<view >{{pickerSelected}}</view>
</picker>
</form>
// js
onPickerChange(event) {
this.setData({
pickerSelected: event.detail.value
})
}
6、WXSS
1、wxss 与 css 不同 ：
（1）没有 body ,可以通过对 page 设置样式，来影响整个页面的样式；也可以在 page 的 .json 中设置backgroundColor属性，来设置 page 下拉时出现空白区域的颜色，当页面有下拉刷新、上拉加载功能时，需要设置 backgroundColor 属性。
page {
background:#F8F8F8
}
2、新增了尺寸单位 rpx , 在小程序里依旧可以使用 px 、em 等尺寸单位。rpx 可以根据屏幕的宽度进行自适应，它规定屏幕的宽为 750rpx , 1 rpx = 0.5 px = 1 物理像素
3、样式引入 ：可以直接导入第三方的 wxss 文件。
@import "common.wxss"; .middle-p { padding:15px; }
4、内联样式 ：和 css 一样，wxss 支持 class 和 style 两种样式，但在用法上有区别：如果样式中有动态内容，将其写到 style 中，其他的都放到 class 文件中。如果 style 中样式写的过多，小程序在渲染视图的时候还要解析对应的样式布局，对性能有影响。
<view style="color:{{color}};" />
5、选择器 ：
6、全局样式与局部样式：局部样式会覆盖app.wxss 中相同的选择器。