前端充电 - 移动端 - 小程序登录、跳转/嵌入H5页面

【APP/小程序嵌入H5页面】

https://www.bilibili.com/video/BV1PE421A7Pt?spm_id_from=333.788.videopod.sections&vd_source=c919d6976fd77ac77f9860cf2e7e0e11

背景

产品APP：安卓端，ios端和小程序端。产品要做一个活动页，需要在3个端侧把活动页展示出来。但活动有效期只有3天。

可供选择的方案包括：

• 安卓端、ios和小程序的代码都开发此活动，活动结束后再将这部分代码逻辑屏蔽。每端添加活动后都需要重新提交版本审核上架。
• 做一个H5页面，在3个端侧分别将此H5页面嵌入进去。

小程序内嵌H5页面具体实现

使用uniapp的web-view实现。

操作：通过webview内置组件进行H5页面嵌入，src填入要打开的H5页面的网址

示例

【H5页面跳转小程序】

参考资料

• 案例1 如何在微信H5页面链接跳转到第三方小程序的任意页面

• 案例2 静态网站 H5 跳小程序

• 案例3 微信H5授权登录

• 案例4 微信环境h5如何唤起小程序

案例1 微信H5页面跳转第三方小程序

如何在微信H5页面链接跳转到第三方小程序的任意页面

在微信的H5页，跳转第三方小程序。常用于社群引流等。

跳转过程如下图。

前提条件

在微信的H5页，跳转第三方小程序，前提条件：

• 1. 拥有已认证的服务号
     服务号添加“JS接口安全域名”，即访问H5界面的域名。
• 2. 获取第三方小程序的原始id
     只能手动获取，微信官方没有给出api接口动态调用。
     获取方法，以小红书为例，gh_52be748ce5b7。

• 3. 获取第三方小程序的页面路径

如果页面路径获取不到，默认跳转的是第三方小程序的首页。
官方也提供了手动获取的方法，但是没有暴露的api方法，手动获取方法不友好，需要去小程序业务后台添加开发者，然后下图会多一个页面路径。

注意这里有个复制链接，对于开发者来说是没用的。

这里的up写了一个动态获取的功能，需要去公众号——数字门店营销（没找到）。

以上就是跳转的必要条件。

实现跳转

使用跳转小程序 wx-open-launch-weapp 标签实现。该标签需要2个参数，username(原始id)，path(页面路径)，通过前提条件可以获取到。

标签使用官方用例：
https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html#21

官方示例

<wx-open-launch-weapp
  id="launch-btn"
  appid="wx12345678"
  path="pages/home/index?user=123&action=abc"
>
  <script type="text/wxtag-template">
    <style>.btn { padding: 12px }</style>
    <button class="btn">打开小程序</button>
  script>
wx-open-launch-weapp>
<script>
  // 注意这里btn不是button标签，而是开放标签。然后监听该开放标签的launch和error事件
  var btn = document.getElementById('launch-btn');
  btn.addEventListener('launch', function (e) {
    console.log('success');
  });
  btn.addEventListener('error', function (e) {
    console.log('fail', e.detail);
  });
script>

实际还是不太一样，下面是up实际开发项目Vue用例。
html部分

<view v-else class="weapp">
	<wx-open-launch-weapp id="launch-btn" username="xxx" path="xxx">
		<script type="text/wxtag-template">
			<style>
				.jump-btn {
					height: 44px;
					line-height: 44px;
					border: none;
					font-size: 20px;
					color: #ffffff;
					border-radius: 40rpx;
					background-color: #18bc37;
					text-align: center;
				}
			</style>
			<div class="jump-btn">打开小程序</div>
		script>
	wx-open-launch-weapp>
view>

js部分

data() {
	return {
		url: '',
		username: '',
		path: ''
	}
},
onLoad(option) {
	if(option.originAppId) {
		// 从服务器获取两个参数，uaername和path
		this.username = option.originId;
		this.path = uni.getStoreSync('goodsUrl);
		return;
	}
	this.$wechat.initJssdk((e) => {
		console.log("初始化===>", e);
	})
	this.url = option.url;
},
onReady() {
	var btn = document.getElementById('launch-btn');
	btn.setAttribute('username', this.username);
	btn.setAttribute('path', this.path);
	console.log("=============" + btn.getAttribute('username') + "   "+btn.getAttribute('path'));
	btn.addEventLister('launch', function(e){
		console.log("success");
		// 点击打开小程序按钮时，将H5页面回退。这样从小程序返回时，直接返回H5页面，不会返回之间的中间页了
		uni.navigateBack({ delta: 1, // 返回层数，2则上上层
		})
	});
	btn.addEventLister('error', function(e){
		console.log("fail", e.detail);
	});
}

注意：这里页面通过原生方式，通过操作DOM的方式给标签的username和path属性赋值。

如果不是操作DOM的方式，赋值不会成功。通过vue方式赋值不行。

标签在跳转时，会展示一个中间界面，需要人工点击一下页面按键才继续跳转。为了提升用户体验，可以在按键点击事件设置关闭页面或回退到上一个页面。

案例2 静态网站 H5 跳小程序

静态网站 H5 跳小程序

一、概念解析

1. 什么是静态网站？
   特点：内容固定，无需服务器端处理（如 PHP、数据库），用户访问时直接加载 HTML、CSS、JavaScript 文件。
   常见形式：企业官网、个人博客、产品展示页等。
   技术栈：纯前端技术（HTML/CSS/JavaScript），可能搭配静态网站生成器（如 Hugo、Jekyll）。
2. 什么是 H5？
   H5 的两种常见含义：
   广义：HTML5 技术标准，包含新的语义标签（如
   、

   ）、多媒体支持（、）、本地存储等。
   狭义（国内语境）：特指移动端交互式营销页面（如滑动翻页、动画效果），但严格来说这是对 HTML5 技术的场景化应用。

二、静态网站 H5 的核心特点

1. 技术优势
   响应式设计：通过 HTML5 的 和 CSS3 媒体查询适配多端（PC/手机/平板）。
   多媒体支持：直接嵌入视频/音频（无需 Flash）：
2. 局限性
   内容更新不便：需手动修改 HTML 或重新生成。
   功能受限：无法实现用户登录、实时数据交互等动态功能。

类似移动端的传统网站。

不看了。

案例3 微信H5授权登录

太长不看
微信H5授权登录

案例4 微信环境h5如何唤起小程序

微信环境h5如何唤起小程序

背景

开发过程中经常使用到第三方服务或跟第三方小程序有交互。

实现步骤

• 步骤1 绑定域名（需要公众号管理人员进行操作）

登录微信公众平台，设置与开发 - 公众号设置 - 功能设置，添加js接口安全域名。

• 步骤2 在index.html head标签中引入sdk

<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js">script>

• 步骤3 在main.js中设置忽略 标签，防止npm运行代码时页面报错

Vue.config.ignoredElements = ['wx-open-launch-weapp'];

• 步骤4 需要后端提供一个接口，返回给前端 appId, timestamp, nonceStr, signature四个字段，用于初始化微信js-sdk.

• 步骤5 提供跳转小程序的相关参数
  必填
  AppId：小程序的appId
  Path: 小程序的跳转路径
  非必填
  username：所需跳转的小程序原生id，即小程序对应的以gh_开头的id

  跳转时，有appid优先使用appid，没有则会使用username

  env-version：正式版release，开发版develop，体验版trial

  开发过程中对接的小程序版本，是第三方告知，用于联调时使用

  extra-data: 额外参数

代码展示

1 引入sdk

• 步骤2，项目public/index.html里引入sdk

	<script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js">script>

2 忽略微信开放标签

• 步骤3，在项目src/main.js里忽略微信开放标签

	Vue.config.ignoredElements = ['wx-open-launch-weapp'];

3 核心代码

• 步骤4，实际代码开发

在views/navigate/index.vue里进行实际跳转代码的开发

1 html部分

注意

• 唤起小程序的div实际是我们看到的button，真正唤起小程序的是wx-open-launch-weapp标签。
  点击事件是在wx-open-launch-weapp标签上触发的。

wx-open-launch-weapp标签的样式要覆盖到div的样式上去？？？ from 05:31
是wx-open-launch-weapp标签的样式要覆盖div，这样点击div时，实际是点击的wx-open-launch-weapp标签，这样就可以触发打开小程序的事件了。

• appid和path是需要传递的两个字段。

<template>
	<div class="navi-container">
		<div class="now-btn">唤起小程序div>
		<wx-open-launch-weapp v-if="isWechat" appid="wxel4huhu43dhu223hu3u3" path="pages/index/index?bxChannel=hudheuhu" style="position: absolute">
			<script type="text/wxtag-template">
				<style>
					.btn {
						width: 100%;
						height: 50px;
						position: absolute;
						left: 0;
						top: 0;
						z-index: 999;
						background: transparent;
						border: none
					}
				</style>
				<button class=""btn></button>
			script>
		wx-open-launch-weapp>
	div>
template>

2 js部分

注意

• getHBJsApiConfig 是后端提供的接口封装的方法

方法的入参是H5页面的url地址，一般使用主域名，不用二级域名等，用#之前的部分。

两次初始化的域名地址不同，ios端获取的signature是错误的。

• appId, timestamp, nonceStr, signature是需要的4个字段。

其实是微信sdk初始化需要的4个字段

• 开发时可以将debug模式开启，上线时需要关闭掉。

• 开放哪个标签，则配置openTagList:[‘wx-open-launch-weapp’]

• 初始化成功，可以在window.wx.ready回调里打印信息，错误可以在window.wx.error打印错误信息，例如签名signature错误或域名错误等。

<script>
import { getHBJsApiConfig } from '@/api/wx';
import { getDeviceInfo } from '@/api/wx';
export default {
	data() {
		return {
			isWechat: getDeviceInfo().env === "wechat";
		}
	},
	async mounted() {
		document.title = '唤起小程序';
		try{
			if(this.isWechat) {
				let signData = await getHBJsApiConfig();
				const { appId, timestamp, nonceStr, signature } = JSON.parse(signData.data);
				window.wx.config({
					debug: false,
					appId,
					timestamp,
					nonceStr, 
					signature,
					jsApiList:['updateTimeListShareDara'],
					openTagList:['wx-open-launch-weapp']
				});
				window.wx.ready(function () {
					console.log('===============ready============');
				});
				window.wx.error(funtion (res) {
					console.log('===============fail============', res);
				})
			} catch(e) {
			}
		}
	}
}
</script>

3 css部分

css样式

注意事项

• 微信开放标签"wx-open-launch-weapp"有最低微信版本要求，以及最低系统版本要求。
  • 微信版本要求：7.0.12及以上
  • 系统版本：ios 10.3以及上、Android 5.0以及上
• 根据自己的系统，做好友好提示
• 测试环境：唤起小程序，需要在测试环境或正式环境进行测试，开发环境无法测试

常见问题

按钮渲染失败，排查

• 域名错误（本地开发，控制台报域名不对）
  • 公众号是否绑定了正确的域名
  • 初始化时传的域名参数是否与前端域名一致

为什么要在测试/正式环境进行测试，因为开发环境与公众号绑定的域名不是一致的，因此按钮渲染失败。
解决：提交代码，发布测试环境进行测试。
让前端域名地址与后端接口前缀地址保持一致。

• 签名错误（大部分是ios手机）
  进入页面1的域名是https://test.zyy.com/#/nav1
  进入页面2的域名是https://test.zyy.com/#/nav2

进入上述2个页面时，分别初始化js-sdk，那么ios手机容易报签名错误。

如何解决？

• 初始化的入参保持一致

推荐使用主域名(#之前的部分) https://test.zyy.com/

• 每次都是最新的初始化返回值

从页面A跳页面B时，采用window.location.href = 页面2，或window.location.replace(页面2)
即通过跳转链接实现，相当于手动刷新页面，先跳到页面1，再跳转到页面2

• 第一次请求后端接口时，本地缓存后端接口返回的4个值(appId, timestamp, nonceStr, signature)

【小程序一键登录】

1 获取登录临时凭证

• 步骤1 首先调用api-uni.login()，获取到code，此code是用户登录的临时凭证。

methods: {
	async login() {
		let { code } = await uni.login();
	}
}

2 请求后台信息

• 步骤2 调用后端接口，将code作为入参请求接口

接口信息
请求url： /u/loginByWechat
请求方式：GET
参数：code，必传

代码示例

async loginWechat() {
	let res = await loginByWechat({code});
}

接口返回
此时后端返回的数据有2种情况：

1. 用户已经注册或已经登录过，此时接口返回用户信息和token，此时进入下一步登录后的操作即可。
2. 用户之前没有注册或登录过，此时需要进入注册环节。

3 注册环节

如果走注册环节，那么步骤2接口返回的字段信息会有openid，sessionKey，unionid.

• 步骤3 注册环节，请求后台注册接口

注册接口
注册微信用户（将微信信息注册到平台）
请求url：/u/wechat/register
请求方式：POST
参数：unionId，openId，sessionKey, signature，rawData，encryptedData

参数获取
unionId，openId，sessionKey已经通过步骤2的接口返回了，此时还剩下signature，rawData，encryptedData。通过官方api-uni.getUserInfo()获取。

代码示例

async registerPost( params ) {
	let res = await register( params );
	let { member, token, wechat } = res;	
	if( res.code === '200') {
		uni.hideLoading();
		uni.showToast({
			title: '注册成功'
		})
	}
}

注册成功，同样会拿到用户信息和token，接下来就进入到登录后的操作。

总结