没有云开发相关经验,采用演示视频来学习本教程

写在上面

如果您想自己开发,但没有云开发经验,您可以按照本教程观看演示视频:

一、能力介绍

对于国内的非个人认证小程序,打开静态网站后,无需信令即可发送支持跳转到对应小程序的邮件。邮件中会包含静态网站链接,可以在陌陌内外打开,用户打开页面后可以一键跳转到你的小程序。

链接的网页使用 URLScheme 方法拉起陌陌在外部浏览器中打开主小程序。

其实邮件跳转能力的实现分为“配置拉起网页”和“发送邮件”两个步骤。本教程将介绍如何执行操作来完成邮件跳转小程序的能力。

如果想要在不写代码的情况下完成邮件跳转小程序的能力,可以参考无代码版教程逐步实现。

二、操作说明1、网页制作

首先,我们需要构建一个基本的 Web 应用程序,在任何代码编辑器中创建一个 html 文件,在教程中命名为 index.html

在这个html文件中输入以下代码网站直接生成小程序,并按照注释替换自己的信息:

  window.onload = function(){
    window.web2weapp.init({
      appId: 'wx999999', //替换为自己小程序的AppID
      gh_ID: 'gh_999999',//替换为自己小程序的原始ID
      env_ID: 'tcb-env',//替换小程序底下云开发环境ID
      function: {
        name:'openMini',//提供UrlScheme服务的云函数名称
        data:{} //向这个云函数中传入的自定义参数
      },
      path: 'pages/index/index.html' //打开小程序时的路径
    })
  }

上面介绍的web2weapp.js文件是一个极简应用,封装在陌陌小程序拉起教程中,直接引用即可轻松使用。

如果想进一步研究和更改一些WEB显示信息,可以到github获取源代码并进行更改。

更多网页拉取小程序,可以访问官方文档

如果您只想体验邮件跳转功能,在执行完上述文件创建操作后,继续以下步骤。

2、创建服务云功能

在前面创建网页的过程中,需要填写一个UrlScheme服务云函数。该云函数主要用于调用陌陌的服务端能力,获取对应的Scheme信息并返回给调用后端。

我们在示例中填写的是名为 openMini 的云函数。

我们到了陌陌开发者工具,定位到对应的云开发环境,创建了一个云函数openMini。

将云函数目录下的index.js文件替换为如下代码:

const cloud = require('wx-server-sdk')
cloud.init()
exports.main = async (event, context) => {
  return cloud.openapi.urlscheme.generate({
    jumpWxa: {
      path: '', // 打开小程序时访问路径,为空则会进入主页
      query: '',// 可以使用 event 传入的数据制作特定参数,无需求则为空
    },
    isExpire: true, //是否到期失效,如果为true需要填写到期时间,默认false
    expire_time: Math.round(new Date().getTime()/1000) + 3600
    //我们设置为当前时间3600秒后,也就是1小时后失效
    //无需求可以去掉这两个参数(isExpire,expire_time)
  })
}

保存代码后,右键index.js,选择增量更新文件,更新成功。

取出来,我们需要开启云功能的无日志访问权限。进入小程序云开发控制台,进入设置-权限设置,下方发现你没有登录,选择前面步骤中我们统一操作的云开发环境(注:配置的云开发环境第一步和云功能所在的环境,和这一步的环境应该是一样的),勾选打开不登录

拿出来,到云功能控制台,点击云功能权限,最后一次更改的安全规则,在弹框中配置如下:

3、本地测试

我们在本地浏览器中打开第一步创建的index.html;调出控制台,如果效果如右图,就成功了!需要注意的是,在本地打开HTTP合约时,建议使用liveserver等扩展来打开。不要直接在资源管理器中打开浏览器,会出现跨域问题!

4、上传本地创建的 index.html 到静态网站托管

将本地创建的index.html上传到静态网站托管,其中静态托管需要是小程序本身云开发环境中的静态托管。

如果你上传到其他静态主机或服务器,你可以一直使用外部浏览器打开小程序,但是你会失去在陌陌浏览器打开小程序打开小程序的能力,你也不会享受云开发的乐趣。电子邮件发送跳转链接的能力。

如果你的目标小程序中有多个云开发环境,你不需要保证云功能和静态托管在同一个环境中,没关系。

比如你有A和B两个环境,A部署了上面的云功能,将index.html部署到B的环境中进行静态托管。这没问题,满足各种能力要求。只要确保第一步index.html网页中的云开发环境配置是云功能所在的环境即可。

部署成功后可以访问静态主机所在的地址,可以通过手机外部浏览器和陌陌内部浏览器测试打开小程序的能力。

5、短信发送云功能配置

在之前创建openMini云函数的环境中,还有一个名为sendms的云函数。

在此云函数 index.js 中配置如下代码:

const cloud = require('wx-server-sdk')
cloud.init({
	env: cloud.DYNAMIC_CURRENT_ENV,
})
exports.main = async (event, context) => {
	try {
		const config = {
			env: event.env,
			content: event.content ? event.content : '发布了短信跳转小程序的新能力',
			path: event.path,
			phoneNumberList: event.number
		}
		const result = await cloud.openapi.cloudbase.sendSms(config)
		return result
	} catch (err) {
		return err
	}
}

保存代码后,右键index.js,选择增量更新文件,更新成功。

6、测试邮件发送能力

小程序代码中,app.js初始化云开发后,调用云函数。示例代码如下:

App({
  onLaunch: function () {
    wx.cloud.init({
      env:"tcb-env", //短信云函数所在环境ID
      traceUser: true
    })
    wx.cloud.callFunction({
      name:'sendsms',
      data:{
        "env": "tcb-env",//网页上传的静态托管的环境ID
        "path":"/index.html",//上传的网页相对根目录的地址,如果是根目录则为/index.html
        "number":[
          "+8616599997777" //你要发送短信的目标手机,前面需要添加「+86」
        ]
      },success(res){
        console.log(res)
      }
    })
  }
})

重新编译运行后,如果在控件台北看到如下输出,则测试成功:

您将在目标手机上收到电子邮件。由于邮件中包含“退订回复T”字段,可能会触发手机的手动屏蔽机制,需要在被屏蔽的邮件中自动勾选。

注意:您可以将邮件云功能和URLScheme云功能放置在不同的云开发环境中,但必须确保您放置的云开发环境属于您操作的小程序。

另外,为了避免滥用,邮件发送的云调用能力需要真正的小程序用户访问才能生效。不能使用云测试、云开发JS-SDK等非wx.cloud调用方式(陌陌WEB-SDK除外),会提示如下错误:

如果您想在其他地方使用此功能,您可以使用服务器端 API 进行正常的 HTTP 调用。详情请访问官方文档

7、查看邮件监控图表

进入云开发控制台 > 操作分析 > 监控图表 > 邮件监控,查看邮件监控图和短信发送记录。

三、总结邮件跳转小程序的核心是静态网站中配置的可跳转网页。外部浏览器通过 URLScheme 实现它。此方法不适用于陌陌浏览器。它需要使用开放标签来访问 URLScheme。生成是云调用能力,需要在目标小程序的云开发环境的云功能中使用。而且生成的URLScheme只能是你自己的applet的open链接,不能是任何applet(任何与open标签不一致的地方)。发邮件体验每个环境首月100个有免费配额,如果超过配额要求可以放在开发者工具-云开发控制台-对应按时付费环境-资源包-邮件资源包订购。

电子邮件发送也是一种云呼叫能力。需要真正的小程序用户调用才能正常触发。所有其他方法都报告错误并返回参数错误。为了避免滥用网站直接生成小程序,云功能和网页可以放在不同的环境中,只要保证它们所属的小程序。你可以同意。(需要保证对应的环境ID可以连接)如果不需要邮件能力,可以忽略CMS配置通道下发的最后两步,数据统计可以参考