支付宝小程序使用uView实现省市区三级联动的后续

小邓不爱吃芹菜

已于 2022-03-22 12:14:03 修改

阅读量1.7k

点赞数

分类专栏：小程序文章标签： vue 小程序

于 2022-03-22 11:01:45 首次发布

本文链接：https://blog.youkuaiyun.com/qq_42445648/article/details/123654015

版权

小程序专栏收录该内容

7 篇文章

订阅专栏

博主分享了在使用uView1.0开发支付宝小程序时遇到的三级联动问题，初次滑动选择失效，后续通过调整设置和发现bug，寻求解决方案的过程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

上一篇讲的是使用uView2.0实现省市区三级联动（优快云），最后无疾而终

这次我打算一雪前耻，使用uVIew1.0版本。

很好支持支付宝小程序，然后我按照官网的步骤一顿操作。。

hbuilderX的插件市场居然标明不支持支付宝小程序？？？

我就不信邪了，不用插件市场引入不就好了吗？使用npm不香吗？啊，真是一个小机灵鬼！

npm安装
使用npm的方式安装，能更方便进行升级。

// 安装
npm install uview-ui@1.8.4

接下来就是各种配置了，话不多说，直接去官网搬过来，附上官网链接（npm安装方式配置 | uView - 多平台快速开发的UI框架 - uni-app UI框架）

关于SCSS
uView依赖SCSS，您必须要安装此插件，否则无法正常运行。

如果您的项目是由HBuilder X创建的，相信已经安装scss插件，如果没有，请在HX菜单的 工具->插件安装中找到"scss/sass编译"插件进行安装， 如不生效，重启HX即可
如果您的项目是由vue-cli创建的，请通过以下命令安装对sass(scss)的支持，如果已安装，请略过。
// 安装node-sass
npm i node-sass -D

// 安装sass-loader
npm i sass-loader -D
#准备工作
在进行配置之前，请确保您已经根据安装中的步骤对uView进行了npm安装，如果没有，请先执行安装：

// 如果您的项目是HX创建的，根目录又没有package.json文件的话，请先执行如下命令：
// npm init -y

// 安装
npm install uview-ui@1.8.4
#配置步骤
#1. 引入uView主JS库
在项目根目录中的main.js中，引入并使用uView的JS库，注意这两行要放在import Vue之后。

// main.js
import uView from "uview-ui";
Vue.use(uView);
#2. 在引入uView的全局SCSS主题文件
在项目根目录的uni.scss中引入此文件。

/* uni.scss */
@import 'uview-ui/theme.scss';
#3. 引入uView基础样式
注意！

在App.vue中首行的位置引入，注意给style标签加入lang="scss"属性

<style lang="scss">
	/* 注意要写在第一行，同时给style标签加入lang="scss"属性 */
	@import "uview-ui/index.scss";
</style>
#4. 配置easycom组件模式
此配置需要在项目根目录的pages.json中进行。

温馨提示

uni-app为了调试性能的原因，修改easycom规则不会实时生效，配置完后，您需要重启HX或者重新编译项目才能正常使用uView的功能。
请确保您的pages.json中只有一个easycom字段，否则请自行合并多个引入规则。
// pages.json
{
	"easycom": {
		"^u-(.*)": "uview-ui/components/u-$1/u-$1.vue"
	},
	
	// 此为本身已有的内容
	"pages": [
		// ......
	]
}

直接使用