微信小程序

一、小程序概念

注：为了更好的学习小程序，建议先学习一下vue的基础再来，支持es6语法，借鉴vue和react(把所有刷新数据的东西给程序员做)。

1.小程序是什么？

它实现了应用“触手可及”的梦想，用户扫一扫或者搜一下即可打开应用。也体现了“用完即走”的理念，小程序开发门槛相对较低，难度不及APP，能够满足简单的基础应用。

2.小程序自己总结

• 不是HTML5
• 用即走，随手可得
• 拥有离线能力
• 一次开发，多端兼容
• 依赖微信客户端中(大树底下好乘凉)

3.小程序与传统App区别

小程序:
局限性：必须依赖于微信，不能独立运行。
优势：不需要考虚兼容问题，安装的问题，开发难度小。

传统app(这个兼容性真的恶心)：
优势：独立运行，不需要依赖于谁，可以适合所有的业务需求
局限性：需要用户安装，解决适配(开发兼容问题),开发难度大

4.小程序框架结构(mvvm)

二、申请账号与登录设置

https://mp.weixin.qq.com/

三、开发工具

1.工具介绍

为了帮助开发者简单和高效地开发和调试微信小程序，推出了小程序开发者工具，集成了公众号网页调试和小程序开发与调试两种开发模式。

2.下载安装

直达：

https://developers.weixin.qq.com/miniprogram/dev/devtools/download.html

3.vscode中小程序插件安装

4.第一个小程序helloworld

项目创建完毕

5.工具相关介绍

dpr3概念：
我简单说明一下，比如原本pc上一个像素代表一个点
dpr3则代表则代表 3x3=9个像素代表一个点

所以 pc上1px 在 手机上dpr2 则 手机上是表示1x2 = 2 px
1px 在 dpr3 则代表 3px

四、小程序的文件结构及配置

1.文件结构

小程序包含一个描述整体程序的 app 和多个描述各自页面的 pages。

一个小程序主体部分由三个文件组成，必须放在项目的根目录

文件	必须	作用
app.js	是	小程序逻辑
app.json	是	小程序公共设置
app.wxss	否	小程序公共样式表

一个小程序page页面由四个文件组成

文件类型	必须	作用
js	是	页面逻辑
wxml	是	页面结构
wxss	否	页面样式表
json	否	页面配置

json：非必须的可以集成父类的，wxss ：非必须的大不了不美化嘛

2.app.js文件的详解

地址：

https://developers.weixin.qq.com/miniprogram/dev/reference/configuration/app.html

app.json 文件用来对微信小程序进行全局配置，决定小程序，页面数量、窗口表现、设置网络超时时间、设置底部或顶部菜单等等。

注意(要求及其严格)：
app.json中不能添加任何注释，key和value字符串必须用双引号引起来，数组或对象最后一位不能有逗号。

(1).app.json 配置项列表

上面我们也看到了，配置项非常多，我们这里跳几个重点，也是平常用的最多的来分别学习

属性	类型	必须	描述
pages	String Array	是	设置页面路径
window	Object	否	设置默认页面的窗口表现
tabBar	Object	否	设置底部或顶部菜单
networkTimeout	Object	否	设置网络超时时间

(2).pages

指定小程序由哪些页面组成。每一项代表对应页面【路径+目录名+文件名(不包含后缀名)】，数组的第一项代表小程序的初始页面(首页/展示页)。小程序中新增/减少页面，都需要对 pages 数组进行修改(变了就要修改)。

(3).window

官方文档，介绍

脑海里现在记住一张图

看演示


下拉刷新三组合

(4).tabBar

设置底部菜单或者顶部菜单

注意点：

当设置 position 为 top 时，将不会显示 icon图标
tabBar 中的 list 是一个数组，只能配置最少2个、最多5个菜单

问题？那我就想搞6个菜单或者7个怎么办呢？
要么你和产品说小程序规定，最多只能5个，超过我实现不了，要么。自己写一个底部菜单。不用官方这个就行了。。

tabbar官方文档中的参数特别多，要一个一个复制特别辛苦，所以前面让vscode安装的插件就起作用。
我们用vscode打开项目，输入tab后就有提示了


效果展示：

代码：

{
   
  "pages":[
    "pages/index/index",
    "pages/logs/logs"
  ],
  "window":{
   
    "enablePullDownRefresh":true,
    "backgroundColor":"#cccccc",
    "backgroundTextStyle":"light",
    "navigationBarBackgroundColor": "#0188fb",
    "navigationBarTitleText": "共享xx",
    "navigationBarTextStyle":"white"
  },
  "style": "v2",
  "sitemapLocation": "sitemap.json",
  "tabBar": {
   
    "color": "#000",
    "selectedColor": "#f00",
    "backgroundColor": "#fff",
    "position": "bottom",
    "borderStyle": "black",
    "list": [
      {
   
        "pagePath": "pages/index/index",
        "text": "首页",
        "iconPath": "/icon/icon_home@3x.png",
        "selectedIconPath": "/icon/icon_home_active@3x.png"
      },
      {
   
        "pagePath": "pages/logs/logs",
        "text": "日志",
        "iconPath": "/icon/icon_me@3x.png",
        "selectedIconPath": "/icon/icon_me_active@3x.png"
      }
    ]
  }
  
  
}

(5).networkTimeout

(6).networkTimeout

五、生命周期

由框架自己触发的一系统事件函数。有什么作用？？了解后，可以知道什么时候从api取数据，才不会有问题，什么时候做什么事最合适。

地址

https://developers.weixin.qq.com/miniprogram/dev/framework/app-service/page-life-cycle.html

脑海里可以尝试记忆一下这张图，页面 Page 实例的生命周期

1.几个生命周期方法的简单介绍

(1).onLoad(1)

页面加载时触发。一个页面只会调用一次，可以在 onLoad 的参数中获取打开当前页面路径中的参数。

(2).onShow(多)

页面显示/切入前台时触发。一个页面可以触发很多次。

(3).onReady（1）

页面初次渲染完成时触发。一个页面只会调用一次。

(4).onHide(多)

页面隐藏/切入后台时触发。一个页面可以触发多次

2.生命周期的完整流程查看

切换后台，则会触发页面隐藏事件

2.查看js文件

新建一个页面

查看结构，默认是全部的方法都给你写了。

一般我们用不到那么多，我们可以只留下一个load事件就可以了

六、视图结构 wxml

1.wxml概述

HTML 是用来描述当前这个页面的结构，同样道理，在小程序中也有同样的角色，其中 WXML 充当的就是类似 HTML 的角色。

小程序提倡把渲染和逻辑分离，简单来说就是不要再让 JS 直接操控 DOM，JS只需要负责数据的处理，然后再通过一种模板语法来进行界面结构展示。

在视图层中通过 **{ {}}**语法把一个变量绑定到视图界面上，称为数据绑定

当然仅仅通过数据绑定还不够的，还需要 if/else, for等控制能力，在小程序里边，这些控制能力都用 wx: 开头的属性来表达。wx:if wx:for

2.数据绑定

(1).简单数据的绑定

(2).对象数据的绑定

3.数据更新

#一定要手动触发
this.setData({
   key:value})

实现2秒后更新数据

代码

Page({
   

  /**
   * 页面的初始数据
   */
  data: {
   
    name:'hellworld'
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   
    //页面加载2秒后,更改data中 name的值
    //
    // var _this = this;
    // setTimeout(function(){
   
    //   _this.setData({
   
    //     name:'php'
    //   });
    // },2000);

    //
    setTimeout(() =>