This project mainly adopts H5 developed by VUEJS

Process according to the official documentation to go first (odynww.yuque.com/docs/share/ again… Here are some possible problems and solutions.

Problem 1: The app. vue page uses ticekt to obtain the login information

1. Before development, I will apply for an access code for the application and intercept the login callback address ticket on the home page of app. vue

getTicket() {
      let url = window.location.href;
      if (url.indexOf("ticket") != -1) {
        const params = url.split("?") [1].split("&") [1].split("#");
        for (let index = 0; index < params.length; index++) {
          if (params[index].indexOf("ticket=") != -1) {
            this.ticket = params[index].split("=") [1];
            break; }}}if (this.ticket && this.ticket ! ="") {
        if (localStorage.getItem('ticket') != this.ticket) {
            // Local redirect is embedded in my application. When the third party returns to my application after the redirect, ticket will be used to log in again. Therefore, user information can be obtained only when ticket and local storage are the same or different
             this.getInfo() // This place is to get ticket to the back end, call the back end to get user information interface}}else {
        this.loginFail()
      }
    },
Copy the code
loginFail() {
      const sUserAgent = window.navigator.userAgent.toLowerCase();
      const bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // Let's get started
      const bIsAlipayMini =
        sUserAgent.indexOf("miniprogram") > -1 &&
        sUserAgent.indexOf("alipay") > -1; // This is a small program
      if (bIsDtDreamApp) {
        window.location.replace(
          "Https://puser.zjzwfw.gov.cn/sso/mobile.do?action=oauth&scope=1&servicecode= access codes"
        ); // Note that replace is used here
      } else if (bIsAlipayMini) {
        window.location.replace(
          "Https://puser.zjzwfw.gov.cn/sso/alipay.do?action=ssoLogin&servicecode= access codes"); }},Copy the code

2. Secondary rollback

(The code below is in the first application home.vue, which calls the back method in created.) Note that in the process of testing, alipay mini program does not seem to have a second backoff problem)

  back() {
      const sUserAgent = window.navigator.userAgent.toLowerCase();
      const bIsDtDreamApp = sUserAgent.indexOf("dtdreamweb") > -1; // Let's get started
      if (bIsDtDreamApp) {
        let that = this;
        window.addEventListener(
          "pageshow".function (event) {
            if (
              event.persisted ||
              (window.performance && window.performance.navigation.type == 2)
            ) {
              ZWJSBridge.onReady(() = > {
                ZWJSBridge.close()
                  .then((result) = > {
                    console.log("router", result);
                  })
                  .catch((error) = > {
                    console.log(error, "----router error");
                  });
              });
            }
            that.isLoad();
          },
          false); }},Copy the code

3. Embedding problem

Follow the official documentation in index.html.

4. Skip to third-party links in the application

OpenLink ({url: ‘www.baidu.com’}) : zwjsbridge-openLink ({url: ‘www.baidu.com’}) : zwjsbridge-openLink ({url: ‘www.baidu.com’}) Remember, if you use other ways, there will be a direct exit from zhejiang office when you return.

5.ZWJSBridge use problems

export const excuteBridge = () = > {
    ZWJSBridge.onReady(() = > { 
        console.log('After initialization, execute bridge method'); }} excuteBridge() is called every time you want to use ZWJSBridge, for example: getStyle () {excuteBridge(); ZWJSBridge.getUiStyle().then((res) = > {
        console.log(res, "getUiStyle");
        if (res.uiStyle == "elder") {
          // Older version
          this.$store.commit("SET_ISOLD".1);
        } else {
          // Regular version
          this.$store.commit("SET_ISOLD".0); }}Copy the code

6. Modification of aging version

My approach is to get the version of Zhejiang office when entering the home page, as above getStyle() method, put it in the store, of course, the store here is also directly used localStorage storage. For each page, just follow the template below for nesting

<template>
  <div :class="isOld == 1 ? 'old-home' : 'home'">
      <div class="banner"></div>
  </div>
</template>
<style lang="scss" scoped>
.home {
    .banner{}
}
.old-home {
    .banner {} 
}
<style>
Copy the code

IsOld = isOld = isOld = isOld = isOld = isOld = isOld = isOld = isOld = isOld = isOld And this way, the basic child node style name is the same, you can change the font size and image width and so on, very convenient.

7. Regarding the use of MGOP

  1. The prerequisite is that both input and output parameters must be in JSONObject format
  2. The interface of the own service needs to be registered with RPC in the application development platform
  3. Mgop can be encapsulated, similar to AxiOS

Here is the code block I wrapped, you can follow their own way to wrap, here is just a sample reference:

    export function request(api,params = {}) {
    // API is the API name of the RPC registered in the developer platform, one for each interface
      store.dispatch("setLoading".true);
      return new Promise((resolve, rej) = > {
        mgop({
          api,
          dataType: 'JSON'.data: params, // 
          timeout: 30000.header: {},
          type: "POST".appKey: I'm going to replace it with my own appkey.host: "https://mapi.zjzwfw.gov.cn/".// fixed
          onSuccess: (data) = > {
            store.dispatch("setLoading".false);
            if (data.ret[0= = ="1000:: call successful") {
              if (data.data.errors) {
                store.dispatch("setMsg"."Request error");
              } else{ resolve(data.data.data); }}else {
              store.dispatch("setMsg"."Request error"); }},onFail: (error) = > {
            store.dispatch("setLoading".false);
            store.dispatch("setMsg", error || error.message); }}); }); } Use example 1:const data = await request('API replace itself', request parameters); Example 2: Request ('API replace itself', request parameters).then(res= > {})
Copy the code

8. About packaging and shelving

If you are using vue-CLI scaffolding to create a project, you can simply modify the package.json file to build as shown below.