网站建设要那些收费项,电子商务网站开发开发背景,网站外链推广工具,宜家有做自己的网站吗#x1f48c; 所属专栏#xff1a;【微信小程序开发教程】 #x1f600; 作 者#xff1a;我是夜阑的狗#x1f436; #x1f680; 个人简介#xff1a;一个正在努力学技术的CV工程师#xff0c;专注基础和实战分享 #xff0c;欢迎咨询#xff01; … 所属专栏【微信小程序开发教程】 作 者我是夜阑的狗 个人简介一个正在努力学技术的CV工程师专注基础和实战分享 欢迎咨询 欢迎大家这里是CSDN我总结知识的地方喜欢的话请三连有问题请私信 文章目录前言一、安装和配置 vant-weapp 组件库二、全局数据共享三、API Promise 化四、自定义 tabBar总结前言 大家好又见面了我是夜阑的狗本文是专栏【微信小程序开发教程】专栏的第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 默认为 miniprogrampackage.json 在其外部npm 构建无法正常工作。需要手动在 project.config.json 内添加如下配置使开发者工具可以正确索引到 npm 依赖的位置。
Step 4、 构建 npm 包。 打开微信开发者工具点击 工具 - 构建 npm并勾选 使用 npm 模块 选项构建完成后即可引入组件。
二、全局数据共享 安装包、创建 Store、参考官方文档进行使用具体可分为这六步
Step 1、安装 MobX 相关的包 在项目中运行如下的命令安装 MobX 相关的包 npm install --save mobx-miniprogram4.13.2 mobx-miniprogram-bindings1.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-promise1.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题解持续更新中】 【Java Web项目构建过程】 【微信小程序开发教程】⚽ 【JavaScript随手笔记】 【大数据学习笔记华为云】 【程序错误解决方法建议收藏】 【软件安装教程】 订阅更多你们将会看到更多的优质内容
