微信小程序中实现自定义省市区选择
背景: 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
微信小程序中实现自定义省市区选择的更多相关文章
- 微信小程序中的自定义组件
微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 ...
- 微信小程序中的自定义组件(components)
其实小程序开发很像vue和react的结合,数据绑定和setData 重新渲染页面的数据,最近发现连写组件都是很像,也是醉了,自我认为哈, 因为小程序可以将页面内的功能模块抽象成自定义组件,以便在 ...
- 微信小程序中的自定义组件 以及 相关的坑
Step1 我们初始化一个小程序(本示例基础版本库为 1.7 ),删掉里面的示例代码,并新建一个 components 文件夹,用于存放我们以后开发中的所用组件,今天我们的目的是实现一个 首页 组件, ...
- 微信小程序中自定义modal
微信小程序中自定义modal .wxml <modal hidden="{{hidden}}" title="这里是title" confirm-text ...
- 微信小程序中的组件使用1
不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...
- 全栈开发工程师微信小程序-中(下)
全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...
- 微信小程序底部实现自定义动态Tabbar
多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...
- 微信小程序中如何使用WebSocket实现长连接(含完整源码)
本文由腾讯云技术团队原创,感谢作者的分享. 1.前言 微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现 ...
- 全栈开发工程师微信小程序-中(中)
全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...
- 微信小程序中this关键字使用技巧
转自:https://blog.csdn.net/qq_33956478/article/details/81348453 微信小程序中,在wx.request({});方法调用成功或者失败之后,有时 ...
随机推荐
- 算法学习笔记(3): 倍增与ST算法
倍增 目录 倍增 查找 洛谷P2249 重点 变式练习 快速幂 ST表 扩展 - 运算 扩展 - 区间 变式答案 倍增,字面意思即"成倍增长" 他与二分十分类似,都是基于" ...
- 对 Pulsar 集群的压测与优化
前言 这段时间在做 MQ(Pulsar)相关的治理工作,其中一个部分内容关于消息队列的升级,比如: 一键创建一个测试集群. 运行一批测试用例,覆盖我们线上使用到的功能,并输出测试报告. 模拟压测,输出 ...
- 《爆肝整理》保姆级系列教程-玩转Charles抓包神器教程(4)-Charles如何设置捕获会话
1.简介 前边几篇宏哥介绍了Charles界面内容以及作用.今天宏哥就讲解和分享如何设置Charles后,我们就可以愉快地捕获会话,进行抓包了.因为上一篇许多小伙伴看到宏哥的Charles可以分开看到 ...
- ChatGPT 背后核心技术的白话版
本文是关于ChatGPT 背后核心技术实现的一个通俗白话版,不涉及到的AI具体实现的技术细节哦. 在编排上增加了一些分割,内容具体如下: LLMs(大型语言模型) 如果将ChatGPT比作是动物,它就 ...
- 记一次失败的StackOverflow回答
有一位同学在StackOverflow上提问,他想创建一个 Future 类,异步的实现 Future 的构造,当构造完成之后自动调用 .then 方法,执行后面的逻辑 class Features ...
- evil 控制窗口大小,比快捷键方便
下面是vim原本的支持的键 可以用于 emacs evil ,evil 用这个比用快捷键还方面些 1.纵向调整 :res[ize] num 指定当前窗口为num列num行 :res[ize] +num ...
- 力扣每日一题2023.1.16---1813. 句子相似性 III
一个句子是由一些单词与它们之间的单个空格组成,且句子的开头和结尾没有多余空格.比方说,"Hello World" ,"HELLO" ,"hello w ...
- Creo9.0 安装破解图文教程 【2022年12月29日亲测有效】
前言 creo9.0正式版是一款非常优秀的3D建模设计软件.该软件界面美观,提供了CAD 技术.模制造绘图.多实体建模.多体设计.实时仿真.框架和焊缝设计等一系列强大的辅助设计功能,通过这些功能,让用 ...
- javaweb-LoginDemo在JdbcTemp的登录实现及总结+进阶javabean改进
刚开始发现- -我好像忘记了JdbcTemp的知识了,以为自己学漏了,重新回去看了一下,还好还记得,所以今天做一个案例: 案例分析: 登录的实现 步骤: 先导入jar包,然后写一个简单的html页面 ...
- STM32F4库函数初始化系列:PWM输出
1 void _TIM4_Configuration(void) 2 { 3 /* TIM4 Configuration --------------------------------------- ...