小程序：LinUI组件库

地址：https://doc.mini.talelin.com/

项目初始化

切换目录：

C:\Users\maxin>cd C:\Users\maxin\WeChatProjects\miniprogram-3

项目初始化：

npm init

项目初始化后，会在项目目录下出现package.json的文件，

可以在这个文件中随时修改刚才的配置。

{
  "name": "miniprogram-3",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

安装LinUI

C:\Users\maxin\WeChatProjects\miniprogram-3>npm i lin-ui@0.8.7

npm WARN miniprogram-3@1.0.0 No description
npm WARN miniprogram-3@1.0.0 No repository field.

+ lin-ui@0.8.7
added 1 package from 1 contributor and audited 1 package in 11.591s
found 0 vulnerabilities

这时项目里就出现了node_modules的文件夹

package.json文件里也多了有关linUI的依赖

{
  "name": "miniprogram-3",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "dependencies": {
    "lin-ui": "^0.8.7"
  }
}

构建LinUI

微信开发者工具中，

工具 -> 构建npm ，即可构建LinUI

构建完成之后在项目目录上若出现miniprogram_npm (miniprogram是项目名称），

说明构建成功！

定义自定义组件

自定义组件 要有前缀

所有组件首文件都是index

配置文件：welcome.json

告诉机器 组件的位置

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

引用自定义组件l-avatar：

<!--pages/yes/yes.wxml-->
<view class="container">
     <l-avatar l-text-class="l-avatar-text" class="l-avatar" placement="bottom" open-data="{{['userAvatarUrl','userNickName']}}" size="180"/>
	
    <text class="motto">Hello ,大家好 ！</text>
    <view class="journey-container">
      <text class="journey">开启小程序之旅</text>
    </view>
</view>

opendata: 引用什么数据

placement:bottom,top 引用的数据是水平还是垂直排列

size:组件大小