微信小程序开发实战之 06-微信小程序开发进阶

自定义组件

创建自定义组件

微信小程序自定义组件一般放在 components 文件夹下，由 JSON、JS、WXML、WXSS 文件组成。

组件的 JSON 文件中，需要声明 component 属性，将属性值设置为 true 以表示其是一个组件。

JSON 复制代码

{
    "component": true,
    "usingComponents": {
    }
}

组件的 JS 文件中，需要调用 Component 函数构建组件。

JavaScript 复制代码

Component({
    properties: {},
    data: {},
    methods: {}
});

Component 函数的基本选项：

名称	描述
data	组件的初始数据，用于组件模板渲染
properties	组件的属性列表，用于接收外界传递到组件中的数据可以为其指定数据类型和类型，但其本质上与 data 没有区别
methods	组件的事件处理函数

示例：创建自定义组件

测试组件配置文件（components/test/test.json）：

JSON 复制代码

{
    "component": true,
    "usingComponents": {
    }
}

测试组件页面结构（components/test/test.wxml）：

HTML 复制代码

<button bindtap="showMessage">点我欢迎{{name}}的到来</button>

测试组件页面逻辑（components/test/test.js）：

JavaScript 复制代码

Component({
    properties: {
        name: {
            type: String,
            value: '张三'
        }
    },
    data: {},
    methods: {
        showMessage() {
            wx.showToast({
                title: "欢迎你，" + this.data.name
            })
        }
    }
});

使用自定义组件

自定义组件的引用方式分为局部引用和全局引用。

局部引用，即在页面配置文件（pages/xxx/xxx.json）中引用自定义组件。
全局引用，即在全局配置文件（app.json）中引用自定义组件。

引用自定义组件的基本用法：

JSON 复制代码

"usingComponents": {
    "组件标签": "组件路径"
}

示例：使用自定义组件

首页页面配置文件（pages/index/index.json）：

JSON 复制代码

{
    "usingComponents": {
        "navigation-bar": "/components/navigation-bar/navigation-bar",
        "test": "/components/test/test"
    }
}

首页页面结构（pages/index/index.wxml）：

HTML 复制代码

<test name="多仔"></test>

示例效果：

UI 组件库

Vant Weapp

Vant Weapp 是有赞前端团队开发的一套开源的微信小程序 UI 组件库，其界面风格统一、功能齐全，提供了一整套 UI 基础组件和业务组件，能够快速搭建出风格统一的页面。

Vant Weapp 文档：https://vant-ui.github.io/vant-weapp/0.x/#/intro

在微信小程序中使用 Vant Weapp，需要利用 npm 将 Vant Weapp 安装到项目中，并进行相关配置。

微信小程序默认没有初始化 package.json，故需要先初始化 package.json。
在全局配置文件（app.json）中，需要删除 style 配置项，以关闭新版基础组件样式，避免样式混乱。
微信小程序不能使用 npm 包，需要在微信开发者工具中将 npm 包转换成微信小程序可以使用的包。
使用 Vant Weapp 组件时，需要局部或全局导入对应的组件。

示例：Vant Weapp

终端执行：

PowerShell 复制代码

npm init -y

npm i vant-weapp -S --production

全局配置文件（app.json）：

PowerShell 复制代码

{
	"pages": [
    	"pages/index/index"
  	],
  	"window": {
    	"navigationBarTextStyle": "black",
    	"navigationStyle": "custom",
    	"enablePullDownRefresh": true
  	},
  	"componentFramework": "glass-easel",
  	"sitemapLocation": "sitemap.json",
  	"lazyCodeLoading": "requiredComponents"
}

构建 npm 包：

首页页面配置文件（pages/index/index.json）：

JSON 复制代码

{
	"usingComponents": {
    	"navigation-bar": "/components/navigation-bar/navigation-bar",
    	"van-button": "vant-weapp/button"
  	}
}

首页页面结构（pages/index/index.wxml）：

HTML 复制代码

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>

示例效果：

WeUI

WeUI 是微信官方设计团队为微信移动 Web 量身设计的一套与微信原生视觉体验一致的组件库。

WeUI Web 文档：https://github.com/Tencent/weui/wiki

WeUI-MiniProgram 文档：https://wechat-miniprogram.github.io/weui/docs/

在微信小程序中使用 WeUI，可以在全局配置文件（app.json）中直接启用 WeUI，或利用 npm 将 WeUI 安装到项目中。

WeUI 组件库中的组件有两种类型，一种是直接通过 class 样式类使用的组件（WeUI Web），另一种是需要在页面配置或全局配置中引入的组件（WeUI-MiniProgram）。

示例：WeUI

全局配置文件（app.json）：

JSON 复制代码

"useExtendedLib": {
    "weui": true
}

首页页面结构（pages/index/index.wxml）：

HTML 复制代码

<a role="button" class="weui-btn weui-btn_default">按钮</a>

示例效果：

uni-app

uni-app 概述

uni-app 是使用 Vue.js 开发的一个前端框架，基于该框架可以很方便地进行多端项目开发，其支持的平台包括 Android、iOS、响应式 Web 和各种主流的小程序等。

使用 uni-app 开发项目的优势：

平台能力不受限，一套代码多端发行。
性能体验优秀，加载新页面速度快，可以自动更新数据。
基于通用技术栈 Vue.js，学习成本低。
生态开放、组件丰富。

HBuilderX

uni-app 官方推荐使用 HBuilderX 来开发 uni-app 项目。

HBuilderX 下载：https://dcloud.io/hbuilderx.html

uni-app 项目结构

在 HBuilderX 中新建一个 uni-app 项目。

uni-app 项目的基本结构：

名称	描述
common	存放共用文件
components	存放可复用的 UI 组件
pages	存放所有页面
static	存放静态资源文件，如图片、视频等
unpackage	存放编译后的文件
App.vue	页面根组件，用于配置全局样式、生命周期函数等
main.js	入口文件，在入口文件中可以导入 Vue 实例，将 Vue 实例挂载到页面上使用
manifest.json	项目配置文件，用于指定应用名称、AppID、Logo 等打包信息
pages.json	用于对 uni-app 项目进行全局配置，决定页面文件的路径、导航栏、标签栏等信息
uni.scss	保存 uni-app 项目内置的常用样式变量，方便整体控制应用风格

将 uni-app 项目运行至微信小程序

使用 uni-app 开发完成项目后，可以将 uni-app 项目运行至微信小程序。

打开项目配置文件（manifest.json），获取 uni-app 应用标识 AppId。

在项目配置文件（manifest.json）中，配置微信小程序 AppId。

在 HBuilderX 运行设置中，配置微信开发者工具路径。

在微信开发者工具中，开启服务端口。

在 HBuilderX 中，将项目运行到小程序模拟器-微信开发者工具。

uni-app 项目全局配置文件

在 uni-app 中，可以通过修改全局配置文件（pages.json）来对 uni-app 项目进行全局配置，包括页面文件的路径、导航栏、底部标签栏等。

JSON 复制代码

{
	"pages": [
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "uni-app"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}