一.小程序的开发准备

1. 小程序的安装与创建

1. 第一步 打开小程序
2. 第二步 找到开发管理，找到开发设置，下面有一个AppID，复制即可，后面开发小程序需要用
3. 这样就成功创建了小程序，页面显示如下

2. 小程序的介绍

1. 我们发现小程序的界面主要由一下几部分组成
2. 项目的组成主要包括以下内容
3. 页面组件pages/home

home.wxml 模板文件 home.js业务逻辑 home.wxss 样式 home.json 页面配置

4. 特别注意勾选⭐⭐ 不检验合法域名
5. 小程序的限制 源文件大小 每个包不能超过2M 总共不能超过16-20M 页面缓存堆栈5层 底部栏 最少2个最多5个 底部栏图片31K 本地存储 1次1M最多100M setData 不能超过1M

3. 如何新建页面

1. 在pages文件夹右键建立新的文件夹
2. 在文件中右键新建页面
3. ⭐哪个page在最上面，默认显示哪页
4. ⭐json要求严格语法，不能有多余的注释和逗号 pages 注册页面 window 窗口信息

4.修改页面默认设置（页面配置）

1. 这是页面默认的
2. 我们对导航栏背景颜色，标题，文字颜色进行了修改

{
"enablePullDownRefresh": true, 允许下拉刷新
"backgroundTextStyle": "dark",背景文字颜色
"backgroundColor": "#f70",背景颜色
"navigationBarTitleText": "小时讲笑话",
"usingComponents": {} 组件
}

二.小程序的相关语法

1.小程序的模板语法约等于vue的模板语法

1. 文本渲染{ {msg}} 可以执行简单的js表达式{ {2+3}} { {msg.length}}
2. 条件渲染 wx:if="" wx:elif="" wx:else
3. 列表渲染 wx:for="{ {list}}" wx:key="index" { {item}} { {index}}
4. 自定义列表渲染 定义item与index的名称 wx:for="{ {list}}" wx:for-item="myitem" wx:for-index="myidx" { {myidex}} { {myitem}}
5. 导入（不常用） import 只能导入templat内容

<template name="userCart">用户名：{
          
   {
          
   name}} </template>

include 只能导入非template内容

<view>{
          
   {
          
   内容}}</view>

2. 内置组件

（1） view组件   块组件
（2）text组件  行内组件
（3）  button组件 按钮
（4）  input组件 表单

3. wxss

默认单位是rpx 750rpx等于一个屏幕的宽 375就是50%的宽

4. 事件

1. 事件 （1）bindinput 表单输入时 （2）bindconfirm 表单输入确认 （3）bindtap点击时候
2. 事件的传参 <button data.msg="xxx" bindtap="tapHd"> 🚩获取事件的参数 e.target.dataset.msg

5. 表单

1. 表单的绑定

<input value="{
         
  {s1}}" bindinput="inputHd">
    inputHd(e){                                                                                                               this.setData({s1:e.detail.value})  }

2. 🚩表单的值获取：e.detail.value

6. 内置的api

（1）显示提示showToast
（2）本地存储wx.setStorageSync(key,value)
（3）本地取  wx.getStorageSync(key)

7. 生命周期

（1）onload页面加载完毕
（2） onPullDownRefresh下拉刷新
（3） onReachBottom触底更新

8.更新数据与视图

this.setData({k:v})

9. 页面栈

页面栈 A页面 B 页面 C 页面 D 页面 E 页面 通过 open-type = “navigate” 页面会缓存起来 最多缓存5层 A页面->redirect B页面 A页面是不会被缓存 E 页面 “navigateBack” 到 D页面 （页面的缓存移除一次） 总结：navigate会增加一层缓存页面 redirect 会替换一层缓存页面 navigateBack 会移除一层缓存页面

10. 小程序的页面跳转

（1）组件跳转

url跳转的地址· open-type 打开类型 navigate普通跳转 redirect跳转并替换 reLaunch重启 navigateBack返回 (2) api跳转

wx.navigateTo跳转
 	wx.switchTab 切换底部栏
    wx.redirect重定向
    wx.rel.aunch重启

11. 为什么需要封装request 1. 定义baseURL 2. 添加请求头 3. 添加加载提示 4. 同一错误处理

三.Vant Weapp的引入

1. 初始化 ，进入项目，输入cmd,j进入后输入npm init -y
2. 安装通过 npm 安装 npm i @vant/weapp -S --production

3. 删除style:v2

4. 修改project.config.js，packNpmManually改为 TRUE 添加对象
5. 点击工具，构建npm ,构建成功会出现 6. 导入组件，使用组件

四. tab底部栏

1. 引入,在app.json或index.json中引入组件

"usingComponents": {
          
   
  "van-tab": "@vant/weapp/tab/index",
  "van-tabs": "@vant/weapp/tabs/index"
}

2. 使用插件.通过active设定当前激活标签对应的索引值，默认情况下启用第一个标签

<van-tabs active="a">
  <van-tab title="标签 1" name="a">内容 1</van-tab>
  <van-tab title="标签 2" name="b">内容 2</van-tab>
  <van-tab title="标签 3" name="c">内容 3</van-tab>
</van-tabs>