Shulou(Shulou.com)06/02 Report--

This article mainly introduces "Android WeChat Mini Programs how to ensure that each page has been logged in", in the daily operation, I believe that many people in Android WeChat Mini Programs how to ensure that each page has landed on the question of doubt, editor to consult all kinds of information, sort out a simple and easy-to-use method of operation, hope to answer the "Android WeChat Mini Programs how to ensure that each page has been logged in" doubt is helpful! Next, please follow the editor to study!

Current situation

In a WeChat Mini Programs, there are home pages, personal pages, list pages, details pages, and so on, most of which can be shared. When a shared page is opened by another user, how can the page ensure that the user has logged in?

There are many solutions on the Internet to add an intercept to the request encapsulation. If there is no token, call the login request to obtain the token before continuing.

There is nothing wrong with this solution, just note that when multiple requests are triggered on a page at the same time, when all requests are intercepted, they are put into an array, and after the token is successfully obtained, the array can be traversed one by one.

But this requirement is a little more complicated, such as Mini Program, a chain convenience store. Most of the pages need to have a store (because you need to obtain the inventory and price of products in the current store based on the store). This store is obtained by calling the backend API according to the current location, so it is too troublesome to encapsulate it in the request at this time.

Solution

First of all, we notice that login, getting location and our page request are asynchronous, we need to make sure that the page request is after login and get location, but if we write each page once, the maintainability is too poor. So we can pull out a way to do it.

So the code goes like this:

Const app = getApp () Page ({data: {logs: []}, onLoad () {app.commonLogin (() = > {/ / processing page requests})}))

Doing this seems to solve our problem, but think again, if you want to do more things, such as onShareAppMessage unified processing for each page, but I do not want to write it again on each page, in addition, I want to implement a watch for each page, how to do it?

Further solution

We can see WeChat Mini Programs, each page is a Page (), then we can add a shell to the Page, we can have a MyPage to replace the Page, needless to say, code:

Tool.js related code

/ * handle the merge parameter * / handlePageParamMerge (arg) {let numargs = arg.length; / / get the value of the passed parameter. Let data = {} let page = {} for (let ix in arg) {let item = arg [ix] if (item.data & & typeof (item.data) = = 'object') {data = Object.assign (data, item.data)} if (item.methods & & typeof (item.methods) =' object') {page = Object.assign (page) Item.methods)} else {page = Object.assign (page, item)}} page.data = data return page} / * merge page method and data, compatible with {data: {}, methods: {}} or {data: {}, a: {} B: {}} * / mergePage () {return this.handlePageParamMerge (arguments)} / * * handle component parameter merge * / handleCompParamMerge (arg) {let numargs = arg.length / / gets the value of the passed parameter. Let data = {} let options = {} let properties = {} let methods = {} let comp = {} for (let ix in arg) {let item = arg [ix] / / initial data of the merged component if (item.data & & typeof (item.data) = = 'object') {data = Object.assign (data) Item.data)} / / merge component attribute list if (item.properties & & typeof (item.properties) = = 'object') {properties = Object.assign (properties, item.properties)} / / merge component method list if (item.methods & & typeof (item.methods) = =' object') {methods = Object.assign (methods) Item.methods)} if (item.options & & typeof (item.options) = = 'object') {options = Object.assign (options, item.options)} comp = Object.assign (comp, item)} comp.data = data comp.options = options comp.properties = properties comp.methods = methods return comp} / * component mix {properties: {}, options: {}, data: {} Methods: {}} * / mergeComponent () {return this.handleCompParamMerge (arguments)} / * Composite pages with watch * / newPage () {let options = this.handlePageParamMerge (arguments) let that = this let app = getApp () / / add global click login to judge if (! options.publicCheckLogin) {options.publicCheckLogin = function (e) {let pages = getCurrentPages () let page = pages [pages.length-1] let dataset = e.currentTarget.dataset let callback = null / / get callback method if (dataset.callback & & typeof (page [dataset.callback]) = = "function") {callback = page [dataset.callback]} / / console.log ('callback > >' Callback App.isRegister () / / determine whether to log in to if (callback & & app.isRegister ()) {callback (e)} else {wx.navigateTo ({url:'/ pages/login/login'})}} const {onLoad} = options options.onLoad = function (arg) { Options.watch & & that.setWatcher (this) onLoad & & onLoad.call (this Arg)} const {onShow} = options options.onShow = function (arg) {if (options.data.noAutoLogin | | app.isRegister ()) {onShow & & onShow.call (this) Arg) / / Page embedding point app.ga ({})} else {wx.navigateTo ({url:'/ pages/login/login'})}} return Page (options)} / * synthesize components with watch, etc. * / newComponent () {let options = this.handleCompParamMerge (arguments) let that = this const {ready} = options options.ready = function (arg) {options.watch & & that.setWatcher (this) ready & & ready.call (this Arg)} return Component (options)} / * set listeners * / setWatcher (page) {let data = page.data Let watch = page.watch; Object.keys (watch) .forEach (v = > {let key = v.split ('.'); / / change the attributes in watch to'.' Split into an array let nowData = data; / / assign data to nowData for (let I = 0; I

< key.length - 1; i++) { // 遍历key数组的元素，除了最后一个！ nowData = nowData[key[i]]; // 将nowData指向它的key属性对象 } let lastKey = key[key.length - 1]; // 假设key==='my.name',此时nowData===data['my']===data.my,lastKey==='name' let watchFun = watch[v].handler || watch[v]; // 兼容带handler和不带handler的两种写法 let deep = watch[v].deep; // 若未设置deep,则为undefine this.observe(nowData, lastKey, watchFun, deep, page); // 监听nowData对象的lastKey }) } /** * 监听属性 并执行监听函数 */ observe(obj, key, watchFun, deep, page) { var val = obj[key]; // 判断deep是true 且 val不能为空 且 typeof val==='object'（数组内数值变化也需要深度监听） if (deep && val != null && typeof val === 'object') { Object.keys(val).forEach(childKey =>

{/ / traverse every key this.observe (val, childKey, watchFun, deep, page) under the val object; / / Recursive call listener function}} var that = this Object.defineProperty (obj, key, {configurable: true, enumerable: true, set: function (value) {if (val = = value) {return} / / call with page object to change the this point within the function so that this.data can access the attribute value watchFun.call (page, value, val) in data; / / value is the new value, val is the old value val = value If (deep) {/ / if deep snooping, re-listen on the object to listen for its properties. That.observe (obj, key, watchFun, deep, page);}, get: function () {return val;})}

Page code:

App.tool.newPage ({data: {/ / noAutoLogin: false}, onShow: function () {/ / write the page request logic}} here, the study on "how does Android WeChat Mini Programs ensure that every page has been logged in" is over, hoping to solve everyone's doubts. The collocation of theory and practice can better help you learn, go and try it! If you want to continue to learn more related knowledge, please continue to follow the website, the editor will continue to work hard to bring you more practical articles!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.