微信小程序基础

微信不同于普通的网站页面，它有自己的一套方式，小程序与网页开发有很大的相似性，但二者也是有些许区别的

1.宿主环境是什么？

是指程序运行所必须的依赖环境，所以手机微信是小程序的宿主环境

小程序可以借助微信完成一些功能：扫码，支付，地理定位，etc等

宿主环境包含：通信模型，运行机制，组件，API

通信的主力是渲染层（wxml、wxss）和逻辑层（js）

渲染层和逻辑层由微信客户端转发，逻辑层和第三方服务器也一样

 2.小程序启动的过程

1.小程序代码包下载到本地

2.解析app.json全局配置文件

3.解析app.js小程序入口文件，调用app（）创建小程序实例

4.渲染小程序首页

5.小程序启动

页面的渲染过程

1.加载解析页面的.json配置文件

2.加载页面wxml和wxss

3.执行页面的.js文件，调用page（）创建页面实例

4.页面渲染完成

3.组件

微信开放文档有组件板块，更详细全面

1.视图容器

        view 相当于div

        scroll-view 滚动视图区域

        swiper、swiper-item 轮播图容器和item组件

        

2.基础内容

        text 文本组件 selectable支持长按选中

        rich-text 富文本组件 nodes属性：渲染html

        button 按钮 type size

        image 图片 src mode

        

3.表单组件

4.导航组件

        navigator 页面导航组件

5.媒体组件

6.map地图组件

7.canva画布组件

8.开放能力

9无障碍访问

4.API

详情微信开放文档

5.数据绑定

mustache语法

动态绑定  js中data的数据在wxml中使用  {{数据名称}} 

属性动态绑定  

属性绑定

 

 6.数据赋值

7.数据传参

 

8.条件渲染

 

 

9.列表渲染

 

10.wxss

rpx尺寸单位  解决屏幕适配的尺寸单位

rpx把所有的设备的屏幕在宽度上分为750份，当前屏幕的总宽度为750rpx

11.全局配置

12.tabBar

有底部和顶部，最少两个，最多五个

 

 每个tab项的属性

13.页面配置

小程序中，app.json 中的 window 节点，可以全局配置小程序中每个页面的窗口表现如果某些小程序页面想要拥有特殊的窗口表现，此时，“页面级别的 json 配置文件”就可以实现这种需求
当页面配置与全局配置冲突时，根据就近原则，最终的效果以页面配置为准

14.网络数据请求

出于安全性方面的考虑，小程序官方对数据接口的请求做出了如下两个限制:
只能请求 HTTPS 类型的接口
必须将接口的域名添加到信任列表中

如果后端程序员仅仅提供了 http 协议的接口、暂时没有提供 https协议的接口。
此时为了不耽误开发的进度，我们可以在微信开发者工具中，临时开启 开发环境不校验请求域名、TLS 版本及 HTTPS 证书，选项跳过 request 合法域名的校验。 

15.关于跨域和ajax

跨域问题只存在于基于浏览器的 Web 开发中。由于小程序的宿主环境不是浏览器，而是微信客户端，所以小程序中不存在跨域的问题。
Ajax 技术的核心是依赖于浏览器中的 XMLHttoRequest 这个对象，由于小程序的宿主环境是微信客户端，所以小程序中不能叫做“发起 Aiax 请求”，而是叫做“发起网络数据请求

16.页面导航

声明式导航，在页面上声明一个<navigator> 导航组件通过点击<navigator>组件实现页面跳转
编程式导航，调用小程序的导航 API，实现页面的跳转

 声明式导航

 编程式导航

wx.switchTab

 wx.navigateTo

 

 wx.navigateBack

 

17.导航传参

 

 

可以把传过来的参数挂载到data中

 

18.下拉刷新

全局开启下拉刷新
在app.json 的 window 节点中，将enablePullDownRefresh 设置为 true

局部开启下拉刷新
在页面的 json 配置文件中，将 enablePullDownRefresh 设置为 true

在页面的 js 文件中，通过 onPullDownRefresh()函数即可监听当前页面的下拉刷新事件 

 当处理完下拉刷新后下拉刷新的loading 效果会自显不会主动消失，所以需要手动隐loading 效果。此时，调用 wx.stopPullDownRefresh() 可以停止当前页面的下拉刷新

19.上拉触底

上拉触底距离指的是触发上拉触底事件时，滚动条距离页面底部的距离，可以在全局或页面的.json 配置文件中，通过 onReachBottomDistance 属性来配置上拉触底的距离,小程序默认的触底距离是 50px，在实际开发中，可以根据自己的需求修改这个默认值

wx.showLoading({
          title: '数据加载中',
        })
        wx.request({
          url: 'url',
        })
        wx.hideLoading()

20.自定义编译模式

21.生命周期

小程序的运行过程就是小程序的生命周期

小程序中的生命周期函数分为两类，分别是:
应用的生命周期函数
特指小程序从启动 -> 运行->销毁期间依次调用的那些函数

页面的生命周期函数
特指小程序中，每个页面从加载-> 渲染> 销毁期间依次调用的那些函数

 

22.wxs

 

 

 

 

 

 

 

23.自定义组件

局部引用

全局引用

 

 

 

 

 

24.数据监听器

 

 

 

25.纯数据字段 

纯数据字段指的是那些不用于界面渲染的 data 字段
应用场景:例如有些情况下，某些 data 中的字段既不会展示在界面上，也不会传递给其他组件，仅仅在当前组件内部使用。带有这种特性的 data 字段适合被设置为纯数据字段。
好处:纯数据字段有助于提升页面更新的性能

在Component 构造器的options 节点中，指定 pureDataPattern 为一个正则表达式，字段名符合这个正则表达式的字段将成为纯数据字段，示例代码如下:

Component({
    options: {
    // 指定所有开头的数据字段为纯数据字段
        pureDataPattern: /^ /
    }，
    data: {
        a: true， // 普通数据字段
        b: true，// 纯数据字段
    }
})

26.组件的生命周期

 

 

 

27.插槽

 

 

自定义组间-父子组件通信

属性绑定

<tests1 count="{{count}}"></tests1>
<view>~~~~~</view>
<view>父组件count值为：{{count}}</view>


//子组件中的代码
<view>子组件，count值为：{{count}}</view>
Component({
    /**
     * 组件的属性列表
     */
    properties: {
        count:Number
    },

事件绑定

<tests1 count="{{count}}" bind:sync="syncCount"></tests1>
<view>~~~~~</view>
<view>父组件count值为：{{count}}</view>

js代码
data: {
        count:0
    },

    syncCount(e){
        console.log(e);
        this.setData({
            count:e.detail.value
        })
    },

子组件代码
<view>子组件，count值为：{{count}}</view>
<button bindtap="addCount">+1</button>

js代码
 methods: {
        addCount(){
            this.setData({
                count:this.properties.count+1
            })
            this.triggerEvent('sync',{value:this.properties.count})
        }
    }

获取组件实例 

<tests1 count="{{count}}" bind:sync="syncCount" class="CustomA" id="CA"></tests1>
<view>~~~~~</view>
<view>父组件count值为：{{count}}</view>
<button bindtap="getChild">获取子组件的实例对象</button>

js代码
    getChild(){
        const child=this.selectComponent('.CustomA')
        // child.setData({
        //     count:child.properties.count+1
        // })
        child.addCount()
    },

28.behaviors  

behaviors 是小程序中，用于实现组件间代码共享的特性，类似于 Vue.js 中的“mixins"

behaviors 的工作方式
        每个behavior 可以包含一组属性、数据、生命周期函数和方法。组件引用它时，它的属性、数据和方法会被合并到组件中,每个组件可以引用多个 behavior，behavior 也可以引用其它 behavior。
1  调用 Behavior(object object)方法，创建实例对象
2  并使用 module.exports 将 behavior 实例对象共享出去 

 

 同名字段的覆盖和组合规则参照文档，有详细说明

29.使用Vant组件库

小程序对npm的支持与限制

        1.不支持依赖于Node.js内置库的包

        2.不支持依赖于浏览器内置对象的包

        3.不支持依赖于C++插件的包

安装Vant组件库主要分为四步

        1.初始化包管理配置文件

                npm init -y 

        2.通过npm安装

                npm i @vant-weapp@1.3.3 -S --production

                npm i vant-weapp@1.3.3 -S --production

        3.构建npm包

                        工具栏构建npm

        4.修改app.json

        详情参照以下官网，方式不唯一

快速上手 - Vant Weapp (youzan.github.io)

构建之前先删除

 

30.全局数据共享

全局数据共享(又叫做: 状态管理)是为了解决组件之间数据共享的问题开发中常用的全局数据共享方案有: Vuex、Redux、ModX等

小程序中的全局数据共享方案
在小程序中，可使用 mobx-miniprogram 配合 mobx-miniprogram-bindings 实现全局数据共享。

mobx-miniprogram 用来创建 Store 实例对象
mobx-miniprogram-bindings 用来把 Store 中的共享数据或方法，绑定到组件或页面中使用

 

 31.分包

分包指的是把一个完整的小程序项目，按照需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。
对小程序进行分包的好处主要有以下两点:

可以优化小程序首次启动的下载时间
在多团队共同开发时可以更好的解耦协作

分包前，小程序项目中所有的页面和资源都被打包到了一起，导致整个项目体积过大，影响小程序首次启动的下载时间。

分包后，小程序项目由 1 个主包 + 多个分包组成:

主包:一般只包含项目的启动页面或 TabBar 页面
分包:只包含和当前分包有关的页面和私有资源

加载规则 

在小程序启动时，默认会下载主包并启动主包内页面，tabBar 页面需要放到主包中
当用户进入分包内某个页面时，客户端会把对应分包下载下来，下载完成后再进行展示，非 tabBar 页面可以按照功能的不同，划分为不同的分包之后，进行按需下载

整个小程序所有分包大小不超过 16M (主包 +所有分包)

单个分包/主包大小不能超过 2M

打包原则

小程序会按 subpackages 的配置进行分包，subpackages 之外的目录将被打包到主包中

主包也可以有自己的 pages (即最外层的 pages 字段)
tabBar页面必须在主包内
分包之间不能互相嵌套 

引用原则

主包无法引用分包内的私有资源
分包之间不能相互引用私有资源
分包可以引用主包内的公共资源

32.独立分包

独立分包本质上也是分包（不同的是分包需要依赖主包才能运行），可以独立于主包和其他分包而单独运行，就是不加载主包的情况，独立运行

独立分包和普通分包以及主包之间，是相互隔绝的，不能相互引用彼此的资源

33.分包预下载

分包预下载指的是:在进入小程序的某个页面时，由框架自动预下载可能需要的分包，从而提升进入后续分包页面时的启动速度

同一个分包中的页面享有共同的预下载大小限额 2M