All Projects → treadpit → Wx_selectarea

treadpit / Wx_selectarea

Licence: mit
微信小程序-省市(区)地址选择联动 🌋

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to Wx selectarea

Hswiper Wx
微信小程序swiper插件
Stars: ✭ 167 (-33.47%)
Mutual labels:  wxapp
Wxapp Redux Starter
微信小程序,集成redux,并且提供了方便快捷的开发环境;内置好奇心日报Demo...
Stars: ✭ 205 (-18.33%)
Mutual labels:  wxapp
Addok
Search engine for address. Only address.
Stars: ✭ 226 (-9.96%)
Mutual labels:  address
Xpmjs
微信小程序云端增强 SDK
Stars: ✭ 177 (-29.48%)
Mutual labels:  wxapp
Blog
想法,沉淀,总结,赋能
Stars: ✭ 194 (-22.71%)
Mutual labels:  wxapp
Wxa Comp Canvas Drag
小程序组件-canvas拖拽组件
Stars: ✭ 208 (-17.13%)
Mutual labels:  wxapp
Vanitysearch
Bitcoin Address Prefix Finder
Stars: ✭ 160 (-36.25%)
Mutual labels:  address
Wechat web devtools
微信开发者工具(微信小程序)linux完美支持
Stars: ✭ 2,664 (+961.35%)
Mutual labels:  wxapp
Meedu Wxapp
📜meEdu微信小程序。(wxapp for meedu)
Stars: ✭ 199 (-20.72%)
Mutual labels:  wxapp
Wept
微信小程序多端实时运行工具
Stars: ✭ 2,671 (+964.14%)
Mutual labels:  wxapp
Dva Wxapp
微信小程序的dva集成
Stars: ✭ 183 (-27.09%)
Mutual labels:  wxapp
Wxapp Webpack Plugin
📦 微信小程序 webpack 插件
Stars: ✭ 185 (-26.29%)
Mutual labels:  wxapp
Wechat Weapp Grouputils
微信小程序群应用,包括群通知、群接龙、群投票、群通讯录4大功能
Stars: ✭ 222 (-11.55%)
Mutual labels:  wxapp
Qqmusicplayer
微信小程序版QQ音乐
Stars: ✭ 168 (-33.07%)
Mutual labels:  wxapp
Weapp
🐧 微信小程序组件和功能封装,基于微信Component自定义组件开发
Stars: ✭ 235 (-6.37%)
Mutual labels:  wxapp
Node Postal
NodeJS bindings to libpostal for fast international address parsing/normalization
Stars: ✭ 165 (-34.26%)
Mutual labels:  address
Nice Lua
基于xlua的MVVM框架,支持Addressables, 统一渲染管线等Unity新特性
Stars: ✭ 207 (-17.53%)
Mutual labels:  address
Spoofmac
💼 Change your MAC address for debugging
Stars: ✭ 2,687 (+970.52%)
Mutual labels:  address
Wxdatabasedecryptkey
读取微信数据库聊天记录备份
Stars: ✭ 237 (-5.58%)
Mutual labels:  wxapp
Wxa Plugin Canvas
小程序海报组件-生成朋友圈分享海报并生成图片
Stars: ✭ 2,692 (+972.51%)
Mutual labels:  wxapp

Codacy Badge Dependency status Build Status GitHub issues

wx_selectArea

地址联动选择器采用微信小程序的 picker-view 组件

模板引入

提供 template 模板引入

1. 引入wxmlwxss

// example.wxml
<import src="../../template/index.wxml"/>
<template is="areaPicker" data="{{...areaPicker}}" />

// example.wxss
@import '../../template/index.wxss';

2. 组件初始化

import initAreaPicker, { getSelectedAreaData } from '../../template/index';

const conf = {
	onShow: () => {
    initAreaPicker();
  },
};

Page(conf);
2.1 自定义配置

目前仅支持是否隐藏第三极选择栏,默认显示

import initAreaPicker from '../../template/index';

const conf = {
	onShow: () => {
    initAreaPicker({
      hideDistrict: true,
    });
  },
};

Page(conf);
2.2 获取当前选择的省市区信息
import { getSelectedAreaData } from '../../template/index';

const conf = {
	btnClick() {
		console.table(getSelectedAreaData()); 
	},
};

Page(conf);

其他

API 请求地址在 config 文件夹中配置,GET 请求接口类似 https://your.com/api/area?code=123,服务端返回数据可参考例子中格式即可直接套用模板。

// request

http('https://your.com/api/area?code=0');

// response
{
    "message": "",
    "result": [
        {
            "code": 340000,
            "fullName": "安徽省",
            "mark": "",
            "outofrange": 0,
            "printMark": ""
        },
        {
            "code": 820000,
            "fullName": "澳门特别行政区",
            "mark": "",
            "outofrange": 0,
            "printMark": ""
        },
        ....
    ]
}

截图

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].