小程序一键分享html5,H5手机网站封装微信小程序并实现分享功能的教程

通过本文教程可以实现将H5手机网站直接封装成微信小程序，并且支持分享功能。但不支持微信支付功能。

说明：手机站域名必须开启https模式

第一步：

微信开发者工具中创建小程序，填写你自己的小程序AppID

第二步：修改app.json

2.1、打开app.json文件，pages区只留这一行即可。

2.2、navigationBarTitleText填写你的小程序名称。

第三步：

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

保存后，开发者工具左侧就能显示首页效果了，当然在微信小程序管理中心是要添加你的域名为业务域名的，否则无法显示。

此时，也可以点击详情--》本地设置--》勾选不验校来合法域名来进行测试，如下图所示。

到这一步就可以正常上传提交审核了。

但是，现在小程序是不支持分享给好友的，分享时按钮是灰色的。我们需要进一步添加分享代码

第四步：添加分享功能

打开/pages/index/index.js

在Page区添加以下代码，

//分享给好友

onShareAppMessage: function () {

return {

title: '朋友圈看到的页面标题',

path: '页面链接',

imageUrl:'分享链接图片',

success: function (res) {

console.log("分享成功")

fail: function (res) {

console.log("分享失败")

}

//分享到朋友圈

onShareTimeline: function () {

return {

title: '朋友圈看到的页面标题',

path: '页面链接',

imageUrl:'分享链接图片',

query: 'kjbfrom=pyq'

}

也可以直接这样，分享的时候就是显示网页标题与网页界面截图//分享给好友

onShareAppMessage: function () {

//分享到朋友圈

onShareTimeline: function () {

}

小程序一键分享html5,H5手机网站封装微信小程序并实现分享功能的教程相关推荐

微信小程序不支持打开非业务域名_一行代码网站封装微信小程序，并解决微信小程序不支持打开非业务域名https://,请重新配置的问题！...
一行代码封装微信小程序利用「」一行代码原封不动的把你现有博客或者网站封装成小程序. 第一步注册微信小程序账号并登陆,点击菜单栏 "开发" 中的"开发设置", ...
h5网页跳转微信小程序
H5网页跳转微信小程序再次记录下, 通过使用微信开放标签,可便捷的跳转到微信小程序. 文章目录 H5网页跳转微信小程序效果图一.小程序跳转按钮二.开放标签使用步骤 1. 绑定域名 2. 引入j ...
h5是可以一键打包小程序的_H5手机网站封装打包微信小程序并实现分享及微信支付...
手机网站打包小程序教程,生成小程序,网页版小程序打包微信小程序,H5封装成微信小程序. 微信小程序开发一般分为2种方式,一种就是原生开发小程序,一种是将手机网站打包成小程序. 原生开发小程序成本较 ...
极光会客厅：大型H5游戏如何登陆微信小游戏及游戏性能优化分享
上周末,由极光网络主办的首期"极光会客厅"正式开门迎客.在本次的"2D小游戏开发实战技术沙龙"上,极光网络客户端主程陈策以及极光网络项目总监陈源向一众与会者分享 ...
知识付费小程序源码，可上架安卓苹果app应用商店、打包为H5、抖音微信小程序
知识付费小程序源码,可上架安卓苹果app应用商店.打包为H5.匠言知识付费匠言知识付费支持15端版本,数据同步,支持课程点播.直播.在线考试.付费咨询.心理咨询.私董会.电子书.百科.头条.教务管理 ...
H5手机移动端调起浏览器自带分享功能实例（QQ、UC浏览器微博、微信分享）
H5手机移动端调起浏览器自带分享功能实例(QQ.UC浏览器微博.微信分享) 注:代码需要在服务器或测试服务器上方可看到效果 HTML: <span class="viewshare w ...
分享下自己写的一个微信小程序请求远程数据加载到页面的代码
分享下自己写的一个微信小程序请求远程数据加载到页面的代码 1 思路整理就是页面加载完毕的时候请求远程接口,然后把数据赋值给页面的变量 ,然后列表循环 2 js相关代码我是改的 onload ...
关于微信小程序跳转到H5，然后从H5又跳回微信小程序问题的资料
关于微信小程序跳转到H5,然后从H5又跳回微信小程序问题的资料直接上答案 // javascript import wx from 'weixin-jsapi';// 判断h5页面是否是运行在小程序 ...
PHP安卓苹果APP在线封装打包制作源码 H5手机网站转APP 免签封装绿标
简介: PHP安卓苹果APP在线封装打包制作源码 H5手机网站转APP 免签封装绿标更新记录: 1.解决ios无法下载的问题 2.优化打包流程修复原先各种问题 3.可自行上传安卓证书 4.可自行上 ...

小程序一键分享html5,H5手机网站封装微信小程序并实现分享功能的教程

小程序一键分享html5,H5手机网站封装微信小程序并实现分享功能的教程相关推荐

最新文章

热门文章