小程序 - 基础加强（2）

最新推荐文章于 2023-01-07 23:35:51 发布

Smart小妍

最新推荐文章于 2023-01-07 23:35:51 发布

阅读量214

点赞数

文章标签：小程序前端 javascript

本文链接：https://blog.csdn.net/weixin_53136302/article/details/127471272

版权

使用npm包

目前，小程序中已经支持使用npm 安装第三方包，从而来提高小程序的开发效率。但是，在小程序中使用npm包有如下3个限制:

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

Vant Weapp

Vant Weapp是有赞前端团队开源的一套小程序U组件库，助力开发者快速搭建小程序应用。它所使用的是MIT开源许可协议，对商业使用比较友好。

Vant官方文档地址

使用css变量定制样式

page{
--button-danger-background-color:#C00000;
--button-danger-border-color:#000009
}

API的Promise化

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

安装方式如下：

在小程序中，安装完成的的包不能直接使用，要删除旧的miniprogram后重新构建。

全局数据共享

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

store中的数据

// 创建 Store 的实例对象
import {action, observable} from '../miniprogram_npm/mobx-miniprogram/index'

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
  })

})

将store中的成员绑定到页面当中

import { createStoreBindings } from '../../miniprogram_npm/mobx-miniprogram-bindings/index'
import { store } from '../../store/store'
Page({
  onLoad() {
    // 绑定 MobX store
    this.storeBindings = createStoreBindings(this, {
      store, // 需要绑定的数据仓库
      fields: ['numA','numB','sum'], // 将哪些数据绑定到当前页面进行使用
      actions: ['updateNum1'], // 将哪些方法绑定到当前页面使用
    })
  },
  onUnload() {
    // 解绑
    this.storeBindings.destroyStoreBindings()
  },
  btnHandler1(e){
    this.updateNum1(e.target.dataset.step)
  }
})

在页面上使用store成员

<!--pages/message/message.wxml-->
<text>pages/message/message.wxml</text>
<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>

分包

分包的基本概念

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

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

小程序的体积限制：

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

在app.json中声明如下节点使用分包：

 "subPackages": [
        {
            "root":"pkgA",
            "name":"p1",
            "pages": [
                "pages/cat/cat",
                "pages/dog/dog"
            ]

        },
        {
            "root":"pkgB",
            "name":"p2",
            "pages": [
                "pages/apple/apple"
            ]，
            "independent": true

        }
    ]