《微信小程序》

第一章：什么是小程序？

1、什么是小程序？

        2017年度百度百科十大热词之一

        微信小程序（wei xin xiao cheng xu），简称小程序，英文名Mini Program，是一种不需要下载安装即可使用的应用（张小龙对其的定义是无需安装，用完即走，实际上是需要安装的，只不过小程序的体积特别小，下载速度很快，用户感觉不到下载的过程）

        小程序刚发布的时候要求压缩包的体积不能大于1M，否则无法通过，在2017年4月做了改进，由原来的1M提升到2M；

        2017年1月9日0点，万众瞩目的微信第一批小程序正式低调上线。

第二章：小程序可以干什么？

1、小程序可以干什么？

        同App进行互补，提供同app类型的功能，比app使用方便简介

        通过扫一扫或者在微信搜索即可下载

        用户使用频率不高，但又不得不用的功能软件，目前看来小程序是首选

        连接线上线下

        开发门槛低，成本低。

第三章：小程序开发资料

1、相关资料

1.官网：

        微信公众平台

2.微信开发工具

        下载地址：微信开发者工具下载地址与更新日志 | 微信开放文档

2、注册小程序账号

1.有账号

        登录：微信公众平台

2.无账号

        申请注册：开始 | 微信开放文档

第四章：开发小程序储备知识

1、Flex布局介绍

什么是flex布局

        flex布局是Flexible Box 的缩写，意为“弹性布局”，用来为盒状模型提供最大的灵活性。

        任何一个容器都可以指定为Flex布局。

        display:"flex"

flex-direction	row（默认值）	主轴为水平方向，起点在左端
flex-direction	row-reverse	主轴为水平方向，起点在右端
flex-direction	column	主轴为垂直方向，起点在上沿
flex-direction	column-reverse	主轴为垂直方向，起点在下沿

学习地址：

        Flex 布局语法教程 | 菜鸟教程

2、移动端相关知识

物理像素

        屏幕的分辨率

        设备能控制现实的最小单元，可以把物理像素看成对应的像素点

设备独立像素&css像素

        设备独立像素（也叫密度无关像素），可以认为是计算机坐标系统中的一个点，这个点代表一个可以由程序使用并控制的虚拟像素（比如：css像素，只是在android机中css像素就不叫“CSS 像素”了，而叫“设备独立像素”），然后由相关系统转换为物理像素。

dpr比&DPI&PPI

        dpr：设备像素比，物理像素/设备独立像素 = dpr，一般以iPhone SE 的dpr为准 dpr = 2

（可以根据iPhone SE 的设备独立像素（375X667）推出其物理像素为（750X1334））

        PPI：一英寸显示屏上的像素点个数

        DPI：最早指的是打印机在单位面积上打印的墨点数，墨点越多越清晰

3、移动端适配方案

1.viewport适配

为什么做viewport适配

        手机厂商在生产手机的时候大部分手机默认页面宽度为980px

        手机实际视口宽度都要小于980px，如iPhone6为375px

        开发需求：需要将980的页面完全显示在手机屏幕上且没有滚动条

实现：

<meta name=""viewport" content="width=device-width,intial-scale=1.0"

2.rem

为什么做rem适配：

        机型太多，不同的机型屏幕大小不一样

        需求：一套设计稿的内容在不同的机型上呈现的效果一致，根据屏幕大小不同的变化，页面中的内容也相应变化

实现：

function refRefresh() {
    let clientWidth = document.documenElement.clientWidth;
    //将屏幕等分10份
    let rem = clientWidth / 10;
    document.documentElement.style.fontSize = rem + "px";
    document.body.style.fontSize = "12px";
}

window.addEventListener("pageshow", () => {
    timeoutId && clearTimeout(timeoutId);
    timeoutId = setTimeout(() => {
        remRefresh()
    },300)
})

3.第三方库实现

        lib-flexible + px2rem-loader

第五章：小程序特点

1、小程序特点概述

1.没有DOM

2.组件化开发：具备特定功能效果的代码集合

3.体积小，单个压缩包体积不能大于2M，否则无法上线

4.小程序的四个重要的文件

        a）*.js

        b)*.wxml--->view结构--->html

        c)*.wxss--->view样式--->css

        d)*.json--->view数据--->json文件

5.小程序适配方案：rpx（responsive pixel 响应式像素单位）

        a）小程序适配单位：rpx

        b）规定任何屏幕下宽度为750rpx

        c）小程序会根据屏幕的宽度不同自动计算rpx值的大小

        d）iPhone6下：1rpx = 1 物理像素 = 0.5px

        小程序编译后，rpx会做一次px换算。换算是以375个物理像素为基准，也就是在一个宽度为375物理像素的屏幕下，1rpx = 1px。举个例子：iPhone6屏幕宽度为375px，共750px个物理像素，那么1rpx = 375 / 750 px = 0.5px

2、小程序配置

1.全局配置：app.json

作用：

        用于为整个应用进行选项设置

链接：

        全局配置 | 微信开放文档

配图：

 2.页面配置：页面名称.json

作用：

        用于为指定的页面进行配置

链接：

        页面配置 | 微信开放文档

注意事项：

        页面的配置的优先级高于全局配置

配图：

3.sitemap 配置：sitemap.json

作用：

        用于被微信搜索爬取页面

链接：

        sitemap 配置 | 微信开放文档

配图：

3、小程序框架接口

1.APP

        全局app.js中执行App()

        生成当前应用的实例对象

        getApp()获取全局应用实例

2.Page

        页面.js中执行Page()

        生成当前页面的实例

        通过getCurrentPages获取页面实例

第六章：wxml语法

1、数据绑定

1.初始化数据

页面.js的data选项中

Page({
    data: {
        message: "Hello Word!"
    }
})

2.使用数据

模板结构中使用双大括号 {{message}}

注意事项：小程序中为单向数据流 model --->view

<view>{{message}}</view>

3.修改数据

this.setData({message:"修改之后的数据"},callback)

特点：

        a)同步修改：this.data值被同步修改

        b)异步更新：异步将setData函数用于将数据从逻辑层发送到视图层（异步）

// index.js
Page({
    data:{
        text: "init data",
        num: 0,
        array: [{text: "init data"}],
        object: {
            text: "init data"
        }
    },
    changeText: function() {
        // this.data.text = "changed data" // 不要直接修改 this.data
        // 应该使用 setData
        this.setData({
            text: "change data"
        })
    }
})

 补充一：数据绑定的比较

1.小程序

        1）data中修改数据

        2）修改数据：this.setData()

                a）修改数据的行为始终是同步的

        3）数据流

                a）单项：Model ---> View

2.Vue

        1）data中初始化数据

        2）修改数据：this.key = value

        3）数据流：

                a）Vue是单向数据流：Modeln ---> View

                b）Vue中实现了双向数据绑定：v-model

3.React

        1）state中修改数据

        2）修改数据：this.setState()

                a）自身钩子函数中（componentDidMount）异步的

                b）非自身钩子函数中（定时器的回调）同步的

        3）数据流

                a）单项：Model ---> View

补充二：数据劫持代理

let data = {
    username: "maeryang",
    age: 25,
}

// 模拟组件的实例
let _this = {

}

// 利用Object.defineProperty()
for(let item in data){
    console.log(item,data[item])
    Object.defineProperty(_this,item,{
        // get: 用来获取扩展属性值的，当获取该属性值的时候调用get方法
        get(){
            console.log("get()")
            return data[item]
        },
        // set: 监视扩展属性的，只要已修改就调用
        set(newvalue){
            console.log("set()",newvalue);
            // _this.username = newvalue; 千万不要在set方法中修改当前扩展属性的值，会出现死循环
            data[item] = newvalue;
        }
    })
}

console.log(_this)
// 通过Object.defineProperty的get方法添加的扩展属性不能直接对象.属性修改
_this.username = "wukong";
console.log(_this.username);

 2、事件绑定

1.事件分类

冒泡事件

        a）定义：冒泡事件:当一个组件上的事件被触发后，该事件会向父节点传递。

        b）冒泡事件列表：

        事件 | 微信开放文档

非冒泡事件

        a）定义：当一个组件上的事件被触发后，该事件不会向父节点传递。

        b）非冒泡事件：表单事件和自定义事件通常是非冒泡事件。

        事件 | 微信开放文档

2.绑定事件

bind绑定：

        事件绑定不会阻止冒泡事件向上冒泡

<view bindtap="handleTap" class="start_container">
    <text class="start">开启小程序之旅</text>
</view>

catch绑定：

        事件绑定可以阻止冒泡事件向上冒泡

<view catchtap="handleTap" class="start_container">
    <text class="start">开启小程序之旅</text>
</view>

3.向事件对象传参

语法：

        data-key = value

<view class="input-item">
    <text class="tit">手机号码</text>
                                       key   value
    <input bindblur="handlerBlur" data-type="phone" type="text" placeholder="请输入手机号码"/>
</view>

获取：

        event.target.dataset.key || event.currentTarget.dataset.key

Event.target 和 event.currentTarget的区别

        a）Event.target 是触发事件的对象，但不一定是绑定事件的对象，如：事件委托，冒泡。

        b）currentTarget 触发事件的对象一定是绑定事件的对象，没有事件委托

补充一： 事件流的三个阶段

1.事件流的三个阶段

        1）捕获：从外向内

        2）执行目标阶段

        3）冒泡：从内向外

3、列表渲染

语法说明：

        wx:for = "{{arr}}"

        wx:key="{{唯一值}}"

注意事项：

        默认的个体：item

        默认的下标：index

        自定义个体变量名称：wx:for-item="myItem"

        自定义下标变量名称：wx:for-index="myIndex"

4、条件渲染

语法说明：

        wx:if="条件"

        wx:elif="条件"

        wx:else

wx:if：

       在框架中，使用 wx:if=" " 来判断是否需要渲染该代码块：

<view wx:if="{{condition}}">True</view>

        也可以 wx:elif 和 wx:else 来添加一个 else 块：

<view wx:if="{{length > 5}}"> 1 </view>
<view wx:if="{{length > 2}}"> 2 </view>
<view wx:else> 3 </view>

wx:if VS hidden

        hidden 用法：<view hidden="true"></view>

        wx:if 等同于 v-if，条件为 false 的时候不加载，条件切换的时候决定元素销毁或者重新加载渲染

        hidden 等同于 v-show，始终加载元素，条件切换的时候决定元素的显示和隐藏

5、模板使用

定义模板

        使用name属性，作为模板的名字。然后在<template/>内定义代码片段，如：

<!--
    index:int
    msg:string
    time:string
-->
<template name="msgItem">
    <view>
        <text>{{index}}:{{msg}}</text>
        <text>Time:{{time}}</text>
    </view>
</template>

引入模板

        a）引入模板结构：<import src="模板结构相对路径"/>

        b）引入模板样式：@Import"模板样式路径"

使用模板

        使用is属性，声明需要的使用的模板，然后将模板所需要的data传入，如：

<template is="msgItem" data="{{...item}}"/>

向模板导入数据并使用数据

// 使用数据
<template name="msgItem">
    <view>
        <text>{{index}}:{{mag}}</text>
        <text>Time:{{time}}</text>
    </view>
</template>

 使用模板

        使用is属性，声明需要的使用的模板，然后将模板所需要的data传入，如：

// 导入数据
<template is="msgItem" data="{{...item}}"/>

// 数据源
Page({
    data:{
        item:{
            index:0,
            msg:"this is a template",
            time:"2022-12-20"
        }
    }
})

6、生命周期

1.对应阶段说明

1）.onLoad（Object query）

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

        b）参数：

名称	类型	说明
query	Object	打开当前页面路径中的参数

2）onShow()

        a）页面显示/切入前台时触发

        b）会执行多次

3）onready()

        a）页面初次渲染完成时触发。一个页面只会调用一次，代表页面已经准备妥当，可以和视图层进行交互。

4）onHide()

        a）页面隐藏/切入后台时触发。如wx.navigateTo或底部tab切换到其他页面，小程序切入后台等。

5）onUnload()

        a）页面卸载时触发。如wx.redirectTo或wx.navigateBack到其他页面时。

2.官网图示说明

3.官网对应地址

        生命周期 | 微信开放文档

第七章：小程序API

1、API使用说明

1.小程序全局对象是：wx

2.所有的API都保存在wx对象中

2、 常用API

1.界面交互

        a）显示消息提示框：wx.showToast()

        b）显示消息加载框：wx.showLoading()

        c）关闭消息提示框：wx.hideToast()

        d）关闭消息加载框：wx.hideLoading()

2.路由跳转

        a）wx.navigateTo()

        b）wx.redirectTo()

        c）wx.switchTab()

3.网络请求

        a）wx.request()

4.本地存储

        a）wx.setStorage()

        b）wx.setStorageSync()

        c）wx.getStorage()

        d）wx.getStorageSync()

5.媒体

        a）wx.getBackgroundAudioManager()

        b）wx.playVoice()

3、快速查找技巧

1.当在小程序中想要实现某一种布局，查看：组件

2.当在小程序中想要实现某一个功能，查看：API

3.当在小程序中想要进行某一个配置或者某一种页面语法，查看：框架+指南

4.查看小程序官网的时候要细心，最好是将要使用的API的相关内容看完整，因为API的配置

及限制较多

 第八章：小程序重点知识汇总

1、小程序本地存储

1.语法说明

1）存入数据

        a）wx.setStorage() 异步

        b）wx.setStorageSync() 同步

wx.setStorage({
    key:"key",
    data:"value"
})

2）读取数据

        a）wx.getStorage() 异步

        b）wx.getStorageSync() 同步

wx.getStorage({
    key:"key",
    success (res) {
        console.log(res.data)
    }
})

3）删除数据

        a）wx.removeStorage() 异步

        b）wx.removeStorageSync() 同步

wx.removeStorage({
    key:"key",
    success (res) {
        console.log(res.data)
    }
})

4）清空数据

        a）wx.clearStorage() 异步

        b）wx.clearStorageSync() 同步

wx.clearStorage()

2.注意事项

        除非用户主动删除或因存储空间原因被系统清理，否则数据都一直可用

        单个key允许存储的最大数据长度为1MB

        所有数据存储上限为10MB

3.官网对应地址

        wx.setStorage(Object object) | 微信开放文档

2、 小程序前后端交互

1.语法说明

        1）wx.request

 2.相关配置

        1）每个微信小程序需要事先设置通讯域名，小程序只可以跟指定的域名进行网络通信

        2）服务器域名请在【小程序后台-开发-开发设置-服务器域名】中进行配置

        3）默认超时时间和最大超时时间都是60s

        4）超时时间可以在app.json中通过networktimeout配置

3.注意事项

        1）小程序为了安全起见只支持HTTPS请求

        2）wx.request最大并发限制10个

4.官网对应地址

        RequestTask | 微信开放文档

 3、小程序页面通信

1.路由传参

        1)传参方式

                a）路由地址中+query传参数

                b）示例：url?a=123

        2）获取参数

                a）跳转目标页面的onLoad函数中的options实参中获取

/**
 *  生命周期函数--监听页面加载
 */
onLoad: async function (options) {
    // 获取路由传参数据: 音乐id
    let id = options.id*1 //注意接收的是数字型
}

2.消息订阅发布

        1）使用第三方库：pubsub-js

        2）安装：npm install pubsub-js

        3）使用：

                a）Import Pubsub from "pubsub-js"

                b）订阅消息：PubSub.subscribe("evenntName",callback)

                c）发布消息：PubSub.publich("evenntName",data)

                d）取消订阅：PubSub.unsubscribe("evenntName")

3.eventChannel 事件通道

        1）订阅事件

                a）wx.navigateTo()跳转的时候在events选项中定义事件名及事件对应的回调

wx.navigateTo({
    url:"test?id=1"
    // 在navigateTo的events选项中配置
    events: {
        // 为指定事件添加一个监听器，获取被打开页面传送到当前页面的数据
        // 自定义事件名
        acceptDataFromOpenedPage: function(data) {
            console.log(data)
        },
        // 自定义事件名
        someEvent: function(data) {
            console.log(data)
        }
        ...
    },
    success: function(res) {
        //通过eventchannel向被打开页面传送数据
        res.eventChannel.emit("acceptDataFromOpenedPage",{data:"test"})
    }
})

        2）获取事件总线对象

                a）目标页面中通过：实例.getOpenrEventChannel()

                b）示例：const eventChannel = this.getOpenrEventChannel()

        3）触发事件

                a）eventChannel.emit("事件名"，data)

// 跳转目标页面
// test.js
Page({
    onLoad: function(option){
        console.log(option.query)
                                  // 获取事件总线对象
        const eventChannel = this.getOpenerEventChannel()
                     // 触发自定义事件
        eventChannel.emit("acceptDataFromOpenedPage",{data:"test"});
        eventChannel.emit("someEvent",{data:"test"});
        // 监听acceptDataFromOpenedPage事件，获取上一页面通过eventChannel传送到当前页面的数据
        eventChannel.on("acceptDataFromOpenedPage",function(data) {
            console.log(data)
        }
    }
})

 4、小程序自定义组件

1.创建组件

        1）开发工具中右键新建组件

        2）组件对应的json文件中设置：component:true

// navHeader.json
{
    "component":true,
    "usingComponents":{}
}

2.使用组件

        1）使用组件的页面的json文件中注册使用组件

// index.json
{
    "usingComponents":{
        // nav-header为注册的组件名，后对应为组件路径
        "nav-header":"/components/navHeader/navHeader"
    }
}

5、小程序使用npm包 

1.安装npm包

        在小程序 package.json 所在的目录中执行命令安装 npm 包：

npm install

2.构建 npm

        点击开发者工具中的菜单栏：工具 --> 构建 npm

3.使用 npm 包

        构建完成后即可使用 npm 包。

4.官网对应地址：

        npm 支持 | 微信开放文档

6、小程序获取用户基本信息

1.Button组件获取

        1）Button 组件设置 open-type 属性为 getUserInfo

<button open-type="getUserInfo"></button>

        2）设置后首次登陆点击 button 可以获取用户信息

        4）官网对应地址

        button | 微信开放文档

2.API获取

        1）  wx.getUserInfo()；

                wx.getUserProfile。

        2）官网对应地址：

                a）wx.getUserInfo(Object object) | 微信开放文档

                b）wx.getUserProfile(Object object) | 微信开放文档

补充一：授权

1.语法说明

        1）wx.authorize()

2.官网对应地址 ：

        wx.authorize(Object object) | 微信开放文档

补充二：需要获取权限的 scope

官网对应地址：

        授权 | 微信开放文档

 7、小程序获取用户唯一标识（openId）

1.官网图解

2.说明

        1）调用wx.login()获取临时登录凭证code，并回传到开发者服务器。

wx.login({
  success (res) {
            // code为临时凭证
    if (res.code) {
      //发起网络请求
      wx.request({
        url: 'https://test.com/onLogin',
        data: {
          code: res.code
        }
      })
    } else {
      console.log('登录失败！' + res.errMsg)
    }
  }
})

        2）调用auth.code2Session接口，换取用户唯一标识OpenID、用户在微信开放平台账号下的唯一标识UnionID（若当前小程序已绑定到微信开放平台账号）和会话秘钥session_key。

        3）官方对应地址

        小程序登录 | 微信开放文档

8、小程序分包流程 

1.为什么要分包

        1）小程序要求压缩包体积不能大于2M，否则无法发布

        2）实际开发中小程序体积如果大于2M就需要使用分包机制进行发布上传

        3）分包后可解决2M限制，并且能分包加载内容，提高性能

        4）分包后单个包的体积不能大于2M

        5）分包后所有的包的体积不能大于20M

2.分包形式

        1）常规分包

        2）独立分包

        3）分包预下载

        4）分包异步化

3.常规分包

        1）开发者通过在 app.json subpackages 字段声明项目分包结构

        2）特点

                a）加载小程序的时候先加载主包，当需要访问分包的页面时候才加载分包内容

                b）分包的页面可以访问主包的文件，数据，图片等资源

                c）主包：

                        i. 主包来源：除了分包以外的内容都会被打包到主包中

                        ii.通常放置启动页/tabBar页面

{
  "pages":[
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "packageA",
      "pages": [
        "pages/cat",
        "pages/dog"
      ]
    }, {
      "root": "packageB",
      "name": "pack2",
      "pages": [
        "pages/apple",
        "pages/banana"
      ]
    }
  ]
}

subpackages 中，每个分包的配置有以下几项：

字段	类型	说明
root	String	分包根目录
name	String	分包别名，分包预下载时可以使用
pages	StringArray	分包页面路径，相对于分包根目录
independent	Boolean	分包是否是独立分包

 4.独立分包

        1）设置independent为true

        2）特点:

                a）独立分包可单独访问分包的内容，不需要下载主包

                b）独立分包不能依赖主包或者其他包的内容

        3）使用场景

                a）通常某些页面和当前小程序的其他页面关联不大的时候可进行独立分包

                b）如：临时加的广告页 || 活动页

{
  "pages": [
    "pages/index",
    "pages/logs"
  ],
  "subpackages": [
    {
      "root": "moduleA",
      "pages": [
        "pages/rabbit",
        "pages/squirrel"
      ]
    }, {
      "root": "moduleB",
      "pages": [
        "pages/pear",
        "pages/pineapple"
      ],
      // 独立分包
      // 注意：独立分包后不能依赖其他包的资源，主包的也不能使用
      "independent": true
    }
  ]
}

5.分包预下载

        1）配置

                a）app.json中设置preloadRule选项

                b）key（页面路径）：{packages：【预下载的包名 || 预下载的包名的根路径】}

{
  "pages": ["pages/index"],
  "subpackages": [
    {
      "root": "important",
      "pages": ["index"],
    },
    {
      "root": "sub1",
      "pages": ["index"],
    },
    {
      "name": "hello",
      "root": "path/to",
      "pages": ["index"]
    },
    {
      "root": "sub3",
      "pages": ["index"]
    },
    {
      "root": "indep",
      "pages": ["index"],
      "independent": true
    }
  ],
  // 预加载其他包配置
  "preloadRule": {
     // 当前加载包的路径
    "pages/index": {
                  // 设置在哪种网络情况下可以预加载
      "network": "all",
                    // 预加载的包，可以是相对路径 || 包名
      "packages": ["important"]
    },
    "sub1/index": {
      "packages": ["hello", "sub3"]
    },
    "sub3/index": {
      "packages": ["path/to"]
    },
    "indep/index": {
                    // 代表主应用
      "packages": ["__APP__"]
    }
  }
}

        2）特点：

                a）在加载当前包的时候可以设置预下载其他的宝

                b）缩短用户等待时间，提高用户体验

6.分包效果演示

 7.官网对应地址：

        分包加载 | 微信开放文档

9、小程序转发分享 

1.分享实现：

        Button组件设置open-type为share

        <button open-type="share"></button>

2.自定义分享内容

        生命周期回调中onShareAPPMessage回调中return对象设置自定义内容

Page({
    onShareAppMessage: function (res) {
        if(res.from === "button") {
        // 来自页面转发按钮
        console.log(res.target)
        }
        return {
            title: "自定义转发标题"，
            path："/page/user?id=123"
        }
    }
})

3.设置体验权限

        开发阶段分享给微信好友，默认没有体验权限，无法打开分享小程序，需要在开发页面设置

        最多添加15个微信好友

10、小程序支付流程 

1.支付流程官网图解

2.支付流程详细说明

        开发指引-小程序支付 | 微信支付商户平台文档中心

3.官网对应地址

       产品介绍-小程序支付 | 微信支付商户平台文档中心