微信小程序和web之间的交互

邱秋5月前 22:40

背景

通常我们写了一套自适应的web程序,想在多种环境中使用.比如app里,微信小程序里,各种app分享中, 假如只是能使用app浏览,问题不大,但是要在被嵌入app里面和app本身交互,就要做各种折腾, 如是就有了本文.

ReactNative里折腾,请看这里

接入条件

  • 首先得有开发者权限
  • 你得有台服务器,有权限上传文件,不然验证无法通过
  • 必须是企业小程序,个人和海外小程序无法使用web-view组件
  • 你的相关域名配置了有效的证书,并且开启了https服务
  • 你要访问的网址必须加入了业务域名白名单,网址所调用的api接口必须加入了服务器域名白名单,并且api接口也使用的https协议

以上条件必须同时满足,缺一不可

微信JSSDK引入

外部引入

<script type="text/javascript" src="http://res.wx.qq.com/open/js/jweixin-1.4.0.js"></script>
//进一步提升服务稳定性,当上述资源不可访问时,可改访问
<script type="text/javascript" src="http://res2.wx.qq.com/open/js/jweixin-1.4.0.js "></script>

使用 AMD/CMD 标准模块加载方法加载

安装

npm i weixin-js-sdk

mian.js用使用

import wx from 'weixin-js-sdk'

判断是微信小程序环境

通过userAgentmicromessenger,或者window.__wxjs_environment来判断

从微信7.0.0开始,可以通过判断userAgent中包含miniProgram字样来判断小程序web-view环境。

import wx from 'weixin-js-sdk'

let OS = 'PC'  //假设有多种环境

let ua = window.navigator.userAgent.toLowerCase();
if (ua.indexOf('micromessenger') >= 0 || window.__wxjs_environment === 'miniprogram') { //在微信或者小程序中
  wx.miniProgram.getEnv((res) => {
    if (res.miniprogram) {//在小程序中
      OS = 'wxminiprogram'
      window.wx = wx
    } else {//在微信中
      OS = 'weixin'
    }
  });
}

引入了sdk,知道了环境变量,下面就是开干了.

交互示例 小程序端

使用小程序端的<web-view>组件, 新建/page/webview/index.wxml

web-view会自动铺满整个小程序页面,个人类型与海外类型的小程序暂不支持使用。
客户端 6.7.2 版本开始,navigationStyle: custom 对组件无效

<!-- 通过src 来传递当前url, 通过bindmessage 来监听html的传值 -->
<web-view src="{{url}}" bindmessage="getMessage"/>

新建/page/webview/index.js

// pages/webview/index.js
const app = getApp()
Page({
  data: {
    url: '',
    shareData: { },
    postData:{}
  },
  onLoad: function(options) {
    // nickName ,token 是登录之后拿到的信息 , 用来和h5 交互
    let nickName = wx.getStorageSync("nickName")
    let token = wx.getStorageSync("token")

    let url = options.url
    if (url) {
      //请注意传递url 请务必使用 decodeURIComponent 和 encodeURIComponent , 不然会白屏
      url = decodeURIComponent(url)
    } 
    //因为小程序 貌似还不能主动和H5 交互,所以拿到的登录信息,我们通过url 来传递.
    let localUrl = ''
    if (token) {
        localUrl =url + '?token=' + userToken + '&nickName=' + nickName
    }
    //犹豫地址存了token 和其他信息,分享会暴露,所以要手动重置分享地址 数据为 shareData
    this.setData({
      url: localUrl,
      shareData: {
        titil: '测试小程序',
        desc: '测试小程序藐视描述',
        path: url
      },
    })
  },
  getMessage(e) {
    //此处接收html传递过来的参数
    this.postData = e.detail.data;
  },
  /**
   * 用户点击右上角分享
   */
  onShareAppMessage() {
    //重置分享链接和路径
    return {
      title: this.shareData.title,
      desc: this.shareData.desc,
      path: this.shareData.path
    }
  }
})

交互示例 web端

在web端,我们知道如何判断web 是在小程序中, 可以通过微信jsskd 直接发送交互信息,和在原生的微信小程序里一样

做路由跳转

// 前面我们已经定义了window.wx = wx ,这里可以直接调用
// 还可以通过url 来获取token 等相关信息

if(OS == 'RN'){
  //这里假设我们有多重环境..
}
if (OS == 'wxminiprogram') {
  wx.miniProgram.navigateTo({ 
    url: '/pages/webview/index?url='+decodeURIComponent('https://www.chuchur.com?id=100')
  })
}

给小程序发送数据

wx.miniProgram.postMessage({
  data:{
    hello:'wrold'
  }
})
//web-view 则通过 bindmessage 来监听 传过来的数据

更多方法

wx.miniProgram.navigateBack() //返回
wx.miniProgram.switchTab() //切换底部的导航
wx.miniProgram.reLaunch() //重新加载
wx.miniProgram.redirectTo() //地址重定向
wx.miniProgram.getEnv() //获取当前环境	

相关问题

你有没有遇到过redirectTo死都无法跳转的问题呢,你怎么改他都不执行,或者执行成功了,还是无法跳转,你甚至改为redirectTo都没有用

因为redirectTo无法跳转到当前的page, 以及在app.json下面 tabBar=> list 里面定义的pagePath,假如你要跳转的url刚好在pagePath里面定义过,那么请使用switchTab

更多API

请参见官网API

请参见微信JS-SDK说明文档

本文于5月前 22:40发布在code分类下,当前已被围观448次

相关标签:html5,javascript,vue,

永久地址:https://www.chuchur.com/article/interaction-between-html-webchat-miniprogram

版权声明: 自由转载-署名-非商业性使用