小程序和浏览器的区别

运行环境不同
API不同

小程序无法调用DOM和BOM的API，但可以调用微信环境提供的各种API
开发模式不同

体验小程序

微信官方的组件展示小程序

小程序ID在哪？

登录网页->点击“开发栏”中的“开发管理”->开发者ID（AppID）

查看小程序效果

点击编译按钮，在电脑端模拟器中查看

点击预览按钮，扫描二维码，在自己手机上查看

主界面组成

小程序项目结构

小程序页面组成部分

每个页面有一个文件夹组成，一个文件夹中有四个文件

最后编译时，会将四个文件编译成一个完整的页面。

文件作用介绍

.json文件

JSON是一种数据格式，常作为配置文件出现。

小程序中有四种JSON文件

根目录中的app.json
根目录中的project.config.json
根目录中的sitemap.json
pages中每个页面中的json文件

app.json

整个项目的全局配置文件，包括所有页面路径、窗口外观、界面表现、底部Tab等

pages：用来记录当前小程序所有页面的路径
window：全局定义小程序所有页面的背景色、文本颜色等
style：全局定义小程序组件所使用的样式版本
sitemapLocation：用来指明sitemap.json的位置

project.config.json

对小程序开发工具所做的个性化配置

setting中保存了编译相关的配置
projectname中保存的是项目名称
appid中保存的是小程序的账号id

sitemap.json

开放小程序内搜索，类似SEO

页面.json文件

在页面配置文件与全局配置中相同的项，会用页面配置文件中的项覆盖。

新建小程序页面

在app.js中，pages项中添加代码

修改首页

app.js中的pages中第一个项即首页界面

WXML和HTML的区别

标签名称不同
属性节点不同
提供了类似Vue中的模板语法

WXSS和CSS的区别

wxss新增rpx尺寸单位
提供了全局的样式（app.wxss作用全局）
wxss仅支持部分CSS选择器（类、id、元素、并集、后代、伪类选择器等）

小程序中的js文件分类

app.js

整个程序的入口文件，通过App()函数启动整个小程序

页面.js文件

页面入口文件，通过调用Page()函数来创建并运行页面

普通.js文件

普通的功能模块文件，用来封装公共的函数或属性供页面使用

小程序的宿主环境

什么是宿主环境？

小程序的宿主环境？

通信模块

通信主体为渲染层和逻辑层

通信模型

小程序的运行机制

小程序启动过程

下载代码包
解析app.json全局配置文件
执行app.js小程序入口文件，调用App()创建小程序实例
渲染小程序首页
小程序启动完成

小程序页面渲染过程

加载页面.json配置文件
加载页面.wxml模板和.wxss样式
执行页面.js文件，调用Page()创建页面实例
页面渲染完成

小程序的组件

常用视图容器类组件

view

类似HTML中的div，是一个块级元素
实现布局效果

scroll-view

可滚动的视图区域
实现滚动列表效果

swiper和swiper-item

轮播容器组件和轮播图item组件

view组件使用

实现flex横向布局

.container1 view{
    width: 100px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    margin-bottom: 10px;
}
.container1 view:nth-child(1){
  background-color:lightcoral;
}

.container1 view:nth-child(2){
  background-color:lightgreen;
}

.container1 view:nth-child(3){
  background-color:lightskyblue;
}
.container1{
  display: flex;
  justify-content: space-around;
}

scroll-view组件使用

<scroll-view scroll-y class="container2">
  <view>A</view>
  <view>B</view>
  <view>B</view>
</scroll-view>

swiper组件使用

<swiper class="container3" indicator-dots indicator-color="white" indicator-active-color="black" autoplay="true" circular>
  <swiper-item>
    <view class="item">a</view>
  </swiper-item>
  <swiper-item>
    <view class="item">b</view>
  </swiper-item>
  <swiper-item>
    <view class="item">c</view>
  </swiper-item>
</swiper>