小程序（超超超详细！焯！）

一，小程序如果要引vant组件，要先安装依赖包

npm init -y
npm i @vant/weapp -S --production

第十三条有详细组件介绍解释

二，小程序简介

小程序开发账号官网： 微信公众平台

登录账号时，要点击有自己账号的项目，要不然没法出现发布步骤

如果你要上传自己的小程序，先在开发平台上传，然后再通过官网按着操作步骤整理
最后点击审核后，等待时间一般为1-7天，也有可能秒过，最后再点击发布

   2.1 使用

        新建项目后把AppID，改为自己的id
新建页面：
        在 pages 中新建文件夹

        然后右键新建page即可
修改项目首页：

        app.json -> pages中的页面路径第一个即是首页，换位置，记得逗号

  2.2 项目文件结构介绍

1.. pages 所有小程序的页面文件夹
2.. app.js 全局配置逻辑
3.. app.json 全局配置文件
4.. app.wxss 全局样式文件
5.. sitemap.json 页面是否允许被微信搜到

6.. js 文件：页面脚本文件，存放页面的数据、事件处理函数等
7.. json 文件：当前页面的配置文件，配置窗口的外观
8.. wxml 文件：页面的模板结构文件，标签语言
9.. wxss 文件：样式表文件，样式语言

 2.3 组件

视图基本组件：view块组件，text文本组件，button组件、image组件
基础内容：

rich-text富文本组件、表单组件、导航组件、媒体组件、map地图组件、画布组件，图表组件。

 2.4 监听与同步异步

事件监听 ：以 on 开头来监听某些事件

  // 分享朋友圈
  onShareTimeline(){},
  // 添加收藏
  onAddToFavorites(){},
  // 滚动监听
  onPageScroll(){},

  onReachBottom
    触底
  onPullDownRefresh
    下拉

同步 ：以 Sync 结尾的
异步 ：需要通过 success、fail、complete 回调接收调用的结

 三、数据绑定

① 在以 .js后缀 的 data 中定义数据
② 在以 .WXML后缀中 {{ }} 使用数据

Page({ data: {
     info: 'hello world',
     imgSrc: 'http',
     randomNum2: 1) 
}})


<view class="username">{{info}}</view>
<image src="{{ imgSrc }}" mode="widthFix"></image>
<view>{{ randomNum1 >= 5 ? '随机数字大于5' : '随机数字小于5' }}</view>

 四、事件对象属性 

tap：bindtap 或 bind:tap
input：bindinput 或 bind:input
change：bindchange 或 bind:change
 
type：事件类型
timeStamp：页面打开到触发事件所经过的毫秒数
target： 触发该事件的源头组件，属性值集合
currentTarget：当前事件绑定的组件，属性值集合
detail：额外的信息

        例子：bindinput的定义

  data: {   msg: '请输入...'   }
  <input class="ipt2" placeholder="{{msg}}" bindinput="inputHandler"></input>
  inputHandler (e) {
    console.log(e.detail.value);
  },  

 4.1 访问和修改 data 中的数据、data-* 事件传参

    1. js 中访问 data 中的数据：this.data.xxx

    2. js 中修改 data 中的数据：调用setData方法，重新赋值

onAddHandle: function () {
   this.setData({
      count: this.data.count + 1 // 在原来值基础上+1
})}

    3. data-名字   事件传参

<button bindtap="onBtnString" data-info="2">事件传参-拼接字符串</button>
 
onBtnString (e) {
   this.setData({
      count: this.data.count + e.target.dataset.info
})}

 4.2 页面传参

url=“xxxx?num=15”   // 写被传入值的地方

onLoad(options){  options.num 获取参数  }

五、事件绑定

5.1. wx:if：显示与隐藏

wx:if 搭配 wx:elif 、 wx:else 
 
data:   {type:2}

<view wx:if="{{type === 1}}">男</view>
<view wx:elif="{{type === 2}}">女</view>
<view wx:else="{{type === 0}}">保密</view>

5.2 列表渲染

1. wx:for                          指定数组，进行循环渲染
2. wx:for-index                 手动指定索引名

3. wx:for-item                   手动指定当前项名
4. wx:key="id"                   提高渲染效率 

data: {  arr1: ['苹果','华为','小米']  }


<view wx:for="{{ arr1 }}"  wx:key="id">
      索引是 {{ index }} 当前项是： {{ item }}
</view>
 
<view wx:for="{{arr}}" wx:for-index="i" wx:for-item="m">
      索引是 {{ i }} 当前项是： {{ m }}
</view>

 六、模板样式：rpx

是微信小程序独有的，用来解决屏适配的尺寸单位。

实现原理：

        不同设备屏幕的大小不同，实现屏幕的自动适配

        rpx 把所有设备的屏幕，在宽度上等分为 750 份, 1份就是1 rpx 

        较小(大)的设备上，1 rpx 所代表的宽度较小(大)

 七、全局配置文件 app.json 及常用的配置项

 7.1 window：窗口外观

导航栏；背景区；页面主体区：
"navigationBarTitleText": "导航栏显示的标题",  
"navigationBarBackgroundColor": "#fff",  导航栏背景色:16进制
"navigationBarTextStyle":"black", 导航栏标题颜色: black/white
"backgroundTextStyle":"light",  下拉loading的样式 dark/light
"backgroundColor": "#efefef",  下拉窗口的背景色
"enablePullDownRefresh": true,  开启下拉刷新
"onReachBottomDistance": 50  上拉触底的距离,获取下页数据

7.2 tabBar：底部导航栏效果

backgroundColor ： tabBar背景色
borderStyle：上边框的颜色
selectedColor：选中时文字的颜色
color：未选中颜色
 
"tabBar":{  // 与window同级
  "list":[{
     "pagePath":"页面路径",
     "text":"底部文字",
     "iconPath":"未激活图标地址",
     "selectedIconPath":"激活图标地址"
},{},....]},

7.3 style：是否启用新版组件样式

 局部样式：当前页面配置json文件，会覆盖全局的配置

 7.4 全局数据的定义

 app.js  里面
        globalData:{outflow:100}

        var app = getApp(); // 写最上面
        app.globalData.outflow-=1;

八、网络数据请求 

 8.1 配置request合法域名

① (只支持https;不能ip或本地;必须ICP备案)
② 小程序管理后台 -> 开发管理 -> 开发设置 -> 服务器域名 -> 修改 request 域名

8.2 发起请求基本样式：wx.request()

onTapGet () {
  wx.request({
     url: 'https://... .../api/get',   // 在request合法域名已配置
     method: 'GET',
     data: {  name: 'zs', age: 22  },  // 请求参数
  success: (res) => {                  // 请求成功的回调
     console.log(res)
}})

8.3 发起GET请求 ：wx.request() 

 method: 'POST',（GET）

8.4 页面刚加载时请求数据：onLoad 

// 生命周期函数-->监听页面加载-->初始化页面的数据

onLoad: function (options) {
    this.onTapGet()  // 通过 this 调用上述方法
    this.onTapPost()
},

 九、页面导航

 9.1 声明式导航

导航tabBar页面：
        <navigator url="/页面路径" open-type="switchTab">链接文字</navigator>
非 tabBar 页面：
        <navigator url="/页面路径" (open-type="navigate")>链接文字</navigator>
后退导航：
        <navigator open-type="navigateBack" (delta="1")>返回上一页</navigator>

 9.2 编程式导航

1. wx.switchTab()    方法：跳转到 tabBar 的页面
2. wx.navigateTo()   方法：跳转到非 tabBar 的页面
3. wx.navigateBack() 方法：返回上一页面或多级页面

 <button bindtap="goto">链接文字</button>
 goto () {
     wx.switchTab({     // wx.navigateTo({     // wx.navigateBack()
        url: '/ 跳转到页面路径',
  })},

9.3 其他 

<navigator url="/pages/info/info?name=zs&age=20">跳至info页面</navigator>

url: '/pages/info/info?name=李&gender=男',
定义 data:{ query: {} }   
onLoad 事件中获取参：this.setData({ query: options }) 

 十、页面事件

 10.1 下拉刷新事件

① 全局开启：app.json 的 window 中
② 局部开启：在页面的.json 配置文件
"enablePullDownRefresh": true
 
美化：
"backgroundColor": "#ccc",
"backgroundTextStyle": "dark/light"
 
onPullDownRefresh() 函数监听刷新
wx.stopPullDownRefresh() 关闭加载状态
 
onPullDownRefresh: function () {
    this.setData({
      count: 0
    })
    wx.stopPullDownRefresh()
},

 10.2 上拉触底事件

onReachBottom() 函数监听页面的上拉触底事件
onReachBottomDistance 配置上拉触底的距离

 10.3 组件传参

 父传子    property

        父：<step value="10">

        子 properties:{  value:{  type:Number,value:1  }    }
                使用-只读：
                        this.data.value

子传父

十一、生命周期 

 11.1 应用生命周期写在app.js

onLaunch：小程序启动，渲染完成时触发时  (全局只触发一次)
onShow：小程序启动 或 从后台进入前台时  (可触发多次)
onHide：小程序隐藏起来 或 从前台进入后台时   (可触发多次)
onError：出现异常时触发

onPageNotFound：页面找不到

11.2 页面生命周期 

onLoad()：监听页面加载。一个页面调一次，可获取当前页面路径中的参数； 
onShow()：监听页面显示 / 切入前台；
onHide()：监听页面隐藏 / 切入后台。 顶部或底部 tab 切到其他页面；
onReady()：监听页面初次渲染完成。一个页面调一次，页面可以和视图层进行交互；
onUnload() 监听页面卸载。如 redirectTo 或 navigateBack 到其他页面时；一次

 十二、自定义组件

 12.1 创建和引用

 根目录中 -> 创建components -> test 文件夹 -> 新建 Component -> 回车

① properties 属性         

         value:{
             type:Number,
             value:1,//不传参默认值默认值为1
        }

② data 数据

③ methods 方法                  ：changeCount

④ lifetimes   生命周期          ：attached挂载完毕

局部引用：页面的 .json 文件中引用组件
全局引用：app.json 全局配置文件中引用组件
"usingComponents": {"step": "/components/step/step"}
step 就是组件使用时的标签名：<step></step>

十三， vant-weapp组件库

 安装、app.json引入、wxml使用：
1. 初始化 package.json ，项目根目录执行 npm init -y
2. npm i @vant/weapp -S --production
3. 工具 -> 构建npm
4. 在 app.json 中的 "style": "v2" 上中下添加
5. 在 app.json 的 "usingComponents": {} 中引入需要的组件
6. 在wxml 中使用
 
定制全局主题样式：

在page {}节点定义

<van-button type="danger">危险按钮</van-button>
page { 
  --button-danger-background-color: #c00000;
}

十四，页面栈

14.1  卸载与隐藏

卸载与隐藏

        ① 正常的从A->B A会隐藏

        ② 正常的从 A->B redirect  A会卸载

        ③ 正常A->返回到首页  A页面会卸载

        ④ 总结： redirect会卸载，navigateBack会卸载 ，navigate（缓存页面）

 14.2 小程序默认缓存5级页面页面

缓存5级页面

        ① A->B->C->D->E       五个页面都存起来

        ② A->B->C->A->E     

        ③ redirect 当前页面会销毁

        ④ A->B-redirect->C->D-<E

        ⑤ wx.navigateBack({delta: 2})