Foreword:
To organize the data of uin-app, here are the framework data he supports.
Official Entrance: Entrance
Relevant information:
1. ColorUI - a high-value, high-efficiency applet component library
git source code: click me
Related project entry - a colorui-based mall project: click me
Implementation steps:
1. Download the project, find the colorui folder, and put it in the project
2. App.vue introduces the key Css main.css icon.css
<style>
@import "colorui/main.css";
@import "colorui/icon.css";
....
</style>3. main.js Import cu-custom components.
import cuCustom from './colorui/components/cu-custom.vue'
Vue.component('cu-custom',cuCustom)
4、page.vue The page can be called directly
<cu-custom bgColor="bg-gradual-blue" :isBack="true">
<block slot="backText">返回</block>
<block slot="content">导航栏</block>
</cu-custom>
| parameter | effect | Types of | Defaults |
|---|---|---|---|
| bgColor | background color class name | String | '' |
| isBack | Whether to enable return | Boolean | false |
| bgImage | background image path | String | '' |
| slot block | effect |
|---|---|
| backText | text when returning |
| content | middle area |
| right | Right area (the mini program side can be used very narrowly!) |
Achievement effect: click me to view
2. uView2.0 , the framework in uni-app, is very similar to ivew/element of vue
1. Installation
Hbuilder X Way
Download method configuration document
如果您是使用Hbuilder X开发的用户，您可以在uni-app插件市场通过uni_modules的形式进行安装，
此安装方式可以方便您后续在uni_modules对uView进行一键升级。
在uni-app插件市场右上角选择uni_modules版本下的使用HBuilderX导入插件，导入到对应的项目中即可。
注意： 此安装方式必须要按照下载方式安装的配置中的说明配置了才可用。Download address: uView2.0 is released, the sword is unsheathed, and the rivers and lakes are unified - DCloud plug-in market
NPM way
npm configuration documentation
Execute the following command in the project root directory:
// 如果您的根目录没有package.json文件的话，请先执行如下命令：
// npm init -y
npm install uview-ui
// 更新
// npm update uview-ui
Note: This installation method must be configured according to the instructions in the npm installation configuration before it is available, and the project name cannot have Chinese characters
2. Configuration
(Premise) If you don't have scss, please install it
// 安装node-sass
npm i node-sass -D
// 安装sass-loader，注意需要版本10，否则可能会导致vue与sass的兼容问题而报错
npm i sass-loader@10 -DInstallation configuration
Since uView supports npmand 下载installs in the same way, the configuration of the two is almost the same. Because of the compatibility of some platforms, the configuration of easycom is slightly different. In order not to cause confusion, the two methods are described separately here:
#Default unit configuration 2.0.12
In uView1.x, if the component parameter is a numerical value, the default is the rpxunit, but it rpxwill cause the size to be too large on the tablet. For higher usability, uView2.x will change the unit by default px. If you have some needs, You need to change the unit to rpx, you can do the main.jsfollowing configuration in:
......
// main.js，注意要在use方法之后执行
import uView from 'uview-ui'
Vue.use(uView)
// 如此配置即可
uni.$u.config.unit = 'rpx'
......3. Use
After configuration through npm and download, components can be used directly on a page without importimporting components.
<template>
<u-action-sheet :list="list" v-model="show"></u-action-sheet>
</template>
<script>
export default {
data() {
return {
list: [{
text: '点赞',
color: 'blue',
fontSize: 28
}, {
text: '分享'
}, {
text: '评论'
}],
show: true
}
}
}
</script>3. uni-app access to third-party authorized login
WeChat Open Platform Development Third-Party Authorized Login (1): Pre-development preparations
WeChat open platform development third-party authorized login (2): PC web page
WeChat open platform development third-party authorized login (3): Android client
WeChat Open Platform Development Third-Party Authorized Login (4): WeChat Official Account
WeChat Open Platform Development Third-Party Authorized Login (5): WeChat Mini Program