精华内容
下载资源
问答
  • VUE项目引入微信jssdk

    千次阅读 2018-05-03 10:36:06
    我们的一个vue + webpack的 SPA项目需要在微信中使用,因此需要导入微信的jssdk库。通过搜索发现npm有微信jssdk的依赖包: weixin-js-sdk, 于是导入依赖包npm i -S weixin-js-sdk1前端页面Usageimport wx from '...

    我们的一个vue + webpack的 SPA项目需要在微信中使用,因此需要导入微信的jssdk库。

    通过搜索发现npm有微信jssdk的依赖包: weixin-js-sdk, 于是

    • 导入依赖包
    npm i -S weixin-js-sdk
    • 1
    • 前端页面Usage
    import wx from 'weixin-js-sdk'
    
    export default {
        created(){
         let param = {
            debug:true,
            url:'http://localhost:8081/productgroups',
            jsApiList: [
              'chooseWXPay',
              'checkJsApi'
          ]};
          wechatlib.queryJsConfig(param,(err,obj)=>{
            if(err){
              return this.$toast(err);
            }
    
            console.log('jsconfig ',obj);
    
            wx.config(obj);
    
            wx.ready(()=>{
              console.log('wx.ready');
            });
    
            wx.error(function(res){
    
              console.log('wx err',res);
    
              //可以更新签名
            });
          });
        }
    }
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8
    • 9
    • 10
    • 11
    • 12
    • 13
    • 14
    • 15
    • 16
    • 17
    • 18
    • 19
    • 20
    • 21
    • 22
    • 23
    • 24
    • 25
    • 26
    • 27
    • 28
    • 29
    • 30
    • 31
    • 32
    • 33

    wechatlib中获取jsconfig的方法

    queryJsConfig(param,callback){
        networklib.post('/wechat/jsconfig',param).then(obj=>{
    
          callback(null,obj);
        })
            .catch(err=>{callback(err)});
      },
    
    • 1
    • 2
    • 3
    • 4
    • 5
    • 6
    • 7
    • 8

    这里的jsconfig由后端服务器API生成

    TO BE CONTINUE

    展开全文
  • Taro框架中开发H5使用微信分享

    千次阅读 2019-07-05 15:39:31
    第一步先引入微信jsSDK //微信分享js <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js "></script> 由于做的是H5,所以需要先检测用户是用普通浏览器打开的项目,还是用微信浏览器...

    Taro框架中开发H5使用微信分享

    1. 第一步先引入微信jsSDK
      在这里插入图片描述
      在这里插入图片描述
    //微信分享js
    <script src="https://res.wx.qq.com/open/js/jweixin-1.4.0.js "></script>
    

    由于做的是H5,所以需要先检测用户是用普通浏览器打开的项目,还是用微信浏览器打开的项目,在你需要做分享的页面封装一个检测方法。

    //检测浏览器的方法
      isWeiXin = () => {
          var ua = navigator.userAgent.toLowerCase();
          if (ua.match(/MicroMessenger/i) == 'micromessenger') {
          console.log(" 是来自微信内置浏览器")
    
          return true;
          } else {
          console.log("不是来自微信内置浏览器")
    
          return false;
          }
      }
    

    根据返回的不同值来做分享操作,普通浏览器是长按复制链接分享,微信浏览器里面是提示点击右上角分享。

    普通浏览器分享操作

    在这里插入图片描述

    微信浏览器分享操作

    在这里插入图片描述

    分享的js代码,初始化配置参数需要后台给,这样就可以分享出去给用户看到了。

    wx.config({
            debug: false,
            appId: '',
            timestamp: '',
            nonceStr: '',
            signature: '',
            jsApiList: [
                'onMenuShareTimeline',
                'onMenuShareAppMessage'
            ]
        });
        // 微信JSSDK开发
        wx.ready(function () {
            // 分享给朋友
            wx.onMenuShareAppMessage({
              title: '', // 标题
              desc: '', // 说明文字
              link: '', // 链接
              imgUrl: '', // 分享的图标
              fail: function (res) {
                alert(JSON.stringify(res));
              }
            });
    
            // 分享到朋友圈
            wx.onMenuShareTimeline({
              title: '', // 标题
              link: '', // 链接
              imgUrl: '', // 分享的图标
              fail: function (res) {
                alert(JSON.stringify(res));
              }
            });
        });
    
    
    展开全文
  • 腾讯地图的 下载sdk/qqmap-wx-jssdk.min.js Taro.getLocation({ type: 'gcj02', //返回可以用于 Taro.openLocation的经纬度 success: function (res) { ... //下载qqmap-wx-jssdk,然后引入其中的js文件

    腾讯地图的

    下载sdk/qqmap-wx-jssdk.min.js

    Taro.getLocation({
          type: 'gcj02', //返回可以用于 Taro.openLocation的经纬度
          success: function (res) {
            const latitude = res.latitude
            const longitude = res.longitude
          //下载qqmap-wx-jssdk,然后引入其中的js文件
      
            var QQMapWX = require('../../utils/sdk/qqmap-wx-jssdk.min.js');
            var qqmapsdk = new QQMapWX({
              key:getGlobalData("key") // 必填    getGlobalData("key")  是我配置的全局文件 需替换自己个的
            });  
            //逆地址解析,通过经纬度获取位置等信息
            qqmapsdk.reverseGeocoder({
              location:{latitude,longitude},
              success: function(res){
                console.log(res)
                //获取当前城市
                  console.log(res.result.address_component.city);
                }
              })
          }
        })
    

    **使用腾讯API 获取城市列表 **

      //获取中国所以城市信息
      getDistrictList() {
        var QQMapWX = require('../../utils/sdk/qqmap-wx-jssdk.min.js');
        var MapWX = new QQMapWX({
          key: getGlobalData("QQkey")
        });
        MapWX.getCityList({
          success: function (res) {
            console.log(res)
          },
          fail: function (res) {
            console.log(res);
          },
          complete: function (res) { console.log(res); }
    
        })
    
      }
    

    高德地图的

    下载 amap-wx.js

      //高德地图获取地址信息
        var myAmapFun = require('../../utils/amap-wx.js'); 
        var myAmapFun = new myAmapFun.AMapWX({ key: getGlobalData("key") });  //key是自己的
        myAmapFun.getRegeo({
          success: function (data) {
            console.log(data)
          },
          fail: function (info) {
            console.log(info)
          }
        })
    
    展开全文
  • Taro小程序开发过程中,往往会遇到h5页面与原生页面互相通讯的过程,而微信小程序为webview组件提供了JSSDK,使用方式:1.在h5项目的入口文件(即index.html)中与meta标签同一层级下,添加远程依赖 <script type...

    Taro小程序开发过程中,往往会遇到h5页面与原生页面互相通讯的过程,而微信小程序为webview组件提供了JSSDK,使用方式:
    1.在h5项目的入口文件(即index.html)中与meta标签同一层级下,添加远程依赖

    <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>
    

    以上即在整个项目全局引入了JSSDK(这里不得不吐槽一下微信小程序开发官方文档,我一开始愣是没有看明白,谁让咱是新手呢)。


    2.接下来就是使用api了,但是目前我们只能使用sdk提供的有限方法。
    举例常见的页面跳转方法:
    // javascript  跳转到小程序原生页面

    wx.miniProgram.navigateTo({url: '/path/to/page'})   


    这里taro webview小程序有个小bug,即如果h5页面内部跳转之后,虽然设置了h5页面的title标题,但在webview顶部只会显示第一次加载的title,在web端跳转之后title切换正常。这里有个不算友好但能解决title无法改变的方法,即在h5页面跳转代码修改为调用桥接的原生api再次跳转到webview页面以达到可以刷新title的目的。
    至于为什么不用Taro提供的修改title的方法,见我另外一篇博客:Taro小程序webview使用及API

    向原生webview页面发送消息:

    //h5页面向原生webview页面发送消息通讯,注意不是立即发送,一般在特定时机(小程序后退、组件销毁、分享)触发并收到消息
    wx.miniProgram.postMessage({ data: 'foo' })
    wx.miniProgram.postMessage({ data: {foo: 'bar'} })

    webview页面 webview组件监听onMessage事件,即可接受到此消息通知数组。这里也可以参考我的另外一篇博客:Taro小程序webview使用及API,两者加起来一起使用。

    //判断当前是否是小程序的环境,返回boolean值
     

    wx.miniProgram.getEnv(function(res) { console.log(res.miniprogram) })  

    以上即为本人的使用心得,如有帮助,请记得点赞、关注三连~
     

    展开全文
  • 所以就需要使用微信公众平台提供的JSSDK来调用扫一扫功能。仅以此来记录自己的学习过程,也希望能帮助到有此需求的一些朋友。 过程中参考文章有:https://blog.csdn.net/u011327333/article/details/50439...
  • 首先要下载腾讯地图提供...import QQMapWX from '../../sdks/qqmap-wx-jssdk'  设置好后,就可以开始使用了。  let qqmapsdk = new QQMapWX({ key: '自己申请的key' }) let _this = this Taro.get...
  • 在index中引入需要的qqmap.js(这里会有一个小问题,没有注册的js,在打包时,不会打包,所以请去index.ejs去注册) 下面是代码 @click="chooseFail">取消 ;color:black;font-weight: 900;">位置 ...
  • jsSDK地址 第五步 在所需页面引入文件 import QQMapWX from "@/lib/qqmap-wx-jssdk.min.js" 第六步 通过wx.getLocation 获取用户地址,也可以用wx.chooseLocation(这个是用户可以选择的),第一个是自动获取的 wx....
  • 'wx' is not defined no-undef

    千次阅读 2020-02-28 00:25:13
    在h5页面中,因为要从h5页面跳转到小程序页面,所以就要引入微信的jssdk, 前提动态引入微信的jssdk // 动态加载js脚本文件 h5跳转小程序 还需要加载一个微信的jssdk const script = document.createElement('...
  • h5跳转微信小程序

    2021-04-01 16:06:00
    需求:点击短信内链接,跳转小程序1、逻辑代码1.1获取打开该h5的设备类型1.2 微信内跳转h5,调用jssdk1.2.1 绑定域名1.2.2 引入JS文件1.2.3 通过config接口注入权限验证配置1.3 非微信内置浏览器跳转h51.4 在移动端...
  • 如何调用微信的jssdk,首先这是需要后端开发人员的配合的 var appId = “”; var timestamp = “”; var nonceStr = “”; var signature = “”; 前面那四个参数需要后台传给我们 同时界面需要引入js,这个可以...
  • 2.// 引入SDK核心类 var QQMapWX = require('../../utils/qqmap-wx-jssdk') 3.// 实例化API核心类 var qqmapsdk = new QQMapWX({ key: "77RBZ-PD7KP-S56DU-LVTOG-RCDGE-KPF3K" // 必填 }); 4.经纬度转换 //监听...
  • 版本:Taro 1.3.9,样式语言:scss 以Taro编译微信小程序&h5为例,react语法 需求:获取定位城市信息1、登录[腾讯位置服务](https://lbs.qq.com/),添加Key2、编译微信小程序2.1 流程2.2 安装依赖并使用2.3 函数...
  • 微信小程序

    2020-11-11 10:30:32
    3,react 方式taro 微信开发者工具 小程序ID:开发,开发设置 基础 wxml html 页面骨架 wxss css 样式 xx.js js 业务逻辑 xx.json json配置文件(所有页面写在pages里) pages里数组的第一项就是首页 事件: bin...
  • 由于在小程序和APP需要复用一套页面,所以使用h5嵌套在各种平台上 ...Taro使用: 在webview的页面中 {this.state.access_token && <WebView src={this.state.url && this.state.url }
  • 32、小程序性能背景 京喜小程序自去年双十一上线微信购物一级入口后,时刻迎接着亿级用户量的挑战,细微的...除此之外,京喜首页在微信小程序、H5、APP 三端都有落地场景,为了提高研发效率,我们使用了 Taro[1] 框架实
  • 小程序内嵌H5页面判断微信及小程序环境 ...1.H5页面引入jweixin-1.3.2.js 2. var ua = window.navigator.userAgent.toLowerCase(); if(ua.match(/MicroMessenger/i) == 'micromessenger'){ ...
  • 粗暴点!...引入js: <script src="https://res.wx.qq.com/open/js/jweixin-1.0.0.js" ></script> function addWxInvoiceBtn(){ console.info("here is addWxInvoiceBtn()!"); ...
  • 小程序外接成H5的注意事项...或者利用 script 标签引入(html文件内) <script src="https://cdn.bootcss.com/vConsole/3.3.4/vconsole.min.js"></script> <script> // 初始化 var vConsole = new
  • 框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验,并从底层支持 Vue.js 语法和构建工具体系。 项目主页: ...
  • 京喜小程序的高性能打造之路

    千次阅读 2020-03-27 08:42:12
    除此之外,京喜首页在微信小程序、H5、APP 三端都有落地场景,为了提高研发效率,我们使用了 Taro[1] 框架实现多端统一,因此下文中有部分内容是和 Taro 框架息息相关的。 怎么定义高性能?— 提起互联网应用性能这...
  • 框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验,并从底层支持 Vue.js 语法和构建工具体系。 项目主页:...
  • 2018年度国产开源软件排行

    千次阅读 2019-12-18 10:30:19
    框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验,并从底层支持 Vue.js 语法和构建工具体系。   项目...
  • } } 获取用户经纬度的方法参照wx.getLocation() 二、利用腾讯地图的位置服务 // 引入SDK核心类 var QQMapWX = require('../../utils/qqmap-wx-jssdk.js'); Page({ onLoad: function() { var _this = this; _this....
  • 适合有一定前端开发基础。 通过本场 Chat 您将掌握以下知识: 什么是大前端?大前端的定义; 快速掌握大前端的技术栈; 从零开始架构一套基于 Uni-App 框架的模板代码,主要封装底层架构,实现一套代码兼容 H5,小...
  • 框架基于 Vue.js 核心,mpvue 修改了 Vue.js 的 runtime 和 compiler 实现,使其可以运行在小程序环境中,从而为小程序开发引入了整套 Vue.js 开发体验,并从底层支持 Vue.js 语法和构建工具体系。 项目主页:...
  • WePY 本身使用的是类 Vue 的语法,要转换为 Vue 运行在 Web 端的话,内置组件直接使用 Vue 的形式编写,使用时直接引入这个 Vue 组件。内置 API 使用 WePY 提供的 JSSDK 去模拟微信端、H5等提供的 API。 因此,...

空空如也

空空如也

1 2
收藏数 36
精华内容 14
热门标签
关键字:

taro引入jssdk