theme: channing-cyan
1. Demand background:
The company needs to carry a short link by sending a text message. The user clicks on the short link to jump to a page of the applet, and then opens the webviewh5 page of the page of the applet, and then the link carries parameters.
Technology used:
Mainly use the cloud development of small programs, the relevant documents are here:
Cloud Development Documentation
Operating procedures:
1. The user clicks the short link to jump to the applet
Then open the applet
is such a process
Code flow:
1, We need an h5 routing page on the home page, which can be accessed by the address. I use the vue framework
<template> <div class='open-mini-wrapper'> <div class="page full"> <div id="public-web-container" class="hidden"> <p class="">Opening "Applet"...</p> <a id="public-web-jump-button" href="javascript:" @click="openWeapp"> <van-button type='primary'>open applet</van-button> </a> </div> <div id="wechat-web-container" class="hidden" > <p class="">Click the button below to open the "Mini Program"</p> <wx-open-launch-weapp id="launch-btn" :username="originId" :path="path"> <script type="text/wxtag-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;"> open applet </button> </script> </wx-open-launch-weapp> </div> <div id="desktop-web-container" class="hidden"> <p class="">Please open the web link on your mobile phone</p> </div> </div> </div> </template> <script> import {getQueryObject} from "@/utils"; export default { name: "OpenMini", data() { return { xxx: '', // Parameters that need to be passed path: '', // Jump to the path of the applet originId: '',//Mini Program Original ID resourceAppid: '', //applet appid resourceEnv: '' //Mini Program cloud environment id } }, created() { this.xxx = getQueryObject().xxx const url = `https://xxx?xxx=${this.xxx}` this.path = 'pages/h5/h5?url=' + encodeURIComponent(url) this.$getWeChatParams(this.xxx, window.location.href); // For the configuration method of WeChat development function, see the bottom }, mounted() { this.init() }, methods: { // Prepare docReady(fn) { if (document.readyState === 'complete' || document.readyState === 'interactive') { fn() } else { document.addEventListener('DOMContentLoaded', fn); } }, init() { this.docReady(async () => { let ua = navigator.userAgent.toLowerCase() let isWXWork = ua.match(/wxwork/i) == 'wxwork' let isWeixin = !isWXWork && ua.match(/MicroMessenger/i) == 'micromessenger' // let isMobile = false let isDesktop = false if (navigator.userAgent.match(/(phone|pad|pod|iPhone|iPod|ios|iPad|Android|Mobile|IEMobile)/i)) { // isMobile = true } else { isDesktop = true } if (isWeixin) { let containerEl = document.getElementById('wechat-web-container') containerEl.classList.remove('hidden') containerEl.classList.add('full', 'wechat-web-container') let launchBtn = document.getElementById('launch-btn') launchBtn.addEventListener('ready', function (e) { console.log('open tab ready') }) launchBtn.addEventListener('launch', function (e) { console.log('open tab success') }) launchBtn.addEventListener('error', function (e) { console.log('open tab fail', e.detail) }) } else if (isDesktop) { // On the pc, a prompt will be given to guide the mobile phone to open let containerEl = document.getElementById('desktop-web-container') containerEl.classList.remove('hidden') containerEl.classList.add('full', 'desktop-web-container') } else { let containerEl = document.getElementById('public-web-container') containerEl.classList.remove('hidden') containerEl.classList.add('full', 'public-web-container') let c = new cloud.Cloud({ // Mandatory, means not logged in mode identityless: true, // Resource side AppID resourceAppid: this.resourceAppid, // Resource side environment ID resourceEnv: this.resourceEnv, }) await c.init() window.c = c await this.openWeapp() } }) }, async openWeapp() { let c = window.c const res = await c.callFunction({ name: 'public', data: { action: 'getUrlScheme', option: { xxx: this.xxx, } }, }) location.href = res.result.openlink } } } </script> <style scoped lang='scss'> .open-mini-wrapper { .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>
The above code is the code to open the applet, but it has no effect at this time, and the cloud function needs to be configured
The cloud development service needs to be activated in the background of the applet first, and a cloud environment cloudID will be assigned at this time
Open the Mini Program Developer Tools - "Click Cloud Development to activate the static website function
Click Settings in the cloud development console,
Then click Cloud Function to configure custom security rules
public is the name of the cloud function, the rules are as follows
{ "*": { "invoke": "auth != null" }, "public": { "invoke": true } }
At this time, the lack of cloud functions needs to create a new cloud function in the code
Add a new folder named cloud
Add configuration to the project.config.josn file
"cloudbaseRoot": "cloud/",
Add a new cloud function named public, and then synchronize the cloud function to the server (WeChat applet itself)
Code writing in cloud function index.js
// Cloud function entry file const cloud = require('wx-server-sdk') cloud.init({ env: cloud.DYNAMIC_CURRENT_ENV }) // Use the current cloud environment // Cloud function entry function exports.main = async (event, context) => { const wxContext = cloud.getWXContext() switch (event.action) { case 'getUrlScheme': { return getUrlScheme(event.option) } } return { event } } async function getUrlScheme(option) { let query = 'xxx=' + option.xxx + '&from=yunhanshu' // The parameters that need to be carried const result = await cloud.openapi.urlscheme.generate({ jumpWxa: { path: 'pages/h5/h5', // <!-- replace --> query: query }, // If you don't want to expire, set it to false and save it to the database isExpire: false, // Valid for one minute expireTime: parseInt(Date.now() / 1000 + 60), }) return { ...result, query } }
Then sync the cloud function
At this point, the cloud function department has been developed, and the rest is to jump to the specified page path of the applet, and the final code
2, and then it is necessary to configure the function that accepts parameters in the applet
The h5.wxml part is simple because the webview
<web-view src="{{url}}"></web-view>
h5.js only needs to accept parameters
// pages/webview/h5.js const { getOpenId, } = require('../../utils/userUtils') Page({ data: { url:'' }, onLoad(options) { // console.log(options, 'optionsaaa') if(options.from && options.from === 'yunhanshu') { const url = `https://xxx/#/?xxx=${options.xxx}` this.setData({ url: url }) }else { this.setData({ url:decodeURIComponent(options.url) }) } } })
3. The function of the external package is used above
This function needs to be used in conjunction with the back-end interface, mainly to obtain parameter information such as signature, there are many on the Internet, search by yourself
const getWeChatParams = async function (agentID, path, isHidden = false) { if (agentID) { let result = await wxticket({agentID, path}) if (result.code === S_OK) { if (isHidden) { getHiddenWeChatShare(result.data) } else { getWeChatShare(result.data) } } } } const getWeChatShare = function (params) { let title = shareTitle; let desc = shareDesc weChat.config({ debug: false, appId: appId, timestamp: params.timestamp, nonceStr: params.nonceStr, signature: params.signature, jsApiList: ['hideMenuItems', 'onMenuShareAppMessage', 'onMenuShareTimeline'], openTagList:['wx-open-launch-weapp'], // Fill in the name of the open label to open the applet }); weChat.ready(function () { // Bulk hide menu items weChat.hideMenuItems({ menuList: [ 'menuItem:readMode', // reading mode 'menuItem:share:qq', 'menuItem:share:weiboApp', 'menuItem:share:facebook', 'menuItem:share:QZone' ] }); // Monitor "Share to friends", button click, custom share content and share result interface weChat.onMenuShareAppMessage({ title: title, // share title desc: desc, // share description link: params.url, // share link imgUrl: `${urlDomain}/logo.png` // share icon }); //Monitor the "Share to Moments" button click, customize the shared content and share the result interface weChat.onMenuShareTimeline({ title: title, // share title desc: desc, // share description link: params.url, // share link imgUrl: `${urlDomain}/logo.png` // share icon }) }); }
At this point, the entire development process is over, haha, isn't it very simple.
If it is helpful, please like, comment, and add favorites, so that you can find it later. If it is not realized, you can leave a message to communicate.
Welcome to comment, like and support, this article is developed by Snail Laoshi Butterfly One-click release system release, need to contact qq 1520521891