💌 所属专栏:【微信小程序开发教程】
😀 作 者:我是夜阑的狗🐶
🚀 个人简介:一个正在努力学技术的CV工程师,专注基础和实战分享 ,欢迎咨询!
💖 欢迎大家:这里是CSDN,我总结知识的地方,喜欢的话请三连,有问题请私信 😘 😘 😘
您的点赞、关注、收藏、评论,是对我最大的激励和支持!!!🤩 🤩 🤩
前言
大家好,又见面了,我是夜阑的狗🐶,本文是专栏【微信小程序开发教程】专栏的第47篇文章;
今天开始学习微信小程序的第28天💖💖💖,开启新的征程,记录最美好的时刻🎉,每天进步一点点。
🎉🎉🎉不知不觉已经学习小程序 28 天了,每天下完班之后都要接着看视频学习并写博客记录,说实话感觉还挺充实的,可能游戏玩多了想学习绷紧一下大脑。正所谓不进则退嘛,这句话真的触动我个人内心,加上学习新的技术这个过程也挺快乐的,加油吧,准备进击进阶篇–项目。
专栏地址:【微信小程序开发教程】, 此专栏是我是夜阑的狗微信小程序开发过程的总结,希望能够加深自己的印象,以及帮助到其他的小伙伴😉😉。
如果文章有什么需要改进的地方还请大佬不吝赐教👏👏,【源代码下载地址】。
一、安装和配置 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
默认为 miniprogram
,package.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
对象接收store
、fields
和actions
这三个属性。
- 在页面
- 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包的总结,也是基础篇总结,如果觉得有帮助,请给文章点个赞吧,让更多的人看到。🌹 🌹 🌹
也欢迎你,关注我。👍 👍 👍
原创不易,还希望各位大佬支持一下,你们的点赞、收藏和留言对我真的很重要!!!💕 💕 💕 最后,本文仍有许多不足之处,欢迎各位认真读完文章的小伙伴们随时私信交流、批评指正!下期再见。🎉
更多专栏订阅:
- 😀 【LeetCode题解(持续更新中)】
- 🌼 【鸿蒙系统】
- 👑 【Python脚本笔记】
- 🚝 【Java Web项目构建过程】
- 💛 【微信小程序开发教程】
- ⚽ 【JavaScript随手笔记】
- 🤩 【大数据学习笔记(华为云)】
- 🦄 【程序错误解决方法(建议收藏)】
- 🚀 【软件安装教程】
订阅更多,你们将会看到更多的优质内容!!