Uniapp development of small programs, access to user information, request back to the background
{
40125,"errmsg": "invalid appsecret,
view more at http://t.cn/RAEkdV
}
WeChat official account platform
After logging in, find the development management
and get appid in the development management
and then you can get the user information and request the background
This error occurs because a page appears in your Vue router global navigation guard, jumps to a page and then redirects to another interface
router.beforeEach((to,from,next)=>{
if(to.matched.some(record => record.meta.requiresAuth)){
if(!store.state.user){
//Jump to the landing page
next({
name:'login',
query:{//Pass the query string parameter via url
redirect: to.fullPath//Tell the landing page the page that needs to be returned if the login is successful
}
})
}else{
next()
}
}else{
next()
}
next()
})
If such code appears in Vue router, this error will occur. The solution is not to use multi-layer if and else
Layui’s official definition of carousel height is placed in
carousel.render({height:''...})In the method Pixels and percentages are supported. But the author has a demand, the carousel chart needs the background to return to the front according to the data permission control
And you need to set the height dynamically, not the fixed number of pixels and the proportion, and the height needs to be adjusted according to the current height
Adjust the pixels of the computer, such as how high is 1024 pixels, how high is normal pixels.
No more nonsense, just go to JS code:
1. Install Vue awesomeswiper in Vue
"vue-awesome-swiper": "^3.1.3",2. Main.js
import VueAwesomeSwiper from 'vue-awesome-swiper';
Vue.use(VueAwesomeSwiper)3. The following code block is introduced into the. Vue file that needs to slide the page
<template>
<div>
<swiper id="swiperBox" :options="swiperOption" ref="mySwiper">
<swiper-slide class="swiper-slide" v-for="(item, index) in list":key="index">
<div class="page">
<h3>{{item}}</h3>
</div>
</swiper-slide>
</swiper>
</div>
</template>
<script>
import { swiper, swiperSlide } from "vue-awesome-swiper";
export default {
data(){
return{
list:[1,2,3,4],
swiperOption: {
notNextTick: true, //if notNextTick is set to true, the component will not instantiate the swiper via NextTick, which means you can get the swiper object in the first place, if you need to just load the swiper object to do something, then this property must be true
direction: "vertical", //move in vertical direction
grabCursor: true, //the pointer will turn into palm shape when the mouse covers the swiper, the pointer will turn into grab hand shape when dragging
setWrapperSize: true, //Swiper use flexbox layout (display: flex), turn on this setting will add a width or height equal to the sum of the slides on the Wrapper, may need to use in browsers that do not have good support for flexbox layout.
autoHeight: true, //autoHeight. When set to true, the wrapper and container will change with the height of the current slide
slidesPerView: 1, //Set the number of slides the slider container can display at the same time (carousel mode). Can be set to a number (can be decimal, decimal cannot be looped), or 'auto' will automatically set the number according to the width of the slides. loop mode if set to 'auto' also need to set another parameter loopedSlides.
mousewheel: true, //Enable mouse wheel to control Swiper switching. You can set the mouse option, default value false
mousewheelControl: true, //same as above
height: window.innerHeight, // height setting, take up the full height of the device
resistanceRatio: 0, // resistance rate. The ratio of the size of the edge resistance. The smaller the value the greater the resistance the more difficult it is to drag the slide away from the edge, 0 when it is completely impossible to drag away. The business needs
observeParents: true, //Apply observe to the Swiper's parent element. When Swiper's parent element changes, for example window.resize, Swiper updates
},
}
},
components:{
swiper,
swiperSlide
},
computed: {
swiper() {
return this.$refs.mySwiper.swiper;
}
},
}
</script>Recently, there is a problem in the project: when the SRC attribute of img tag is used as a relative path in HTML, and then the project is packaged and deployed online with webpack, the image path will report an error. Because it was built by ourselves, so I stepped on a lot of pits. Baidu has common problems. The problem of wrong image path was solved after a long time.
1. Find config – & gt; In index.js, modify as follows
2. Find build – & gt; Utils.js, add a sentence in it: ‘… /… /’,
3. Img tag introduces the image
<img src="static/images/list_icon.png" alt="">
Cause of error:
There is a problem with the version correspondence of Monaco editor webpack plugin and Monaco editor
Investigation ideas:
View the dependencies corresponding to the local package
npm list --depth 0
“25353;” 29031;”35013;” 308300;”monaco-ed itorhttps://www.npmjs.com/package/monaco-editor-webpack-plugin
Requirement: when responding to an error, the rendering will display the interface with error information
preparation: create error information interfaces 400. Vue and 500. Vue in content
note: pay attention to the level of routing where the error interface needs to be placed (I’m under children)
1、 Create route (routes/index. JS)
export default {
mode: 'history',
routes: [
// Dynamic path parameters Start with a colon
{
name:'index',
path: '/',
component: () => import('@/components/QBLayout/index.vue'),
children: [
{
name:'index',
path: '/',
component: () => import('@/components/Index/index.vue'),
},
{
name: 'error_403',
path: '403',
component:()=>import('@/components/errorStatus/403.vue')
},
{
name: 'error_500',
path: '500',
component:()=>import('@/components/errorStatus/500.vue')
},
{
name: 'error_404',//Note that this 404 route should be placed at the end
path: '*',
component:()=>import('@/components/errorStatus/404.vue')
}
]
}
]
}
2、 Response interception (util/HTTP. JS)
import Axios from 'axios'
//1.Wrapping method: for exception response codes are handled separately
const codeErrorHandle = (resData)=>{
switch (resData.code) {
case 404:
router.push({
name:'error_404'
})
break;
case 500:
router.push({
name:'error_500'
})
break;
default:
}
//2, axios interception
const instance = Axios.create({ timeout: 25000 });
//3, response interception: mainly for response processing as follows
instance.interceptors.response.use(
res => {
if (res.status && +res.status < 300 && res.data && +res.data.code === 1)
return Promise.resolve(res.data.data);
} else {//Call codeErrorHandle to handle exception response codes
codeErrorHandle(res.data);
return Promise.reject(res);
}
},
error => {//This is other response state judgement, not this topic, so omit it here for now}
);
Effect interface
http://localhost : 8080/test. (enter the interface not in the route, for example: test, and then press enter to display the 404 interface)
// Solve the error reported by repeatedly clicking the navigation route
const originalPush = VueRouter.prototype.push
VueRouter.prototype.push = function push (location) {
return originalPush.call(this, location).catch(err => err)
}
Vue.use(VueRouter)
Copy directly to router.js. When pasting, pay attention to the execution sequence. This section is placed in front of new vuerouter
When using websocket to push the JSON data to the front end, websocket needs to convert the JSON data into a string for transmission. In the front end, JavaScript is used to restore the text to a JSON object. Generally, the JSON. Paser () method is used to complete this work. However, in the actual transmission, there is a problem. The JSON. Parse() method always reports an error
Uncaught SyntaxError: Unexpected token ‘ in JSON at position 1
at JSON.parse (< anonymous>)
at WebSocket.ws.onmessage ((index):28)
After checking and comparing, it is found that in the process of transferring string by websocket, double quotation marks in string are replaced by single quotation marks, while JSON. Parse() method requires double quotation marks in string. After finding this reason, it is easy to solve it. Before parse conversion, single quotation marks in string are replaced by double quotation marks.
ws.onmessage = function (evt) {
var a = evt.data.replace(/'/g, '"');
var obj = JSON.parse(a);
.....
When you write the name to the component, you find this error. Take a closer look at the name of the introduced sub component
Solution: change name
Echars 5.0 Import Error: "export ‘default’ (imported as ‘echarts’) was not found in ‘echarts’
The introduction method is changed to:
import * as echarts from 'echarts';
The login page can be accessed normally, and the menu can be accessed normally. Once the page is refreshed, it will be blank or not easy to make
at the same time, the console will report an error: unexpected token & lt;
This is because refreshing the page needs to re request the JS file, but the path has changed when the request is made, and the content of index.html is requested back
Solution
in Vue config – & gt; In index.js bulid,
configure assetspublicpath as the absolute path of your static resources. How to refresh this path will not change
build: {
// Template for index.html
index: path.resolve(__dirname, '../nqia-ias/index.html'),
// Paths
assetsRoot: path.resolve(__dirname, '../nqia-ias'),
assetsSubDirectory: 'static',
assetsPublicPath: '/s/nqia-ias/',
......
}