微信小程序实现省市区县四级联动

实现

template

<template><view class=""><view class="flex_s index_center_tops"><view class="flex index_center-center"><!-- <view class="icon_left" /> --><view class="index_left">居住地址</view></view><view class="flex"><pickermode="multiSelector":value="multiIndex":range="multiArray"@change="multiChange"@columnchange="columnChange"range-key="name"><view class="picker"><!-- {{ multiArray }}, -->{{ multiArray[0][multiIndex[0]].name }}{{ multiArray[0][multiIndex[0]].children[multiIndex[1]].name }}{{multiArray[0][multiIndex[0]].children[multiIndex[1]].children[multiIndex[2]].name}}{{multiArray[0][multiIndex[0]].children[multiIndex[1]].children[multiIndex[2]].children[multiIndex[3]].name}}</view></picker><view class="icon_right" /></view></view><view style="width:100%;"><textareatype="text"v-model="text"maxlength="100"style="padding:20px;background-color:#fff"placeholder="请输入居住地址"/></view><view class="btns"><view class="btn">保存</view></view></view>
</template>

script

JSON自己去找

<script>
export default {data() {return {text: "",multiData: require("../../utils/data.json"),multiIndex: ["0", "0", "0", "0"],multiArray: [],text1: ""};},mounted() {var _this = this;console.log(_this.multiData);var multiData = _this.multiData;var multiIndex = _this.multiIndex;console.log();console.log(283, multiData);// 初始化多列数据this.multiArray = [multiData,multiData[0].children,multiData[0].children[0].children,multiData[0].children[0].children[0].children];},methods: {// 获取多列的索引multiChange: function(e) {var multiIndex = e.detail.value;//   console.log(multiIndex);this.multiIndex = multiIndex;this.text1 =this.multiArray[0][multiIndex[0]].name +this.multiArray[0][multiIndex[0]].children[multiIndex[1]].name +this.multiArray[0][multiIndex[0]].children[multiIndex[1]].children[multiIndex[2]].name +this.multiArray[0][multiIndex[0]].children[multiIndex[1]].children[multiIndex[2]].children[multiIndex[3]].name;console.log(this.text1);},// 选择列columnChange: function(e) {// console.log(e);var _this = this;var multiData = _this.multiData;var multiIndex = _this.multiIndex;var columnIndex = e.detail.column;var columnValue = e.detail.value;multiIndex[columnIndex] = columnValue;this.multiArray = [multiData,multiData[multiIndex[0]].children,multiData[multiIndex[0]].children[multiIndex[1]].children,multiData[multiIndex[0]].children[multiIndex[1]].children[multiIndex[2]].children];}},components: {},computed: {}
};
</script>

style

<style lang="scss">
.picker {font-family: PingFangSC-Regular;font-weight: 400;font-size: 28px;// color: #999999;letter-spacing: 0.46px;text-align: right;margin-right: 30px;margin-top: 8px;
}
.btns {position: relative;top: 30px;width: 100%;
}
.btn {margin: 81px auto 0 auto;width: 690px;height: 100px;line-height: 100px;background: #3aa1f2;border-radius: 6px;font-family: PingFangSC-Medium;font-weight: 500;font-size: 32px;color: #ffffff;text-align: center;
}
.index_center_tops {width: 100%;background: #ffffff;padding: 25px 30px;border-bottom: 1px solid #ccc;.icon_leftadd {background: url("../../static/image/my/APP_grxxxg.png");background-size: 100% 100%;width: 50px;height: 50px;}.icon_left {background: url("../../static/image/my/APP_gywm.png");background-size: 100% 100%;width: 50px;height: 50px;}.icon_leftone {background: url("../../static/image/my/APP_tcdl.png");background-size: 100% 100%;width: 50px;height: 50px;}
}
.flex {display: flex;input {font-family: PingFangSC-Regular;font-weight: 400;font-size: 28px;// color: #999999;letter-spacing: 0.46px;text-align: right;margin-right: 30px;}
}.flex_s {display: flex;justify-content: space-between;
}.index_left {margin-left: 20px;font-family: PingFangSC-Regular;font-weight: 400;font-size: 28px;color: #333333;margin-top: 8px;
}.icon_right {background: url("../../static/image/my/wd_fh.png");background-size: contain;width: 18px;height: 30px;margin-top: 12px;
}
</style>

`以下是支付宝支付`

业务场景介绍：
H5移动端支持微信支付 [ 微信支付分为微信内支付（JSAPI支付官方API）和微信外支付（H5支付官方API）] && 支付宝支付 [手机网站支付转 APP 支付官方API ]

订单生成逻辑：前端请求后端提交订单，后端去和微信或者支付宝对接生成订单（后续支付都是这个逻辑进行的对接）

一、移动端微信支付，vue中如何玩？
在移动端微信支付分为微信内支付和微信外支付。
1.在订单组件中选择支付方式之后在支付页面先去判断是否是在微信内：

//判断是否微信is_weixn(){var ua = window.navigator.userAgent.toLowerCase();if (ua.match(/MicroMessenger/i) == 'micromessenger'){return true;} else {return false;}},

2.触发立即支付方法，根据微信内外的不同请求后端不同的接口，如果是微信外支付非常简单了~
3.【微信外支付】下面先看微信外支付，官方文档也写的很清楚，后端返回一个url地址，前端的工作就是拿到这个url地址进行跳转就可以了，看一下2-3步代码：

handelPay() {if(this.wechatpayType == 'wxpay'){// console.log("微信内支付")let data={amount:this.number,}this.$http.insideWeChatPay(data).then( res => {if(res.data.code === 200){this.weChatParameter=res.data.data// console.log(this.weChatParameter,"微信内支付需要参数")this.weixinPay()}else{Toast({message: res.data.msg,position: 'middle',duration: 1000});}});} else if(this.wechatpayType == 'wxpay_php'){// console.log("微信外支付")let data={amount:this.number,}this.$http.outsideWeChatPay(data).then( res => {if(res.data.code === 200){let url=res.data.datawindow.location.replace(url)   //这里是后端返回的URL直接进行跳转即可完成微信外支付}else{Toast({message: res.data.msg,position: 'middle',duration: 1000});}});}},

4.在调起支付的页面监听从其他页面返回的事件，进行一些刷新业务逻辑的实现即可，至此微信外支付已经完成。

document.addEventListener("visibilitychange", function() {//需要的操作
});

5.【微信内支付】微信内支付比起微信外支付稍微复杂一点，但是也不难，（3步骤代码里面已经请求支付方式接口拿到了微信内支付所需要的参数）根据官方API
微信内置js对象 WeixinJSBridge，进行开发，至此微信浏览器内支付已经完成

 //解决微信内置对象报错weixinPay(data){var vm= this;if (typeof WeixinJSBridge == "undefined"){if( document.addEventListener ){document.addEventListener('WeixinJSBridgeReady', vm.onBridgeReady(data), false);}else if (document.attachEvent){document.attachEvent('WeixinJSBridgeReady', vm.onBridgeReady(data));document.attachEvent('onWeixinJSBridgeReady',vm.onBridgeReady(data));}}else{vm.onBridgeReady();}},//微信内置浏览器类，weChatParameter对象中的参数是3.步骤代码中从后端获取的数据onBridgeReady(){var  vm = this;var timestamp=Math.round(vm.weChatParameter.timeStamp).toString();WeixinJSBridge.invoke('getBrandWCPayRequest',{debug:true,"appId":vm.weChatParameter.appId,     //公众号名称，由商户传入"timeStamp":timestamp, //时间戳，自1970年以来的秒数"nonceStr":vm.weChatParameter.nonceStr, //随机串"package":vm.weChatParameter.package,"signType":vm.weChatParameter.signType, //微信签名方式："paySign":vm.weChatParameter.paySign, //微信签名jsApiList: ['chooseWXPay']},function(res){// 使用以上方式判断前端返回,微信团队郑重提示：res.err_msg将在用户支付成功后返回ok，但并不保证它绝对可靠。if(res.err_msg == "get_brand_wcpay_request:ok" ){Toast({message: '支付成功',position: 'middle',duration: 3000});vm.number=nullvm.$router.go(-1)//window.location.href = vm.BASE_URL + 'index.html#/depositResult'}else{Toast({message: '支付失败',position: 'middle',duration: 3000});}});},

6.微信内部浏览器支付也可以封装一下，在全局都可以直接调用：


//微信浏览器支付
function wxpay(params,callback){if (typeof WeixinJSBridge == "undefined"){if( document.addEventListener ){document.addEventListener('WeixinJSBridgeReady', onBridgeReady(params,callback), false);}else if (document.attachEvent){document.attachEvent('WeixinJSBridgeReady', onBridgeReady(params,callback)); document.attachEvent('onWeixinJSBridgeReady', onBridgeReady(params,callback));}}else{onBridgeReady(params,callback);}
}function onBridgeReady(params,callback){var that = thisWeixinJSBridge.invoke('getBrandWCPayRequest', {"appId":params.appId,          "timeStamp":params.timeStamp,         "nonceStr":params.nonceStr, "package":params.package,     "signType":params.signType, "paySign":params.paySign },function(res){  callback(res)}); }

7.组件中调用微信支付：


this.commonUtils.wxpay(res.data.data,function(payResult){if(payResult.err_msg == "get_brand_wcpay_request:ok" ){//执行}
})

二、移动端支付宝支付，vue中如何玩？
其实支付宝支付也有H5支付和支付宝浏览器支付，这里只做H5支付，因为已经满足了业务需求。
1.支付宝中的H5支付和PC端的一样，主要是后端的工作量，后端完成订单的生成之后返给前端的是form表单，前端只需要负责做页面的跳转即可：

//立即支付按钮onSubmit() {if (this.payWay == 1) {//支付宝支付this.$router.push({path: '/aliPay', query: {orderId: this.orderId}});} else if (this.payWay == 2) {//微信支付，这里跳转到本文的微信支付模块的3.步骤handelPay方法}},

2.选择支付宝方式之后进入支付宝承载页面：


<template><div v-html="html"></div>
</template>
<script>export default {data(){return{html:''}},methods:{fetchVideoPay(){let param={orderId: this.$route.query.orderId};this.$api.orderpage.videoAliPay(param).then( res => {this.html = res.data;this.$nextTick(() => {document.forms[0].submit()   //渲染支付宝支付页面})})}},mounted(){this.fetchVideoPay()}}
</script>

当然不想写承载页的还有其他方法调起支付，具体逻辑具体分析，根据不同的业务类型去变通比如：

const div = document.createElement('div');
div.innerHTML = (res.data);  //res.data是返回的表单
document.body.appendChild(div);
document.forms.alipaysubmit.submit();

3.进入到支付宝支付页（至此但有一个问题，调起支付后，用户中途取消支付或者点返回键会整个网页一起关闭退出，或者一直在进入支付页面，不知道有没有更好的SEO方案）

微信小程序支付宝小程序实现省市区县四级联动相关推荐

封装省市区县四级联动
效果展示图代码展示,复制调用接口,修改参数名直接可用 <template><div><el-row><el-col :span="12" ...
2021年新微信小程序开发系统源码易客多小程序saas系统扫码点餐小程序支付宝小程序快速生成系统源码源代码
2021年新微信小程序开发系统源码小程序saas系统扫码点餐小程序支付宝小程序快速生成系统产品介绍:易客多多合一小程序快速生成系统是厦门四六开科技有限公司开发的快速开发微信百度支付宝小程序生成系统, ...
微信小程序微信公众号支付宝小程序H5（获取信息用户信息，支付，分享，人脸识别）
文章目录一.微信小程序 1. 获取信息用户信息 2.支付 3.分享 4. 腾讯云小程序人脸核身二.微信公众号 1.获取信息用户信息 2.支付 3. 分享(普通分享) 4.分享(vue单页面配置分 ...
JS_js判断当前是否是微信浏览器，判断移动端浏览器类型，微信浏览器、支付宝小程序、微信小程序等
判断当前是否是微信浏览器 var ua = navigator.userAgent.toLowerCase(); var isWeixin = ua.indexOf('micromessenger') ...
android调用支付宝小程序,支付宝小程序蓝牙快速接入
支付宝小程序蓝牙快速接入基本流程对于有蓝牙接入需求的开发者,需要通过以下步骤完成蓝牙接入: 初始化蓝牙接口(my.openBluetoothAdapter) 初始化事件监听蓝牙适配器状态监听( ...
2023年实时获取地图边界数据方法，省市区县多级联动【附区县乡镇街道geoJson文件下载】
首先,来看下效果图在线体验地址:https://geojson.hxkj.vip,并提供实时geoJson数据文件下载可下载的数据包含省级geojson行政边界数据.市级geojson行政边界数据 ...
echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】...
首先,来看下效果图在线体验地址:https://hxkj.vip/demo/echartsMap/,并提供实时geoJson数据文件下载 echarts官方社区链接地址(可在线编辑):https:/ ...
echarts河北省json文件最新的_echarts地图边界数据的实时获取与应用，省市区县多级联动【附最新geoJson文件下载】...
首先,来看下效果图前段时间给公司弄了一套基于echarts map的地图数据展示的平台,开发过程中发现百度官方已经不提供地图下载了,于是只能期望能在网上搜到哪位大佬帮忙收集的json文件.找是找到了 ...
uni-app 微信小程序支付宝小程序（alipay）百度小程序（baidu），预览pdf(链接和base64) 及下载（仅微信），window.open uni.downloadFile
废话不多说直接上代码吧之前搜了一大堆有的没的,最终还是小伙伴巴拉文档一起找到的方案(离不开小伙伴的帮助,自己总容易陷入死局,在此鸣谢疾风李青!): 想起个事:一定要给这些路径的域名配到相应的开发管 ...
微信小程序支付html标签,微信小程序/支付宝小程序 WxParse解析富文本（html）代码...
image.png 二.复制到小程序utils目录下 image.png 三.在要使用的目标文件中具体路径根据目标文件定,当前目标文件在pages - news - detail 3.1.在目标文件 ...

微信小程序支付宝小程序实现省市区县四级联动

微信小程序实现省市区县四级联动

template

script

JSON自己去找

style

`以下是支付宝支付`

微信小程序支付宝小程序实现省市区县四级联动相关推荐

最新文章

热门文章

微信小程序 支付宝小程序 实现省市区县四级联动

微信小程序 实现省市区县四级联动

template

script

JSON自己去找

style

以下是 支付宝支付

微信小程序 支付宝小程序 实现省市区县四级联动相关推荐

最新文章

热门文章

微信小程序支付宝小程序实现省市区县四级联动

微信小程序实现省市区县四级联动

`以下是支付宝支付`

微信小程序支付宝小程序实现省市区县四级联动相关推荐