This is the 19th day of my participation in the August Wenwen Challenge.More challenges in August

Encapsulate the request interface

Create utils/utils. Js in the root directory at the same level as pages

// Encapsulate request method let baseUrl = 'https://abc.cn'; function requestFun(url,data={},method='GET') { if(data.token && data.token == '') { uni.showToast({ title: NavigateTo ({url: '/pages/login/login',}); }}) return false; } return new Promise((resolve, reject) => {uni. ShowLoading ({title:' loading ',mask: true}) uni. Request ({url: baseUrl + url, method: method, data: data, header: { 'content-type': 'application/json' }, success: (res) => { uni.hideLoading(); if(res.statusCode == 200) { resolve(res); }else { uni.showToast({ title: res.data.msg == null ? 'System busy, please try again later' : res.data. MSG, icon: 'none'}) reject(res); } }, fail: (res) => { uni.hideLoading(); Uni. ShowToast ({title: "system busy, please try again later ", icon: 'None'}) reject(res); Module. exports = {module.exports: requestFun: requestFun}Copy the code

The received parameters are address, parameter and request mode, and you can also add some other parameters you need. So far, I have used enough. Use the promise method to call the interface, put the interface back into the data state resolve/reject, and then make corresponding prompts. After dropping the interface, you can get the status code of the requested interface: 200,404 and so on. You can do some more jumps.

When encapsulating the request, I added loading, and added a mask, so it cannot be clicked, or the user will click multiple times.

Call method:

let _this = this;
this.$utils.requestFun('/hh/searchList',{
    token: getApp().globalData.token
},'GET').then(res=> {
    _this.dataList = res.data.data;
})
Copy the code

This.$utils is configured in main.js, as described in the previous chapter:

import utils from '@/utils/utils.js'; , Vue. Prototype. $utils = utils;Copy the code

Main.js refers to utils and adds this object to the prototype of vue. Later calls only need to be preceded by this. There are lots of public methods that can be added to utils.js, and that’s fine

2. Dynamically modify the navigation bar name

OnLoad (options) {if (options. The flag = = 1) {uni. SetNavigationBarTitle ({title: 'name'}}}Copy the code

This is uniapp’s own, if a page is reusable, but the title name is different, add some judgment to change the title name is ok.

Upload pictures

let _this = this; Wx. chooseImage({count: 1,// The number of pictures to upload success:(res) => {const tempFilePaths = res.tempfilepaths; Uni.uploadfile ({url: getApp().globaldata.serverURL +'/file/upload', // Only for example, non-real interface address filePath: tempFilePaths[0], name: 'file', formData: { token: getApp().globalData.token, file: tempFilePaths[0] }, success: (uploadFileRes) => { let imgData = JSON.parse(uploadFileRes.data); // Call the interface to the server...... }}); }})Copy the code

Here is one more sentence, if you develop H5 and wechat small program platform, app.vue page in the life cycle do not write any jump page method, otherwise you in H5 test upload success will automatically jump to the home page!! If the app. Vue page must have a way to jump to the home page, you can determine whether it is H5 platform, not H5 platform to jump again!

Picker drop-down list selection

I also have an ellipsis on the right side of the style drop-down box, but there is no response when I click the ellipsis before, so the following code has been added to the style to avoid:

<view class="selectBox flex"> <! I'm setting the style here because I have an ellipsis, <picker mode="selector" :range="selectList" @change="changeSelect" style="width: 100%; position: relative;" > <view class="inputBox">{{selectList[selectIdx]}}</view> <image src=".. /.. /static/images/moreIcon3.png" @click="changeSelect" class="moreIcon3"></image> </picker> </view> js: Data () {return {selectList:[' select '], selectIdx: 0}}, methods: {// Select the drop-down box changeSelect(e) {this.selectidx = e.target.value; } } css: .selectBox { width: 88%; height: 98rpx; line-height: 98rpx; margin: 80rpx 45rpx 45rpx 45rpx; background: #F6F6F6; border-radius: 49rpx; } .inputBox { margin-left: 46rpx; } .moreIcon3 { width: 66rpx; height: 16rpx; position: absolute; right: 20px; top: 43%; }Copy the code

5. Pull down to refresh the page

When configuring pages in pages. Json, add enablePullDownRefresh to enable the page to have pull-down refresh events

OnPullDownRefresh () {this.searchList(); SetTimeout (function () {uni.stoppulldownrefresh (); // Stop the pull-down refresh}, 1000); },Copy the code

Today, I wrote some common methods and development pages to avoid the pit, recently also encountered their own, write out a record