小程序webview内嵌H5页面（vue）

小程序webview内嵌H5页面（vue）准备工作测试公众号域名前端项目后端项目小程序注意事项准备工作第一，小程序必须为企业小程序，个人不行；第二，需要公众号，没有的可以选择注册一个测试公众号。测试公众号测试公众号申请地址下图为申请成功后：接口配置信息：需要一个后端项目域名，自定义token（在config.json配置）这里配置看后面的后端项目代码。JS安全域名：填写前端项目域名，不要http:

五碗呜

3378人浏览 · 2021-06-30 14:50:38

五碗呜 · 2021-06-30 14:50:38 发布

小程序webview内嵌H5页面（vue）

准备工作
- 测试公众号
- 域名
前端项目
后端项目
小程序
注意事项

准备工作

第一，小程序必须为企业小程序，个人不行；第二，需要公众号，没有的可以选择注册一个测试公众号。

测试公众号

测试公众号申请地址
下图为申请成功后：
测试号

接口配置信息：需要一个后端项目域名，自定义token（在config.json配置）这里配置看后面的后端项目代码。
JS安全域名：填写前端项目域名，不要http://

域名

NATAPP实名

前端项目

index.html引入js文件

<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
<script type="text/javascript" src="https://js.cdn.aliyun.dcloud.net.cn/dev/uni-app/uni.webview.1.5.1.js"></script>

具体代码：
引入import wx from “weixin-js-sdk”;
import axios from “axios”;
import qs from “qs”;
------http://czekem.natappfree.cc/wxJssdk 后端接口地址

 var data = qs.stringify({
        url: window.location.href.split("#")[0]
      });
      axios
        .post(" http://czekem.natappfree.cc/wxJssdk", data, {
          headers: { "Content-Type": "application/x-www-form-urlencoded" }
        })
        .then(
          res => {
            wx.config({
              debug: true, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
              appId: res.data.appId, // 必填，公众号的唯一标识
              timestamp: res.data.timestamp, // 必填，生成签名的时间戳
              nonceStr: res.data.nonceStr, // 必填，生成签名的随机串
              signature: res.data.signature, // 必填，签名，见附录1
              jsApiList: [
                "scanCode",
                "chooseImage",
                "getLocalImgData",
                "previewImage",
                "startRecord",
                "stopRecord",
                "onVoiceRecordEnd",
                "playVoice",
                "pauseVoice",
                "stopVoice",
                "onVoicePlayEnd",
                "uploadVoice",
                "downloadVoice",
                "translateVoice",
                "getNetworkType",
                "scanQRCode"
              ] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            });
          },
          error => {}
        );

配置成功后，这里主要讲上传图片并获得base64形式的图片回显、预览图片

var that = this;//这一步很重要
      wx.chooseImage({
        count: 1,
        sizeType: ["original", "compressed"],
        sourceType: ["album", "camera"],
        success(res) {
          const localIds = res.localIds[0];//回调里该参数是数组形式，需要注意
          wx.getLocalImgData({
            localId: localIds.toString(), // 图片的localID
            success: function(res1) {
              var localData = res1.localData;
              let imageBase64 = "";
              if (localData.indexOf("data:image") == 0) {
                //苹果的直接赋值，默认生成'data:image/jpeg;base64,'的头部拼接
                imageBase64 = localData;
              } else {
                //此处是安卓中的唯一得坑！在拼接前需要对localData进行换行符的全局替换
                //此时一个正常的base64图片路径就完美生成赋值到img的src中了
                imageBase64 =
                  "data:image/jpeg;base64," + localData.replace(/\n/g, "");
              }
              that.imgUrl = imageBase64;//处理之后的路径 直接用img标签回显
            }
          });
        }
      });

data中的数据：
 imageList: [
        "https://img.weatherfood.com/eec00cd2-49e8-11e8-a253-00163e047408.png",
        "https://img.weatherfood.com/eec00cd2-49e8-11e8-a253-00163e047408.png"
      ],//图片列表 格式必须这样
      
  var that = this;
 alert(url);
 alert(that.imageList);
 wx.previewImage({
    current: url, // 当前显示图片的http链接
    urls: that.imageList,
    success: function(res) {
      console.log("预览成功了");
    }
 });

后端项目

config.json里的代码

{
  "wechat" : {
    "appID": "wx8693d94e16ac56e4",
    "appSecret": "7e2aa59f6aa6ad9b49ad4fa0b32448a4",
    "token": "wuwan8370",
    "prefix": "https://api.weixin.qq.com/cgi-bin/",
    "mpPrefix": "https://mp.weixin.qq.com/cgi-bin/"
  }
}

请求接口代码：
access_token和jsapi_ticket都有时效性，目前没做。

const app = express();
const express = require("express");
const request = require("request");
// 启动服务器
app.post("/wxJssdk", (req, res) => {
  console.log("请求成功");
  console.log(config.wechat.token); //config.json配置的token
  const grant_type = "client_credential";
  const appid = config.wechat.appID; //公众号的
  const secret = config.wechat.appSecret; //公众号的
  var access_toekn; //存储
  request(
    "https://api.weixin.qq.com/cgi-bin/token?grant_type=" +
      grant_type +
      "&appid=" +
      appid +
      "&secret=" +
      secret,
    (err, response, body) => {
      console.log("第一次请求");
      let accessTokenData = JSON.parse(body).access_token;
      if (accessTokenData) {
        access_toekn = accessTokenData;
        request(
          "https://api.weixin.qq.com/cgi-bin/ticket/getticket?access_token=" +
            access_toekn +
            "&type=jsapi",
          (err, response, body) => {
            const jsapi_ticket = JSON.parse(body).ticket;
            console.log(jsapi_ticket);
            const nonce_str = "123456"; // 密钥，字符串任意，可以随机生成
            const timestamp = new Date().getTime(); // 时间戳
            console.log(timestamp);
            //   const url = req.query.url; // 使用接口的url链接，不包含#后的内容
            const url = req.body.url;
            console.log(url);
            // 将请求以上字符串，先按字典排序，再以'&'拼接，如下：其中j > n > t > u，此处直接手动排序
            const str =
              "jsapi_ticket=" +
              jsapi_ticket +
              "&noncestr=" +
              nonce_str +
              "&timestamp=" +
              timestamp +
              "&url=" +
              url;
            console.log(str);
            // 用sha1加密
            const signature = sha1(str);
            console.log(signature);
            res.send({
              appId: appid,
              timestamp: timestamp,
              nonceStr: nonce_str,
              signature: signature,
            });
          }
        );
      } else {
        console.log("access_token不存在");
      }
    }
  );
});

小程序

<template>
	<view>
       <web-view :src="url" :webview-styles="webviewStyles" @onPostMessage="handleMessage"></web-view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {
				url: "http://wuwan.nat300.top/#/webView?id=22#wechat_redirect",
				webviewStyles: {
					progress: {
						color: '#3e3adc'
					}
				},
			};
		},
		onLoad(options) {
			console.log(options)
		},
		methods: {
			handleMessage(event) {
				uni.showModal({
					content: JSON.stringify(e.detail),
					showCancel: false
				})
				console.log('接收到的消息：' + JSON.stringify(event.detail.data));
			},
		},
	}
</script>

注意事项

小程序必须是企业小程序
navigationStyle: custom 对 web-view 组件无效，组件所在窗口的标题，跟随页面的值的变化而变化（不含H5端）
wx.miniProgram.postMessage向小程序发送消息，会在特定时机（小程序后退、组件销毁、分享）触发组件的message事件
wx.miniProgram开头的接口，不需要验证JSDDK签名权限
预览图片时的图片路径注意，否则会导致手机调试时预览图片时会一直加载显示不出来
开发者工具上，可以在 web-view 组件上通过右键 - 调试，打开web-view组件的调试。点击开发者工具左上角会有调试，点击可以看到h5页面的console

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^