Project scenario:
Project scenario: When the h5 page is embedded in the applet, clicking somewhere needs to jump to the corresponding page for subsequent business logic. There are two stickers: the first one is the screenshot when the small program simulator on the PC side clicks to jump, and the second one is the screenshot of the input parameters received by the mobile terminal test (the second one is to check the input parameters with the alert breakpoint)
Solution
1. Create a container web-view file that can hold h5, and then write the jump logic of the applet
xiang_q: function(event) {
var code = event.currentTarget.dataset['name'];
wx.navigateTo({
url: '/pages/zong_customer/xiangqing/index' //跳转到h5页面的容器路径
})
wx.setStorageSync('customercode', code); //跳转h5时想传的参数，拿Storage存起来
}
2. Small program container wxml+js
<web-view src="{
{http_s}}"></web-view>
Page({
/**
* 页面的初始数据
*/
data: {
http_s:''
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function (options) {
var that = this;
var datalist = wx.getStorageSync('datalist')
var mobile = datalist.phone
var codeVal = wx.getStorageSync('customercode')
//地址为你要跳转的h5页面地址，后边拼接传递的参数
that.setData({
http_s: "https://testcar.chinacoal-ins.com/enterprise?customercode=" + codeVal + "&mobile=" + mobile + "&flag=1" + ""
})
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function () {
},
})
3. As of now, the jump logic is basically complete, and the rest only need to receive the input parameters in the h5 program and do the business operations.
But at present, you will find that when you use the WeChat developer tool to test, the first picture at the beginning of the article will appear, indicating that the user identity cannot be obtained. At this point I know you are in a hurry, but don't worry.
You can go to the WeChat public platform to add web developer tools, just operate the Baidu error pop-up window.
Of course, you can also go to the h5 page to write the logic of obtaining parameters like me, and use the real machine to test whether it is good or not. I believe that what I wrote must be no problem.
4. h5 page acquisition acquisition parameters
//我的h5页面是拿vue3+vant写的，大体逻辑就是window.location.search获取url地址的信息并解析
const getUrlParam = (name) => {
//拿方法去接收要解析的字段并返回
const reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
const result = window.location.search.substr(1).match(reg);
return result ? decodeURIComponent(result[2]) : null;
};
created() {
let customercode = this.getUrlParam ("customercode"); //获取customercode
let flag= this.getUrlParam ("flag"); //获取flag
let mobile = this.getUrlParam ("mobile"); //获取mobile
},
Question:
The remaining difficulty is how to jump back to the applet from the h5 page?
Method 1: Add a button suspended at the top of the web-view page of the applet, click the button to jump back to the applet (the web-view automatically fills the entire screen, so it needs to be wrapped with the cover-view tag), but the wrapped button does not support click events, and you can also use the navigator tag to write the jump address. You can check the relevant information and try it yourself.
Method 2: Write the method of jumping back to the applet on the h5 page, but you need to import https://res.wx.qq.com/open/js/jweixin-1.3.2.js, you can also check the information for details.
A follow-up article will explain the use of the above two methods
, but in both cases there will be compatibility issues with the navigation bar at the top of the applet. If you have a better solution, welcome to comment and discuss.