uniapp H5 JSSDK封装使用

朱雀 2022-12-20 05:35 317阅读 0赞

先看效果吧，

封装以后使用很方便，两行代码就能得到微信网页开发中的 jssdk 的 wx.config 执行了 wx.ready 还是 wx.error ，如果返回 true 就标识执行了ready ， 可以调用JSSDK的 API 了，如下图示例代码：

this.$common.Init.call(this);
    this.wxjssdkInti().then(rr => {
    	console.log('jssdk初始化成功', rr)
    	wx.getLocation({
    		type: 'wgs84', 
    		success: function (res) {
    			var latitude = res.latitude; // 纬度，浮点数，范围为90 ~ -90
    			var longitude = res.longitude; // 经度，浮点数，范围为180 ~ -180。
    		}
    	});
    })

![2020111018022171.png][]

封装的目录结构代码：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70][]

wxJsSdk.js 代码：这里面引用的 config ，api ， requset 可以

[2020111018022171.png]: /images/20221120/f5da9c84c7744b76995838ebb4ca5632.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20201110175520382.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM1NzEzNzUy,size_16,color_FFFFFF,t_70

发表评论取消回复

表情：

评论列表（有 0 条评论，317人围观）

还没有评论，来说两句吧...

相关阅读

相关 vue+uniapp：小程序H5使用图表组件（uCharts）

一、打开组件网站：[https://ext.dcloud.net.cn/plugin?id=271][https_ext.dcloud.net.cn_plugin_id_271

布满荆棘的人生/ 2023年01月17日 09:27/ 0 赞/ 348 阅读

相关 uniapp兼容H5和小程序订阅消息授权开发封装，使用方便

本文使用 uniapp 框架开发，因为H5的订阅消息和小程序的订阅消息的授权流程不一样，但是很多地方需要使用授权，所以我封装了一个兼容H5和小程序订阅消息授权的方法，使用比较方

ゝ一纸荒年。/ 2022年12月20日 12:54/ 0 赞/ 273 阅读

相关 uniapp H5 JSSDK封装使用

先看效果吧，封装以后使用很方便，两行代码就能得到微信网页开发中的 jssdk 的 wx.config 执行了 wx.ready 还是 wx.error ，如果返回 true

朱雀/ 2022年12月20日 05:35/ 0 赞/ 317 阅读

相关 uniapp h5微信分享

安装微信sdk npm install jweixin-module --save var jweixin = require('jweixin-modul

落日映苍穹つ/ 2022年09月11日 11:19/ 0 赞/ 279 阅读

相关 uniapp 开发的H5 微信公众jssdk验签 invalid signature的问题

1. 根据微信jssdk文档说明配置传当前访问的url给后端 2. [验签地址][Link 1] https://mp.weixin.qq.com/debug/cgi-b

清疚/ 2022年09月10日 01:26/ 0 赞/ 242 阅读

相关【Uniapp】Uniapp 实现内嵌 H5（webview）提高性能

文章目录 Uniapp 实现内嵌 H5 1、如何内嵌H5 2、内嵌存在问题 3、调用js 4、无法使用缓存

╰半橙微兮°/ 2022年09月02日 13:47/ 0 赞/ 533 阅读

相关 uni-app 开发微信公众号（H5）JSSDK 的使用方式

因为这个jssdk被uni-app坑了好多天，作者说支持1.4版本，但是我用1.4的两个分享的新方法一直不支持。 ![在这里插入图片描述][watermark_type_Zm

╰+哭是因爲堅強的太久メ/ 2022年04月25日 02:20/ 0 赞/ 207 阅读

相关 uniapp实战——完成h5打包

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

阳光穿透心脏的1/2处/ 2021年07月25日 16:58/ 0 赞/ 885 阅读

相关 uniapp h5打包发布

1、在项目的manifest.json中 h5配置,配置页面标题即可 2、hbuilderX中点击发行网站-H5手机版 3、在打包后的文件夹中，命令行输入打开

缺乏、安全感/ 2021年07月24日 12:59/ 0 赞/ 704 阅读

相关 uniapp接口封装和使用

新建util文件夹，当前目录下新建api.js，代码为下 const BASE_URL = 'http://192.168.110.188:8001' /

- 日理万妓/ 2021年07月24日 12:03/ 0 赞/ 595 阅读