The user scans the ordinary QR code to enter the specified page of the mini program with detailed steps

The user scans the ordinary QR code to enter the specified page of the mini program with detailed steps

1. Enter the WeChat public platform Mini Program Development Management - Development Settings - Scan the QR code of the common link to open the Mini Program - Enable

Insert image description here

2. Add rules: My QR code rule here is the address of the front-end project, which can be modified by yourself. The downloaded verification file is placed in the project. According to the requirements, it needs to be placed under the root directory of the domain name of the server. Here I put it under the public file (vue project). Copy the file to the root directory of the domain name during operation and maintenance construction. , make sure you can access this file through our address

Insert image description here
Insert image description here

3. The specific configuration is as follows. In the test environment (whether it is the development version or the trial version), it should be noted that the link scanned by your WX must be a test link, and the parameters of the test link must be consistent with the scanning parameters, otherwise the applet cannot be jumped, especially It is recommended that the URL parameters should not be too long, otherwise the generated QR codes will be dense and difficult to scan out. Generally, the QR code links are generated by the backend, and the parameters are dynamic (take my project as an example because it jumps from the foreground to the applet. It needs to carry a large number of parameters, and there have been similar situations that cannot be scanned, so we negotiated with the backend that the URL parameters only need an id, jump to the applet, and then use this id to adjust the interface to get the parameters)

Insert image description here

4. In the test environment, there is no need to publish rules. After publishing in the official environment, we can configure this QR code to jump to the specified page of the applet.

Insert image description here

5. Mini program obtains QR code link parameters

// 获取url参数
export function getUrlParam(optionsq) {
    
    
  const url = decodeURIComponent(optionsq)
  let res = {
    
    }
  //下面这个方法是方便收集成对象做的工具类
  const query = (url.split('?')[1] || '').trim().replace(/^(\?|#|&)/, '')
  if (!query) return res 
  query.split('&').forEach(param => {
    
    
    const parts = param.replace(/\+/g, ' ').split('=')
    const key = decodeURIComponent(parts.shift())
    const val = parts.length > 0 ? decodeURIComponent(parts.join('=')) : null
    if (res[key] === undefined) {
    
    
      res[key] = val
    } else if (Array.isArray(res[key])) {
    
    
      res[key].push(val)
    } else {
    
    
      res[key] = [res[key], val]
    }
  })
  return res
} 
 onShow() {
    
    
     // pdf二维码扫描进入,记录一个来自pdf进入的标识
    setItem('fromPdf', true)
     // 获取当前小程序的页面栈
     let pages = getCurrentPages();
     // 数组中索引最大的页面--当前页面
     let currentPage = pages[pages.length-1];
     //currentPage.options.q 就是二维码的url
     if(currentPage.options?.q){
    
    
        const res = this.$tool.getUrlParam(currentPage.options.q)
        //url参数 p是pdfid
        const params = Number(res.p)
        // 获取pdf参数
        this.$http.getPdfParams(params).then(res=>{
    
    
            if(res.data.code=== 0){
    
    
              const paramsData = res.data.data
              this.form = paramsData
              setTimeout(() => {
    
    
                currentPage.options.q = ''
              }, 500);
			
              if(!uni.getStorageSync('token')) return
              // 初始化pfd的数据
              this.init (paramsData)
            }
          })
        return
     }
  },

Guess you like

Origin blog.csdn.net/qq_41620887/article/details/132037890