小程序初体验

标签：文件初体验微信程序 json wxss 页面

小程序开发前的准备

在进行【小程序】开发之前，我们需要做一些准备工作：

前往微信公众平台，注册账号并登录
下载并安装【微信开发者工具】

注册小程序

进入微信公众平台
点击立即注册

3.账号类型选择【小程序注册】

4.完成基本的注册流程

5.【小程序】注册完成之后即可前往微信公众平台【微信扫码完成登录】

下载并安装【微信开发者工具】

在【已登录】的小程序页面中，点击【开发工具】

找到【开发工具】，点击【下载】

3.推荐下载【稳定版本】，大家可以根据自己的系统进行选择下载

4.一路下一步，即可完成安装

开发第一个小程序应用

1.打开微信开发者工具，进行微信扫码登录

2.登录成功之后，可以得到小程序创建页面

3.接下来我们去创建小程序应用

4.【小程序】项目选择【小程序】，然后点击加号按钮

5.看到此页面，标识小程序已经创建成功

了解小程序项目的基本组成结构

问题：

1.一个小程序的页面由什么组成？
2.project.config.json文件的作用是什么？
3.sitemap.json文件的作用是什么？

pages：所有的**小程序页面，**每个页面以单独的文件夹存在

index：index页面文件夹，文件夹下面都包含4个基本的页面文件，这四个文件共同组成index页面

index.js：.js文件 - 页面的脚本文件，存放页面的数据、事件处理函数、生命周期等
index.json：.json文件 - 当前页面的配置文件，配置页面的外观、表现等
index.wxml：.wxml文件 - 页面的模版结构文件
index.wxss：.wxss文件 - 当前页面的样式表文件

logs

utils：工具类文件夹

utils.js

app.js：小程序的项目逻辑文件，用来注册小程序实例，绑定生命周期回调函数、错误监听和页面不存在监听函数等。
app.json：小程序公共配置文件，决定页面文件的路径、窗口表现、设置网络超时时间、设置多tab等。
app.wxss：小程序公共样式表
project.config.json：是项目配置文件，用来记录我们对小程序开发工具所做的个性化配置

setting 中保存了变异相关的配置
projectname 中保存的是项目名称
appid 中保存的是小程序的账号ID

sitemap.json：配置小程序及其页面是否允许被微信索引

rules中保存了索引规则列表的配置
rules规则中，action表示页面是否能被索引（allow，disallow），page表示生效的页面

答案：

1.一个小程序的页面由什么组成？

1.小程序的页面由4个文件组成

2.并且这4个文件应该被放入到pages文件夹下的同一个文件夹中

2.project.config.json文件的作用是什么？

1.项目配置文件，用来记录我们对小程序开发工具所做的个性化配置

3.sitemap.json文件的作用是什么？

1.配置小程序及其页面是否允许被微信索引

wxml VS html

问题：

1.我是否可以在wxml文件中，写入div标签？并说出原因！

1.什么是WXML

WXML（WeiXin Markup Language）是框架设计的一套标签语言（组件），用来构建小程序页面的结构，其作用类似于网页开发中的HTML

2.WXML和HTML的区别

标签名称不同

HTML（div,span,img,a）
WXML(view,text,image,navigator)

属性节点不同

<a href="#">超链接</a>
<navigator url="/pages/home/home">跳转到home页</navigator>

提供了动态渲染数据的模版语法

数据绑定
条件渲染
列表渲染

答案：

1.我是否可以在wxml文件中，写入div标签？并说出原因！
1.可以写入div标签，但是不要使用。div标签会被解析成类view标签效果
2.wxml中需要写入小程序提供的组件，如果写入的为非小程序组件，则会被解析成类view 标签效果

vxss VS css

问题：

1.wxss新增了什么尺寸单位？
2.wxss中推荐使用什么选择器？

1.什么是WXSS

WXSS(WeiXin Style Sheets)是一套样式语言，用于描述WXML的组件样式
类似于网页开发中的CSS
WXSS具有CSS大部分的特性

2.新增了尺寸单位 - rpx，一个rpx为页面宽度的1/750

3.提供了全局的样式和局部样式

全局样式：写入到根目录的wxss中的样式
局部样式：写入到**页面的wxss**中的样式

4.此外 wxss 仅支持部分 css 选择器

.class（推荐使用）和 #id
element
并集选择器和后代选择器
::after 和 :: before 等伪类选择器

答案：

1.wxss 新增了什么尺寸单位？
1.rpx 尺寸单位，一个 rpx 为页面宽度的1/750
2.wxss 中推荐使用什么选择其？
1..class类选择器

.json文件

问题：

1.小程序中的.json文件主要分为哪两种？
2.当这两种配置文件出现相同配置时，会出现什么结果？

小程序中，额外多出了一个.json的配置文件，.json文件主要分为两个：

1.项目根目录下的.json文件

修改项目的基本配置

首页
navigationBarBackgroundColor

2.页面中的.json文件

修改页面的基本配置（优先级高）

navigationBarBackgroundColor

答案：

1.小程序中的.json文件主要分为哪两种？
1.项目根目录下的.json文件
2.页面中的.json文件
2.当这两种配置文件出现相同配置时，会出现什么结果？
1.以页面的.json文件为主

宿主的概念与小程序的宿主环境

问题：

1.什么是宿主环境？
2.微信小程序项目为什么可以调用微信支付功能？
3.小程序的运行环境是如何划分的？

1.宿主环境指的是程序运行所必需的依赖环境

web前端的宿主环境为：浏览器
android 软件的宿主环境为：android系统
ios 软件的宿主环境为： ios系统

2.小程序的宿主环境是什么？

小程序的宿主环境为：手机微信

所以：小程序可以调用手机微信中的

扫码
支付
登录
分享
等等功能

3.小程序的运行环境：

分成渲染层和逻辑层

其中 wxml 模版和 wxss 样式工作在渲染层

渲染层的界面使用了 webview 进行渲染
一个小程序存在多个界面，所以渲染层在**多个webview**线程

js脚本工作在逻辑层

逻辑层采用了 jsCore 线程运行js脚本

这两个线程的通信会经由微信客户端做中转

逻辑层发送网络请求也经由 Native（手机原生系统）转发

答案：

1.什么是宿主环境
1.宿主环境是指程序运行所必须的依赖环境
2.微信小程序项目为什么可以调用微信支付功能？
1.因为微信小程序的宿主环境为手机微信，而手机微信提供了对应的功能
3.小程序的运行环境是如何划分的？
1.分成渲染层和逻辑层