Html5手机端网址封装成微信小程序的教程

最新推荐文章于 2024-05-11 13:02:03 发布
最新推荐文章于 2024-05-11 13:02:03 发布
阅读量445 收藏 5
点赞数 9
分类专栏： 程序员 文章标签： html5 微信小程序 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2401_84093899/article/details/138458634
版权

三、修改app.json配置

  • 打开app.json文件，pages项只保留 “pages/index/index” 这一行即可

  • window项的navigationBarTitleText填写小程序名称

→→

四、打开/pages/index/index.wxml文件，将里面的代码全部删除，添加下面这一行代码

代码里的https://m.18ka.net，就是你H5网站的网址域名

五、测试

1、点击详情 → 本地设置 → 勾选【不校验合法域名】来进行测试，如下图：

2、小程序正式上线的话，需要在微信小程序管理中心中，把H5域名添加为业务域名，如下图：

登录微信公众平台 → 开发管理 → 开发设置  → 服务器域名：

六、js判断当前html5网址是不是在微信小程序中运行的

2401_84093899
关注
  • 9
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
微信小程序封装H5源码
04-30
一个基于Web-View的H5微信小程序源码，提交代码进行审核就可以在公开环境使用，小程序名称和图标也可以在开发者账号里面提交。
最新HTML5开发的微信小程序响应式企业网站源码 附带WAP手机版 全站自适应模板 非常的不错
07-30
最新HTML5开发的微信小程序响应式企业网站源码 附带WAP手机版 全站自适应模板 非常的不错
Html5手机端网址封装成微信小程序的教程(3)
最新发布
2401_84097658的博客
05-11 242
打开app.json文件，pages项只保留 “pages/index/index” 这一行即可window项的navigationBarTitleText填写小程序名称→→代码里的，就是你H5网站的网址域名。
h5是可以一键打包小程序的_H5手机网站封装打包微信小程序并实现分享及微信支付...
weixin_28984915的博客
01-12 3881
手机网站打包小程序教程，生成小程序，网页版小程序 打包微信小程序，H5封装成微信小程序。微信小程序开发一般分为2种方式，一种就是原生开发小程序，一种是将手机网站打包成小程序。原生开发小程序成本较高，技术含量也较高，后期维护较麻烦，优点是在极致环境下性能更好。如果成本预算较低无法开发原生小程序，或者已经有了手机网站，则可以考虑直接将手机网站打包成微信小程序。本教程给大家分享如何将手机网站打包成微信...
H5打包封装小程序系统开发
weixin_44039884的博客
07-30 1131
H5打包封装小程序系统开发是指将H5页面打包封装成小程序的开发过程。H5打包封装小程序系统开发。
网站转小程序系统，任意网址打包成小程序
01-21 815
将任意网站打包成小程序，只需简单修改域名，即可轻松实现！这一创新技术让您的网站内容在小程序平台上焕发新生。通过智能转换工具，您可以将任意网站迅速转化为小程序，无需繁琐的编码和开发工作。只需简单修改域名设置，您就能拥有一个小程序版本的网站，随时随地为用户提供便捷的服务。
将h5封装为微信小程序
weixin_58661581的博客
04-27 831
4、打开app.json文件，pages项只保留 "pages/index/index" 这一行。2、登录微信公众号好注册一个小程序账号。1、要求网站域名必须为https。3、打开威胁你开发者工具进行创建。
将发布的h5页面转换成微信小程序，无需重新开发，操作超级简单！
qq1507171150的博客
06-21 3225
登录微信公众平台，登录小程序账号，在【设置】下的【基本配置】中找到账号信息，复制AppID。在程序目录中，找到manifest.json文件，将appid放置到【微信小程序配置】中。官网地址：https://www.dcloud.io/hbuilderx.html。在开发者工具中，点击上传按钮，配置版本号等相关项目备注，点击右下方的上传即可。程序开发完成，无误后，可以直接点击上方图片中的提交审核，等待审核通过就好了。选择微信开发者工具，配置好路径。【管理】-【版本管理】
uniapp的打包：h5、微信小程序以及APP方式
蔡菜小奥比的博客
03-28 7391
本人用的是HBuilder编译器，学习uniapp时b站某位大大推荐的，我刚开始接触代码时候也用过，那时候并不好用这个编译器，但是现在试了一下挺好用的。微信小程序还有另外一种发行方式，就是可以勾选第三个方框，但是需要用到小程序密钥，大家可以试一下，我这里就不展示了。弹框之后只需要写网站标题即可，再点击发行按钮，然后等待就好了，打包好的文件会放在unpackage文件夹里。打包完会弹出这个框，自己看着来设置就好了。可以在微信开发者工具的项目配置里设置合法域名，也可以在本地设置里的不校验合法域名取消勾选。
h5打包成小程序
Dyj_zf的博客
04-23 820
3.3 uni-app：一款基于 Vue.js 的跨平台开发框架，支持将 Vue.js 项目转换为小程序项目，包括 H5 页面。2.1 mpvue：基于 Vue.js 的小程序开发框架，支持将 Vue.js 项目转换为小程序项目，包括 H5 页 面。2.2 Taro：一款多端统一开发框架，支持将 React.js 项目转换为小程序项目，包括 H5 页面。代码里的https://....就是你H5网站的网址。要求不高，需要将现有的h5项目打包成微信小程序。
将网页代码转换成微信小程序代码
RichardLau_Cx的博客
05-29 5015
如果你想要把你的网页代码转换成小程序代码，你有以下几种方法：
手机网页封装微信小程序实战步骤
11-24
手机网站封装小程序的实战步骤，里面的每一项都必须遵守，不然最后会失败
PHP+HTML5响应式微信小程序+APP开发企业网站程序源码+带手机移动版.rar
06-11
PHP+html5响应式微信小程序，APP开发企业网站程序源码，带手机移动版。 全站自适应的模板，非常的不错，界面也做的非常漂亮，适合企业公司做官网使用用！ 下载源码，还附带安装说明哦！ PHP+html5响应式微信小程序...
H5套壳微信小程序，实现付款功能
03-25
"H5套壳微信小程序，实现付款功能"的主题表明，这个项目是将HTML5（H5）网页封装到微信小程序中，以利用微信的支付功能。这里我们将详细讨论如何利用PHP语言实现这一过程，以及涉及到的关键技术。 首先，PHP是一种...
微信小程序星巴克咖啡源码
09-19
这个“微信小程序星巴克咖啡源码”提供了构建一个与星巴克咖啡相关的移动应用的完整代码库，允许开发者深入了解并学习如何利用微信小程序框架来开发类似的手机端界面。 在微信小程序中，界面布局设计是关键的一环，...
微信小程序uniapp日历组件，可以自定义文案，可以上下滑动选择日期
03-01
而uni-app则是一个多端开发框架，它允许开发者使用一套代码来构建iOS、Android、H5、微信小程序、支付宝小程序等多个平台的应用。在这个场景下，我们讨论的是uni-app在微信小程序中的一个关键功能——日历组件。 ...
html5微信手机端图片上传裁剪代码.zip
09-27
总的来说，这个压缩包提供了一个基于HTML5的微信手机端图片上传和裁剪的解决方案，适用于开发微信小程序或者移动端网页应用。通过学习和理解这个代码，开发者可以掌握HTML5的File API、Canvas API，以及如何利用它们...
网站转小程序，任意网址打包成小程序源码
极致技术工厂 | www.yzfuye.com
01-22 464
可以把任意的网站打包成小程序，直接修改域名就可以！
uniapp封装h5、微信小程序分享方法
06-02
Uniapp提供了一些API用于实现H5和微信小程序的分享功能，可以在封装的方法中使用这些API来实现。 1. H5分享方法： ```javascript export function share(title, desc, link) { if (typeof window !== 'undefined' && window.wx) { window.wx.ready(function () { window.wx.updateAppMessageShareData({ title: title, // 分享标题 desc: desc, // 分享描述 link: link, // 分享链接 }); window.wx.updateTimelineShareData({ title: title, // 分享标题 link: link, // 分享链接 }); }); } else { console.warn('微信分享只能在微信里使用'); } } ``` 2. 微信小程序分享方法： ```javascript export function share(title, path, imageUrl) { if (typeof wx !== 'undefined') { wx.showShareMenu({ withShareTicket: true, }); wx.onShareAppMessage(function () { return { title: title, path: path, imageUrl: imageUrl, }; }); } else { console.warn('微信分享只能在微信小程序里使用'); } } ``` 需要注意的是，微信小程序分享时需要在app.json中配置分享相关信息。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值