【微信小程序】-- npm包总结 --- 基础篇完结(四十七)

简介: 【微信小程序】-- npm包总结 --- 基础篇完结(四十七)



一、安装和配置 vant-weapp 组件库

  接下来就来对这些所学内容的进行一个总结吧。正所谓温故而知新嘛,话不多说,让我们原文再续,书接上回吧。

  能够知道如何安装和配置 vant-weapp 组件库,可以参考 Vant 的 官方文档,可分为 4 步:

  • Step 1、 通过 npm 安装(建议指定版本为@1.3.3,以防出现不必要的问题)。

通过 npm 安装


npm i @vant/weapp -S --production


通过 yarn 安装


yarn add @vant/weapp --production


安装 0.x 版本


npm i vant-weapp -S --production

  • Step 2、 修改 app.json。

将 app.json 中的 "style": "v2" 去除,小程序的新版基础组件强行加上了许多样式,难以覆盖,不关闭将造成部分组件样式混乱。

  • Step 3、 修改 project.config.json

开发者工具创建的项目,miniprogramRoot 默认为 miniprogrampackage.json 在其外部,npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置,使开发者工具可以正确索引到 npm 依赖的位置。

  • Step 4、 构建 npm 包。

  打开微信开发者工具,点击 工具 -> 构建 npm,并勾选 使用 npm 模块 选项,构建完成后,即可引入组件。

二、全局数据共享

  安装包、创建 Store、参考官方文档进行使用,具体可分为这六步:

  • Step 1、安装 MobX 相关的包

  在项目中运行如下的命令,安装 MobX 相关的包:

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

  • Step 2、创建 MobX 的 Store 实例

  接下来就在这个 store.js 文件中创建 Store 的实时对象,定义 action 方法来修改 store 中的值,在实际开发过程中,是不允许外界直接修改 store 里的值,只能通过 store 定义的函数进行修改。

  • Step 3、将 Store 中的成员绑定到页面中
  • 在页面 js 文件导入需要的成员。
  • onLoad 开始生命周期进行绑定。
  • onUnload 生命周期取消监听。
  • Step 4、在页面上使用 Store 中的成员
  • Step 5、将 Store 中的成员绑定到组件中
  • 在页面 js 文件导入需要的成员。
  • Component 提供 behaviors 节点来存储前面导入的 Behaviors 数组。
  • behaviors节点平级的位置声明 page 对象接收 storefieldsactions 这三个属性。
  • Step 6、在组件中使用 Store 中的成员

三、API Promise 化

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

  • 安装

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

  这里指定的安装版本是1.0.4,建议安装环境都要一致,不然版本不同可能会出现一些错误。

  • 使用

  在小程序 app.js 中,只需调用一次 promisifyAll() 方法,promisifyAll(wx, wxp)将 wx 上所有基于回调函数的 API promisi 化并挂载到 wxp 上。

app.js

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

四、自定义 tabBar

  整个案例用的有:Vant 组件库 + 自定义组件 + 全局数据共享。首先来实现 tabBar 标签栏,自定义 tabBar 可分为 3 大步骤,分别是:

  • Step 1、配置信息

  在 app.json 中的 tabBar 项指定 custom 字段,同时其余 tabBar 相关配置也补充完整。所有 tab 页的 json 里需声明 usingComponents 项,也可以在 app.json 全局开启。

  • Step 2、添加 tabBar 代码文件

  在代码根目录下添加入口文件,这里的文件夹名一定是 custom-tab-bar,然后在创建 index 组件(index命名也不能随便改,就用 index,否则无法识别)

  当 custom 参数为 true 时,小程序就会自动识别 custom-tab-bar 里面的文件,并将其渲染出来。

  • Step 3、编写 tabBar 代码

  用自定义组件的方式编写即可,该自定义组件完全接管 tabBar 的渲染。另外,自定义组件新增 getTabBar 接口,可获取当前页面下的自定义 tabBar 组件实例。这里使用 Vant Weapp 底部导航栏,用于在不同页面之间进行切换。


总结

  感谢观看,这里就是npm包的总结,也是基础篇总结,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹

  也欢迎你,关注我。👍 👍 👍

  原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。

相关文章
|
9天前
|
JavaScript Linux 数据安全/隐私保护
node内网安装npm私服以及依赖包上传发布verdaccio
node内网安装npm私服以及依赖包上传发布verdaccio
127 1
|
9天前
|
缓存
发布第一个npm包的过程记录
发布第一个npm包的过程记录
19 0
|
9天前
|
小程序
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
微信小程序启动报错 WXML file not found: ./miniprogram_npm/@vant/weapp/action-sheet/index.wxml
46 3
|
9天前
|
小程序 开发工具 开发者
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
【微信小程序】微信开发者工具 引用 vant-weapp时“miniprogram/node_modules/@babel/runtime/index.js: 未找到npm包入口文件” 解决办法
42 1
message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogra
message: 没有找到可以构建的 NPM 包,请确认需要参与构建的 npm 都在 `miniprogra
|
9天前
|
存储 缓存 资源调度
ES Module使用-原理-包管理工具npm(二)
ES Module使用-原理-包管理工具npm
74 0
|
9天前
|
JSON 资源调度 JavaScript
ES Module使用-原理-包管理工具npm(一)
ES Module使用-原理-包管理工具npm
82 0
ES Module使用-原理-包管理工具npm(一)
|
9天前
|
存储 编解码 小程序
抖音小程序开发中遇见的坑点
在抖音小程序开发中,需注意10大坑点:遵守小程序限制与规范;解决兼容性问题;优化数据加载速度;适应分享功能限制;处理视频播放挑战;优化图片加载显示;管理资源文件;提升用户体验;考虑安全性;及时更新维护。通过测试、优化和遵循官方文档,可克服这些问题,打造优质小程序。
|
9天前
|
小程序 前端开发 API
小程序全栈开发中的多端适配与响应式布局
【4月更文挑战第12天】本文探讨了小程序全栈开发中的多端适配与响应式布局。多端适配涉及平台和设备适应,确保统一用户体验;响应式布局利用媒体查询和弹性布局维持不同设备的布局一致性。实践中,开发者可借助跨平台框架实现多平台开发,运用响应式布局技术适应不同设备。同时,注意兼容性、性能优化和用户体验,以提升小程序质量和用户体验。通过这些方法,开发者能更好地掌握小程序全栈开发。
|
9天前
|
小程序 前端开发 API
微信小程序全栈开发中的异常处理与日志记录
【4月更文挑战第12天】本文探讨了微信小程序全栈开发中的异常处理和日志记录,强调其对确保应用稳定性和用户体验的重要性。异常处理涵盖前端(网络、页面跳转、用户输入、逻辑异常)和后端(数据库、API、业务逻辑)方面;日志记录则关注关键操作和异常情况的追踪。实践中,前端可利用try-catch处理异常,后端借助日志框架记录异常,同时采用集中式日志管理工具提升分析效率。开发者应注意安全性、性能和团队协作,以优化异常处理与日志记录流程。

热门文章

最新文章

推荐镜像

更多