WeChat Mini Programs"s authorization to obtain user information does not allow pop-up window access, but must be obtained by button.
so, I want to set a common template (or module?) in the mpvue framework. ), it is easy to place the button that triggers the authorization selection, how should I set it?

main.js

import Vue from "vue"
import App from "./App"

Vue.config.productionTip = false

const app = new Vue(App)
app.$mount()

export default {
  config: {
    pages: ["^pages/me/main"],
    "window": {
      "backgroundTextStyle": "light",
      "navigationBarBackgroundColor": "-sharpEA5149",
      "navigationBarTitleText": "",
      "navigationBarTextStyle": "light"
    },
    "tabBar": {
      selectColor: "-sharpEA5149",
      list: [
        {
          pagePath: "pages/books/main",
          text: "",
          iconPath: "static/img/book.png",
          selectedIconPath: "static/img/book-active.png"
        },
        {
          pagePath: "pages/comments/main",
          text: "",
          iconPath: "static/img/todo.png",
          selectedIconPath: "static/img/todo-active.png"
        },
        {
          pagePath: "pages/me/main",
          text: "",
          iconPath: "static/img/me.png",
          selectedIconPath: "static/img/me-active.png"
        }
      ]
    }
  }
}

App.vue

<script>
import {get, showSuccess} from "./util"
import qcloud from "wafer2-client-sdk"
import config from "./config"

export default {

  async created () {
    const res = await get("/weapp/demo")
    console.log(123, res)
    console.log("")
  }
}
</script>

<style>
.btn{
  color:-sharpFFF;
  background:-sharpEA5A49;
  margin-bottom: 10px;
  padding:0 15px;
  border-radius: 2px;
  font-size:16px;
  line-height: 40px;
  height: 40px;
  width: 100%;
}

.btn:active{
  background:-sharpA05049;
}
</style>