Tag:uni-app

  • Uniapp implements tabbar page interception before jump

    Time:2022-2-20

    Requirements encountered: after entering the applet wxlogin and requesting another interface successfully, it will obtain a field value. According to this value, it can judge whether to jump to the second tabaar page and give corresponding prompt Using uni addInterceptor uni. Addinterceptor is generally a method for intercepting APIsspecifichttps://uniapp.dcloud.io/api/interceptor?id=addinterceptor Jump interception Create intercept js //When […]

  • Introduction to uni app

    Time:2022-2-9

    Introduction to uni app Official website:https://uniapp.dcloud.io/ 1. What is a uni app? Uni app is an application that uses Vue JS is a framework for developing cross platform front-end applications. Developers write a set of code that can be published to IOS, Android, H5, applets and other platforms. So where can we reflect that uni […]

  • Uniapp has a custom header, supports applet alignment, and has a high degree of security with the browser

    Time:2022-2-8

    <template> <view class=”Header-box” :class=”{xcx: statusBarHeight, common: !statusBarHeight}” :style=”{paddingBottom: `${statusBarHeight}px`}”> <view class=”header-fixed-box” :style=”{ background: noBg ? noBg : ”, height: `${statusBarHeight}px` }”> <view class=”header-main-box” :style=”{height: `${statusBarHeight}px`}”> <view v-if=”!noLeft” @click=”headerLeftClick” class=”header-left-box header-operation”> <image v-if=”whiteback” class=”header-left-back” mode=”widthFix” src=”../static/index/white.png” /> <image v-else class=”header-left-back” mode=”widthFix” src=”../static/index/black.png” /> </view> <view class=”header-title” :style=”{color:titlecolor?titlecolor:’ #fff’}”>{{ pageTitle }} </view> <view @click=”headerRightClick” :style=”{paddingRight:rightPadding?rightPadding:”,color:rightColor?rightColor:”}” class=”header-right-box header-operation”>{{ […]

  • The implementation of getting element width and height in uni app component

    Time:2021-1-22

    Problems encountered: create a selector directly in the component mounted to obtain the width and height of the element. Even if it is thrown into the timer to execute, there are still occasional cases where it cannot be obtained terms of settlement: //Writing method 1: getDescBox() { uni.createSelectorQuery().in(this).select(‘.top .desc’).boundingClientRect(result => { if (result) { console.log(‘==========’,result) […]

  • How to realize incremental update function in uni app

    Time:2020-11-29

    As we all know, many apps have the function of incremental update. At the beginning of this year, uni app launched the function of incremental update. Today we will learn a wave. Of course, in order to prevent developers from providing illegal content to users without market approval, many application markets, especially apple, are averse […]

  • Multi terminal third party map location method supported by uni app

    Time:2020-11-25

    brief introduction This method supports jump to the third party map and locate the specified coordinates. The app will jump to Baidu map (third-party software); if not, go to Gaode map (third-party software); if none, open Tencent map (uni’s own method: uni.openLocation )Other terminals open Tencent map (uni method: uni.openLocation ) demo Source code: https://github.com/yapeee/uni-components […]

  • Ten steps to use font icon in uni app

    Time:2020-7-20

    Introduction to uni app Uni app is a Vue.js Develop a front-end framework for cross platform applications. Developers write a set of code, which can be compiled to multiple platforms such as IOS, Android, H5, applet, etc. The uni app framework is launched by dcloud (Beijing) Network Technology Co., Ltd. its main products include web […]

  • Example code of using SCSS in uni app

    Time:2020-3-21

    Pit encountered I spent the whole afternoon solving the problem of using SCSS in uni app. First of all, I said my problem, I couldn’t use @ mixin when using SCSS, and then Baidu debugged in various ways: Code writing problem (infeasible completely according to the official website): Official Website demo Browser problems (not Firefox). […]

  • Solution of directory file upload (not only pictures and videos) in uni app system

    Time:2020-2-7

    background The company’s leaders put forward such product requirements: upload catalog files, not only pictures and videos, but also support Android and IOS mobile terminals. In addition, the company’s app architecture adopts uni app. Reflection The first idea is to see if the uni app framework can support it. As you can imagine, the uni […]

  • Waterfall layout of uni app project

    Time:2019-12-20

    GitHub address. You can use star if you like Plug in Preview Using tutorials 1. Plug in code copy After downloading, copy the waterfall.vue file under the components directory to your own project directory 2. Plug in global configuration Configure the following code in main.js of the project import waterfall from ‘./components/waterfall.vue’ Vue.component(‘waterfall’,waterfall) 3. Plug […]

  • Pure CSS meteor shower background

    Time:2019-12-9

    GitHub address. You can use star if you like Plug in Preview Using tutorials Code display Vue page usage <template> <view class=”space”> <view class=”planet”> <view class=”planet_shadow”></view> <view class=”crater1″></view> <view class=”crater2″></view> <view class=”crater3″></view> <view class=”crater4″></view> </view> <view class=”stars”> <view class=”star”></view> <view class=”star pink”></view> <view class=”star blue”></view> <view class=”star yellow”></view> </view> </view> </template> Style <style lang=”scss”> .space […]

  • Implementation of waterfall flow layout in uni app project

    Time:2019-12-7

    GitHub address. You can use star if you like Plug in Preview Using tutorials 1. Plug in code copy After downloading, copy the waterfall.vue file under the components directory to your own project directory 2. Plug in global configuration Configure the following code in main.js of the project import waterfall from ‘./components/waterfall.vue’ Vue.component(‘waterfall’,waterfall) 3. Plug […]