logo设计免费在线制作_ecshop商城模板_东莞专业网站推广工具_网站整站优化

【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页面的网址

示例

<web-view src="https://xxx.com/xxx/xxx"></web-view>

【H5页面跳转小程序】

参考资料

案例1 如何在微信H5页面链接跳转到第三方小程序的任意页面
案例2 静态网站 H5 跳小程序
案例3 微信H5授权登录
案例4 微信环境h5如何唤起小程序

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

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

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

跳转过程如下图。
在这里插入图片描述

前提条件

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

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

在这里插入图片描述

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

如果页面路径获取不到，默认跳转的是第三方小程序的首页。
官方也提供了手动获取的方法，但是没有暴露的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-weappid="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和paththis.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 跳小程序

一、概念解析

什么是静态网站？
特点：内容固定，无需服务器端处理（如 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授权登录

太长不看
微信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中设置忽略 <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-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种情况：

用户已经注册或已经登录过，此时接口返回用户信息和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-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，接下来就进入到登录后的操作。

总结

在这里插入图片描述