h5唤起小程序分享

准备工作

0 非个人注册的小程序，具有小程序的appid

1 账号添加到开发者

2 下载开发者工具

唤起方式调研

方式	技术成本	优点	缺点
公众号跳转	后台关联，开发公众号	稳定，	打开场景限制在微信和公众号内，
静态网站	开发和替换网站	开发和发布灵活	每个小程序单独维护代码，收费
url scheme	后端开发小程序推送地址的接口，提供给前端，后端内完成鉴权，需要域名和通讯符合协议额	稳定，较成熟	需要后端发服务，不够灵活，要支持高并发

公众号关联：略

局限在公众号内

url scheme ：略

需要后端同学，开发接口，调用微信接口，生成url scheme

小程序开通静态网站，作为中转（重点介绍）

最终选择了这种方案，新出方案

小程序准备工作

基本工作

1 注册小程序（个人邮箱加企业主体认证）

2 得到小程序的appid和秘钥

3 一般注册者为管理员，需要添加其他人为开发者和体验小程序的体验者才能看到体验版小程序

唤起准备工作

静态网站

静态网站说明：developers.weixin.qq.com/miniprogram…

付费说明：（静态网站的入口也是要开通按量付费之后才有）

确定之后，后续工作：

1 需要绑定静态网站的开发者，一般是管理员

2 网站设置自定义域名，目前内定的规则为，applet-项目名.xiaoyuanhao.com ，项目名最好有仓库中的项目名一致

3 需要增加域名的证书，找运维提供管理员微信以及证书和秘钥，上传添加小程序静态站点标签

4 配置环境可未登录访问

开发页面

官方说明文档：developers.weixin.qq.com/miniprogram…

1 唤起的h5页面

需要替换的位置:

1.1 微信内唤起，主要是使用开放标签，

官方的一些答疑：

官方开放标签的说明

1.11 react内如何唤起，开放标签在react环境时，会无法解析该表现

1 需要将其按照dangerousSetHTML的方式实现，参考代码如下：

createWeAppHtml() {
        return { __html: '<wx-open-launch-weapp id="launch-btn" username="gh_开头的小程序的原始id" path="/pages/index/index.html?userid=taihealthtest&roomid=120"><template><button >跳转小程序</button></template></wx-open-launch-weapp>' }

2 或者需要使用 <script type="text/wxtag-template />

<div style={{ position: 'relative', width: '6.3rem', height: '2.46rem' }}>
  <div>这里写你唤起小程序的页面元素</div>
  <wx-open-launch-weapp
    id="launch-btn"
    username="gh_****"
    path="/pages/index/index.html"
    style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%' }}
  >
    <script type="text/wxtag-template">
      <div style={{ position: 'absolute', top: 0, left: 0, width: '100%', height: '100%', opacity: 0 }} />
    </script>
  </wx-open-launch-weapp>
</div>

以下配置项只有appid是必须换的

wx.config({
  // debug: true, // 调试时可开启
  appId: '小程序 AppID', // <!-- replace -->
  timestamp: 0, // 必填，填任意数字即可
  nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
  signature: 'signature', // 必填，填任意非空字符串即可
  jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
  openTagList:['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
})

应用打开的地址是标签内设置的，

其中username 为小程序的原始id,path为需要跳转后的路径，可携带参数（路径建议从现有的小程序去获取）

   <wx-open-launch-weapp id="launch-btn" username="xxx" path="/"> <!-- replace -->
          <template>
            <button>打开小程序</button>
          </template>
        </wx-open-launch-weapp>

获取原始id的路径，步骤如下

1.2 微信外唤起，主要依赖openWeapp方法，这个方法依赖云函数，云函数返回的openlink为可访问的链接。

//云函数的相关配置    
var c = new cloud.Cloud({
            // 必填，表示是未登录模式
            identityless: true,
            // 资源方 AppID
            resourceAppid: 'wx76a8c1159c17d891', // <!-- replace -->
            // 资源方环境 ID
            resourceEnv: 'jumpline-3g46yc0l58bcfc25', // <!-- replace -->
             // 资源方 AppID
            //  resourceAppid: 'wxe5f52902cf4de896',
            // 资源方环境 ID
            // resourceEnv: 'postpay-2g5hm2oxbbb721a4',
})



const res = await c.callFunction({
          name: 'public',
          action: 'getUrlScheme',
          data: {
            action: 'getUrlScheme',
            path:'',

}})
 if(res && res.result && res.result.openlink){
   location.href= res.result.openlink;
}

云函数的能力就可以让浏览器唤起微信app,其大致的格式为：{"openlink":"weixin://dl/business/?t=L8lv5GLzvgn","errMsg":"openapi.urlscheme.generate:ok","errCode":0}

备注：errCode：0为成功返回。

2 云函数

2.1云函数，首先需要建立云函数的目录（增加之后，可以社会其运行的环境），区分于原小程序的目录，需要在project.config.json中增加两个配置，分别为小程序的目录，云函数目录，

2.2 其中appid与云函数具有对应关系，设置为这个id的小程序均可以看到其对应的云函数。

{ "miniprogramRoot": "minip/",
  "cloudfunctionRoot": "cloudfunctions/",
  "appid": "wx92fb081fd07bc779",
}

2.3 小程序内添加云函数的配置为true ，"choud":true

2.4 需要选择进行云函数的发布与上传，如果执行中上传不成功，要原则node_modules云端安装依赖

2.5 原函数的内容：

// 云函数入口文件
const cloud = require('wx-server-sdk')

cloud.init()

// 云函数入口函数 action根据业务自己定义，是否与页面具体路径匹配
exports.main = async (event, context) => {
  switch (event.action) {
    case 'getUrlScheme': {
      return getUrlScheme(event.options)
    }
  }

  return 'action not found'
}

async function getUrlScheme(options) {
  return cloud.openapi.urlscheme.generate({
    jumpWxa: {
      path: 'pages/rank/levelList/levelList', // <!-- replace -->
      query: 'a=1',
    },
    // 如果想不过期则置为 false，并可以存到数据库
    isExpire: false,
    // 一分钟有效期
    expireTime: parseInt(Date.now() / 1000 + 60),
  })
}

其中得到url scheme的方式以及出入参参考文档：url scheme generate

3 “云开发”的入口，填写测试号的是没有该入口的

需要填写真实的appid，才会有工具栏“云开发”的功能入口，对应的小程序后台可以设置云开发相关的参数：开发 -- 云服务 -- 云开发

唤起

1 要浏览器支持url scheme的方式，其获取到的scheme如果不能主动打开，可以提供降级的方案，让用户微信扫码（该scheme生成二维码）

2 必须线上的小程序，测试的小程序不支持唤起

3 第一次唤起必须发布过一次线上环境

调试

可以通过本地调试，但目前调试打开小程序会报token异常，有待进一步处理。

备注：工具类的函数是可以正常使用的。

携带参数

假设我们需要打开的是头脑学院小程序中比赛匹配的一个具体页面，其地址和参数为：

pages/rank/levelList/levelList ?levelId=1

微信内携带参数

直接拼接在开放标签的path中,

<wx-open-launch-weappid="launch-btn"username="gh_xxx"path="/pages/common/httpMatching/httpMatching?levelId=1">

微信外携带参数

写在data中，最终会在event中进行解析，然后放在query字段中

constres = awaitc.callFunction({
name:'public',
action:'getUrlScheme',
data: {
action:'getUrlScheme',
path:'/pages/common/httpMatching/httpMatching',
query:'levelId=1'
 },
 })

云函数中对应的写法为：

async function getUrlScheme(options) {
  console.log('options',options);
  const {path,query} = options;
  return cloud.openapi.urlscheme.generate({
    jumpWxa: {
      path:path, // <!-- replace -->
      query: query,
    },
    // 如果想不过期则置为 false，并可以存到数据库
    isExpire: false,
    // 一分钟有效期
    expireTime: parseInt(Date.now() / 1000 + 60),
  })
}