生成小程序URLScheme

一、生成小程序URLScheme

小程序URLScheme是小程序特有的一種鏈接方式，可以實現在微信內跳轉到指定的小程序頁面。為了方便用戶在微信中打開小程序，生成小程序URLScheme是必不可少的。

生成小程序URLScheme非常簡單，只需要在小程序後面加上特定的參數就可以了。例如，我們需要在微信中打開一個名為「example」的小程序的「homepage」的頁面，那麼生成的URLScheme就是：weixin://dl/miniprogram/launch?appid=wx0123456789abcdef&path=/pages/homepage/homepage。其中，wx0123456789abcdef是小程序的AppID，/pages/homepage/homepage是頁面的路徑。

//生成小程序URLScheme的函數
function generateMiniProgramURLScheme(appid, path) {
  return 'weixin://dl/miniprogram/launch?appid=' + appid + '&path=' + encodeURIComponent(path);
}

//調用生成小程序URLScheme的函數，生成URLScheme
var miniProgramURLScheme = generateMiniProgramURLScheme('wx0123456789abcdef', '/pages/homepage/homepage');

二、生成小程序頁面二維碼

為了方便用戶在手機上快速打開小程序頁面，可以生成小程序頁面二維碼。用戶只需要掃描二維碼就可以在微信中打開對應的小程序頁面。

生成小程序頁面二維碼需要用到一個第三方庫qrcode.js，這個庫可以將字符串轉換成二維碼圖像。

//生成小程序頁面二維碼的函數
function generateMiniProgramPageQRCode(appid, path, size) {
  var url = generateMiniProgramURLScheme(appid, path);
  var qrcode = new QRCode(document.getElementById("qrcode"), {
    text: url,
    width: size ? size : 128,
    height: size ? size : 128
  });
}

//調用生成小程序頁面二維碼的函數，生成二維碼
generateMiniProgramPageQRCode('wx0123456789abcdef', '/pages/homepage/homepage', 256);

三、生成小程序磚

小程序磚是一種可以通過手機NFC功能掃描打開小程序的方式。使用小程序磚可以讓用戶更加方便地打開對應的小程序。

生成小程序磚需要用到一個第三方庫nfc-uri，這個庫可以將URL轉換成NFC格式。

//生成小程序磚的函數
function generateMiniProgramBrick(appid, path, name) {
  var url = generateMiniProgramURLScheme(appid, path);
  var nfc = nfcuri.encode(url, {name: name ? name : '小程序'});
  return nfc;
}

//調用生成小程序磚的函數，生成小程序磚
var miniProgramBrick = generateMiniProgramBrick('wx0123456789abcdef', '/pages/homepage/homepage', 'example小程序');

四、生成小程序鏈接

生成小程序鏈接可以在其他平台上分享小程序頁面鏈接，例如在微博、QQ、Facebook等平台上分享小程序頁面鏈接。

生成小程序鏈接需要用到一個第三方庫query-string，這個庫可以將對象轉換成URL查詢參數。

//生成小程序鏈接的函數
function generateMiniProgramLink(appid, path, extraData) {
  var url = generateMiniProgramURLScheme(appid, path);
  var obj = {path: path};
  if (extraData) {
    obj.extraData = JSON.stringify(extraData);
  }
  var queryString = querystring.stringify(obj);
  return 'https://mp.weixin.qq.com/mp/waapp/index.html?' + queryString + '#wechat_redirect';
}

//調用生成小程序鏈接的函數，生成小程序鏈接
var miniProgramLink = generateMiniProgramLink('wx0123456789abcdef', '/pages/homepage/homepage', {from: 'share'});

五、小程序生成

在小程序中，可以通過調用微信的API wx.navigateToMiniProgram進行跳轉到其他小程序。為了方便其他開發者調用我們的小程序，需要提供小程序生成功能，也就是生成可以調用我們小程序的URLScheme。

小程序生成同樣非常簡單，只需要將生成的URLScheme返回即可。

//小程序生成的函數
function onGenerateMiniProgram(event) {
  var miniProgramURLScheme = generateMiniProgramURLScheme('wx0123456789abcdef', '/pages/homepage/homepage');
  event.reply(miniProgramURLScheme);
}

六、生成小程序碼

生成小程序碼可以讓用戶通過掃描二維碼來打開小程序，與生成小程序頁面二維碼的功能類似。

生成小程序碼需要用到一個第三方庫wxapp-qrcode，這個庫可以將小程序的AppID和頁面路徑轉換成小程序碼圖像。

//生成小程序碼的函數
function generateMiniProgramCode(appid, path, size) {
  var url = generateMiniProgramURLScheme(appid, path);
  var qrcode = new WxappQrcode({
    draw: 'canvas',
    canvasId: 'qrcode',
    size: size ? size : 280,
    fit: true,
    typeNumber: 10,
    correctLevel: 'H',
    background: '#ffffff',
    foreground: '#000000',
    text: url
  });
}

//調用生成小程序碼的函數，生成小程序碼
generateMiniProgramCode('wx0123456789abcdef', '/pages/homepage/homepage', 320);

七、生成小程序帶參二維碼

小程序帶參二維碼可以在打開小程序時攜帶一些附加信息，例如分享者的OpenID等，可以用於統計推廣效果等。

生成帶參二維碼需要用到一個第三方庫qrcode-with-logo，這個庫可以將字符串和logo圖片合成為一張帶參二維碼圖像。

//生成小程序帶參二維碼的函數
function generateMiniProgramParamQRCode(appid, path, scene, size) {
  var url = generateMiniProgramURLScheme(appid, path) + '&scene=' + encodeURIComponent(scene);
  var qrcode = new QRCodeWithLogo({
    content: url,
    width: size ? size : 256,
    height: size ? size : 256,
    logo: 'https://example.com/logo.png',
    logoWidth: 60,
    logoHeight: 60
  });
  return qrcode;
}

//調用生成小程序帶參二維碼的函數，生成小程序帶參二維碼
var miniProgramParamQRCode = generateMiniProgramParamQRCode('wx0123456789abcdef', '/pages/homepage/homepage', '12345678');
var qrcodeImage = miniProgramParamQRCode.toDataURL();

八、生成小程序鏈接快捷指令

在iOS 12中，可以使用Siri Shortcuts的快捷指令功能創建一個可以在Siri中直接喚起小程序的快捷指令。為了方便用戶創建快捷指令，在小程序中可以生成小程序鏈接快捷指令。

生成小程序鏈接快捷指令需要用到一個第三方庫shortcut-generator，這個庫可以將小程序的AppID和頁面路徑轉換成一個可以導入到Siri中的快捷指令文本。

//生成小程序鏈接快捷指令的函數
function generateMiniProgramShortcut(appid, path, name) {
  var url = generateMiniProgramURLScheme(appid, path);
  var shortcut = ShortcutGenerator.create({
    name: name ? name : 'example小程序',
    bundleId: 'com.example.miniprogram',
    url: url,
    icon: 'https://example.com/icon.png'
  });
  return shortcut;
}

//調用生成小程序鏈接快捷指令的函數，生成小程序鏈接快捷指令
var miniProgramShortcut = generateMiniProgramShortcut('wx0123456789abcdef', '/pages/homepage/homepage', 'example小程序');