微信小程序关于npm包的学习笔记

这篇具有很好参考价值的文章主要介绍了微信小程序关于npm包的学习笔记。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

一、如何在小程序中使用npm包

现在来看看如何在小程序中使用npm包 

1.创建包管理器

2.构建npm包

 3.使用vant包中的组件 

 二、自定义vant组件的主题

三、小程序的API的Promise化

1.为什么需要Promise化

2.使用第三方包实现Promise化 

 三、全局数据共享(数据管理)

1.安装对应的包

2.创建mobx的store实例对象 

3.在页面中使用mobx的数据

3.在组件中使用mobx的数据

四、分包

进行分包的优点:

 分包后的项目构成:

 分包体积限制:(会导致小程序无法发布成功)

独立分包:

分包预下载:

 五、自定义tabBar案例

1.配置app.json文件

 2.添加对应的tabBar文件(注意这里添加的是组件)

 3.使用Vant Weapp组件库的tabBar


一、如何在小程序中使用npm包

首先得讲讲小程序使用npm包有哪些限制,虽然小程序已经越来越完善,但是毕竟它有着很多的限制,并不是所有的npm包都可以使用的

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

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

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

现在来看看如何在小程序中使用npm包 

1.创建包管理器

需要使用npm包,首先项目目录得有包管理器:package.json文件,所以第一步就是先创建一个包管理器

可以在项目目录空白处右键打开终端,然后使用npm初始化命令就创建好了一个包管理工具了

npm init -y

之后就可以下载包了

我这里下载了一个vant-weapp组件包

npm i @vant/weapp -S --production

2.构建npm包

打开微信开发者工具,点击 工具 -> 构建 npm,构建完成后,就可以引入组件了。

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 3.使用vant包中的组件 

使用vant中的组件,其实就跟我们自定义组件是一个道理,先引入在使用

我们可以全局引入也可以局部引入

全局引入只需要在app.json文件中引入这样的配置即可

"usingComponents": {
  "van-button": "@vant/weapp/button/index"
}

在页面中就可以使用了,像这样

<van-button type="primary">按钮</van-button>

一个按钮就出现了

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 二、自定义vant组件的主题

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 这里放了一个danger按钮,它的默认颜色是红色,我们要想改变它的颜色,可以在app.wxss全局配置也可以在页面wxss中配置

page{
  --button-danger-background-color:black;
  --button-danger-border-color: black;
}

这样配置过后,按钮的颜色已经改变

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 详情所有的配置可以参考官方文档:vant-weapp/packages/common/style/var.less at dev · youzan/vant-weapp · GitHub

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 所有的配置项都是以字母排序的,所以找起来也很方便

三、小程序的API的Promise化

1.为什么需要Promise化

默认情况下,小程序官方提供的异步API都是基于回调函数实现的,例如,网络请求的API需要按照如下的方式调用:
 

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 如果数据较大,就会大量使用这种这种回调函数,就会陷入回调地狱的问题,所以需要Promise来解决这个问题

2.使用第三方包实现Promise化 

用到的第三方包:

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

下载好包后需要重新构建npm才可以使用该包

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 在项目中使用该包实现Promise化

在App.js引用如下代码

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

import {promisifyAll} from 'miniprogram-api-promise'
const wxp = wx.p = {}
promisifyAll(wx,wxp)

这样之后我们在使用微信的API时就可以实现Promise化了

测试案例:

getList(){
    const res = wx.p.request({
    url: 'https://applet-base-api-t.itheima.net/api/get',
    method:'GET',
    data:{
      name:'zs',
      age:20
    },
  })
  console.log(res);
},

打印结果:可以看到此时已经Promise化了

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 进一步使用async和await之后

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 打印结果就已经非常标准的Promise了

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 三、全局数据共享(数据管理)

全局数据共享,也就是将所有的数据存放到一个地方,供所有的组件和页面使用

Vue中我们使用的最多的是Vuex,而小程序中我们使用 mobx

1.安装对应的包

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

安装好后重新构建npm

2.创建mobx的store实例对象 

首先在项目目录中创建一个store文件夹,然后创建一个store.js文件,在里面写一些数据的共享

代码示例:

import { action } from 'mobx-miniprogram'
import {observable} from 'mobx-miniprogram '

export const store = observable({
  //数据字段
  numA : 1,
  numB : 2,
  //计算属性,这里不能修改数据
  get sum(){
    return this.numA + this.numB
  },
  //actions 方法 ,用来修改数据
  updateNumA:action(function(step){
      this.numA += step
  }),
  updateNumB:action(function(step){
    this.numB += step
})
})

3.在页面中使用mobx的数据

在页面的js中按需引入

import {createStoreBindings} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Page({
/**
   * 生命周期函数--监听页面加载
   */
  onLoad: function (options) {
   this.storeBindings = createStoreBindings(this, {
      store,
      fields:['numA','numB','sum'],  //要传递过来的数据
      actions:['updateNumA','updateNumB']  //要传递过来的方法
    })
  },
  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {
    this.storeBindings.detroyStoreBindings()
  },
})

这样在页面中就获取到了store中的数据,就可以直接使用了

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

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 该函数用来调用了从store中传递过来的updateNumA方法

  btnHandler1(e){
    this.updateNumA(e.target.dataset.step)
  },

3.在组件中使用mobx的数据

首先是在组件的js中引入store

import {storeBindingsBehavior} from 'mobx-miniprogram-bindings'
import {store} from '../../store/store'
Component({
  behaviors: [storeBindingsBehavior], //绑定store
  storeBindings:{
    store,
    fields: {
      numA: 'numA',  //绑定store中的数据和计算属性
      numB: 'numB',
      sum: 'sum'
    },
    actions: {
      updateNumA: 'updateNumA'  //绑定actions方法
    }
  },
})

然后就可以跟在页面中一样去使用了

四、分包

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

进行分包的优点:

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

 分包后的项目构成:

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 分包体积限制:(会导致小程序无法发布成功)

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

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

分包配置:在app.json中加入红色框中的代码,然后保存之后就会自动生成对应的分包和页面

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 查看分包体积:在详情页的基本信息中查看即可

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 分包后的引用规则:

①主包无法引用分包内的私有资源

②分包之间不能相互引用私有资源

③分包可以引用主包内的公共资源

详情可见上面的分后的项目结构图

独立分包:

独立分包本质上也算是分包,但是它的优点就是可以独立于主包运行,一般的情况下,用户在访问一个小程序时都是先打开主包也就是主页面,然后访问其他的分包页面,独立分包之后就可以不依赖于主包直接访问

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 区分普通包和独立包只需要在分包是加上这么一句即可

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 独立分包的引用原则:

①主包无法引用独立分包内的私有资源独立分包之间

②不能相互引用私有资源心

③独立分包和普通分包之间,不能相互引用私有资源特别注意:独立分包中不能引用主包内的公共资源

分包预下载:

分包预下载就是当我们进入某个页面时,让其自动下载稍后可能需要用到的包,这样在我们用户u需要使用的时候就可以更快的渲染出来,增加用户的体验

配置分包预下载只需要在app.json中配置下面示例代码即可

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 文章来源地址https://www.toymoban.com/news/detail-695931.html

 五、自定义tabBar案例

1.配置app.json文件

加上下面的代码就开启了自定义tabBar,但是下面原本的配置不能删除,它为了保证低版本兼容以及区分哪些页面是 tab 页,tabBar 的相关配置项需完整声明,但这些字段不会作用于自定义tabBar 的渲染。

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 2.添加对应的tabBar文件(注意这里添加的是组件)

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 3.使用Vant Weapp组件库的tabBar

①:在app.json文件中添加对应的组件

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 ②:添加对应的wxml

<!--custom-tab-bar/index.wxml-->
<van-tabbar active="{{ active }}" bind:change="onChange">
  <van-tabbar-item info="3">
    <image slot="icon" src="{{ icon1.normal }}" mode="aspectFit" style="width: 30px; height: 18px;" />
    <image slot="icon-active" src="{{ icon1.active }}" mode="aspectFit" style="width: 30px; height: 18px;" />
    首页
  </van-tabbar-item>
  <van-tabbar-item info="3">
    <image slot="icon" src="{{ icon2.normal }}" mode="aspectFit" style="width: 30px; height: 18px;" />
    <image slot="icon-active" src="{{ icon2.active }}" mode="aspectFit" style="width: 30px; height: 18px;" />
    消息
  </van-tabbar-item>
  <van-tabbar-item info="3">
    <image slot="icon" src="{{ icon3.normal }}" mode="aspectFit" style="width: 30px; height: 18px;" />
    <image slot="icon-active" src="{{ icon3.active }}" mode="aspectFit" style="width: 30px; height: 18px;" />
    联系我们
  </van-tabbar-item>
</van-tabbar>

③:添加对应的js代码

Page({
   data: {
    active:0,
    icon1: {
      active: '/images/tabs/home-active.png', //未选中的图标
      normal: '/images/tabs/home.png',//选中的图标
    },
    icon2:{
      active: '/images/tabs/message-active.png', //未选中的图标
      normal: '/images/tabs/message.png',//选中的图标
    },
    icon3:{
      normal: '/images/tabs/contact.png', //未选中的图标
      active: '/images/tabs/contact-active.png',//选中的图标
    }
  },
  onChange(event) {
    // event.detail 的值为当前选中项的索引
    this.setData({ active: event.detail });
  },
});

tabBar效果就出现了 

小程序npm,微信小程序,前端,微信小程序,npm,学习,前端

 

 

到了这里,关于微信小程序关于npm包的学习笔记的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序(.wxapkg)源码包解包的方法

    首先下载微信小程序的解包工具:微信小程序(.wxapkg)文件解包工具 下载地址: 工具下载 cmd切换到源码的存放目录,直接将工具和源码放一个文件夹吧,执行: 执行后即可看到解压后的文件夹,进去就可以看源码了。

    2024年02月14日
    浏览(37)
  • 微信小程序黑马学习笔记

    在页面.js中定义数据到data对象 .wxxm文件中 {{info}} Mustache 语法的主要应用场景如下: 绑定内容 绑定属性(src=\\\"{{}}\\\") 不像vue3 :src=\\\"\\\") 运算(三元运算、算术运算等) {{age=18 ? ‘成年’ : ‘未成年’}} {{age*10}} 小程序中常用的事件 类型 绑定方式 事件描述 tap bindtap 或 bind:tap 手指触

    2024年02月19日
    浏览(42)
  • 黑马微信小程序学习笔记

    小程序和普通网页的区别 1、运行环境不同 网页运行在浏览器环境中 小程序运行在微信环境中 2、API不同 由于运行环境的不同,在小程序中无法调用DOM和BOM 的API(因为这两个API是浏览器暴露出来的,微信环境没有) 但是可以调用微信提供的定位、扫码、支付等API 3、开发模

    2024年02月03日
    浏览(57)
  • 微信小程序学习笔记3.0

    需求描述 仿今日头条微信小程序,要具有以下功能。 (1)首页新闻频道框架设计,包括底部标签导航设计、新闻检索框设计及新闻频道滑动效果设计。 (2)首页新闻内容设计,包括新闻标题、新闻图片及新闻评论设计。 (3)首页新闻详情页设计,显示新闻的详细内容包括

    2024年02月07日
    浏览(36)
  • 学习笔记(自用)——微信小程序跳转

    (1)wx.navigateTo({url:\\\'....这个里面放需要跳转的页面的地址\\\'}) wx.navigate是一种很常用的跳转方式,官方解释为:保留当前页面,跳转到应用内的某个页面 采用navigate进行跳转后,左上方会有个小箭头,点击小箭头可以返回跳转前的界面  (2)wx.redirectTo({url:\\\'.......这里面放置跳

    2024年01月18日
    浏览(69)
  • 微信小程序学习笔记(五) 云开发

    微信云开发是微信团队联合腾讯云推出的专业的小程序开发服务。 开发者可以使用云开发快速开发小程序、小游戏、公众号网页等,并且原生打通微信开放能力。 开发者 无需搭建服务器 ,可免鉴权直接使用平台提供的 API 进行业务开发。 传统开发需要考虑 成本角度:维护

    2023年04月08日
    浏览(49)
  • 微信小程序学习笔记--商城案例(黑马教程)

    相当于转载黑马教程的教程,原文地址(https://www.escook.cn/docs-uni-shop/) 基于uniapp开发,官网地址(https://uniapp.dcloud.net.cn/) 下载Hbuilder开发工具, 安装sass编译插件, 新建,项目,基于uni-ui模板,生成的项目。 一个 uni-app 项目,默认包含如下目录及文件: 填写微信小程序AppID:m

    2024年02月09日
    浏览(63)
  • 微信小程序学习笔记(四)——自定义组件

    创建组件 在根目录下创建 components 文件夹 右键点击 components 文件夹,选择 新建 Component ,就会自动生成 .wxml、.wxss、.js、.json 文件 引用组件 组件的引用方式分为“ 局部引用 ”和“ 全局引用 ”,故名思义: 局部引用 :组件只能在当前被引用的页面内使用 全局引用 :组件

    2024年02月16日
    浏览(50)
  • 微信小程序学习笔记——WX:key的使用

    wx:key一般是用在wx:for或者其他需要动态渲染的地方,采用wx:key可以对渲染列表中的元素给定唯一标识,使当我们的数组发生改变时,渲染中的原数据可以保持自己的特性。 举个例子,现在有个点击按钮勾选的例子,当我们勾选羔羊排骨一条,点击增加数据后,羔羊排骨左侧的

    2024年02月07日
    浏览(43)
  • 微信小程序 -- npm 支持

    目录 npm 支持 1. 构建 npm 2. 自定义构建 npm 3. Vant 组件的使用方式 4. Vant 组件的样式覆盖 1. 构建 npm 目前小程序已经支持使用 npm 安装第三方包,但是这些 npm 包在小程序中不能够直接使用,必须得使用小程序开发者工具进行构建后才可以使用。 为什么得使用小程序开发者工具

    2024年02月22日
    浏览(33)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包