自己的微信小程序学习笔记——第三方UI库Lin-Ui的加载及使用

Posted 2022-10-16 小小河神纠结多

其他微信小程序的学习笔记

自己的微信小程序学习笔记【1】——小程序开发工具的使用及项目文件说明
自己的微信小程序学习笔记【2】——从零开始新建项目

---

文章目录

• 其他微信小程序的学习笔记
• 前言
• 一、Lin-UI组件库
• • 1.使用组件库的前提
  • 2.Lin-Ui的安装方式
• 二、Lin-Ui组件的使用

---

前言

       微信小程序所提供的组件的样式一般无法达到我们的设计效果，这时候，外部组件库就可以提供非常美观的组件。作为学习笔记，本文使用的是Lin-UI组件库，有必要给大家提供一下连接：

• Lin-UI 官网：https://doc.mini.talelin.com
• github 仓库地址：https://github.com/TaleLin

一、Lin-UI组件库

       Lin UI 是基于 微信小程序原生语法 实现的组件库。遵循简洁，易用的设计规范。

1.使用组件库的前提

• Lin-UI组件库需要提前安装Node-js
• 确保npm可以使用。

确认是否已经安装好Node-js。可以在终端中输入命令：

node -v
npm -v

安装成功的话，这两个指令是会输出相应的版本号

2.Lin-Ui的安装方式

       首先使用在微信小程序开发工具里打开终端：

一步步使用以下指n令：

npm init 指令可以直接点击回车

npm init
npm i lin-ui@0.8.7

完成之后，会在项目的根目录下生成package.json文件和node_modules文件夹，这时候需要构建npm:

二、Lin-Ui组件的使用

       Lin-Ui组件也属于自定义组件，所以需要在页面配置例如welcome.json中配置这个组件的名字及路径:

  "usingComponents": 
    "l-avatar":"/miniprogram_npm/lin-ui/avatar/index"
  

其中：

• “l-avatar”： 自定义组件的名字，可以自行定义
• “/miniprogram_npm/lin-ui/avatar/index”：对应其组件的路径，这个是头像组件

配置完成之后，就可以在.wxml中使用该组件名称的组件了。

open-data 获取头像的组件目前已经被微信收回了，不能使用这个接口来获取微信用户头像及昵称了。具体请看Lin-Ui的官网