【Day05】0基础微信小程序入门-学习笔记

茹亦如风

于 2024-08-10 14:52:43 发布

阅读量952

点赞数 24

分类专栏：前端文章标签：微信小程序学习笔记

本文链接：https://blog.csdn.net/weixin_46568275/article/details/141090741

版权

前端专栏收录该内容

14 篇文章 1 订阅

订阅专栏

基础加强

学习目标

能够知道如何安装和配置 vant-weapp 组件库
能够知道如何使用 MobX 实现全局数据共享
能够知道如何对小程序的 API进行 Promise 化

使用npm包

1.准备项目

Day05 资源我已上传，可自取

把里面的 mp_05 这个项目导入到我们的微信开发者工具

在这里插入图片描述

2. 小程序对于npm的支持和限制

小程序支持npm安装第三方包，但是有三个限制，因为小程序并未提供其运行环境。

不支持依赖于**Node.js**内置库的包。
不支持依赖于浏览器内置对象的包。
不支持依赖于**C++插件**的包

3. Vant Weapp小程序UI组件库

小程序UI组件库，类似于elementUI组件库

使用的是MIT开源许可协议，对商业使用比较友好

官方文档：https://vant-ui.github.io/vant-weapp/0.x/#/intro

安装 Vant 组件库：

通过npm安装，建议指定版本@1.3.3
构建npm包
修改app.json

根据官方文档步骤一二四进行操作，三是关于ts的先不考虑

在这里插入图片描述

下面是具体操作：
在这里插入图片描述

初始化一个package.json文件：

在这里插入图片描述

指定版本号，安装vant：

安装卡住的话，可用参考这个博客http://t.csdnimg.cn/wFdmY，很有用

在这里插入图片描述

构建npm：

最新版本默认可用使用npm了

在这里插入图片描述

修改app.json，将下列代码删除，使用旧样式，防止组件样式混乱。

"style:"v2"

4. 使用Vant组件

在 app.json 的 usingComponents 节点中引入需要的组件，在 wxml中直接使用组件。

比如说这个按钮组件

在这里插入图片描述

//全局app.json
"usingComponents":{
    "van-button":"@vant/weapp/button/index"
}

<!--页面的.wxml结构-->
<van-button type="primary">按钮</van-button>

5. 定制全局主题样式

使用CSS变量实现主题定制

CSS变量基本用法可参考MDN文档:https://developer.mozilla.org/zh-CN/docs/Web/CSS/Using_CSS_custom_properties

如果你经常用到一种颜色，那就可以把它作为一个变量，无论是使用或是修改都会很方便，不需要一个一个搜然后再去修改。这个就是CSS变量（也叫自定义属性或者级联变量）。

基本用法

定义：属性名以--开头，属性值可用是任何有效的CSS值，比如

element{
    --main-bg-color:blue;
}

引用：用var()包裹

element{
    background-color:var(--main-bg-color);
}

定制全局主题样式

在app.wxss中，写入CSS变量，即可对全局生效

使用page的原因是它是根节点，每个页面都可以使用这个自定义变量；下面的变量名是vant官方文档中配置文件中按钮的背景颜色和边框颜色变量名。

 page{
  /* 定制警告按钮的背景颜色和边框颜色 */
  --button-danger-background-color:#C00000;
  --button-danger-border-color:#D60000;
 }

6. API Promise化

默认情况下，小程序官方提供的异步API都是基于回调函数实现的。容易造成回调地狱的问题，代码可读性和维护性会很差

APl Promise化，指的是通过额外的配置，将官方提供的、基于回调函数的异步 API，升级改造为基于Promise 的异步 API，从而提高代码的可读性、维护性，避免回调地狱的问题

安装三方包

使用miniprogram-api-promise第三方包，安装，记得指定版本号：

npm install --save miniprogram-api-promise@1.0.4

直接npm构建一下即可

使用

//在小程序入口文件中(app.js)，只需调用一次promisifyAll()方法，
//即可实现异步API的promise化
import {promisifyAll} from 'miniprogram-api-promise'

const wxp = wx.p = {}
//promisifyAll所有的wx的api
promisifyAll(wx,wxp)

调用Promise化的异步API

<!--页面的wxml结构-->
<van-button type="danger" bindtap="getInfo">vant按钮</van-button>

//页面的.js文件，定义对应的tap事件处理函数
async getInfo(){
    //对data解构赋值，赋给res
    const {data:res} = await wx.p.requset({
        method:'get',
        URL:'https://www.escook.cn/api/get',
        data:{name:'ruru',age:18}
    })
    
    console.log(res)
}

全局数据共享

1. 简介

全局数据共享是为了解决组件之间数据共享的问题。

开发中常用的数据共享方案有 Vuex、Redux、MobX等

在这里插入图片描述

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

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

2. MobX

2.1 安装`MobX`相关包并构建`npm`

npm install --save mobx-miniprogram@4.13.2 mobx-miniprogram-bindings@1.2.1

在这里插入图片描述

2.2 创建MobX的Store实例

根目录创建store文件夹，创建一个store.js文件

//在这个js文件中专门创建store的实例对象
import {observable,action} from 'mobx-miniprogram'

//创建实例对象并导出
export const store = observable({
  //数据字段
  numA:1,
  numB:2,

  //计算属性,get指的是只读 
  get sum(){
    return this.numA + this.numB
  },
  //actions方法，用来修改store中的数据
  updateNum1:action(function(step){
    this.numA += step
  }),
    updateNum2:action(function(step){
    this.numB += step
  }),
})

2.3 将Store成员绑定到页面中

思路分三步：导入成员，onload绑定，unload清除

// pages/message/message.js
import { action } from 'mobx-miniprogram'
import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'

Page({
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
      //将字段和方法绑定到this上
    this.storeBindings =  createStoreBindings(this,{
      store,
      fields:['numA','numB','sum'],
      actions:['updateNum1']
    })
  },

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.storeBindings.destoryStoreBindings()
  }
}

2.4 在页面上使用Store中的成员

<!--pages/message/message.wxml-->
<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler1" data-step="{{1}}">
numA + 1
</van-button>
<van-button type="danger" bindtap="btnHandler1" data-step="{{-1}}">
numA - 1
</van-button>

//message.js 
btnHandler1(e){
      this.updateNum1(e.target.dataset.step)
    },

在这里插入图片描述

2.5 将Store中的成员绑定到组件中

步骤三步：按需导入、behaviors数组、storeBindings接收三个属性

根目录创建一个components组件，在里面创建一个numbers文件夹，在numbers文件夹中创建一个叫numbers的组件。

在这里插入图片描述

在app.json中注册一下这个组件

"usingComponents":{
    "van-button":"@vant/weapp/button/index",
    "my-numbers":"./components/numbers/numbers"
}

在message组件中使用这个numbers组件

<!--message.wxml-->
<my-numbers></my-numbers>

现在我们要开始绑定组件了

// components/numbers/numbers.js
import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Component({
  behaviors:[storeBindingsBehavior], // 通过storeBindingsBehavior 来实现自动绑定

  storeBindings:{
    store,
    fields:{
      numA:()=>store.numA,
      numB:(store)=>store.numB,
      sum:'sum'
    },
    actions:{
        //指向store中的updateNum2
      updateNum2:'updateNum2'
    }
  }
})

2.6 在组件中使用Store中的成员

<view>{{numA}} + {{numB}} = {{sum}}</view>
<van-button type="primary" bindtap="btnHandler2" data-step="{{1}}">
numB + 1
</van-button>
    <van-button type="danger" bindtap="btnHandler2" data-step="{{-1}}">
numB - 1
</van-button>

//组件的方法列表
methods:{
    btnHandler2(e){
        this.updateNum2(e.target.datatset.step)
    }
}

分包

1. 简介

把 完整的小程序项目，按需求划分为不同的子包，在构建时打包成不同的分包，用户在使用时按需进行加载。

分包的好处

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

分包前项目构成：

在这里插入图片描述

分包后项目构成：

在这里插入图片描述

分包的加载规则：

当小程序启动时，默认下载主包并启动主包内页面。tabBar页面需要放到主包中
当用户进入分包内某页面时，客户端下载对应分包，下载完成后再进行展示。

分包的体积限制：

整个小程序所有分包大小不超过16M(主包+所有分包)。单个分包/主包的大小不超过2M。

2. 使用分包

2.1 配置方法

在这里插入图片描述

还要再app.json中的subpackages节点中声明分包的结构。里面包含几个对象，就是代表有几个分包。

下面有两个对象，也就是证明这个项目有两个分包。

在这里插入图片描述

查看分包的体积：

在这里插入图片描述

2.2 打包原则

小程序会按 subpackages 的配置进行分包，subpackages 之外的目录将被打包到主包中。
主包也可以有自己的 pages(即最外层的pages字段)。
tabBar 页面必须在主包内。
分包之间不能互相嵌套。

2.3 引用原则

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

3. 独立分包

本质也是主包，可独立于主包和其它分包而单独运行。

在这里插入图片描述

独立分包和普通分包的区别：是否依赖于主包才能运行。普通分包依赖于主包，独立分包可独立运行。

开发者可用按需将某些具有一定功能独立性的页面配置到独立分包中（比如说登录注册页面）。这样可以很大程度上提升分包页面的启动速度。

一个小程序可以有多个独立分包。

独立分包和普通分包的配置区别就是有没有如下代码：

//app.json
{	
    "root":"moduleA",
    "pages":[
        "pages/pear",
        "pages/pineapple"
    ],
    "independent":true  //通过此节点，声明当前分包为‘独立分包’。
}

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

4. 分包预下载

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

预下载分包的行为，会在进入指定的页面时触发。在app.json中，使用preloadRule节点定义分包的预下载规则

{
    "preloadRule":{ //分包预下载的规则
        "pages/contact/contact":{  //触发预下载的页面路径
            //network表示在指定的网络环境进行预下载。可选值为all、wifi，默认为wifi。
            "network":"all",
            //packages 进入页面下载哪些包，可通过root或name指定
            "packages":["pkgA"]
            
        }
    }
}