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

准备工作

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

测试公众号

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

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

域名

NATAPP实名

前端项目

1. 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>

2. 具体代码：
   引入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>

注意事项

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