小程序开发教程

1.小程序代码构成代码结构

.json 后缀的 JSON 配置文件
.wxml 后缀的 WXML 模板文件
.wxss 后缀的 WXSS 样式文件
.js 后缀的 JS 脚本逻辑文件

2.小程序由逻辑层和渲染层构成 小程序框架

小程序开发框架的目标是通过尽可能简单、高效的方式让开发者可以在微信中开发具有原生 APP 体验的服务。

整个小程序框架系统分为两部分：逻辑层（App Service）和 视图层（View）。小程序提供了自己的视图层描述语言 WXML 和 WXSS，以及基于 JavaScript 的逻辑层框架，并在视图层与逻辑层间提供了数据传输和事件系统，让开发者能够专注于数据与逻辑。

3.小程序页面配置分为全局配置和页面配置 配置

全局配置：小程序根目录下的 app.json 文件用来对微信小程序进行全局配置。文件内容为一个 JSON 对象
页面配置：每一个小程序页面也可以使用 .json 文件来对本页面的窗口表现进行配置。页面中配置项在当前页面会覆盖 app.json 的 window 中相同的配置项

4.渲染层语法结构 wxml

数据绑定、列表渲染、条件渲染、模板、引用

5.渲染层到逻辑层 传递事件处理以及数据 事件处理

事件是视图层到逻辑层的通讯方式。
事件可以将用户的行为反馈到逻辑层进行处理。
事件可以绑定在组件上，当达到触发事件，就会执行逻辑层中对应的事件处理函数。
事件对象可以携带额外信息，如 id, dataset, touches。

6.路由-页面跳转

1.wx.switchTab(Object object) 跳转到 tabBar 页面，并关闭其他所有非 tabBar 页面

2. wx.reLaunch(Object object) 关闭所有页面，打开到应用内的某个页面
3. wx.redirectTo(Object object) 关闭当前页面，跳转到应用内的某个页面。但是不允许跳转到 tabbar 页面
4. wx.navigateTo(Object object) 保留当前页面，跳转到应用内的某个页面。但是不能跳到 tabbar 页面。使用 wx.navigateBack 可以返回到原页面。小程序中页面栈最多十层。
5. wx.navigateBack(Object object) 关闭当前页面，返回上一页面或多级页面。可通过 getCurrentPages 获取当前的页面栈，决定需要返回几层。
6. EventChannel 页面间事件通信通道

7.CSS 布局知识点

css样式选择器
弹性盒子模型基本布局模型flex
CSS布局： Static 默认布局 ，Flow 固定布局，layer 层布局模型，Float 浮动布局模型
布局教程
position和z-index

什么是层布局模型？

层布局模型就像是图像软件PhotoShop中非常流行的图层编辑功能一样，每个图层能够精确定位操作，但在网页设计领域，由于网页大小的活动性，层布局没能受到热捧。但是在网页上局部使用层布局还是有其方便之处的。下面我们来学习一下html中的层布局。
层模型有三种形式：
1、绝对定位(position: absolute)
2、相对定位(position: relative)
3、固定定位(position: fixed)

层模型--绝对定位

如果想为元素设置层模型中的绝对定位，需要设置position:absolute(表示绝对定位)，这条语句的作用将元素从文档流中拖出来，然后使用left、right、top、bottom属性相对于其最接近的一个具有定位属性的父包含块进行绝对定位。如果不存在这样的包含块，则相对于body元素，即相对于浏览器窗口。
当某个absolute定位元素的父元素具有position:relative/absolute/fixed时，定位元素都会依据父元素而定位，而父元素没有设置position属性或者设置了默认属性，那么定位属性会依据html元素来定位。

层模型--相对定位

如果想为元素设置层模型中的相对定位，需要设置position:relative（表示相对定位），它通过left、right、top、bottom属性确定元素在正常文档流中的偏移位置。相对定位完成的过程是首先按static(float)方式生成一个元素(并且元素像层一样浮动了起来)，然后相对于以前的位置移动，移动的方向和幅度由left、right、top、bottom属性确定，偏移前的位置保留不动

层模型--固定定位

fixed：表示固定定位，与absolute定位类型类似，但它的相对移动的坐标是视图（屏幕内的网页窗口）本身。由于视图本身是固定的，它不会随浏览器窗口的滚动条滚动而变化，除非你在屏幕中移动浏览器窗口的屏幕位置，或改变浏览器窗口的显示大小，因此固定定位的元素会始终位于浏览器窗口内视图的某个位置，不会受文档流动影响
fixed定位是指元素的位置相对于浏览器窗口是固定位置，即使窗口是滚动的它也不会滚动，且fixed定位使元素的位置与文档流无关，因此不占据空间，且它会和其他元素发生重叠。

相对定位和绝对定位的配合使用

使用position:absolute可以实现被设置元素相对于浏览器（body）设置定位以后，大家有没有想过可不可以相对于其它元素进行定位呢？
1、参照定位的元素必须是相对定位元素的前辈元素：

<div id="box1">
<div id="box2">相对参照元素进行定位</div>
</div>

从上面代码可以看出box1是box2的父元素（父元素当然也是前辈元素了）。

2、参照定位的元素必须加入position:relative;

box1{

width:200px;
height:200px;
position:relative;        

}

3、定位元素加入position:absolute，便可以使用top、bottom、left、right来进行偏移定位了。

box2{

position:absolute;
buttom:0px;
left:0px;         

}
这样box2就可以相对于父元素box1定位了，box2定位于box1的底部居左。

水平居中

行内元素怎么进行水平居中
如果被设置元素为文本、图片等行内元素时，水平居中是通过给父元素设置 text-align:center 来实现的。
(定宽块状元素：块状元素的宽度width为固定值。)
满足定宽和块状两个条件的元素是可以通过设置“左右margin”值为“auto”来实现居中的。
不定宽度的块状元素居中
1.设置 [display: inline]方法：与第一种类似，显示类型设为 行内元素，进行不定宽元素的属性设置

2. 设置 [position:relative] 和 left:50%：利用 相对定位 的方式，将元素向左偏移 50% ，即达到居中的目的,通过给父元素设置 [float]然后给父元素设置 [position:relative] 和 left:50%，子元素设置 position:relative 和 left:-50% 来实现水平居中。

垂直居中

父元素高度确定的单行文本的竖直居中的方法是通过设置父元素的 height 和[ line-height ]高度一致来实现的。(height: 该元素的高度，line-height: 顾名思义，行高（行间距），指在文本中，行与行之间的 基线间的距离 )。
父元素高度确定的多行文本、图片等的竖直居中
css 中有一个用于竖直居中的属性 vertical-align，在父元素设置此样式时，会对inline-block类型的子元素都有用
** 隐性改变display类型**
有一个有趣的现象就是当为元素（不论之前是什么类型元素，display:none 除外）设置以下 2 个句之一：

1. [position : absolute]
2. float : left 或 [float:right]
   简单来说，只要html代码中出现以上两句之一，元素的display显示类型就会自动变为以 display:inline-block [块状元素]的方式显示，当然就可以设置元素的 width 和 height 了，且默认宽度不占满父元素。

8.小程序缓存本地数据缓存

小程序本地缓存有四种操作，八个方法（每种操作都分为同步异步两种）
setStorage 保存，getStorage 获取，removeStorage 移除单个，clearStorage 全部清除
wx.setStorage/wx.setStorageSync、wx.getStorage/wx.getStorageSync、wx.clearStorage/wx.clearStorageSync，wx.removeStorage/wx.removeStorageSync

同一个微信用户，同一个小程序 storage 上限为 10MB。storage 以用户维度隔离，同一台设备上，A 用户无法读取到 B 用户的数据；不同小程序之间也无法互相读写数据

9.页面交互 Toast Loading 底部弹窗 弹框

wx.showToast(Object object) 显示消息提示框
wx.showModal(Object object) 显示模态对话框
wx.showLoading(Object object) 显示 loading 提示框。需主动调用 wx.hideLoading 才能关闭提示框
wx.showActionSheet(Object object) 显示操作菜单

10.小程序插件使用小程序插件

11.使用第三方组件有赞 Vant

1.在微信开发工具软件 项目目录下右键->在终端打开->输入 npm init->一直回车到结束
2.安装vant -># 通过 npm 安装 -> 在终端下输入 ：npm i @vant/weapp -S --production

3. 构建 npm 包
   打开微信开发者工具，点击 工具 -> 构建 npm，详情->本地设置->勾选 使用 npm 模块 选项，构建完成后，即可引入组件
   image

12.小程序模块化微信小程序引用外部js

](https://developers.weixin.qq.com/miniprogram/dev/reference/api/require.html)
1.微信小程序在js文件中通过module.exports或者exports两者方法完成模块的定义和暴露接口
function sayHello(name){
console.log("hello (name) !")
}
module.exports.sayHello = sayHello
exports.sayGoodbye = sayGoodbye

//config.js
//对变量的定义和暴露接口
const config={
api_base_url: "https://www.someweb.com/api"
}
export {config}
//或者
const config.exports={
api_base_url: "https://www.someweb.com/api"
}
2.引用
//引入变量
import {config} from '../config.js'
//或者
var config = require('../config.js')
//引入函数
var common = require('../common.js')
common.sayHello('steven')
common.sayGoodbye('Bob')
//引入类
import { HomeModule } from "../config.js";
var homeModule = new HomeModule(listUrl);

13. 自定义组件