H5跳转微信小程序 从0开始开发一款微信小程序

H5跳转微信小程序 从0开始开发一款微信小程序， 

H5跳转微信小程序

这问题，很多情况，分几类:

一、微信内嵌H5跳转内部微信小程序页

1. 小程序页内

Tips:

微信页面 webview 组件

个人小程序不支持

abc.com 域名要加到小程序合法域名中

微信开发者工具中测试时，勾选不校验域名~

2. H5项目中引入SDK

// 引入微信SDK

http://res.wx.qq.com/open/js/jweixin-1.6.0.js

// 或https

https://res.wx.qq.com/open/js/jweixin-1.6.0.js

// console.log(window.wx)

3. 跳转

tabbar页面

wx.miniProgram.switchTab({

url: '/pages/index/index'

})

非tabbar页面

wx.miniProgram.navigateTo({

url: '/pages/activity/index'

})

Tips:

给一个按钮来触发，需要用户主动触发才行

小程序路径最前面别忘了是 /

二、微信内嵌H5跳转外部微信小程序页

第一种即微信小程序中创建一中间页，背景加按钮，用户再点一下，跳转其他小程序页。

由于上述方案多了中间页，需要用户再点一次，转化率和用户体验都不如原生小程序页，如果页面上内容不多，可以考虑直接用小程序页开发。

那如果小程序不是你负责的内容，你只有H5 权限，那还可以试试下面的方案

(1) 开放标签wx-open-launch-weapp

引入微信SDK，绑定安全域名，看完 上面内容一 应该已经做好

解除页面上对陌生标签的警告(让页面开发心情愉悦)

1、vue2中

Vue.config.ignoredElements = ['wx-open-launch-weapp'];

2、vue3中，有vue.config.js 的 非vite 项目

module.exports = {

//...其他配置

chainWebpack: config => {

config.module

.rule('vue')

.use('vue-loader')

.tap(options => {

options.compilerOptions = {

isCustomElement: tag => tag.startsWith('wx-')

}

return options

})

}

}

3、vue3中，有 vite.config.js 的 vite 项目

export default defineConfig({

root: process.cwd(),

base: './', // 如果是根目录部署请配置为 / isProduction ? "./" : "/"

// mode: process.env.NODE_ENV,

publicDir: 'public',

plugins: [

vue({

template: {

// 添加以下内容

compilerOptions: {

isCustomElement: tag => tag.startsWith('wx-') // 微信相关标签不要警告

}

}

})

],

})

4、让后台配合给一个接口，获取微信的config参数

比如node 后台 可参照 node 获取微信签名并使用jssdk

其它语言的随便搜搜都有~

Tips

上述步骤会需要企业小程序的appId 和appSecret，而不是对方的这些信息，提供你外跳的能力，此外成事后，开放的api 你都可以调用，比如分享

getWxConfig({

wxMiniId: 'gh_xxxxxx', // gh开头的原始id，并非appId

signUrl: window.location.href

}).then(res => {

const data = res.data.data

wx.config({

debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来

appId: data.appId, // 必填，公众号的唯一标识

timestamp: data.timestamp, // 必填，生成签名的时间戳

nonceStr: data.nonceStr, // 必填，生成签名的随机串

signature: data.signature, // 必填，签名

jsApiList: ['updateTimelineShareData'], // 必填，按需写

openTagList: ['wx-open-launch-weapp'] // 可选，需使用开放标签，如['wx-open-launch-app']

})

})

5、使用开放标签

vue2 中

vue3 中

Tips

一般思路就是把标签定位在元素上方，用户点击后跳走，里面不加任何东西，当然也可以定位个按钮在原来的图片上等，自由发挥即可~

三、短信跳转微信小程序页

由于短信引流成本低，很多公司都使用这样的方式去吸引流量，核心是获取URL Scheme

可查阅微信官方文档

太长不想看?

核心几点如下:

自2022年04月11日起，URL Scheme

iOS系统支持识别 URL Scheme，短信等应用场景中可直接使用，安卓需要h5中间页。

h5中间页??

Tips

如果你这个模板只服务一个短信链接，完全可以写死跳转的url，但是你想搞成通用的，可以像我上面这样封装下，根据类型去不同的小程序。然后URL Scheme也可以向后台实时获取新的，确保这个中间页的链接是有效的。

获取URL Scheme的方法较繁琐，我们可以通过服务端接口或在小程序管理后台「工具」-「生成 URL Scheme」入口可以获取打开小程序任意页面的 URL Scheme

只能生成已发布的小程序的 URL Scheme

由于不再支持永久有效，IOS也走中间页，在中间页动态获取有效的URL Scheme实现跳转

缺点:

这样后台要开发接口配合你来获取该链接，且你的h5地址如果很长，最好能生成短链，这样放在短信中不至于太长。

四、云开发静态网站跳转小程序

无公众号直接使用小程序身份开发网页并免鉴权跳转小程序?可以吗?

可以参考 官方文档

希望多多鼓励，我会继续出一些实用的编码经验和技巧分享给大家，需要前端技术资料可以关注下 Famous 看世界 ~


从0开始开发一款微信小程序

0基础做一个微信小程序，实现名片展示和拨打电话功能。

0、什么是小程序

运行在微信之上的轻量级APP，它就像微信多了一个程序入口，操作体验与微信原生APP几乎会差别，你可以基于微信APP上开发自己的服务。

1、注册小程序账号

https://mp.weixin.qq.com/cgi-bin/wx

支持个人、企业、媒体等主体注册，不同的主体微信小程序提供的能力不一样，根据实际情况选择，我以个人注册为例。

如果你还不知道什么是小程序，点击打开体验一下吧

2、安装微信小程序开发工具

登录小程序开发者后台，找到开发工具下载：微信开发者工具下载地址与更新日志 | 微信开放文档 (qq.com)，针对不同开发者有不同类似的版本，一般选择稳定版就可以了，功能稳定，目前稳定版是1.06.2310080。下载根据提示进行安装。

运行后如果有防火墙拦截，点击允许访问网络

3、创建一个小程序

打开微信开发工具后用微信扫码登录

登录成功后主界面如下图所示

小程序开发工具提供了不同类型的小程序模板，这里选择小程序类型，点“+”号创建一个新的小程序项目。

项目名称：给项目起的名字，你给小程序的名命

目录：本地保存该小程序项目的文件目录

AppID：在微信小程序后台注册的小程序名字产生的ID，没有的可以使用测试号进行测试，也可以先注册一个ID

开发模式：选择小程序

后端服务：有云开发与不使用云服务模式，云开发是使用微信提供的服务器，你需要付费购买，0基础使用云服务器有点复杂，而且是收费模式，新手不建议选择，这里选择不使用云服务器

模板选择：随便选一个即可

1区域是显示微信上打开的效果，2区域是该项目的文件结构，3区域是代码编辑区，4区域是调试信息显示区，5区域是开发工具栏。

工具栏的预览按钮可以直接在你的微信上打开预览。

在资源管理器中找到page/index/index.wxml这个就是小程序打开时展示的页面，把里面的内容全部删掉。新建一个图片img目录，把名片放在img目录中。

名片可以在网上随便生成一个。

在page/index/index.wxml输入以下代码：

是一对图片标签，是成对出现的，用括起来，

是开始标签，

是结束标签，注意结束标签有反斜杠/

标签里面可以加上一些属性，修饰这个图片显示的样式外观，src属性是显示图片的具体位置在哪，../表示当前文件的，../../表示的是再上一层的目录。mode是显示图片的模式，加上widthFix属性，否则图片显示可能会变形。一张小程序的名片就做好了，非常简单！

要实现打电话功能，需要写一个调用微信打电话的功能，微信是通过wx.makePhoneCall函数调用的，打开page/index/index.js文件，删除里面的内容，写入下面的调用代码：

Page({ phoneOn(){ wx.makePhoneCall({ phoneNumber: '18888888888', }) }})

照着写就可以了，phoneOn是函数名，如何实现在图片上点击就调用该函数进而拨打这个电话号码呢？

在page/index/index.wxml图片标签中绑定点击调用属性就可以了

绑定事件使用bindtap属性就可以实现。

点击图片后就会调用手机拨打电话功能

最后一步就是把开发好的中程序上传到微信后台审核。

4、小程序提交审核上线

登录小程序后台，在版本管理器中找到刚提交的开发版本，提交审核

提交审核的小程序会有一个代码安全审核流程

名片没有收集任何用户隐私，选择未采集用户隐私可以加快审核进度。

一般审核1-7天完成。

审核通过你就可以分享给你的朋友了

点击查看小程序演示

发布于：广东