Record the process of launching a small program urgently three days before

background

At the end of last year, there were still a few days left before the Chinese New Year. The product department suddenly came over and asked if he could finish it a year ago and then launch a small program to use the traffic from the Chinese New Year to attract a wave.

Time is short, task is urgent. And the company is still opening up sources and reducing expenditures and streamlining servers. This project also ran during the Chinese New Year, and it was abandoned after that. Combining all kinds of things, it is proposed to try the cloud development of small programs.

Mini Program Cloud Development Advantages

There is no need to build a server, quickly build small programs, call WeChat open services without login and authentication, charge by volume, and content management (CMS), it is suitable for small projects to be developed in the cloud.

In addition to the normal display, this project also uses the following functions

Static website H5 jump to any page of the applet
Customer Service Message Auto Reply
Subscribe to news push

The above-mentioned combination of applet cloud development does not require the participation of the back-end, and the front-end can also be easily implemented.

Let’s take a look at the cost issues that everyone is more concerned about

On the left is the cost, on the right is the number of visitors,
It can be seen that there are about 800-1000 visits per day, and the cost is only a few cents. This is the data when the content management (CMS) is opened. So for the cost of this one can completely dispel this concern

Static website H5 jump to any page of the applet

Old rules first look at document https://developers.weixin.qq.com/miniprogram/dev/wxcloud/guide/staticstorage/jump-miniprogram.html
Capability
You can jump to the applet in the H5 of the WeChat internal browser, or you can jump to the WeChat applet in the external browser of WeChat or some other apps (such as enterprise WeChat, QQ, etc.).
According to the document, I changed it to jump to the home page and any details page

H5 page

<html>

<head>
  <title>打开小程序</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1, maximum-scale=1">
  <script>
    window.onerror = e => {
      console.error(e)
      alert('发生错误' + e)
    }
  </script>
  <!-- weui 样式 -->
  <link rel="stylesheet" href="https://res.wx.qq.com/open/libs/weui/2.4.1/weui.min.css">
  </link>
  <!-- 调试用的移动端 console -->
  <!-- <script src="https://cdn.jsdelivr.net/npm/eruda"></script> -->
  <!-- <script>eruda.init();</script> -->
  <!-- 公众号 JSSDK -->
  <script src="https://res.wx.qq.com/open/js/jweixin-1.6.0.js"></script>
  <!-- 云开发 Web SDK -->
  <script src="https://res.wx.qq.com/open/js/cloudbase/1.1.0/cloud.js"></script>
  <script>
    function getQueryVariable(variable) {
      var query = window.location.search.substring(1);
      var vars = query.split("&");
      for (var i = 0; i < vars.length; i++) {
        var pair = vars[i].split("=");
        if (pair[0] == variable) { return pair[1]; }
      }
      return (false);
    }
    let id = getQueryVariable('id') || ''
    function docReady(fn) {
      if (document.readyState === 'complete' || document.readyState === 'interactive') {
        fn()
      } else {
        document.addEventListener('DOMContentLoaded', fn);
      }
    }

    docReady(async function () {
      var ua = navigator.userAgent.toLowerCase()
      var isWXWork = ua.match(/wxwork/i) == 'wxwork'
      var isWeixin = !isWXWork && ua.match(/micromessenger/i) == 'micromessenger'
      var isMobile = false
      var isDesktop = false
      if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) {
        isMobile = true
      } else {
        isDesktop = true
      }

      if (isWeixin) {
        var containerEl = document.getElementById('wechat-web-container')
        containerEl.classList.remove('hidden')
        containerEl.classList.add('full', 'wechat-web-container')
        var dom = document.getElementById('wxOpenInAPP') 
        let path ='/pages/index/index';
        if(id){
            path = '/pages/detail/index?id='+id
        }
        console.log('path',path)
        dom.innerHTML = '<wx-open-launch-weapp id="launch-btn" username="gh_adf5777ca9be" path="'+path+'"><template><button style="width: 200px; height: 45px; text-align: center; font-size: 17px; display: block; margin: 0 auto; padding: 8px 24px; border: none; border-radius: 4px; background-color: #07c160; color:#fff;">打开小程序</button></template></wx-open-launch-weapp>'
   
        var launchBtn = document.getElementById('launch-btn')
        launchBtn.addEventListener('ready', function (e) {
          console.log('开放标签 ready')
        })
        launchBtn.addEventListener('launch', function (e) {
          console.log('开放标签 success')
        })
        launchBtn.addEventListener('error', function (e) {
          console.log('开放标签 fail', e.detail)
        })

        wx.config({
          // debug: true, // 调试时可开启
          appId: '你的appId', // <!-- replace -->
          timestamp: 0, // 必填，填任意数字即可
          nonceStr: 'nonceStr', // 必填，填任意非空字符串即可
          signature: 'signature', // 必填，填任意非空字符串即可
          jsApiList: ['chooseImage'], // 必填，随意一个接口即可 
          openTagList: ['wx-open-launch-weapp'], // 填入打开小程序的开放标签名
        })
      } else if (isDesktop) {
        // 在 pc 上则给提示引导到手机端打开
        var containerEl = document.getElementById('desktop-web-container')
        containerEl.classList.remove('hidden')
        containerEl.classList.add('full', 'desktop-web-container')
      } else {
        var containerEl = document.getElementById('public-web-container')
        containerEl.classList.remove('hidden')
        containerEl.classList.add('full', 'public-web-container')
        var c = new cloud.Cloud({
          // 必填，表示是未登录模式
          identityless: true,
          // 资源方 AppID
          resourceAppid: '你的appId', // <!-- replace -->
          // 资源方环境 ID
          resourceEnv: '你的环境ID', // <!-- replace -->
        })
        await c.init()
        window.c = c

        var buttonEl = document.getElementById('public-web-jump-button')
        var buttonLoadingEl = document.getElementById('public-web-jump-button-loading')
        try {
          await openWeapp(() => {
            buttonEl.classList.remove('weui-btn_loading')
            buttonLoadingEl.classList.add('hidden')
          })
        } catch (e) {
          buttonEl.classList.remove('weui-btn_loading')
          buttonLoadingEl.classList.add('hidden')
          throw e
        }
      }
    })
    async function openWeapp(onBeforeJump) {
      var c = window.c
      const res = await c.callFunction({
        name: 'public',
        data: {
          action: 'getUrlScheme',
          id: id
        },
      })
      console.warn(res)
      if (onBeforeJump) {
        onBeforeJump()
      }
      location.href = res.result.openlink
    }
  </script>
  <style>
    .hidden {
      display: none;
    }

    .full {
      position: absolute;
      top: 0;
      bottom: 0;
      left: 0;
      right: 0;
    }

    .public-web-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .public-web-container p {
      position: absolute;
      top: 40%;
    }

    .public-web-container a {
      position: absolute;
      bottom: 40%;
    }

    .wechat-web-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .wechat-web-container p {
      position: absolute;
      top: 40%;
    }

    .wechat-web-container wx-open-launch-weapp {
      position: absolute;
      bottom: 40%;
      left: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .desktop-web-container {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    .desktop-web-container p {
      position: absolute;
      top: 40%;
    }
  </style>
</head>

<body>
  <div class="page full">
    <div id="public-web-container" class="hidden">
      <p class="">正在打开 “你的小程序名称”...</p> <!-- replace -->
      <a id="public-web-jump-button" href="javascript:" class="weui-btn weui-btn_primary weui-btn_loading"
        onclick="openWeapp()">
        <span id="public-web-jump-button-loading" class="weui-primary-loading weui-primary-loading_transparent"><i
            class="weui-primary-loading__dot"></i></span>
        打开小程序
      </a>
    </div>
    <div id="wechat-web-container" class="hidden">
      <p class="">点击以下按钮打开 “你的小程序名称”</p> <!-- replace -->
      <!-- 跳转小程序的开放标签。文档 https://developers.weixin.qq.com/doc/offiaccount/OA_Web_Apps/Wechat_Open_Tag.html -->
      <div id="wxOpenInAPP" class="wexin-launch-btn">
      </div>
    </div>
    <div id="desktop-web-container" class="hidden">
      <p class="">请在手机打开网页链接</p>
    </div>
  </div>
</body>

</html>

cloud function

// 云函数入口文件
const cloud = require('wx-server-sdk')
cloud.init({
  env: 'id'
})

// 云函数入口函数
exports.main = async (event, context) => {
  const wxContext = cloud.getWXContext()

  switch (event.action) {
    case 'getUrlScheme': {
      return getUrlScheme(event)
    }
  }

  return 'action not found'
}

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

Deploy the cloud function and upload the static H5 page to the static website developed by the cloud

Find the domain name in the website configuration, you can H5 jump to the applet.

`Effect preview`

Here is an official chestnut https://postpay-2g5hm2oxbbb721a4-1258211818.tcloudbaseapp.com/jump-mp.html

Others come to the liver again in the next stage

Record the process of launching a small program urgently three days before

background

Mini Program Cloud Development Advantages

Let’s take a look at the cost issues that everyone is more concerned about

Static website H5 jump to any page of the applet

H5 page

cloud function

`Effect preview`

`Change jobs? Looking for interview questions? Come to the front-end interview question bank wx to search for the advanced front-end of`

zhou_web

`引用和评论`

【小程序制作之旅】完美支持 Markdown 看这一篇就够了，超详细教程

开发自定义Taro插件解决跨平台难题

通过duxapp提供的基础方法、UI组件、全局样式，快速编写项目

如何通过即构小程序组件实现直播带货功能？

移动端、微信小程序兼容性问题汇总（持续更新……

Taro小程序开发性能优化实践

基于微信/抖音的小程序源码打包下载（技术开发说明文档+代码编译架构）