技术栈：uniapp-H5+uniapp-微信小程序（vue3+vite2+ts）
前言：在单位做项目的时候碰到一个需求，需要从微信小程序跳转到H5页面，这两个端都是使用uniapp编写的，查资料后决定使用webview来嵌入完成，然后考虑到还可能有参数（数据）需要传递，所以实现后记录一下。ps：以下代码我是根据查找的资料里从vue2改成vue3的写法，若有需要改回去即可
1.小程序端发送数据
在如下路径创建文件/webview/index.vue，也可自行命名
<template>
<web-view :webview-styles="webviewStyles" :src="url"></web-view>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { onShow, onReady, onLoad } from '@dcloudio/uni-app'
import qs from 'qs'
const webviewStyles = reactive({
progress: { color: '#FF3333' }
})
// 使用qs序列化地址，qs版本需要为@5.2.1，其他版本我试了会报错
const data = reactive({ id: 1, age: 18, name: '前端', ids: [69, 71] })
const url = ref('http://localhost:3000/#/pages/speechcraft/index?')
onLoad(() => {
// decodeURI避免中文乱码，indices: false去除默认格式
url.value += decodeURI(qs.stringify(data, { indices: false }))
})
</script>
<style lang='scss' scoped></style>
2.pages.json进行设置
添加该页面，然后可以在其他页面设置一个跳转动作，跳转到该页面就会自动进入H5页面
{
"path": "pages/webview/index",
"style": {
"navigationBarTitleText": "uni-app"
}
}
3.H5端进行数据接收
在路径跳转的页面接收，补充一点，根据查资料，小程序向H5传参只能通过URL来传递
<script lang='ts' setup>
import { ref, reactive, computed, onMounted, onBeforeMount } from 'vue'
import qs from 'qs' // 此处qs版本同样要为@5.2.1
onMounted(() => {
let routes = getCurrentPages();
console.log(routes[routes.length - 1].route) // 获取当前页面路由
console.log('获取传递的数据', qs.parse(window.location.href.split('?')[1]))
})
</script>
4.调试方式以及数据查看
此处是后来无意间看到的文章才知道在哪调试，在微信小程序中，到H5页面后，底部会有一个类似瓢虫的标志，下图为工具栏及打印出的参数
1.引入需要的模块
这块是我踩坑比较多的地方，是重点，首先在index.html中引入微信小程序和uniapp相关的SDK，放在<body></body>后面，两个都得引入，因为uni的SDK关联了微信的SDK
<!DOCTYPE html>
<html lang="en">
<head>...</head>
<body>...</body>
<!-- wx和uni的SDK -->
<script src="./src/static/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="./src/static/uni.webview.1.5.3.js"></script>
<script>
document.addEventListener('UniAppJSBridgeReady', function() {
uniWebview.getEnv(function (res) {
console.log('当前环境：' + JSON.stringify(res))
});
});
</script>
</html>
上述js文件的在线路径如下
<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script src="https://gitee.com/dcloud/uni-app/raw/dev/dist/uni.webview.1.5.3.js"></script>
2.更改文件内容
此处需要将uni.webview.1.5.3.js下载到本地，然后修改里面的内容，因为默认自带的方法名为uni，会和本地的uni命名冲突（官方案例是放在html原生页面里所以不影响，我放在vue项目里则会冲突），所以我改成了uniWebview，可以格式化后修改，位置如下，微信的SDK本地的和在线的都可以用
3.H5端发送数据
到之前接收的页面添加一些代码，用一个发送按钮进行调用
<template>
<u-button @click="sendMessage">发送</u-button>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted, onBeforeMount } from 'vue'
import qs from 'qs'
onMounted(() => {
// 此处为之前接收数据的代码
console.log('获取传递的数据', qs.parse(window.location.href.split('?')[1]))
})
const sendMessage = () => {
uniWebview.postMessage({
data: {
action: '我要向微信端传递的数据',
phoneNumber: '15314601234'
}
});
}
</script>
<style lang='scss' scoped></style>
4.小程序端进行数据接收
在<web-view></web-view>添加@message="reciveMessage"，下方添加const reciveMessage = (data: any) => {...}，在返回到小程序的时候即可接收
<template>
<web-view :webview-styles="webviewStyles" :src="url" @message="reciveMessage"></web-view>
</template>
<script lang='ts' setup>
import { ref, reactive, computed, onMounted } from 'vue'
import { onShow, onReady, onLoad } from '@dcloudio/uni-app'
import qs from 'qs'
onLoad(() => {
// 之前qs序列化的代码，省略掉部分
url.value += decodeURI(qs.stringify(data, { indices: false }))
})
const reciveMessage = (data: any) => {
uni.showToast({
title: "reciveMessage接收到消息：" + JSON.stringify(data.detail),
duration: 2000,
icon: 'none'
});
console.log("接收到消息：" + JSON.stringify(data.detail));
}
</script>
<style lang='scss' scoped></style>
5.调试方式以及数据查看
在微信小程序跳转回的页面即可看到
1、更多细节部分及兼容部分看官方文档：https://uniapp.dcloud.net.cn/component/web-view.html#web-view
2、uni改成uniWebview修改参考：https://ask.dcloud.net.cn/article/id-38847__page-3#reply
3、基本流程参考：http://t.zoukankan.com/lizhao123-p-12005868.html
4、需要引用微信SDK的原因参考：https://ask.dcloud.net.cn/article/35083
5、特别提示，只有认证过的企业账号才能在手机上真机调试正确跳转过去，个人账号现在不支持这功能，会报提示“web-view不支持打开非业务域名请重新配置”，参考文章：https://blog.csdn.net/Ever_____/article/details/123884677，但是开发时在微信小程序的详情设置中打开允许，在开发者工具里是能跳转的
前言一般来说，前端根据后台返回code码展示对应内容只需要在前台判断code值展示对应的内容即可，但要是匹配的code码比较多或者多个页面用到时，为了便于后期维护，后台就会使用字典表让前端匹配，下面我将在微信小程序中通过wxs的方法实现这个操作。为什么要使用wxs？{{method(a,b)}}可以看到，上述代码是一个调用方法传值的操作，在vue中很常见，多用于数据之间的转换，但由于微信小程序诸多限制的原因，你并不能优雅的这样操作，可能有人会说，为什么不用if判断实现呢？但是if判断的局限性在于如果存在数据量过大时，大量重复性操作和if判断会让你的代码显得异常冗余。wxswxs相当于是一个独立
项目介绍随着我国经济迅速发展,人们对手机的需求越来越大,各种手机软件也都在被广泛应用,但是对于手机进行数据信息管理,对于手机的各种软件也是备受用户的喜爱小学生兴趣延时班预约小程序的设计与开发被用户普遍使用,为方便用户能够可以随时进行小学生兴趣延时班预约小程序的设计与开发的数据信息管理,特开发了小程序的设计与开发的管理系统。小学生兴趣延时班预约小程序的设计与开发的开发利用现有的成熟技术参考,以源代码为模板,分析功能调整与小学生兴趣延时班预约小程序的设计与开发的实际需求相结合,讨论了小学生兴趣延时班预约小程序的设计与开发的使用。开发环境开发说明：前端使用微信微信小程序开发工具：后端使用ssm：VU
@作者:SYFStrive @博客首页:HomePage📜：微信小程序📌：个人社区（欢迎大佬们加入）👉：社区链接🔗📌：觉得文章不错可以点点关注👉：专栏连接🔗💃：感谢支持,学累了可以先看小段由小胖给大家带来的街舞👉微信小程序（🔥）目录自定义组件-behaviors 1、什么是behaviors 2、behaviors的工作方式 3、创建behavior 4、导入并使用behavior 5、behavior中所有可用的节点 6、同名字段的覆盖和组合规则总结最后自定义组件-behaviors 1、什么是behaviorsbehaviors是小程序中，用于实现
提供3种Ubuntu系统安装微信的方法，在Ubuntu20.04上验证都ok。1.WineHQ7.0安装微信：ubuntu20.04安装最新版微信--可以支持微信最新版，但是适配的不是特别好；比如WeChartOCR.exe报错。2.原生微信安装：linux系统下的微信安装(ubuntu20.04)--微信适配的最好，反应最快，但是微信版本只到2.1.1，版本太老，很多功能都没有。3.深度deepin-wine6安装微信：ubuntu20.04+系统deepin-wine6安装新版微信--综合比较好，当前个人使用此种方法1个月，微信版本3.4；没什么大问题，尚可。一、WineHQ7.0安装微信
对传统的餐饮商家来说，小程序很好地解决了餐厅线下线上连接的问题，在引流获客、节约人力、营销宣传、塑造会员体系、改善消费体验等方面都有很大帮助。小程序点餐可以帮助餐饮企业节省一大把人力开支。一个包含扫码点单、菜品管理、优惠券推送、外卖配送的小程序，商家花几万元就能完成开发测试并投入。商家为什么要开通“扫码点餐”1.解决服务员不够用的问题。2.不怕顾客跑单漏单。3.在微信就能管理菜品、查看营业额。4.订单小票显示顾客桌号和已点菜品。5.可在“附近的小程序”找到您的门店。如今餐饮业常用的三种经营模式：1堂食点单模式客人通过小程序堂食点单。商家可以在微信扫码点餐小程序管理后台根据自己店内情况来设置不同
技术选型1，前端小程序原生MINA框架cssJavaScriptWxml2，管理后台云开发Cms内容管理系统web网页3，数据后台小程序云开发云函数云开发数据库（基于MongoDB）云存储4，人脸识别算法基于百度智能云实现人脸识别一，用户端效果图预览老规矩我们先来看效果图，如果效果图符合你的需求，就继续往下看，如果不符合你的需求，可以跳过。1-1，登录注册页可以看到登录页有注册入口，注册页如下我们的注册，需要管理员审核，审核通过后才可以正常登录使用小程序1-2，个人中心页登录成功以后，我们会进入个人中心页我们在个人中心页可以注册人脸，因为我们做人脸识别签到，需要先注册人脸才可以进行人脸比对，进
我有三个属于同一个类的对象。一个是通过Item.new创建的，另外两个是从数据库(Mongoid)中提取的。我将这些对象中的一个/任何一个传递给另一个方法，并通过is_a?检查该方法中的类型:definitialize(item,attrs=nil,options=nil)super(attrs,options)raise'invaliditemobject'unlessitem.is_a?(Item)好吧，这次加薪被击中了。所以我在Rails控制台中检查类、is_a和instance_of。我得到相互矛盾的结果。为什么它们有相同的class但只有其中一个是那个class的instan
我在使用ExhuberantCtags跳转到Rubybang方法时遇到问题。我已经搜索过其他有类似问题的人，但找不到任何东西。可以使用以下小型Ruby类显示该问题的示例:classHellodefstartmethod!enddefmethod#Blahenddefmethod!#Blahendend当ctags-R.在此文件上运行时，生成的tags文件包含以下两行，表明这两种方法都是在生成时发现的:methodtest.rb/^defmethod$/;"fclass:Hellomethod!test.rb/^defmethod!$/;"fclass:Hello但是，如果我将光标放
在开发微信小程序的时候，我们可能需要开发环境和测试环境，或者其他环境，下面是切换环境的方法。首先需要明确的是：前端的页面代码是不区分环境的，环境的区分指的是云函数、云数据库、云存储这些。1、更改云函数的使用云环境这里我们从cloud1更改为test-cloud，这个改完是没有用的，因为在前端代码指定了使用的云环境。cloudfunctions文件和miniprogram文件虽然都在一个目录下，但是这两个没有直接联系。2、在evList.js中添加自己云环境evList.js存储了云环境列表，这里把test-cloud加到这个列表里，需要填写envId和alias，参照cloud1写就行。3、更
前言微信支付是企业级项目中经常使用到的功能，作为后端开发人员，完整地掌握该技术是十分有必要的。一、申请流程和步骤图1-1注册微信支付账号获取微信小程序APPID获取微信商家的商户ID获取微信商家的API私钥配置微信支付回调地址绑定微信小程序和微信支付的关系搭建SpringBoot工程编写后台支付接口发布部署接口服务项目使用微信小程序或者UniAPP调用微信支付功能支付接口的封装配置jwt或者openid的token派发原生微信小程序完成支付对接二、注册商家2.1商户平台商家或者企业想要通过微信支付来进行商品的销售，必须先通过微信平台（pay.weixin.qq.com）去将商家进行注册。注册成