南京人论坛 做南京人的网上家园  - 南京金友网

 找回密码
 立即注册

QQ登录

只需一步,快速开始

微信登录

微信扫一扫,快速登录

查看: 1134|回复: 0
收起左侧

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

[复制链接]
累计签到:68 天
连续签到:3 天

856

主题

98

回帖

1万

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
14466

最佳新人活跃会员热心会员推广达人宣传达人灌水之王突出贡献优秀版主荣誉管理论坛元老

发表于 2021-9-11 14:38:56 | 显示全部楼层 |阅读模式 IP:- 中国江苏南京

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有账号?立即注册 微信登录

x
微信用户数早已超越10亿(中国使用微信的人已经超过80%),微信小程序也备受用户喜爱,如果你的网站已有H5手机端,可以将H5手机网站直接封装成微信小程序,除了不能使用微信支付功能外,其他类似分享的功能都是和真正的小程序端无异的,如此一来,可以省去开发微信小程序的时间和成本。

教程步骤:
前提要求:H5网站域名必须开启https,比如 https://www.go569.com/,是https开头,而不是http

一、登录微信公众平台,注册一个小程序,不懂自行百度,获取AppID(小程序ID)

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

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


二、微信开发者工具中创建小程序,填写前面注册小程序的AppID

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

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


三、修改app.json配置

打开app.json文件,pages项只保留 "pages/index/index" 这一行即可
window项的navigationBarTitleText填写小程序名称

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

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


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

<web-view src="https://www.go569.com"></web-view>
代码里的https://www.go569.com,就是你H5网站的网址域名

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

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

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


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

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

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

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


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

  1. <script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.3.2.js"></script>

  2. <script>

  3.     var ua = navigator.userAgent.toLowerCase();

  4.     if(ua.match(/MicroMessenger/i)=="micromessenger") {

  5.         //ios的ua中无miniProgram,但都有MicroMessenger(表示是微信浏览器)

  6.         wx.miniProgram.getEnv((res)=>{

  7.            if (res.miniprogram) {

  8.                alert("在小程序里");

  9.            } else {

  10.                alert("不在小程序里");

  11.            }

  12.         })

  13.     }else{

  14.         alert('不在微信里');

  15.     }

  16. </script>
复制代码




"小礼物走一走,来南京金友网支持我"
还没有人打赏,支持一下
走自己的路
您需要登录后才可以回帖 登录 | 立即注册 微信登录

本版积分规则

快速回复 返回顶部 返回列表