背景: 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

微信小程序中实现自定义省市区选择的更多相关文章

  1. 微信小程序中的自定义组件

    微信小程序中的组件 前言 之前做小程序开发的时候,对于开发来说比较头疼的莫过于自定义组件了,当时官方对这方面的文档也只是寥寥几句,一笔带过而已,所以写起来真的是非常非常痛苦!! 好在微信小程序的库从 ...

  2. 微信小程序中的自定义组件(components)

     其实小程序开发很像vue和react的结合,数据绑定和setData  重新渲染页面的数据,最近发现连写组件都是很像,也是醉了,自我认为哈, 因为小程序可以将页面内的功能模块抽象成自定义组件,以便在 ...

  3. 微信小程序中的自定义组件 以及 相关的坑

    Step1 我们初始化一个小程序(本示例基础版本库为 1.7 ),删掉里面的示例代码,并新建一个 components 文件夹,用于存放我们以后开发中的所用组件,今天我们的目的是实现一个 首页 组件, ...

  4. 微信小程序中自定义modal

    微信小程序中自定义modal .wxml <modal hidden="{{hidden}}" title="这里是title" confirm-text ...

  5. 微信小程序中的组件使用1

    不管是vue还是react中,都在强调组件思想,同样,在微信小程序中也是使用组件思想来实现页面复用的,下面就简单介绍一下微信小程序中的组件思想. 组件定义与使用 要使用组件,首先需要有组件页面和使用组 ...

  6. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  7. 微信小程序底部实现自定义动态Tabbar

    多图警告!!! 最近在工作中遇到这样一个需求:微信小程序底部的Tab需要通过判断登录人的角色动态进行改变,想要实现这个功能依靠小程序原生的Tabbar是不可能实现的了,所以研究了一下自定义Tab,这里 ...

  8. 微信小程序中如何使用WebSocket实现长连接(含完整源码)

    本文由腾讯云技术团队原创,感谢作者的分享. 1.前言   微信小程序提供了一套在微信上运行小程序的解决方案,有比较完整的框架.组件以及 API,在这个平台上面的想象空间很大.腾讯云研究了一番之后,发现 ...

  9. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  10. 微信小程序中this关键字使用技巧

    转自:https://blog.csdn.net/qq_33956478/article/details/81348453 微信小程序中,在wx.request({});方法调用成功或者失败之后,有时 ...

随机推荐

  1. 用Java写一个分布式缓存——缓存淘汰算法

    前言 之前也用过一些缓存中间件,框架,也想着自己是不是也能用Java写一个出来,于是就有了这个想法,打算在写的过程中同步进行总结. 源码:weloe/Java-Distributed-Cache (g ...

  2. hashlib 模块 subprocess 模块 logging日志模块

    今日内容 hashlib加密模块 1.何为加密 将明文数据处理成密文数据 让人看不懂 2.为什么加密 保证数据的安全 3.如何判断数据是否加密的 一串没有规律的字符串(数字.字母.符号) 4.密文的长 ...

  3. 算法之Floyd-Warshall算法【c++】【图论】【最短路】

    我们作为刚学图论的小蒟蒻,先接触到的算法一定是图上最短路径算法.而最短路算法中最简单的当属Floyd-Warshall算法.下面是一些基本介绍: ​该算法可以计算图上任意两点间的最短路径 时间复杂度: ...

  4. 网络爬虫及openyxl模块

    网络爬虫及openyxl模块 一.第三方模块简介 1.第三方模块的用处 python之所以在这么多的编程语言中脱颖而出的优点是有众多的第三方库函数,可以更高效率的实现开发 2.第三方模块的使用 1.第 ...

  5. KEIL5、STM32CubeMX、STM32CubeIDE 下载、安装

    一.资源下载 Keil5下载链接: https://www.keil.com/download/product/ STM32 标准库芯片包下载链接: https://www.keil.com/dd2/ ...

  6. IDEA本地运行无法找到scope为provided的包

    异常描述 java.lang.ClassNotFoundExcetion 解决方案 Run->Edit Configrations 弹出如下窗口 1.选中你的应用,2.点击Modify opti ...

  7. http协议的请求方式

    协议 协议,就是通信双方去定义的一堆数据格式,并且共同遵守的标准. HTTP协议 HTTP是一个基于TCP/IP通信协议来传递数据,包括html文件.图像.结果等,即是一个客户端和服务器端请求和应答的 ...

  8. LeetCode_804. 唯一摩尔斯密码词

    题目 难度:简单 原文:https://leetcode-cn.com/problems/unique-morse-code-words/ 题目 国际摩尔斯密码定义一种标准编码方式,将每个字母对应于一 ...

  9. python导入和导出excel,以文件流形式返回前端

    一.导入excel 1. 安装依赖包 pip install xlrd 2. 读取excel getColIndex(colList:list,colName:str): try: return co ...

  10. imax6开发版_交叉编译

    下载 arm-linux-gnueabihf-gcc编译器 sudo apt install gcc-arm-linux-gnueabihf #安装完成后使用如下命令查看版本 arm-linux-gn ...