前端充电-移动端-小程序登录跳转嵌入H5页面
前端充电 - 移动端 - 小程序登录、跳转/嵌入H5页面
【APP/小程序嵌入H5页面】
背景
产品APP：安卓端，ios端和小程序端。产品要做一个活动页，需要在3个端侧把活动页展示出来。但活动有效期只有3天。
可供选择的方案包括：
- 安卓端、ios和小程序的代码都开发此活动，活动结束后再将这部分代码逻辑屏蔽。每端添加活动后都需要重新提交版本审核上架。
- 做一个H5页面，在3个端侧分别将此H5页面嵌入进去。
小程序内嵌H5页面具体实现
使用uniapp的web-view实现。
操作 ：通过webview内置组件进行H5页面嵌入，src填入要打开的H5页面的网址
示例
<web-view src="https://xxx.com/xxx/xxx"></web-view>【H5页面跳转小程序】
参考资料
- 案例1
- 案例2
- 案例3
- 案例4
案例1 微信H5页面跳转第三方小程序
在微信的H5页，跳转第三方小程序。常用于社群引流等。
跳转过程如下图。
前提条件
在微信的H5页，跳转第三方小程序，前提条件：
拥有已认证的服务号
服务号添加“JS接口安全域名”，即访问H5界面的域名。
获取第三方小程序的原始id
只能手动获取，微信官方没有给出api接口动态调用。
获取方法，以小红书为例，gh_52be748ce5b7。
- 获取第三方小程序的页面路径
如果页面路径获取不到，默认跳转的是第三方小程序的首页。
官方也提供了手动获取的方法，但是没有暴露的api方法，手动获取方法不友好，需要去小程序业务后台添加开发者，然后下图会多一个页面路径。
注意这里有个复制链接，对于开发者来说是没用的。
这里的up写了一个动态获取的功能，需要去公众号——数字门店营销（没找到）。
以上就是跳转的必要条件。
实现跳转
使用跳转小程序 wx-open-launch-weapp 标签实现。该标签需要2个参数，username(原始id)，path(页面路径)，通过前提条件可以获取到。
标签使用官方用例：
官方示例
<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 跳小程序
一、概念解析
什么是静态网站？
特点： 内容固定，无需服务器端处理（如 PHP、数据库） ，用户访问时直接加载 HTML、CSS、JavaScript 文件。
常见形式：企业官网、个人博客、产品展示页等。
技术栈：纯前端技术（HTML/CSS/JavaScript），可能搭配静态网站生成器（如 Hugo、Jekyll）。
什么是 H5？
H5 的两种常见含义：
广义：HTML5 技术标准，包含新的语义标签（如
<header>、<section>）、多媒体支持（<video>、<canvas>）、本地存储等。狭义（国内语境）：特指移动端交互式营销页面（如滑动翻页、动画效果），但严格来说这是对 HTML5 技术的场景化应用。
二、静态网站 H5 的核心特点
技术优势
响应式设计：通过 HTML5 的 和 CSS3 媒体查询适配多端（PC/手机/平板）。
多媒体支持：直接嵌入视频/音频（无需 Flash）：
局限性
内容更新不便：需手动修改 HTML 或重新生成。
功能受限：无法实现用户登录、实时数据交互等动态功能。
类似移动端的传统网站。
不看了。
案例3 微信H5授权登录
太长不看
案例4 微信环境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中设置忽略
<wx-open-launch-weapp>标签，防止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样式
<style lang="less">
.navi-container {
positon: relative;
width: 305px;
height: 50px;
margin: 18px auto;
.now-btn {
width: 305px;
height: 50px;
positon: absolute;
left: 0;
top: 0;
border-radius: 25px;
border: 1px solid rgba(246, 31, 30, 1);
color: #fff;
font-size: 16px;
text-align: center;
line-height: 50px;
z-index: 1;
background: linear-gradient(to right, #db0003, #ff6c61);
}
width: 305px;
}
</style>注意事项
- 微信开放标签
"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- ，获取到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种情况：
- 用户已经注册或已经登录过，此时接口返回用户信息和token，此时进入下一步登录后的操作即可。
- 用户之前没有注册或登录过，此时需要进入注册环节。
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- 获取。
代码示例
async registerPost( params ) {
let res = await register( params );
let { member, token, wechat } = res;
if( res.code === '200') {
uni.hideLoading();
uni.showToast({
title: '注册成功'
})
}
}注册成功，同样会拿到用户信息和token，接下来就进入到登录后的操作。
总结
