首页 > 编程语言 >微信小程序中实现自定义省市区选择

微信小程序中实现自定义省市区选择

时间:2023-01-06 18:45:19浏览次数:58  
标签:npm vant 自定义 微信 程序 使用 省市区

背景: 1.小程序官方提供的省市区组件的数据与原有的数据对应不上,官方的数据太旧

    2.小程序重构以后没有在使用vant等框架

实现过程:

1.安装依赖

  a.微信小程序使用npm包配置:

    1.初始化package.json (有时不成功可能是以往安装npm包的残留)

npm init -y

    2、勾选允许使用 npm(新版微信小程序开发工具忽略这一步,默认可用npm下载)  

    3、下载 npm 包 (js可直接使用,ts个人引入未成功,用别的方法引入)

npm i @vant/area-data

    4、构建 npm    状态栏  —>  工具  —>  构建npm 

2.数据的处理

  个人因为多个地方使用,处理成了两种,一个是树形结构,一种是省市区的二维数组。引入:

import { areaList } from '@vant/area-data';

3.实际使用

  

 

 最后例子代码:https://gitee.com/yuexiayunsheng/dem-list/tree/master/region

标签:npm,vant,自定义,微信,程序,使用,省市区
From: https://www.cnblogs.com/foxing/p/16996909.html

相关文章

  • (笔记)在每个 Linux 用户SSH登录时执行自定义脚本
     有些时候,我们需要在linux用户登录时执行我们自己编写的脚本,比如登录时给个友好的交互输出提示。为了实现该目的,我们有必要去了解一下linux在用户登录时执行内部shell的......
  • Asp.Net Core 中IdentityServer4 授权中心之自定义授权模式
    一、前言上一篇我分享了一篇关于Asp.NetCore中IdentityServer4授权中心之应用实战的文章,其中有不少博友给我提了问题,其中有一个博友问我的一个场景,我给他解答的还不......
  • 微信开发者工具安装扩展插件教程
    第一步:打开微信开发者工具,然后点击菜单栏的设置  第二步:点击通用设置       第三步:进入设置后,点击扩展        第......
  • H5分享调用微信分享界面
    非要在h5页面调用分享。然后分享到微信朋友圈,首先明确一点,微信H5分享是没有自定义分享按钮组件的,只能引导用户去主动触发右上角三个点的按钮。目前只有APP或微信浏览器右上......
  • 微信小程序 商品布局 宫格、列表、大图模式切换
    https://blog.csdn.net/m0_61073617/article/details/125104141?spm=1001.2101.3001.6650.5&utm_medium=distribute.pc_relevant.none-task-blog-2%7Edefault%7EOPENSEARCH......
  • javashop配置微信支付
    1、登录后台->找到设置->配送和支付->支付方式2、此处需要配置:卖家微信账户id、支付appid、微信安全校验码、密钥1)卖家微信账户id:就是pay.weixin.qq.com,微信商户中心里面的......
  • IDEA的postfix自定义,自定义postfix
    大家熟悉使用IDEA的都知道LiveTemplates的自定义功能,可谓是大大增加了我们的开发速度但是postfix以前一直是使用固定的配置,没有办法自定义 偶然的机会打开postfix看到一个......
  • centos7下docker设置阿里云镜像(自定义阿里云镜像)
    1、登陆自己的阿里云aliyun.com2、找到容器镜像服务3、找到镜像加速器4、打开文件/etc/docker/daemon.json将圈起来的字符串替换掉如下图所示5、重新加载daemon以及重启dock......
  • 【微信小程序】小程序原生代码生成海报[转]
    官方文档https://github.com/Kujiale-Mobile/Painter  目录结构(亲测有效) 海报【微信小程序】小程序原生代码生成海报==>https://blog.csdn.net/weixin_422321......
  • ubuntu 安装微信
    1下载wine包点击链接就可以下载wine包deb格式2下载微信微信包deb格式3安装两个包sudoapt-getinstall-f-y./ukylin-wine_70.6.3.25_amd64.debsudoapt-g......