preface

Uni-app is a framework for developing all front-end applications using vue.js. Developers write a set of code that can be published to iOS, Android, Web (responsive), mini programs (wechat/Alipay/Baidu/Toutiao /QQ/ Kuaishou/Dingding/Taobao), Kuaiapp and many other platforms.

Uni-app is more cross-functional than other applets development frameworks.

Uni-app has officially released the UNI-UI library

 https://github.com/dcloudio/uni-ui

Uni-app officially released uni-UI library, there is also a plugin market, there are a lot of wheels, business should be able to quickly put together the wheels.

www.uviewui.com/

Overhand experience

The development environment

Uni-app is a development tool for uni HBuilderX.

However, I don’t like this boamway, I still use vscode, please refer to the official guide of uni-app for configuration

Uni-app Official Guide:

When uni-app meets vscode

CLI project

Global Installation vuE-CLI 3.x (skip this step if already installed)

npm install -g @vue/cli
Copy the code

Create a Uni-app project through the CLI

vue create -p dcloudio/uni-preset-vue my-project
Copy the code

Open the project in vscode and install the vue syntax hint plugin vetur

Syntax tips for installing components

Component syntax hints are the highlight of UNI-App that few other frameworks offer.

npm i @dcloudio/uni-helper-json
Copy the code

Run the project

npm run dev:%PLATFORM%
Copy the code

Publish the project

npm run build:%PLATFORM%
Copy the code

%PLATFORM% can be:

value platform
h5 H5
mp-alipay Alipay small program
mp-baidu Baidu applet
mp-weixin Wechat applets
mp-toutiao Headline applet
mp-qq Qq small programs

Vscode custom global snippets (UNI-app, VUE)

1. Vscode Settings — User code snippets, create a global code snippet file

2. Enter a name and paste the corresponding code.

{    
    "Print to console": {    
        // Here is a custom shortcut name
        "prefix": "vue-uniApp"."body": [            
            "<template>"."<view class='$2'>$5</view>"."</template>".""."<script>".""."export default {"."// import imported components need to be injected into objects before they can be used"."components: {},"."data() {"."// This is where the data is stored"."return {".""."};."},"."// The listener property is similar to the data concept"."computed: {},"."// Monitor data changes in data"."watch: {},"."// Lifecycle - creation complete (access to current this instance)"."onLoad(options) {".""."},"."// Lifecycle - page display (DOM elements cannot be accessed)"."onShow() {".""."},"."// Lifecycle - Mount complete (DOM element accessible)"."onReady() {".""."},"."// method set"."methods: {".""."},"."OnHide () {}, // Lifecycle - Listen page hide"."OnUnload () {}, // Lifecycle - Listening page unload"."}"."</script>"."<style lang='scss'>"."$4"."</style>"]."description": "Log output to console"}}Copy the code

3. Create a vUE page, enter the name of the snippet, and you’re done.