微信小程序中实现自定义省市区选择
背景: 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({});方法调用成功或者失败之后,有时 ...
随机推荐
- windows11 彻底修改c盘中文用户名
windows11 彻底修改c盘用户名 由于一开始注册的时候没有注意使用了中文名导致后来再使用一些应用的时候出现问题浪费了大量的时间找不出原因(例如:安装cuda 的时候在使用nvcc编译.cu文件的 ...
- 洛谷 P1208混合牛奶 题解
一道贪心算法不是很明显的题目,其实一般的递推也可以做. 大体思路:肯定优先购买单价最低的奶农的牛奶,那么就需要先根据牛奶单价进行排序,这里用结构体会更好一点.之后在从前往后一个一个枚举,直至购买的牛奶 ...
- 商城网站商品sku选择的js简易实现
商城网站商品sku选择的js简易实现 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta c ...
- Flutter 3.7 新特性:介绍后台isolate通道
Flutter 3.7 发布,本人对其中后台 isolate 通道比较感兴趣,迫不及待翻译了下Aaron Clarke文章,第一次翻译,有不足地方欢迎各位大佬们评论区指正,我将持续更新到本文,谢谢. ...
- Node.js+Koa2+TypeScript技术概览
最近几年一直使用Node.js作为后端服务平台,通过Koa2框架中间件快速搭建Web服务,但是使用JavaScript开发大型后端服务时会使程序变得难以维护,继而使用TypeScript语言开发,使编 ...
- Quartz.Net 官方教程 Tutorial 2/3(Listener 和 JobStore)
Listener 调度任务的监听,当前版本支持添加调度,触发器和任务的监听,其中触发器和任务的监听支持通过监听名称进行添加(Add*ListenerMatcher方法) 监听不能对外抛出异常,需要内部 ...
- spring注入静态变量有几种方法?不看的都掉坑里了!
springboot中经常会用到properties文件中的配置,一般使用@Value注入,但是针对Utils工具类,需要注入一个静态变量有几种方法?为什么有的同学注入的值为null? 代码示例 如果 ...
- SpringBoot 2.x 在Tomcat8上无法运行,报无法访问错误
非法访问:此Web应用程序实例已停止.无法加载[].为了调试以及终止导致非法访问的 这仅是我的一个Filter重写的时候没有重写他的其他两个方法,导致我在Tomcat8上不能运行,但在Tomcat9上 ...
- Vue34 VueX
1 简介 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化. vue官方搭配,专属使用 ...
- .net 多地点计算中心点
1.需求产生 快到周末了,几个远在各个区的朋友想要聚餐,为了照顾到彼此的距离,决定计算一下所有人的中心点,至此需求产生,下面开始编写代码. 2.编写代码 1)新建一个控制台程序 在NuGet程序包管理 ...