【uniapp】uniapp打包H5(网页端):


一、设置appid:

注意】appid是项目的(不是成员无法打包
在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

二、设置router:

在这里插入图片描述

未设置router情况:
在这里插入图片描述

三、打包:
【1】CLI 发行uni-app到H5:https://hx.dcloud.net.cn/cli/publish-h5

在这里插入图片描述
在这里插入图片描述
注意】cli命令打包h5报错:找不到接受实际参数“–platform”的位置形式参数

在这里插入图片描述
在这里插入图片描述

【2】HBuilderX

发行=》网站-PC或h5…=》发行

四、最终效果:

在这里插入图片描述

### 修改 UniApp 小程序打包 H5 的登录实现方式 当使用 UniApp 打包项目至不同平台时,尤其是从小程序环境切换到 H5 环境下,由于两者运行机制的不同,某些功能如登录逻辑可能需要调整。对于希望修改 UniApp 小程序打包H5 后的登录流程而言,主要关注点在于适配两种环境下 API 差异及处理认证过程中的区别。 #### 1. 使用 `wx.login` 和 `uni.login` 在小程序环境中通常会调用 `wx.login()` 来获取用户的临时登录凭证 code 并发送给开发者服务器交换 session_key;而在 H5 中则不存在这样的内置方法。因此,在构建适用于两者的应用时,应该考虑条件判断当前环境并采取相应措施: ```javascript if (process.env.VUE_APP_PLATFORM === 'mp-weixin') { // 微信小程序环境下的登录操作 wx.login({ success(res) { console.log('WeChat Login Success:', res); } }); } else if (process.env.VUE_APP_PLATFORM === 'h5') { // H5 环境下的登录操作, 可能涉及第三方授权或其他形式的身份验证 } ``` 这段代码展示了如何根据不同平台执行不同的登录策略[^1]。 #### 2. 处理 H5 登录场景 针对 H5 场景,常见的做法是通过 OAuth 或者其他开放接口完成用户身份验证。如果应用程序已经集成了微信 JS-SDK,则可以利用其提供的分享、支付等功能的同时也能够借助它来进行社交账号快速登录: ```javascript import wx from 'weixin-js-sdk'; // 假设已经在服务端完成了签名算法,并获得了 ticket 参数用于初始化 SDK wx.config({ debug: false, appId: '', timestamp: '', nonceStr: '', signature: '' }); function handleWxLogin() { wx.ready(function () { wx.checkJsApi({ jsApiList: ['getNetworkType'], success: function (res) { alert(JSON.stringify(res)); } }); wx.login({ scope: "snsapi_userinfo", state: "", success: function (data) { window.location.href = "/your_redirect_url?code=" + data.code; }, cancel: function (res) {} }) }); } handleWxLogin(); ``` 上述例子中,`wx.login` 方法被用来发起微信网页授权请求,之后可以根据获得的 code 参数向自己的后台换取 openid 等信息来确认用户身份[^2]。 需要注意的是,这里使用的 `wx.login` 是指微信JS-SDK里的同名函数而非原生的小程序API,这使得即使是在浏览器里也能模拟类似的交互体验。 #### 3. 统一管理跨平台差异 为了更好地管理和维护这些因应不同目标平台而产生的变化,建议采用预处理器变量或配置文件的形式定义一套规则体系,以便于后期扩展和支持更多类型的终端设备。例如可以在项目的根目录创建 `.env.development` 文件设置特定环境常量,像这样: ``` VUE_APP_PLATFORM=mp-weixin # or h5 depending on build target ``` 接着就可以在整个项目范围内轻松访问该值以决定具体行为模式了。
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Sun Peng

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值