微信小程序中实现自定义省市区选择
背景: 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({});方法调用成功或者失败之后,有时 ...
随机推荐
- 数据结构与算法 -> 大顶堆与小顶堆
一.大顶堆 大顶堆是一种数据结构,它是一颗完全二叉树,并且满足以下性质: 每个节点的值都大于或等于它的子节点的值 因此,大顶堆的根节点(也称为堆顶)总是最大的元素 二.小顶堆 小顶堆也是一种数据结构, ...
- 【Java刷题】初始化List应该选择ArrayList还是LinkedList
文章目录 前言 题目 解题思路 遇到的坑:ArrayList和LinkedList 未通过代码 通过代码 小结 ArrayList和LinkedList的区别 在刷题的时候应该如何选择 排序效率 测试 ...
- 移动 WEB 开发之 阿里百秀移动端页面制作
一.技术选型 二.需求分析 1.页面布局分析 2. 屏幕划分 三.页面制作 1. 项目前期准备 搭建项目结构 创建 html 骨架结构以及引入相关样式 <head> <meta ch ...
- 淘宝数据采集之js采集
搜索页面采集,数据在控制台哦!!! 搜索页面采集,数据在控制台哦!!! 搜索页面采集,数据在控制台哦!!! 既然能打到控制台,当然也能传到系统!!! 既然能打到控制台,当然也能传到系统!!! 既然能打 ...
- 剑指Offer 05. 替换空格(java解题)
目录 1. 题目 2. 解题思路(通用 3. 数据类型功能函数总结 4. java代码 1. 题目 请实现一个函数,把字符串 s 中的每个空格替换成%20. 示例 1: 输入:s = "We ...
- 获取Excel列标
/// <summary> /// 获取Excel列标 A B C...Z等 /// </summary> /// <param name="col" ...
- Cookie参数、Header参数
FastAPI Cookie参数 定义Cookie参数与定义Query和Path参数一样. 第一个值是默认值,还可以传递所有验证参数或注释参数: from typing import Optional ...
- ES6的Set详解
数组去重 let arr = [ 1,2,3,4,5,3,2 ] // 数组去重 // 方法一 let newArr = [new Set(arr)] console.log(newArr); // ...
- 一篇文章让你了解这个基于树莓派而设计的工业计算机-CM4 Industrial
CM4 Industrial是一款基于 Raspberry Pi / 树莓派 Compute Module 4,由EDATEC面向工业应用设计的嵌入式计算机设计的工业嵌入式计算机.系统可以根据不同的应 ...
- JZOJ 2934. 【NOIP2012模拟8.7】字符串函数
题目大意 个等长的由大写英文字母构成的字符串 \(a\) 和 \(b\),从 \(a\) 中选择连续子串 \(x\),从 \(b\) 中选出连续子串y. 定义函数 \(f_{x,y}\) 为满足条件 ...