2021-02-06 让微信小程序和webviewH5实现互相通讯(demo)

新手学堂09

2021-02-06 让微信小程序和webviewH5实现互相通讯(demo),第1张

在微信小程序里,webviewH5向miniProgram通讯只能通过 postMessage 函数

然而这个函数却很鸡肋,小程序官方文档是这样描述的: 向小程序发送消息,会在特定时机(小程序后退、组件销毁、分享)触发组件的message事件

而且小程序官方文档里没有提到miniProgram如何向webviewH5通讯

在这个demo中, 展示了我是如何让webviewH5和miniProgram互相通讯

其实原理很简单:

success

failure

cancel

https://githubcom/abu3389/wx_app_webview

附加: Uniapp与webview通信用法

在web-view加载的本地及远程HTML中调用uni的API及网页和vue页面通讯

https://askdcloudnetcn/article/id-35083__page-9

首先登陆微信公布的简易教程网页,登陆上去后,点击导航栏上方的“工具”按钮。然后点击左侧边的导航栏“下载”按钮。

微信小程序开发工具有windows64,windows32和mac版本,根据自己的电脑情况,下载适合自己的版本。

把微信小程序开发工具下载回来后,选择适合的路径进行安装。

安装完开发工具后,会自动在桌面添加微信web开发者工具图标。通过点击微信web开发者工具图标打开微信小程序开发工具,然后用自己的微信软件扫描二维码登录,进入微信web开发者工具。

进入开发工具后,那个demo是由微信提供的,我们需要点击最左小角的关闭按钮,退出当前这个项目。然后点击添加项目添加一个新的项目,进入项目信息填充界面。

如果你有微信提供的AppID,那就再AppID那里填入你获取到的AppID。如果没有,那么就点击无AppID。

在项目名称那里,填入你自己项目的名称(这个随便填)。

项目目录那里,如果你是新创建一个项目,那么首先点击选择,选择一个存放你项目的文件夹。如果你是导入项目,那么就找到你那个项目的位置,直接导入就可以了。

最后店家添加项目就可以了。

1、在微信小程序制作之前先去百度搜索微信公众号,在网址里找到小程序,在这个微信公众号官方平台去编辑制作微信小程序,在网址里找到帐号分类中的小程序,点击图标进入,点击“前往注册”按钮。

2、点击导航栏,登录或重新注册一个新账号后新建一个空白模板或者直接套用里面有的模板,通过组合各类功能,组件添加来制作微信小程序。下载开发者工具,填入APPID并打包以及把里面的文件进行解压、上传。

  在微信公众平台单独注册微信小程序账号需要300元的认证费,但如果有已经认证过的微信公众服务号,就可以直接快速注册微信小程序账号了。小编今天就给大家带来微信公众号快速注册并认证小程序的图文教程。

1、访问https://mpweixinqqcom/扫码登录微信公众号,在左侧栏点击“小程序管理”,然后点击“快速注册并认证小程序”到下一步;

2、进入快速创建小程序说明页面,勾选协议,点击“快速创建”到下一步;

3、使用管理员微信扫码验证;

4、认证通过后选择复用资质,默认主体资质已勾选,把运营信息、微信认证资质都勾选,然后点击“下一步”;

5、按照要求填写小程序账号信息(用来单独登录小程序平台的),确认无误点击“提交”;

6、此时微信会发一封验证邮件到邮箱,登录邮箱查看验证邮件;

7、点击验证链接,继续跳转到小程序账号注册页面;

8、填写管理员信息,并用本人微信扫码验证(该微信将作为小程序的管理员账号),然后点击“下一步”;

9、提示微信小程序账号已完成注册并认证。点击前往首页跳转到登录页面;

10、输入第5步中填写的小程序账号(邮箱)和密码登录;

11、可直接填写“小程序信息”,点击“填写”;

12、根据提示填写小程序的信息,全部填写完毕并确认无误后,点击“提交”完成小程序信息的填写。

注:服务类目如果不清楚如何填写建议根据业务范围在网络上搜索一下最接近的服务类目。

这样通过微信公众号快速注册并认证小程序的流程就已经完成了。如果你有已经注册并认证过的微信公众服务号,建议选择这种方法注册,既节约注册时间还可以节省300元认证费。