This period of time in the development of small programs and wechat public number, twists and turns finally slightly stable some free to write a running account.

Mpvue – based small program login process

On the first flow diagram, flow chart of the original address: https://www.processon.com/view/link/5b18ee97e4b03f9d2514771c

<button open-type="getUserInfo"></button>
<button open-type="getUserInfo"></button>

Encapsulate the checkLogin component (pseudocode)

<template>
  <div :style="{position: 'relative', width: wrapWidth, height: wrapHeight}">
    <button 
            style="border:none; position: absolute; top: 0; bottom: 0; right: 0; left: 0; z-index: 10; padding: 0;"
            :style="{top: btnTop, left: btnLeft, width: btnWidth, height: btnHeight}"
            @getuserinfo="bindgetuserinfo"
            open-type="getUserInfo"
            plain='true'></button>
    <slot></slot>
  </div>
</template>

<script>
  import {mapActions} from 'vuex'
  import {STORE_PATH_GLOBAL, USERINFO_BE_AUTHORIZED, USERINFO_REFUSED_AUTHORIZED} from 'CONST'
  exportDefault {props: [/ * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - compatible slot bug begin -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * /'money', / * -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - compatible slot bug end -- -- -- -- -- -- -- -- -- -- -- -- -- -- -- - * / / / authorization and after the success of the login is required to perform the logic Function'afterPassAuthorize'.'wrapWidth'.'wrapHeight'.'btnTop'.'btnLeft'.'btnWidth'.'btnHeight'], methods: { ... mapActions(STORE_PATH_GLOBAL, ['afterWxGetUserInfo']),
      /**
       * open-type="getUserInfo"*/ async bindGetUserInfo (data) {const userInfo = data.mp.detail.userInfo // userInfo const if user is authorized IsAuthorizeUserInfo = userInfo? USERINFO_BE_AUTHORIZED: USERINFO_REFUSED_AUTHORIZED // Login after the user is authorizedif(isAuthorizeUserInfo) { await this.afterWxGetUserInfo(userInfo) this.handleAfterPassAuthorize() } }, /** * Handles the logic that needs to be executed after both authorization and login are successful */handleAfterPassAuthorize () {
        this.afterPassAuthorize && this.afterPassAuthorize()
      }
    }
  }
</script>

Copy the code

Usage:

<template>
    <checkLogin :money="money" :afterPassAuthorize="pay"> <div> Click pay {{money}} meta </div> </checkLogin> </template> <script>export default {
        data () {
            return {
                money: 10
            }
        },
        methods: {
            pay () {
                alert('Pay after login')
            }
        }
    }
</script>
Copy the code

The checkLogin component props has a money property. The checkLogin component props has a money property. Because the latest version of MPvue (MPvue: 1.0.12; Mpvue – loader: 1.0.14; Mpvue-template-compiler: 1.0.12;) Slot is scoped to the component, so you need to pass the money property into the checkLogin component to render money in slot. Although this is very redundant, there seems to be no other solution until the Bug is solved (let me know if there is any trouble).

Local debugging of wechat public account

“Based on the operation specifications of wechat mini program platform, except for the android internal purchase function of mini game, mini program does not support virtual payment for the time being. Please check and rectify the contents or services containing virtual payment in the current mini program. “If the rectification is not completed by May 8, the platform will block calls to the iOS payment interface.” Helpless, had to develop a wechat public account for payment.

Public number development can be reused from the MPVue side, so the page and logic basically need not move, annoying is the public number SDK debugging. Because to debug the SDK, it is necessary to “log in to the wechat public platform first, enter the ‘function setting’ of the ‘public account setting’ and fill in the ‘JS interface security domain name ‘. Im /yourpath/localhost:8080/yourpath/localhost:8080/yourpath/host:8080/yourpath So our requirements are:

Developed locally on PC, no deployment is required and can be debugged immediately in developer tools

Step 1: Modify the hosts file in C:\Windows\System32\drivers\etc

This way, when we visit “juejin. Im” in the address bar, we will instead visit 127.0.0.1 (localhost).

Step 2: With nginx, make access through the domain name “juejin. Im” (the default domain name access is port 80) forward to the local development time web server 127.0.0.1:8080. Nginx configuration:

HTTP {upstream juejin.im {server 127.0.0.1:8080; } server { listen 80; server_name juejin.im ; location / { root html; index index.html index.htm; proxy_pass https://juejin.cn; }}}Copy the code

So far, when we visit juejin. Im /yourpath in wechat developer tools, we are going to visit your local localhost:8080/yourpath, and we can have fun doing local debugging.

The phone can debug code developed locally on the PC

Of course, PC debugging is not enough, if the real machine also need to debug, just need:

The Help/Local IP Address of Charles can be used to check the IP Address of the Local host, and then check the port number of the proxy. The default is 8888

Use flexible and VUX together

Flexible is a mobile terminal adaptation. Vux is a VUE UI library based on wechat UI, but Flexible will rely on PX2REM-Loader to convert PX to REM, but wechat UI also uses PX. In this way, when Px2REm-Loader converts PX to REM, the wechat UI that VUX relies on will also be converted into REM, which we do not want. So we need to be in the build/webpack. Base. Conf., js configuration:

module.exports = vuxLoader.merge(webpackConfig, {
  options: {},
  plugins: [
    {
      name: 'vux-ui'
    },
    {
      name: 'after-less-parser',
      fn: function (source) {// Note the vUX version, I'm using 2.9.1if (this.resourcePath.replace(/\\/g, '/').indexOf('/ _vux @ 2.9.1 @ vux/SRC/components') > 1) {source = source.replace(/px/g, 'PX'} // Most of the custom global styles do not need to be convertedif (this.resourcePath.replace(/\\/g, '/').indexOf('App.vue') > 1) {source = source.replace(/px/g, 'PX').replace(/-1PX/g, '-1px')}return source
      }
    },
    {
      name: 'style-parser',
      fn: function (source) {
        if (this.resourcePath.replace(/\\/g, '/').indexOf('/ _vux @ 2.9.1 @ vux/SRC/components') > 1) {source = source.replace(/px/g, 'PX'} // Avoid converting the 1px.less file pathif (source.indexOf('1PX.less') > 1) {source = source.replace(/1PX.less/g, '1px.less')}return source}}}])Copy the code

So when you write a style, write px directly and you will only change your style to REM, not vUX.

The above is I in this period of time to develop small programs and the public encountered attention point, if you have a little help, very happy ~