The business scenario

Develop enterprise wechat embedded H5 based on VUe2.0 to achieve file download function. The file storage path of our company is Ali Cloud OSS, as well as other open resources.

Using the step

1. Introduce jS-SDK of enterprise wechat

Note:

  1. Import source must be"/ / res.wx.qq.com/open/js/jweixin-1.2.0.js"Otherwise wx.previewFile will have unknown problems;
  2. For the Vue2.0 project, you may have seen NPM install weixin-js-SDK introduced in some articles. Unofficial, not recommended;
  3. You may find that you couldn’t find in a / / res.wx.qq.com/open/js/jweixin-1.2.0.js previewFile function, window. No wx. Don’t worry, previewFile is implemented natively, so not being able to see it doesn’t affect the call.
/public/index.html

<! DOCTYPEhtml>
<html lang="en">
  <head>.</head>
  <body>
    <div id="app"></div>
    <script src="/ / res.wx.qq.com/open/js/jweixin-1.2.0.js"></script> 
  </body>
</html>
Copy the code

2. Configuration wx. Config

SPA (single page application) should call wx.config every time the URL changes. It is recommended to write it in router.js routing configuration file, which is triggered by the global post navigator.

/src/router/index.js

router.afterEach((to, from) = > {
  // Through the config interface injection permission validation configuration, I encapsulated in vuex
  $store.dispatch("handleWxConfig");
});
Copy the code
/src/store/index.js

handleWxConfig({ state }) {
      // Obtain the wechat signature from the interface, which needs to be provided by the backend students
      $apiCommon.getWxSign({
        url: location.href.slice(0, location.href.indexOf("#")) // Note: location.href if there is a '/' at the end, it must be preserved
      }).then(res= > {
            // Step 2: Verify the configuration through the config interface injection permission
            window.wx.config({
              beta: true.// This must be done otherwise the JsAPI in the form of wx.invoke calls will have problems
              debug: false.// If debug mode is enabled, the return value of all API calls will be displayed in the client alert
              appId: res.data.appId, // Mandatory, corpID of enterprise wechat. Company's unique logo 'WW20745C5e79cFA434'
              timestamp: new Date().getTime(), // Mandatory to generate the timestamp of the signature
              nonceStr: $utils.getRandomString(16), // Mandatory, generate a random string of signatures, using a custom method
              signature: res.data.sign, / / will fill, sign, see appendix - JS - SDK access https://work.weixin.qq.com/api/doc/90000/90136/90506 signature algorithm
              jsApiList: ["previewFile"] // Mandatory, a list of JS interfaces that need to be used. Any interface to be called needs to be passed in. See Appendix 2 for a list of all JS interfaces
            });
            // Step 3: Verify that the processing succeeds through the ready interface. There is no API that needs to be called immediately
            window.wx.ready(function() {});
            // Step 4: Verify the processing failure through the error interface
            window.wx.error(function(err) {}); })}Copy the code

3. Call wx. PreviewFile

Now you can happily use wx.previewFile in vue.

  1. The file name must have a file type suffix; otherwise, an error message is displayed.
  2. The call writing preview file interface for the official document sample is invalid after repeated tests. Write it as follows
<template>
	<div>
		<button @click="handleDownload"></button>
	</div>
</template>
<script>.handleDownload() {
  window.wx.invoke(
      "previewFile",
      {
         url: 'https://www.xxxxxxxxxxxx.pdf'.// The address of the file to preview (mandatory, relative path can be used)
         name: 'Test file.pdf'.// The name of the file to preview (if not, take the last part of the URL)
         size: xxx // The byte size of the file to preview (mandatory)}); }...</script>
Copy the code

Attachment: Official documents

Instructions – Enterprise wechat API